design-distiller

Design Distiller

Give any website URL, extract the complete design system into a Design MD + composable design tokens.

Triggers

• /design-distiller
• "scrape this website's design" / "extract design system"
• "design scrape" / "make a Design MD"
• "analyze this site's design"

Core Concepts

Design MD

A pure Markdown design system document that AI agents can read directly to generate matching UI. Format follows awesome-design-md.

Reference Pool

references/{slug}/ — One folder per website, containing the full Design MD + screenshot assets. This is the raw material library.

Digest Pool

digests/ — Cross-site design tokens decomposed by dimension (typography, colors, spacing, components, etc.). Each entry is tagged with its source website. Used for mix-and-match composition when building new sites.

Output Structure

design-distiller/
├── references/                # Reference Pool
│   └── {slug}/
│       ├── DESIGN.md          # Full Design MD (9 modules)
│       ├── meta.json          # Metadata
│       └── screenshots/       # Key page screenshots
│           ├── homepage.png
│           ├── homepage-mobile.png
│           └── components.png
└── digests/                   # Digest Pool
    ├── typography.md          # All font systems
    ├── colors.md              # All color systems
    ├── spacing.md             # All spacing systems
    ├── components.md          # All component patterns
    ├── depth.md               # All shadow & elevation systems
    ├── motion.md              # All motion specs
    ├── layouts.md             # All layout systems
    └── philosophy.md          # All design philosophies

Pre-loaded References

The Reference Pool ships with 55 pre-loaded brands imported from awesome-design-md and the nothing-design skill. These text-only imports differ from freshly scraped references:

• No screenshots/ — visual data was not captured during batch import. Screenshots are generated only when running the full 4-phase pipeline on a new URL.
• No meta.json — metadata is generated only by the pipeline's Generate phase. Pre-loaded references have their metadata embedded in the Digest Pool cross-references instead.
• Nothing uses an extended format — references/nothing/ contains multi-file documentation (DESIGN.md + tokens.md + components.md + platform-mapping.md) from a standalone design system skill. It does not follow the standard 9-module format because its craft rules and composition philosophy cannot be reduced to that template.