Design Systems

design-system 스킬을 사용해 UI 시스템을 생성하거나 감수하고, 기존 코드에서 토큰을 추출하며, 실제 저장소에서 스타일 일관성을 검토하세요.

shadcn 스킬을 사용해 프로젝트 컨텍스트를 점검하고, 적절한 CLI 명령을 실행하며, 컴포넌트를 설치하고, base vs radix, 폼, 테마, 레지스트리에 대한 문서화된 패턴으로 UI를 구성할 수 있습니다.

design-consultation은 대략적인 제품 아이디어를 완성도 있는 디자인 방향으로 정리하는 design-consultation 스킬입니다. DESIGN.md를 단일 기준 문서로 만들고, 미리보기와 함께 타이포그래피, 색상, 간격, 레이아웃, 모션에 대한 시스템 수준의 가이드를 제공합니다. 새 제품이나 일관된 출발점이 필요한 UI 영역에 특히 적합합니다.

ui-ux-pro-max는 AI 기반 UI/UX 디자인을 위한 종합 스킬입니다. 웹과 모바일 프로젝트의 레이아웃, 스타일, 컬러 시스템, 타이포그래피, UX 규칙에 대해 체계적으로 안내하며, React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter, HTML/CSS 등 다양한 환경에서 실무 디자인 결정을 지원합니다. UI 기획, 리뷰, 개선에 활용할 수 있는 큐레이션된 디자인 인텔리전스를 제공합니다.

ckm:design-system은 명확한 토큰 아키텍처를 바탕으로 3계층 토큰, 컴포넌트 스펙, CSS variables, Tailwind mappings, 브랜드 일관 슬라이드 에셋을 생성하도록 도와줍니다.

ckm:design은 로고, CIP 목업, 배너, 슬라이드, SVG 아이콘 작업을 라우팅하고 제작하는 구조화된 디자인 스킬입니다. 범용 프롬프트 출력에 그치지 않고, 실무 참고자료, CSV 기반 옵션, Python 스크립트로 반복 가능한 디자인 워크플로를 지원합니다.

ckm:brand는 브랜드 가이드라인, 메시지, 보이스, 비주얼 아이덴티티, 디자인 토큰 동기화를 생성·업데이트·검토하는 브랜딩 워크플로 스킬로, 실무용 스크립트와 체크리스트를 제공합니다.

design-system-patterns는 디자인 시스템과 컴포넌트 라이브러리를 위해 토큰 구조, 테마 아키텍처, 재사용 가능한 컴포넌트 API 패턴을 정리해 확장 가능한 UI 기반을 설계할 수 있도록 돕는 스킬입니다.

visual-design-foundations는 타이포그래피 스케일, 색상 토큰, 간격 규칙, 아이코노그래피 가이드를 바탕으로 팀이 실무형 UI 시스템을 구축하도록 돕습니다. 탄탄한 디자인 기반을 마련하고, 스타일 가이드를 만들고, 시각적 위계를 점검하며, 명확한 디자인 제약을 바탕으로 구현 가능한 CSS variables를 만들 때 활용할 수 있습니다.

web-component-design 스킬은 팀이 React, Vue, Svelte에서 재사용 가능한 UI 컴포넌트를 설계할 수 있도록 돕습니다. 디자인 시스템에 맞는 탄탄한 API 패턴, 접근성 가이드, 스타일링 선택지별 트레이드오프 참고 정보를 제공합니다.

tailwind-design-system 스킬을 사용하면 Tailwind CSS v4 디자인 시스템을 토큰, 테마, variants, 접근성, v3에서 v4로의 마이그레이션 가이드와 함께 구축할 수 있습니다.

polish는 출시 전 마지막 단계에서 UI를 점검하며 정렬, 간격, 일관성, 토큰 사용, 미세한 디테일까지 잡아내는 최종 검토 스킬입니다. 화면, 플로우, 컴포넌트가 이미 기능적으로는 잘 동작하지만 어딘가 2% 부족하고 완성도가 덜 느껴질 때 특히 적합합니다. 불필요한 재설계 없이 출시 준비 상태, 디자인 시스템 정합성, 전반적인 품질을 끌어올리는 데 유용합니다.

figma-create-design-system-rules는 Figma-to-code 작업에 필요한 프로젝트별 Design System 규칙을 생성하는 데 도움을 줍니다. 컴포넌트, 네이밍, 토큰, 파일 위치, 그리고 AI 코딩 에이전트가 저장소 전반에서 일관성을 유지하기 위해 하드코딩하지 말아야 할 항목까지 정리할 때 사용하세요. Figma MCP 서버 연결이 필요합니다.

