designlang — Extract Live Design Systems

Practical Notes

• Quant: one run writes 17+ files into ./design-extract-output/ (tokens, themes, prompts, reports).
• Quant: it reports responsive behavior across 4 breakpoints and includes WCAG contrast scoring.

Main

A reliable “agent-ready” pattern is:

1. Extract from the deployed URL, not design mockups, so tokens match reality.
2. Feed the design language (*-design-language.md) into your UI builder (v0/Lovable/Cursor/Claude Artifacts) as a hard constraint.
3. Use the grade report as a QA gate: rerun designlang grade after design changes.
4. Run the MCP server when you want an agent to query tokens/components on demand instead of pasting giant JSON blobs.

Watchouts

• Treat scraping as production traffic; throttle and respect site terms.
• Always review generated tokens/themes before committing them to a design system repo.

FAQ

Q: Do I need to install anything? A: No—npx designlang <url> works; npm i -g designlang is optional.

Q: What do I commit? A: Commit the design tokens/theme outputs you want to standardize; keep reports as CI artifacts if preferred.

Q: How do I use it with agents? A: Start the MCP server (npx designlang mcp) or paste the design-language markdown as context.