Extract full product DNA from any live URL into a single STACK.md file.
npx stackmd https://example.com
stackmd crawls any URL and extracts the full product DNA: brand voice, UX patterns, content strategy, visual design, information architecture, component behavior, SEO structure, performance signals, and technology stack. 64 extraction passes. 20 intelligence engines. 30 output sections. 138 tests. Everything an AI agent needs to rebuild a product that works, feels, and thinks like the original.
This project is for educational and experimental purposes only. It reads publicly visible computed styles, content, and structure from rendered web pages. No ownership of any product identity is claimed. See Disclaimer.
STACK.md covers 30 sections. Every section gives an AI coding agent real context, not just tokens.
| # | Section | What it captures |
|---|---|---|
| 1 | Product Identity | Name, tagline, page type, detected frameworks, voice personality |
| 2 | Product DNA Score | 0-100 across visual, voice, UX, accessibility, SEO, performance |
| 3 | Brand Voice & Tone | Personality traits, reading level, pronoun strategy, CTA patterns, vocabulary |
| 4 | Content Strategy | Heading hierarchy, form labels, placeholders, microcopy, writing density |
| 5 | Visual Design System | Colors, typography, spacing grid, depth, dark mode |
| 6 | Component Styling | Buttons, inputs, cards, navigation with full CSS per variant |
| 7 | UX Patterns | Page type, conversion strategy, hero, forms, social proof, sticky elements |
| 8 | Information Architecture | Navigation links, page sections, footer, structure stats |
| 9 | Component Behavior | Tooltips, modals, drawers, form validation, focus management |
| 10 | Motion & Animation | Transition durations, easings, keyframe animations |
| 11 | Responsive Strategy | Breakpoints from @media rules |
| 12 | Accessibility Profile | WCAG contrast, heading order, landmarks, ARIA, focus, reduced motion |
| 13 | SEO & Performance | Title, meta, structured data, Open Graph, DOM nodes, lazy loading |
| 14 | Technology Stack | React/Next/Vue/Angular/Svelte, Tailwind/Bootstrap, analytics, hosting |
| 15 | Icons & Media | Icon system, image treatments, font loading, gradients |
| 16-20 | Deep Extraction | Typography, color context, layout, forms, navigation deep analysis |
| 21 | Cookie & Consent | Banner type, position, compliance, dark pattern detection |
| 22 | UI Component Patterns | Tabs, accordions, breadcrumbs, pagination, timelines, steppers |
| 23 | Data Display | Tables, card variants, sortable/filterable, responsive |
| 24 | Loading & State | Spinners, skeletons, shimmer, empty states, progress indicators |
| 25 | Search & Filtering | Search type, autocomplete, filter controls, sort UI |
| 26 | Social Proof & FAQ | Testimonials, ratings, FAQ schema, accordion types |
| 27 | Code Display | Syntax highlighting, copy buttons, themes, languages |
| 28 | Security & PWA | HTTPS, CSP, SRI, service worker, manifest, installability |
| 29 | Above the Fold | Headline, primary CTA, hero section, render-blocking resources |
| 30 | Intelligence Report | CRO audit, mobile UX, design system maturity, brand consistency, PLG, enterprise readiness, design trends |
- 64 extraction passes (was 36)
- 20 intelligence engines (was 11) — CRO audit, mobile UX, design system maturity, brand consistency, info hierarchy, PLG detection, enterprise readiness, design trends
- 30 STACK.md sections (was 15)
- 138 tests (was 117)
--htmlflag — visual HTML report with dark theme--compare <url>flag — side-by-side comparison of two URLs- 6,342 lines of code (was 4,386)
- Puppeteer loads the page in a headless browser
- Every visible DOM element is scanned for computed styles
- All text content is analyzed for voice, tone, and reading level
- Navigation, sections, and page structure are mapped
- UX patterns (hero, CTAs, forms, social proof) are detected by heuristic
- Component behavior (modals, tooltips, validation) is inventoried
- Technology stack is identified from DOM signatures and CSS variable patterns
- SEO structure and performance signals are collected
- Everything is scored across 10 dimensions and output as a structured STACK.md
npm install -g stackmdstackmd https://example.com
stackmd https://example.com -o ./docs/product-dna.md
stackmd https://example.com --dark --json
stackmd https://example.com --wait 5000| Flag | Description | Default |
|---|---|---|
-o, --output <path> |
Output file path | ./STACK.md |
--json |
Output raw data as JSON | false |
--dark |
Extract dark mode tokens | false |
--wait <ms> |
Wait time for dynamic content | 3000 |
import { stack } from "stackmd";
const result = await stack("https://example.com", {
wait: 3000,
extractDark: true,
onProgress: (msg) => console.log(msg),
});
result.markdown // STACK.md content
result.data.brandVoice // personality, reading level, CTA patterns
result.data.uxAnalysis // page type, conversion strategy, patterns
result.data.designSystem // colors, fonts, spacing, components
result.data.techStack // frameworks, CSS framework, analytics
result.data.dnaScore // 0-100 across 10 dimensionsThis tool is provided strictly for educational and experimental purposes. It reads publicly visible computed CSS values, text content, and DOM structure from rendered web pages, equivalent to what any browser's developer tools expose.
- No proprietary code, assets, or non-public information is accessed
- Extracted data represents publicly visible content and styling
- No ownership of any product identity, brand, or design system is claimed
- Users are responsible for ensuring compliance with applicable terms of service
- This tool does not bypass any access controls, authentication, or rate limiting
- Output should not be used to create confusingly similar products or infringe on trademarks
The author provides this tool as-is with no warranty. Use responsibly.
MIT