site-architecture는 웹사이트의 페이지 계층, 내비게이션, URL 패턴, 내부 링크 구조를 새로 설계하거나 재정비할 때 유용한 스킬입니다. 사이트맵, 내비게이션 명세, URL 맵, Mermaid 또는 ASCII 사이트 다이어그램을 만들어 마케팅 기획과 UI/UX 설계를 구체화하는 데 활용할 수 있습니다.

normalize 스킬은 UI 기능을 점검하고 디자인 시스템에 맞게 다시 정렬합니다. 이 페이지에서 normalize 설치 옵션, 필요한 frontend-design 사전 준비 사항, 그리고 페이지·라우트·컴포넌트에 실제로 활용하는 방법을 확인하세요.

extract 스킬은 팀이 반복되는 UI 패턴, 토큰, 컴포넌트를 찾아내고, 더 안전한 마이그레이션 경로를 고려해 기존 디자인 시스템으로 통합을 계획하거나 실제로 진행할 수 있도록 돕습니다.

normalize 스킬은 UI 기능을 점검하고 디자인 시스템에 맞게 다시 정렬하도록 돕습니다. normalize의 설치 맥락, 필요한 /frontend-design 사전 준비, 그리고 페이지·라우트·컴포넌트에 실제로 적용하는 방법을 확인해 보세요.

extract 스킬은 팀이 반복되는 UI 패턴, 토큰, 컴포넌트를 찾아내고, 이를 기존 디자인 시스템에 통합할 수 있도록 돕습니다. 또한 더 안전하게 마이그레이션할 수 있도록 계획 수립까지 지원합니다.

design-md 스킬은 Stitch 프로젝트를 분석해 화면을 의미 기반의 DESIGN.md 단일 기준 문서로 정리합니다. 이를 통해 레이아웃, 톤, 색상, 컴포넌트 언어를 일관되게 유지할 수 있습니다. 단순한 시각 요약이 아니라, 앞으로의 Stitch 생성에 바로 프롬프트로 활용할 수 있는 디자인 시스템 가이드가 필요할 때 design-md를 사용하세요.

WordPress Design System(WPDS)으로 WordPress UI를 만들거나 검토할 때 wpds 스킬을 사용하세요. WPDS MCP 서버를 통해 컴포넌트, 토큰, 패턴, 패키지 적합성을 확인할 수 있어, 추측이 아니라 공식 문서에 근거해 wpds 가이드를 유지할 수 있습니다. Gutenberg, WooCommerce, WordPress.com, Jetpack 등 관련 인터페이스 전반의 Design Systems 작업에 특히 적합합니다.

figma-use는 Figma 파일 컨텍스트에서 JavaScript를 안전하게 실행할 수 있도록, 모든 use_figma 호출 전에 설치해야 하는 스킬입니다. 노드 생성 및 편집, 변수와 스타일 연결, 컴포넌트와 변형 구축, 파일 구조의 프로그래밍 방식 검사 같은 디자인 구현 작업을 지원합니다. 이 저장소에는 사용 가이드, 주의할 점, 그리고 Figma 자동화에서 흔히 발생하는 오류를 줄이기 위한 패턴이 포함되어 있습니다.

mui는 React에서 Material UI v7를 다루기 위한 집중형 가이드입니다. `sx` styling, theme customization, responsive layouts, 그리고 v7의 핵심 마이그레이션 변경 사항을 다룹니다. 이 스킬을 설치한 뒤 핵심 파일 흐름을 따라가며, 최신 `@mui/material` 패턴으로 MUI 컴포넌트를 생성할 때 활용할 수 있습니다.

makepad-2.0-theme는 Makepad 2.0용 테마 스킬로, `theme.*` 변수 적용, 다크/라이트 테마 전환, 디자인 토큰 기반 스타일 일관성 유지를 돕습니다. 이 가이드는 프로덕션 UI와 디자인 시스템에서 makepad-2.0-theme의 설치와 사용법을 이해하는 데 도움을 줍니다.

figma-generate-library는 코드베이스를 바탕으로 Figma 디자인 시스템을 구축하거나 업데이트할 때, 토큰, 컴포넌트 라이브러리, 문서화, 라이트/다크 테마를 순서대로 진행할 수 있게 도와줍니다. 일회성 목업이 아니라 디자인 시스템을 실무적으로 다뤄야 할 때 사용하는 figma-generate-library 스킬입니다. Plugin API 호출용 figma-use와 함께 쓰면 더 좋습니다.