design-memory

Extract and interpret design systems from websites using deterministic analysis and LLM interpretation.

| Real | Design Memory Output | |------|---------------------| | | |

Installation

npm install -g design-memory

# Install Playwright browsers (required for crawling)
npx playwright install chromium

Usage

# Learn a design system from a URL (requires OPENAI_API_KEY or --api-key)
design-memory learn <url>

# Learn from a screenshot or image
design-memory learn ./screenshot.png --from-image

# Multi-page: merge design from several URLs
design-memory learn <url> --pages <url2> <url3>

# Install design tokens into the current project
design-memory install

# Compare two design systems
design-memory diff <url-a> <url-b>

# Stubs: add, mix
design-memory add <package>
design-memory mix

See docs/CLI.md for all options.

Documentation

| Doc | Description | |-----|--------------| | docs/README.md | Index of all documentation | | docs/HOW_IT_WORKS.md | How the pipeline and browser work | | docs/CLI.md | Full CLI reference | | docs/OUTPUT.md | What's in .design-memory/ | | docs/ARCHITECTURE.md | Pipeline and modules | | TESTING_LOCALLY.md | How to run tests | | IMPLEMENTATION.md | Implementation summary |

Architecture

• Acquire: Playwright-based crawling and capture
• Analyze: Deterministic extraction of colors, typography, spacing, etc.
• Interpret: LLM-based semantic labeling and doctrine extraction
• Project: Generate .design-memory/ folder with AI-optimized markdown files

Development

npm install
npm run build
npm test
npm run check-loc  # Verify all files < 60 LOC