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. 36 extraction passes. 200+ data points. 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 15 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 | Agent Build Guide | Quick reference + full structured prompt with identity, visual, voice, and UX |
- 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
