design 스킬

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

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

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

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

figma-generate-design는 코드로 만든 페이지, 모달, 드로어, 사이드바, 패널, 기타 여러 섹션으로 구성된 화면을 공개된 디자인 시스템을 활용해 Figma로 옮기는 데 도움을 줍니다. Code Connect와 관련 소스에서 컴포넌트, 변수, 스타일, 라이브러리 에셋을 찾아내고, 전체를 다시 그리지 않고 Design Implementation을 위해 화면을 섹션별로 조립합니다. 코드와 토큰의 일치를 중시할 때 figma-generate-design 가이드를 사용하세요.

tool-design 스킬은 에이전트가 사용하는 도구를 명확한 계약으로 설계하고, 중복을 줄이며, 도구 선택을 개선하는 데 도움을 줍니다. Design Implementation, MCP 도구 설계, 도구 통합, 명명 규칙, 잘못된 도구 호출 디버깅에 활용하세요. 설치 및 사용 단계, 확인할 소스 파일, 그리고 도구 설명의 모호함을 줄여 주는 구체적인 제약이 포함된 실용적인 도구 설계 가이드가 필요할 때 특히 잘 맞습니다.

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

macos-design-guidelines는 Apple Human Interface Guidelines에 맞춰 Mac 앱을 검토하고 구현할 때 쓰는 실용적인 가이드입니다. SwiftUI, AppKit, Mac Catalyst 팀이 메뉴 바, 키보드 단축키, 창 동작, 툴바, 접근성, 시스템 통합을 점검하는 데 도움이 됩니다.

iPad 네이티브 인터페이스를 설계하고 검토할 때 쓰는 ipados-design-guidelines skill입니다. 적응형 레이아웃, Split View, Stage Manager, 사이드바 내비게이션, 포인터와 트랙패드 동작, 키보드 단축키, 컴팩트 폭 대응이 필요할 때 활용하세요. iPhone식 가정을 실용적인 iPadOS 디자인 점검으로 바꾸는 데 도움이 됩니다.

design-review는 실제 인터페이스를 점검하는 UX 중심의 디자인 QA 스킬로, 간격, 위계, 시각적 일관성, 상호작용 문제를 찾아내고 검증을 거치며 반복적으로 수정하도록 돕습니다. 구현 전에는 plan-mode 리뷰도 지원하며, 막연한 조언이 아니라 구체적인 소스 변경을 기준으로 디자인-review 가이드를 원할 때 유용합니다.

tvos-design-guidelines는 tvOS 인터페이스, 포커스 기반 내비게이션, Siri Remote 동작, 10피트 가독성, 미디어 재생을 검토할 때 유용한 실용적인 Apple TV 디자인 규칙 모음입니다. 거실 환경 UI 디자인에서 명확한 제약 조건, 화면별 비평, 구현 점검이 필요할 때 이 tvos-design-guidelines 가이드를 활용하세요.

최신 Web Interface Guidelines를 기준으로 UI 코드를 검토할 때 `web-design-guidelines`를 사용하세요. 릴리스 전에 짧은 file:line 형식의 발견 사항, 접근성 점검, 인터페이스 준수 검토가 필요한 웹 디자인 가이드라인 중심 UX 감사 워크플로에 적합합니다.

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

ios-design-guidelines는 iPhone용 SwiftUI/UIKit 인터페이스를 Apple Human Interface Guidelines에 맞춰 검토, 다듬기, 재작성하는 데 도움을 줍니다. 레이아웃, 내비게이션, 접근성, Dynamic Type, Dark Mode, 시스템 컴포넌트 선택처럼 실무적인 ios-design-guidelines 가이드 피드백이 필요할 때 UI Design에 유용합니다.

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

figma-generate-design은 실제 화면, 페이지, 또는 여러 섹션으로 구성된 레이아웃을 일반적인 도형 대신 공개된 디자인 시스템을 재사용해 Figma로 옮기는 데 도움을 줍니다. 코드나 제품 페이지와 높은 일치도, 편집 가능한 구조, 토큰 기반 일관성이 필요한 경우에 특히 적합합니다. 러프한 목업이 아니라 전체 페이지 UI 디자인 업데이트에 사용하세요.

frontend-design-review는 프런트엔드 UI 작업을 검토하고, 처음부터 차별화된 프로덕션 수준의 인터페이스를 만드는 데 도움이 되는 GitHub 스킬입니다. 디자인 시스템 준수, 접근성, 시각적 완성도, 그리고 UI가 평범하게 느껴지는지 아니면 의도적으로 설계된 느낌인지 평가하는 데 유용합니다. PR 리뷰, 컴포넌트 리뷰, UI 디자인용 frontend-design-review에 활용하세요.

android-design-guidelines는 Material Design 3, Jetpack Compose, XML 레이아웃을 다루는 실용 가이드입니다. 테마, 내비게이션, 접근성, 반응형 레이아웃, 다이내믹 컬러, Material You 준수 여부를 기준으로 Android UI 결정을 검토할 때 활용할 수 있습니다. android-design-guidelines 가이드나 UI 디자인 작업에 적합합니다.

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

web-design-guidelines는 접근 가능하고 반응형인 웹 UI를 구축, 검토, 수정하기 위한 프레임워크 비의존 가이드입니다. 시맨틱 HTML, WCAG 2.2 점검, 폼, 포커스 상태, 대비, 다크 모드, 성능, 그리고 HTML, CSS, JS 전반의 레이아웃 결정에 활용할 수 있습니다.

visionos-design-guidelines 스킬은 Apple Vision Pro의 공간형 UI, 눈과 손 입력, 몰입형 공간, 윈도우, 볼륨, 접근성 규칙을 적용하는 데 도움을 줍니다. 편안함, 올바른 배치, 플랫폼에 맞는 지침이 필요한 visionOS 인터페이스를 검토하거나 설계할 때 사용하세요.

design-system-starter는 토큰, atomic 컴포넌트, 테마 설계, WCAG 2.1 AA 가이드, 체크리스트, 그리고 문서화·스타터 코드용 React 친화적 템플릿을 바탕으로 팀이 디자인 시스템을 빠르게 설계하고 뼈대를 잡을 수 있게 돕습니다.

figma-implement-design은 Figma 디자인을 1:1 시각적 일치도를 갖춘 배포 가능한 애플리케이션 코드로 변환합니다. Figma 파일에서 UI 코드를 구현할 때, 특정 컴포넌트나 화면과 맞춰야 할 때, 또는 Design Implementation용 figma-implement-design 가이드를 따를 때 사용하세요. Figma 캔버스 노드를 편집하는 용도는 아닙니다.

figma-create-design-system-rules 스킬은 Figma-to-code 워크플로에 맞춘 프로젝트별 디자인 시스템 규칙을 생성합니다. 컴포넌트, 토큰, 레이아웃 프리미티브, 파일 구조, 그리고 하드코딩 경계를 저장해 코딩 에이전트가 화면 전반에서 일관성을 유지하도록 하는 데 사용하세요. 연결된 Figma MCP 서버와 기존 코드베이스가 있을 때 가장 효과적입니다.