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 감사 워크플로에 적합합니다.