Skip to content
UXClaim
Design Systems

Advanced DESIGN.md Toolkit

Claude Code skills to extract design specs from URLs and generate them from structured answers

View source More in Design Systems

What It Does

Advanced DESIGN.md is a toolkit of two Claude Code skills that streamline design specification creation. design-extractor analyzes existing websites using Playwright to capture design details, while design-creator uses structured quizzes to capture unspoken design requirements.

How It Works

Design Extraction: Input a public URL, and the skill captures DOM structure, CSS variables, typography, colors, and animations. It generates both VANILLA.md (raw extraction) and INTERPRETED.md (semantically annotated) specifications, plus metadata.

Design Creation: Answer a contextual quiz (quick/standard/deep options) about your design intent, mood, target audience, and differentiators. The skill generates a complete DESIGN.md specification with colors, typography, spacing, components, animations, and constraints.

Use Cases

  • Building a personal design library by analyzing competitor or reference sites
  • Documenting design intent before handoff to development
  • Creating consistent design specifications across projects
  • Capturing stakeholder input without lengthy design meetings
  • Preparing specifications for no-code builders or AI implementation tools

Who Benefits

Product and UX designers who want to systematize design documentation. Non-technical stakeholders can participate in design decisions through interactive quizzes. Developers receive standardized, machine-readable specifications.

Frequently asked questions

How do I install advanced-design-md?
Clone the repository, then create symlinks in ~/.claude/skills/. Requires Node.js 18+, Claude Code CLI, and python3. Run `npm install && npx playwright install chromium` in the design-extractor folder. See the README's Step 1-4 for detailed setup.
What does design-extractor do?
design-extractor uses Playwright to visit a public website URL, capture its DOM, CSS, and JavaScript behavior, then generates two markdown files: VANILLA.md (raw extraction) and INTERPRETED.md (semantically analyzed with design tokens and effects applied).
What does design-creator do?
design-creator presents an interactive quiz in your browser asking about design intent, mood, target audience, and specific requirements. After you answer, it generates a complete DESIGN.md specification with colors, typography, components, and constraints based on your responses.
Can I extract specs from password-protected sites?
No, extraction is recommended for public sites only. The README explicitly discourages extracting authenticated pages (admin dashboards, internal tools) due to security risks—Playwright may carry saved cookies or credentials.
How long does the quiz take?
Three options: quick (5 questions, ~5 minutes), standard (10 questions, ~10 minutes), or deep (20 questions, ~20 minutes). Quick leaves ~50% fields marked [to verify]; standard and deep aim for under 30% and 20% respectively.
Can I use the generated specs for implementation?
Yes. DESIGN.md can be used as a specification document for manual coding, fed into no-code builders (v0, Lovable), or used as context for AI coding tools like Cursor. The structured format supports multiple handoff workflows.
What permissions does advanced-design-md need?
The toolkit needs permissions to create directories, copy files, run Python's http.server locally, and install npm dependencies (Playwright). It does NOT request git push, file deletion, or outbound curl permissions. See Step 5 for recommended settings.
How is the output structured?
design-extractor outputs a folder with /raw/ (DOM/CSS/JS files), VANILLA.md, INTERPRETED.md, and meta.yaml. design-creator outputs quiz.html (for review/editing) and DESIGN.md. Both use identical section templates for easy cross-referencing.

Glossary

DESIGN.md
The primary output specification file containing design intent, color palette, typography rules, spacing/layout, component definitions, animations, and constraints. Designed to be both human-readable and machine-parseable for implementation tools.
VANILLA.md vs INTERPRETED.md
VANILLA.md is raw extraction from a website (CSS values, colors, keyframes exactly as found). INTERPRETED.md adds semantic meaning—Claude annotates the same data with design tokens, emotional tone, effect names, and component states for design language clarity.
Lexicon
A reference library of design patterns, color themes, typography scales, spacing systems, and animations. design-creator matches user quiz answers against the lexicon to suggest or auto-populate specification values, reducing [to verify] flags.
[To Verify] Fields
Sections in the generated DESIGN.md marked [to verify] indicate where the specification is incomplete or ambiguous. These typically appear when user quiz answers don't align with existing lexicon patterns and require manual stakeholder review.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.

zhouchang1988