단일 명령어로 모든 웹사이트의 완벽한 디자인 시스템을 추출합니다. DTCG 토큰, 의미론적+원시+복합 토큰, Claude Code/Cursor/Windsurf용 MCP 서버, 다중 플랫폼 에미터(iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma 변수, shadcn/ui, CSS 상태 감사, WCAG 수정, Chrome 확장 프로그램을 지원합니다. MIT 라이선스, Playwright, Node 20+.
이 기술은 웹사이트에서 완전한 디자인 시스템을 자동으로 추출하여 AI 에이전트(Claude Code, Cursor, Windsurf)가 접근 가능한 표준화된 형식으로 제공합니다. DTCG(Design Tokens Community Group) 표준을 기반으로 의미론적, 원시, 복합 토큰을 추출하며, Figma 변수나 Tailwind v4 구성과 같은 특정 도구 형식으로 변환할 수 있습니다. 가장 큰 장점은 디자인 토큰 데이터를 여러 플랫폼(iOS SwiftUI, Android Compose, Flutter, WordPress)의 네이티브 코드로 직접 변환하는 멀티 플랫폼 에미터 기능 덕분에 디자인-개발 간극을 크게 줄여준다는 점입니다. 또한 CSS 상태 감사와 WCAG 접근성 문제를 식별하고 수정하는 기능, Chrome 확장 프로그램을 통한 실시간 수집, shadcn/ui 컴포넌트 라이브러리 추출 기능을 제공합니다. MIT 라이선스로 오픈소스이며, Node 20+와 Playwright를 기반으로 동작합니다.
npx skills add Manavarya09/design-extract단일 명령어로 모든 웹사이트의 완벽한 디자인 시스템을 추출합니다. DTCG 토큰, 의미론적+원시+복합 토큰, Claude Code/Cursor/Windsurf용 MCP 서버, 다중 플랫폼 에미터(iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma 변수, shadcn/ui, CSS 상태 감사, WCAG 수정, Chrome 확장 프로그램을 지원합니다. MIT 라이선스, Playwright, Node 20+.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".