Vibe Coding Discoverdembrandt
View on GitHubExtract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.
CLI and MCP server that renders a site with Playwright and extracts its design system (colors, typography, spacing, borders, shadows, motion, components) as terminal output, JSON, W3C DTCG, Tailwind, shadcn/ui or DESIGN.md. Also compares against a baseline in CI to fail on token drift.
Use Cases
Extract a website's colors, typography, spacing, borders, shadows and motion into design tokensFeed live site design tokens to coding agents through an MCP server (get_design_tokens, get_color_palette, get_typography)Fail CI when design tokens drift from a committed baselineGenerate a Tailwind v4 @theme block from an existing siteGenerate a shadcn/ui theme block from observed valuesProduce DESIGN.md context files for AI agentsRun WCAG 2.1 contrast audits on real DOM pairsExport W3C DTCG tokens for Style Dictionary or Tokens StudioBenchmark a competitor's design systemCrawl and merge multiple pages into one token setBuild brand guide output and token snapshots for drift tracking
Built With
- Language
- TypeScript
- Frameworks
- Playwright · Node.js · Tailwind CSS · shadcn/ui · W3C DTCG (Style Dictionary) · Vitest · GitHub Actions · Claude Code · Cursor · Windsurf
Tags
design-tokens · mcp · mcp-server · cli · playwright · design-systems · design-to-code · wcag · tailwind-css · shadcn-ui · dtcg · ci · token-drift · typography · web-scraping · typescript