Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and
extract-design-system is worth checking the docs before setup with strong trust signals. Check agent compatibility and use-case fit before adding it to your workflow.
gh repo view arvindrk/extract-design-system --webOpen the official repository or website.
Check the README for package manager, auth, and platform requirements.
Try it in a small test task inside your agent workflow.
Repository setup guidance
Strong trust signals; still review the README and permissions before production use.
Last commit was about 69 days ago.
119 GitHub stars indicate community interest.
3 open issues signal maintenance load.
Generate design system documentation for UI components directly from your AI agent, rendering into Figma or portable .md files.
Argos is an open source visual testing platform that detects unintended UI changes to help teams maintain quality.
Bidirectional MCP bridge that lets AI draw UI directly on Figma canvas and read designs back as structured data.
extract-design-system is a design/UI tool for AI-assisted frontend work. It is useful when a team wants to move from design context or natural-language requirements into clearer UI assets, components, workflows, or implementation guidance without losing human review.
extract-design-system focuses on a practical part of the AI-native frontend workflow: Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI. It can help teams shorten the path from prompt, design system, or Figma/browser context to reviewable UI output. Treat it as an acceleration layer rather than an automatic production gate: generated code, tokens, or design decisions should still be checked for accessibility, responsive behavior, maintainability, and license fit.
Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and
Frontend developers, Design engineers, AI coding agent users
The setup section provides repository-level starting guidance, not a guarantee of an independently verified installation. Check the official README and release notes.
Review generated UI/code before production use Check the repository license and maintenance status before commercial adoption
Similar or complementary options to evaluate include uSpec, Argos, figma-ui-mcp.
Aug 20, 2026
MIT license detected.
3 security/trust notes recorded.
Setup difficulty is 3/5.
Use extract-design-system to help me build a production-ready React/Tailwind UI for a developer tool. Keep accessibility, responsive states, and design-system consistency in scope.
119
Stars
14
Forks
3
Issues
MIT
License