cc-designer#
디자인 실무 레퍼런스 + 의사결정 스킬 (UI 디자인, 인터랙션 디자인, 디자인 시스템, 디자인 옵스, 비주얼 크리틱). owl-listener/designer-skills에서 vendoring·adapt한 57개 스킬을 화면 기능 개발 중 레퍼런스로 쓰고, 스펙·시안에 답이 없는 디자인 판단은 design-decision 프로토콜로 되묻지 않고 확정 (cc-dev Step 7.1)
Design-practice reference skills — UI design, interaction design, design systems, design ops, and visual critique — for use during screen-feature development (see
cc-dev's Step 7.1 Design Reference & Decision).
Beyond reference, the house design-decision skill and /cc-designer:decide command let an unattended pipeline
settle practical design judgments (colour, spacing, state behaviour, feedback style, copy, input format) from evidence instead of stopping to ask.
Skills#
| 이름 | 설명 |
|---|---|
| critique-affordance | 화면의 인터랙티브 어포던스 — 클릭 가능해 보이는지, 상태 표시가 잘 보이는지, CTA가 명확한지, 액션을 발견하기 쉬운지 — 를 크리틱합니다. 버튼/컨트롤이 클릭 가능해 보이는지 |
| critique-brand-consistency | 화면의 브랜드 일관성을 mood.md, voice.md, tokens.md 기준으로 크리틱합니다. 브랜드/보이스 정합성을 감사하거나, Design Token 준수 여부를 점검하거나 |
| critique-color | 화면의 색상 사용 — 대비 비율, 팔레트 일관성, 의미론적 의미, 색상 접근성 — 을 크리틱합니다. 색상 대비 비율을 감사하거나, 팔레트 일관성을 검토하거나, 화면의 색맹 지원 등 |
| critique-composition | 화면의 구도 — 균형, 여백, 리듬, 게슈탈트 원칙 — 을 크리틱합니다. 레이아웃 균형과 여백을 감사하거나, 시각적 리듬을 검토하거나, 화면 크리틱에 게슈탈트 그룹화 원칙을 적용할 |
| critique-information-density | 화면의 정보 밀도 — 인지 부하, 콘텐츠 우선순위, 스캐닝 패턴, 점진적 공개(progressive disclosure) — 를 크리틱합니다. 인지 부하를 감사하거나, 콘텐츠 우선 |
| critique-typography | 화면의 타이포그래피 — 스케일 사용, 가독성, 일관성, 토큰 준수 — 를 크리틱합니다. 타이포그래피 스케일 사용을 감사하거나, 텍스트 가독성을 검토하거나, 화면의 타이포그래피 De |
| critique-visual-hierarchy | 화면의 시각적 위계 — 진입 지점, 시선 흐름, 무게 분배, 강조 — 를 크리틱합니다. 시각적 위계를 감사하거나, 시선 흐름을 검토하거나, 화면의 주요 액션이나 강조가 명확한지 점 |
| design-decision | 디자인 실무 의사결정을 사람에게 되묻지 않고 확정하는 프로토콜 — 결정 유형 분류, 근거 사다리(스펙→디자인 소스→코드 선례→디자인 시스템/법칙→가역성), DDR 기록, 좁은 에스 |
| design-review | 디자인 리뷰 체크리스트 및 프로세스. UI 구현이 디자인 명세와 일치하는지 검토할 때 사용합니다. |
| design-system | CoUI 디자인 시스템 토큰과 테마. 디자인 토큰을 적용하거나, 테마를 지정하거나, CoUI 디자인 시스템을 확장할 때 사용합니다. |
| designer-index | 디자인 스킬 패밀리 인덱스 — ui(비주얼)·ix(인터랙션)·dsys(디자인 시스템)·dops(디자인 옵스)·critique(비평) 스킬로 라우팅합니다. 디자인 레퍼런스가 필요한 |
| dops-critique | 명확한 피드백 프레임워크와 실행 가능한 결과물로 구조화된 디자인 크리틱을 진행합니다. 디자인 크리틱 세션을 계획하거나, 데스크 크리틱/팀 크리틱을 진행하거나, 진행 중인 디자인 작 |
| dops-debt-audit | 제품 전반에 쌓인 디자인 불일치와 구조적 문제를 식별하고, 분류하고, 우선순위를 매깁니다. 대규모 리디자인 전에 디자인 부채를 감사하거나, 일관성 없는 컴포넌트를 트리아지하거나, |
| dops-handoff-spec | 치수, 동작, 에셋, 예외 상황(edge case)을 포함한 개발자 핸드오프 명세서를 작성합니다. 디자인 핸드오프 문서를 준비하거나, 개발자를 위한 상호작용 상태와 에셋을 명세하거 |
| dops-impact-reporting | 디자인이 비즈니스와 사용자 성과에 기여한 바를 이해관계자에게 와닿는 언어로 전달합니다. 디자인 임팩트 리포트를 작성하거나, 경영진에게 디자인 지표를 발표하거나, 디자인이 전략적 투 |
| dops-qa-checklist | 디자인 구현 정확도를 검증하기 위한 QA 체크리스트를 작성합니다. 디자인 QA 점검을 준비하거나, 배포된 화면을 스펙과 대조 검증하거나, 구현 버그를 접수할 때 사용합니다. |
| dops-review-process | 기준, 체크리스트, 승인 워크플로를 갖춘 디자인 리뷰 게이트를 수립합니다. 디자인 리뷰 체크포인트를 설정하거나, 디자인 작업의 승인 워크플로를 정의하거나, 프로젝트에 필요한 디자인 |
| dops-sprint-plan | 과제 정의부터 프로토타입 테스트까지 디자인 스프린트를 계획하고 진행합니다. 5일짜리 디자인 스프린트를 계획하거나, 축소판/원격 디자인 스프린트 범위를 정하거나, 과제 정의부터 프로 |
| dops-team-workflow | 업무 관리, 협업 리추얼, 도구 스택을 아우르는 디자인팀 워크플로입니다. 디자인팀의 워크플로를 세팅하거나, 스탠드업/크리틱 같은 협업 리추얼을 정의하거나, 디자인팀의 도구 스택을 |
| dops-version-control | 디자인 파일, 컴포넌트, 라이브러리를 위한 버전 관리 전략을 정의합니다. 디자인 파일이나 컴포넌트 라이브러리의 버전 관리를 세팅하거나, Design Token 체인지로그를 정의하거 |
| dsys-accessibility-audit | WCAG 가이드라인을 기준으로 심각도 등급과 개선 단계를 포함한 종합적인 접근성 감사를 수행합니다. 접근성을 감사하거나, WCAG/ARIA 준수 여부를 점검하거나, 출시 전 디자인 |
| dsys-component-spec | props, states, variants, 접근성 요구사항, 사용 가이드라인을 포함한 상세한 컴포넌트 스펙을 작성합니다. 컴포넌트 스펙을 작성하거나, UI 컴포넌트의 API를 문 |
| dsys-design-token | 이름 규칙과 사용 가이드를 갖춘 Design Token(색상, 간격, 타이포그래피, elevation)을 정의하고 정리합니다. Design Token을 정의하거나, 토큰 계층을 정 |
| dsys-documentation-template | 디자인 시스템 내 컴포넌트, 패턴, 가이드라인을 위한 구조화된 문서 템플릿을 생성합니다. 디자인 시스템 문서를 생성하거나, 컴포넌트 문서 구조를 잡거나, 문서 템플릿을 설정할 때 |
| dsys-governance | 디자인 시스템이 어떻게 진화하는지 — 기여 모델, 버전 관리, 변경 관리, 디프리케이션 — 를 정의합니다. 디자인 시스템 거버넌스를 세팅하거나, 기여 프로세스를 정의하거나, 버전 |
| dsys-icon-system | 그리드, 사이즈, 네이밍, 카테고리, 구현 가이드를 포괄하는 아이콘 시스템 명세를 작성합니다. 아이콘 시스템을 설계하거나, 아이콘 사이즈/네이밍 규칙을 정의하거나, 아이콘 라이브러 |
| dsys-localization | 여러 언어, 쓰기 방향, 문화적 맥락에 자연스럽게 적응하는 인터페이스를 설계합니다. 로컬라이제이션을 고려해 설계하거나, RTL(오른쪽에서 왼쪽으로 읽는 언어)을 지원하거나, 로케일 |
| dsys-motion-system | 제품 전반에서 일관된 애니메이션을 위해 duration 토큰, easing 용어 체계, reduced-motion 처리를 포함한 모션 시스템을 정의합니다. 모션 시스템을 정의하거나 |
| dsys-naming-convention | 디자인 요소, 컴포넌트, 토큰에 대한 네이밍 컨벤션 체계를 명확한 규칙과 예시로 수립합니다. 네이밍 컨벤션을 수립하거나, 컴포넌트/토큰/파일 이름을 정하거나, 일관성 없는 디자인 |
| dsys-pattern-library | 문제 맥락, 해결 패턴, 사용 예시, 관련 패턴을 포함한 패턴 라이브러리 항목을 구성합니다. UX 패턴을 문서화하거나, 패턴 라이브러리 항목을 만들거나, 재사용 가능한 인터랙션 솔 |
| dsys-theming-system | 토큰 매핑을 통해 브랜드 변형, 다크 모드, 고대비 모드를 지원하는 테마 아키텍처를 설계합니다. 테마 시스템을 설계하거나, 다크 모드/고대비 지원을 추가하거나, 여러 브랜드 테마를 |
| ix-animation-principles | 목적이 분명하고 다듬어진 인터랙션을 위해 easing, duration, choreography 같은 애니메이션 원칙을 UI 모션에 적용합니다. 인터페이스 요소의 애니메이션, 전환 |
| ix-doherty-threshold | 사용자 흐름과 체감 성능을 유지하기 위해 시스템 응답 시간을 400ms 이내로 유지하는 도허티 임계값(Doherty Threshold)을 적용합니다. 응답 시간 목표, 로딩 인디케 |
| ix-error-handling | 에러 예방, 감지, 복구 경험을 설계합니다. 기능의 에러 상태, 유효성 검사 메시지, 복구 흐름을 설계할 때 사용합니다. |
| ix-feedback-patterns | 확인, 상태 업데이트, 알림을 포함해 사용자 행동에 대한 시스템 피드백을 설계합니다. 사용자 행동에 대한 확인, 상태 표시, 토스트, 알림 피드백을 설계할 때 사용합니다. |
| ix-fitts-law | 빠르고 정확한 인터랙션을 위해 피츠의 법칙(Fitts's Law)을 적용해 인터랙티브 타겟의 크기와 위치를 정합니다. 버튼·터치 타겟의 크기를 정하거나, 인터랙티브 요소를 속도와 |
| ix-form-design | 마찰을 최소화하고 오류를 방지하며 사용자를 성공적인 완료로 안내하는 폼을 설계합니다. 폼 레이아웃, 입력 필드, 유효성 검사, 다단계 폼을 설계할 때 사용합니다. |
| ix-gesture-patterns | 터치 및 포인터 기기를 위한 제스처 기반 인터랙션을 설계합니다. 터치·포인터 기기에서 스와이프, 드래그, 핀치, 롱프레스 등의 제스처 인터랙션을 설계할 때 사용합니다. |
| ix-hicks-law | 사용자에게 동시에 제시되는 선택지 수를 제한해 의사결정 시간을 줄이는 힉의 법칙(Hick's Law)을 적용합니다. 내비게이션 메뉴, 툴바, 온보딩 흐름, 옵션 목록을 설계해 의사 |
| ix-interfaces-that-feel | 감정적 공명이라는 관점으로 UI를 살펴 빠진 부분을 찾아내고, 카피·모션·인터랙션 레이어에서 구체적인 개선안을 제시합니다. 기술적으로는 문제없지만 밋밋하게 느껴지는 디자인을 다듬거 |
| ix-loading-states | 로딩, 스켈레톤, 점진적 콘텐츠 노출 패턴을 설계합니다. 로딩 인디케이터, 스켈레톤 화면, 점진적 콘텐츠 노출, 낙관적(optimistic) UI 상태를 설계할 때 사용합니다. |
| ix-micro-interaction-spec | 트리거, 규칙, 피드백, 루프/모드 정의를 포함해 마이크로 인터랙션을 명세합니다. 마이크로 인터랙션의 트리거, 규칙, 피드백, 루프/모드 동작을 상세히 명세할 때 사용합니다. |
| ix-millers-law | 작업 기억의 한계 내에서 동작하도록 정보를 4개 안팎으로 묶는 밀러의 법칙(Miller's Law)을 적용합니다. 내비게이션 메뉴, 폼, 온보딩 단계, 또는 스캔하기 쉽도록 청킹이 |
| ix-navigation-patterns | 제품 구조, 사용자 태스크, 플랫폼 관례에 맞는 내비게이션 패턴을 선택하고 설계합니다. 제품의 탭바, 사이드 내비게이션, 브레드크럼 등 내비게이션 시스템을 선택하거나 설계할 때 사 |
| ix-onboarding-design | 사용자를 압도하지 않으면서 빠르게 가치를 경험하게 하는 첫 실행 경험을 설계합니다. 회원가입 흐름, 첫 실행 경험, 제품 투어, 빈 상태(empty-state) 온보딩을 설계할 때 |
| ix-search-ux | 사용자가 원하는 것을 찾고, 실패에서 회복하고, 결과를 정제할 수 있도록 돕는 검색 경험을 설계합니다. 검색 입력창, 자동완성, 결과 레이아웃, 필터, 검색결과 없음(zero-re |
| ix-state-machine | 복잡한 UI 동작을 상태(state), 이벤트, 전환(transition)으로 구성된 유한 상태 머신(finite state machine)으로 모델링합니다. 복잡한 UI 동작, |
| ui-aesthetic-usability | 시각적으로 일관되고 다듬어진 인터페이스가 더 사용하기 쉽다고 인식되도록 심미성-사용성 효과(Aesthetic-Usability Effect)를 적용합니다. UI 완성도를 점검하거나 |
| ui-color-system | 팔레트 생성, 시맨틱 매핑, 접근성 준수를 포함한 종합적인 색상 시스템을 구축합니다. 브랜드/중립/시맨틱 색상 팔레트를 정의하거나, 텍스트-배경 대비율을 점검하거나, 디자인 시스템 |
| ui-dark-mode | 적절한 색상 적응, 대비, elevation을 갖춘 효과적인 다크 모드 인터페이스를 설계합니다. 다크 테마를 설계하거나 점검하거나, 저조도 UI에 맞게 surface elevati |
| ui-data-visualization | 적절한 차트 선택과 스타일링을 통해 명확하고 접근성 높은 데이터 시각화를 설계합니다. 데이터에 맞는 차트 유형을 고르거나, 차트/그래프/대시보드를 스타일링하거나, 데이터 시각화의 |
| ui-illustration-style | 시각 언어, 색상 사용, 적용 규칙을 포함한 일러스트레이션 스타일 가이드를 정의합니다. 일러스트레이션 시스템을 수립하거나, 스팟/히어로 일러스트레이션이나 빈 상태/온보딩용 그림을 |
| ui-law-of-common-region | 컨테이너, 배경, 경계선을 이용해 요소를 그룹화하는 공통 영역의 법칙(Law of Common Region)을 적용합니다. 카드, 패널, 사이드바, 모달을 설계하거나, UI 요소를 |
| ui-law-of-proximity | 공간적 관계를 통해 관련 요소를 그룹화하는 근접성의 법칙(Law of Proximity)을 적용합니다. 폼 필드, 카드 콘텐츠, 섹션 헤더의 간격을 조정하거나, 여백만으로 레이아웃 |
| ui-layout-grid | 컬럼, 거터, 마진, 브레이크포인트 동작을 포함한 반응형 레이아웃 그리드 시스템을 정의합니다. 페이지 그리드를 정의하거나, 컬럼/거터/마진 규격을 설정하거나, 브레이크포인트별 레이 |
| ui-readable-measure | 타이포그래피 스케일과 반응형 레이아웃 전반에서 가독성을 위한 최적의 한 줄 길이를 설정합니다. 텍스트 칼럼 너비를 제한하거나, 본문 카피의 줄 길이를 검토하거나, 너무 넓거나 좁게 |
| ui-responsive-layout | 모든 화면 크기와 입력 방식에서 동작하는 적응형 레이아웃과 인터랙션을 설계합니다. 반응형 브레이크포인트를 정의하거나, 터치/마우스/키보드 입력에 맞게 레이아웃을 조정하거나, 여러 |
| ui-spacing-system | 기준 단위(base unit)를 바탕으로 상황별 적용 규칙을 갖춘 일관된 여백(spacing) 시스템을 만듭니다. 여백 스케일을 정의하거나, padding/stack/inline |
| ui-typography-scale | 크기, 굵기(weight), 줄 간격(line-height) 관계를 갖춘 모듈러 타이포그래피 스케일을 만듭니다. 타입 스케일을 정의하거나, 폰트를 조합하거나, 제목/본문 글자 크기 |
| ui-visual-hierarchy | 크기, 굵기, 색상, 여백, 위치를 통해 명확한 시각적 위계(visual hierarchy)를 수립합니다. 사용자가 화면에서 가장 먼저 볼 것을 우선순위화하거나, 히어로/카드/폼 |
| ui-von-restorff-effect | 가장 중요한 요소가 주변과 뚜렷하게 다르게 보이도록 폰 레스토프 효과(Von Restorff Effect)를 적용합니다. 하나의 주요 CTA(call-to-action)를 고르거나 |
Commands#
| 이름 | 설명 |
|---|---|
| /cc-designer:critique-screen — 화면 전체 시각 크리틱 7종 세트 | 화면에 대해 시각 크리틱 7종을 모두 실행하고, 우선순위가 매겨진 수정 목록을 출력합니다. |
| /cc-designer:decide — 디자인 판단을 물어보지 않고 끝내기 | 디자인 판단을 되묻지 않고 확정합니다 — 근거 사다리(스펙→시안→코드 선례→디자인 시스템→정량 기준)로 결론을 내고 DDR 기록을 남깁니다. |
관련 플러그인#
| 플러그인 | 설명 |
|---|---|
| cc-bricks | cob(co-bricks) 기반 브릭 생성 가이드. kobic Clean Architecture feature 모듈 11종 + 그린필드 프로젝트 초기 세팅(project-init |
| cc-compass | 코코드 스킬 저장소 나침반 — 작업 유형(워크플로우/도구/규칙/레퍼런스)에 따라 알맞은 플러그인·커맨드·스킬로 안내 |
| cc-coui | CoUI 컴포넌트 라이브러리 (크로스플랫폼 컴포넌트 128종) + 조합/확장 가이드 |
| cc-dev | 개발 사이클 자동화 (이슈 사이클, 버그 사이클, 세션, ZenHub, Agent Teams) |
| cc-flutter | Flutter 개발 핵심 (UI 패턴, Feature 생성, BLoC, 테스트) |
| cc-flutter-docs | Flutter 토픽별 레퍼런스 스킬 모음 (공식 문서 기반, 21개 스킬) |
| cc-pixel-loop | Figma + Marionette + Dart MCP를 활용한 픽셀 퍼펙트 Flutter UI 에이전틱 루프 (Read → Write → Reload → Capture → Comp |
| cc-quality | 코드 품질 (코드 리뷰, 체크리스트, 버그 리포트, QA Health Score) |
| cc-security | 보안 통합 — API/앱 보안, 보안 감사, CI 시크릿, 결제/IAP 엔드포인트 보안, 도서 PDF DRM (구 cc-uiux-security 확장) |
| cc-serverpod | Serverpod 백엔드 — 모델/엔드포인트 생성, 마이그레이션 + 심화 패턴(아키텍처, 인증, 캐싱, DB, IAP, 테스트; 구 cc-backend 통합) |
| cc-spec | 스펙 명확성 검증 (소크라테스식 인터뷰, Seed spec, 모호성 스코어링, contrarian/simplifier 에이전트, 3단계 평가) |
설치#
claude plugins install coco-de/skills/plugins/cc-designer