Extract Design Systems
& Tokens in Seconds
Open-source tool that extracts design tokens from any website with one command. Colors, typography, spacing, shadows and more as W3C-compliant output.
npm i -g dembrandtv0.10.0-DESIGN.md integration for AI agents
~ terminal10s
$dembrandt dembrandt.com
✓Extracted design system from dembrandt.com
✓ Colors: 12 found
#133174
#38BDF8
#EA580C
#FFFFFF
#0A0A0F
#8A8F98
✓ Typography: 8 styles
• Heading: 48px / 36px / 24px
• Body: 16px / 14px / 12px
✓ Spacing: 12 tokens
4px • 8px • 12px • 16px • 24px • 32px • 48px...
✓ Shadows: 5 found
• 0 4px 8px rgba(0,0,0,0.1)
• 0 12px 24px rgba(0,0,0,0.15)
✓ Border radius: 4 values
4px • 8px • 12px • 16px
✓ Button states: 3 variants
• default: #635BFF → hover: #7A73FF → active: #4B44D6
✓ Framework detected
React · Next.js · Tailwind CSS
✓ Breakpoints: 4 found
sm 640px • md 768px • lg 1024px • xl 1280px
Saved to ./design-system.json
Then explore your results
Local UI
Browse extracted tokens in a visual interface. Colors, typography, spacing, all in one view.
dembrandt-skills
Teach your agent to design
Install once, and your agent knows how to design.
30 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.
visual-emphasis-and-hierarchywcag-accessibilitybutton-statesgestalt-ui-organisationgenerate-ui-from-brand+25 more
See all 30 skills Install
$ npx skills add
dembrandt/dembrandt-skills
