한 명령어로 웹사이트 디자인 시스템 전체 추출: DTCG 및 MCP 서버
요약
Manavarya09/design-extract 은 웹 사이트의 디자인 시스템을 한 번의 명령어로 완전히 추출하는 오픈소스 도구입니다. 이 프로젝트는 DTCG (Design-to-Code Generator) 토큰 표준을 준수하며, Claude Code, Cursor, Windsurf 등 AI 에이전트와 연동되는 MCP 서버를 제공합니다. iOS SwiftUI, Android Compose, Flutter, WordPress 등 다중 플랫폼으로 코드를 방출하고 Tailwind v4 및 Figma 변수를 지원합니다. WCAG 접근성 개선과 CSS 건강 상태 감사 기능도 포함되어 있어 개발자 생산성을 극대화합니다.
핵심 포인트
- 한 명령어로 웹사이트 전체 디자인 시스템을 추출하여 DTCG 토큰 (semantic/primitive/composite) 형식으로 즉시 활용 가능
- Claude Code, Cursor, Windsurf 와 연동되는 MCP 서버를 제공하여 AI 에이전트 기반 개발 워크플로우 지원
- iOS SwiftUI, Android Compose, Flutter, WordPress 등 4 가지 플랫폼으로 코드를 방출하는 다중 플랫폼 에미터 기능 보유
- Tailwind v4, Figma 변수, shadcn/ui 와 호환되며 WCAG 접근성 문제 자동 개선 및 CSS 건강 상태 감사 제공
Manavarya09/design-extract
개요
Repository: Manavarya09/design-extract
Language: JavaScript
Stars: 1544
Forks: 144
Topics: accessibility, agent-skill, ai, chrome-extension, claude-code-plugin, cli, css, cursor, design-system, design-to-code, design-tokens, dtcg, figma, mcp-server, npx, playwright, shadcn-ui, skills-sh, tailwind, web-scraping
기능 설명
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+.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub Claude Ecosystem의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기