Extract Design Systems from any URL.Generate DESIGN.md in seconds.
Works with Claude Code, Cursor, v0, Figma Make, and any AI-native workflow.
npm i -g dembrandt~ terminal10s
$dembrandt dembrandt.com
✓Extracted design system from dembrandt.com
✓ Colors · 7 brand tokens
#ea580c
#ffffff
#0a1a3d
#8a8f98
#5e6772
#242424
#38bdf8
Roles, contrast ratios & hover states mapped automatically
✓ Typography · 40 styles across 6 families
ui-sans-serif · JetBrains Mono · Nohemi · Inter · Montserrat
64px display → 12px caption · weights 500–700 · context-mapped
✓ Spacing · 8px grid confirmed · 16 tokens
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128px
✓ Components · buttons, inputs, links — all states
3 button variants · default / hover / focus / disabled
Border radius: 4px · 8px · 12px · pill
✓ Motion · consistent system detected
150ms · 200ms · 300ms · cubic-bezier(0.4, 0, 0.2, 1)
✓ W3C Design Tokens output
"color.primary": { "$value": "#ea580c", "$type": "color" }
"font.size.display": { "$value": "64px", "$type": "dimension" }
"spacing.base": { "$value": "8px", "$type": "dimension" }
Saved to ./design-system.json
--dtcgW3C tokens
--brand-guideBrand guide PDF
--design-mdDESIGN.md
--wcagWCAG contrast
--dark-modeDark mode palette
--mobileMobile viewport
--crawlMulti-page extraction
DESIGN.mdA structured brief AI builders read directly, so Claude Code or Cursor ships on-brand UI without a designer in the loop.
W3C DTCG tokensThe standard token format. Drops into any design system or pipeline with no lock-in.
JSONRaw tokens for scripts, diffs, and automation. Wire them into anything you build.
Brand Guide PDFA shareable brand document in seconds. Send it to clients or stakeholders, no manual deck.
dembrandt-skills
Teach your agent to design
Install once, and your agent knows how to design.
32 UX skills for AI agents. The knowledge that normally costs senior UX-consultant days — packaged for your agent. Brand-accurate, WCAG-compliant, right hierarchy, right components.
dembrandt— orchestrator
Runs the full 6-stage UX pipeline — brand foundation → tokens → layout → components → polish → a11y gate. One skill for end-to-end design review.
extract-design— pipeline
Pulls real design tokens from any live URL directly into your agent — colors, typography, spacing, components, W3C output. Requires dembrandt ≥ 0.12.10.
generate-ui-from-brandwcag-accessibilityvisual-emphasis-and-hierarchybutton-states+25 more
See all 32 skills Install
$ npx skills add dembrandt/dembrandt-skills
