design-extract
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 SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.
- 4.3k estrellas
- 363 forks
- 24 issues abiertos
- Lenguaje: HTML
- Licencia: MIT
- actualizado
Instalación
git clone https://github.com/Manavarya09/design-extract- Run the command above in your terminal (Claude Code), or paste the JSON config into claude_desktop_config.json (Claude Desktop).
- Replace any <placeholder> values with your API keys or paths.
- Restart Claude. The MCP server and its tools appear automatically.
Clone https://github.com/Manavarya09/design-extract and follow its README for install instructions.
Nota editorial
Designlang is a Node 20+ CLI and MCP server that points a Playwright-driven headless browser at any live URL and extracts its complete design system into 17 or more structured output files. A single `npx designlang` command produces W3C DTCG tokens split into primitive, semantic, and composite layers, a Tailwind v4 config, shadcn/ui CSS variables, Figma Variables JSON for light and dark modes, motion tokens with easing and spring detection, typed React component anatomy stubs, brand voice metadata, and paste-ready prompts for Claude Artifacts, among others. The MCP server connects directly to Claude Code, Cursor, and Windsurf, letting those agents consume the extracted design payload at inference time. Multi-platform output covers iOS SwiftUI, Android Compose, Flutter, and WordPress block themes via the `--platforms` flag. A standout feature is the graded report card with a shareable SVG badge that developers can drop into any README. WCAG contrast scoring includes a remediation palette suggesting nearest passing color alternatives. The tool targets frontend developers, design engineers, and AI coding agents needing accurate design-system context for code generation.
Resumen de MCP Servers
Lo que la gente pregunta sobre design-extract
¿Qué es Manavarya09/design-extract?
Manavarya09/design-extract es mcp servers para el ecosistema de Claude AI. 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 SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+. Tiene 4.3k estrellas en GitHub y su última actualización registrada es del 2026-10-21.
¿Cómo se instala design-extract?
Puedes instalar design-extract clonando el repositorio (https://github.com/Manavarya09/design-extract) o siguiendo las instrucciones del README en GitHub. ClaudeWave también te ofrece bloques de instalación rápida en esta misma página.
¿Es seguro usar Manavarya09/design-extract?
Nuestro agente de seguridad ha analizado Manavarya09/design-extract y le ha asignado un Trust Score de 97/100 (tier: Verified). Revisa el desglose completo de comprobaciones superadas y flags en esta página.
¿Quién mantiene Manavarya09/design-extract?
Manavarya09/design-extract es mantenido por Manavarya09. La última actividad registrada en GitHub es del 2026-10-21, con 24 issues abiertos.
¿Hay alternativas a design-extract?
Sí. En ClaudeWave puedes explorar mcp servers similares en /categories/mcp, ordenados por popularidad o actividad reciente.