Design Md Extractor Skill

Building Design MD Skill

A Claude Skill for extracting a brand design system into a portable `DESIGN.md` file. Since v2.0.0 the extraction engine is **[dembrandt](https://github.com/dembrandt/dembrandt)** (MIT) — a real-browser design-token extractor — and this skill layers on everything raw extraction can't provide: voice & copy register, resolved font names, logo assets, Softr app-pattern scaffolds, and an app-level custom-code snippet.

What this skill does

Captures a target brand's design tokens (colors, typography, spacing, radii, shadows, components) plus voice and assets into a single `DESIGN.md` file in your project folder. The base of the file is dembrandt's own DESIGN.md output (Google's DESIGN.md draft format), kept verbatim; the skill's augmentation layers make it Softr-ready.

The skill supports four input paths:

Path	When to use
A. URL extraction (dembrandt)	You have a target website. dembrandt renders it in a real browser and reads computed styles — colors, typography, spacing, components — across a multi-page crawl.
B. awesome-design-md catalog	Your target brand is one of the ~71 already documented at https://github.com/VoltAgent/awesome-design-md. Fastest path.
C. Manual upload	You already have a DESIGN.md (from another tool, hand-written, or generated previously). The skill validates, accepts, and augments it.
D. Guided Q&A	You have a brand in your head but nothing written. The skill asks 8 questions and synthesizes a minimal DESIGN.md.

The skill always produces two files (plus `./assets/` on Path A):

• ./DESIGN.md — the brand artifact
• ./custom-code-header.html — a snippet to paste into Softr's Settings → Custom Code → Code inside header for app-wide brand inheritance

Install

Claude Code — one-line install with auto-updates (recommended)

npx building-design-md@latest init

This installs the skill into `~/.claude/skills/building-design-md/` and adds