A website design-extraction CLI with token exports, report cards, design-feature analysis and CI lint/drift checks.
Project overview
It combines browser-based design extraction with multiple output formats and explicit validation commands.
Project type
MCP · Workflow · Prompt Engineering
Use cases
Coding & Development · Automation
Deployment
Refer to project documentation
License
MIT
Best for
Users examining a live website’s design properties and checking exported tokens or drift.
Key capabilities
Uses headless Chromium to inspect a target URL and extract documented design properties into 17+ outputs, including DTCG tokens; coverage and fidelity need checking on the actual site.
Generates a shareable HTML design report card with letter grade plus an SVG badge
Reduces a design to 30 deterministic features across five axes (colour, type, space, shape, motion) and ranks it against a corpus of real design systems
Token lint, drift checks against a live site and visual diffs that exit non-zero on failure for CI use
Getting started
npx designlang https://stripe.com
Evidence and sources
GitHub project description: Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS…
README: **designlang** points a headless browser at any URL and reads the design system off the live DOM. One command emits 17+ files — DTCG tokens, Tailwind config, shadcn theme, Figma v…
README: It also goes where extractors don't: **layout patterns**, **responsive behavior across 4 breakpoints**, **hover / focus / active states**, **WCAG contrast scoring**, **multi-page…
README: Each run writes 17+ files to `./design-extract-output/`.