cc-blueprint

피그마 디자인·화면 개발 워크플로우 — CoUI Figma 라이브러리로 페이지 저작(/design), 프레젠테이션 온리 화면 개발 + 위젯북(/build), Figma↔Widgetbook 대조 피드백 루프(/sync)

cc-blueprint#

피그마 디자인·화면 개발 워크플로우 플러그인 — CoUI(coui_core SSOT) 컴포넌트를 매개로 PRD → Figma 페이지 디자인 저작 → 프레젠테이션 온리 화면 개발(위젯북 비주얼 회귀 포함) → 기획·디자인 피드백 루프를 AI 에이전트가 무인 수행하게 한다.

Skills#

이름	설명
coui-library-update	CoUI 새 버전의 컴포넌트 변경(신규·삭제/대체·축/프로퍼티 추가·재설계·기본값 변경)을 감지→분류→영향 조사→제품 파일 반영→sync 재검증 순서로 흡수하고, 변경 유형별 대응
design-self-check	Figma 저작 결과를 작업규칙에 기계 대조해 L0(재작업 필수)/L1(경고)/L2(위생) 판정표와 위반 노드 목록·수정 지시를 남깁니다. /cc-blueprint:design 저
widgetbook-wiring	build 산출 화면을 위젯북 use_case(상태 4종 dropdown Knob·designLink 결합)와 골든 스냅샷(상태 4종×대표 뷰포트)으로 배선해, 등재 목록·스냅샷

Commands#

이름	설명
/cc-blueprint:build — Figma 시안에서 화면 코드까지 (데이터레이어 없이)	레지스트리에 등재된 Figma 프레임을 데이터레이어 없는 기능모듈(Page·Widget·BLoC + 도메인 계약 인터페이스 + mock 주입)로 구현해, 위젯북 use_case 등
/cc-blueprint:design — 스펙에서 Figma 시안까지	스펙/PRD를 CoUI Figma 라이브러리 인스턴스만으로 제품 페이지 프레임으로 저작해, 프레임 node URL 목록·화면 레지스트리 등재 행·DDR(디자인 결정 기록)·self
/cc-blueprint:sync — 디자인과 구현이 어긋나지 않게	Figma 화면 레지스트리와 Widgetbook use_case 를 집합 대조해 L0(PR 차단)/L1(경고)/L2(위생) 판정과 '디자인만 있음/코드만 있음/어긋남' 3분류 재작

Rules#

이름	설명
CoUI Figma 라이브러리 소비 규약	cc-blueprint 가 Figma 에서 제품 화면을 저작할 때 쓰는 부품의 출처와 사용 방식을 고정한다.
Figma 작업규칙 SoT — 제품 화면 저작	cc-blueprint 의 모든 Figma 저작(`/cc-blueprint:design`)과 검증(`design-self-check`,

관련 플러그인#

플러그인	설명
cc-bricks	cob(co-bricks) 기반 브릭 생성 가이드. kobic Clean Architecture feature 모듈 11종 + 그린필드 프로젝트 초기 세팅(project-init
cc-coui	CoUI 컴포넌트 라이브러리 (크로스플랫폼 컴포넌트 128종) + 조합/확장 가이드
cc-designer	디자인 실무 레퍼런스 + 의사결정 스킬 (UI 디자인, 인터랙션 디자인, 디자인 시스템, 디자인 옵스, 비주얼 크리틱). owl-listener/designer-skills에서 v
cc-dev	개발 사이클 자동화 (이슈 사이클, 버그 사이클, 세션, ZenHub, Agent Teams)
cc-e2e	flutter-skill 탐색 → Gherkin 초안 → Patrol 박제로 이어지는 E2E 시나리오 저작 파이프라인
cc-flutter	Flutter 개발 핵심 (UI 패턴, Feature 생성, BLoC, 테스트)
cc-marionette	Marionette MCP 래퍼 — CoUI 컴포넌트에 맞춘 위젯 트리 단위 Flutter 자동화 (Widgetbook 회귀 테스트, 커스텀 인터랙티브 위젯 감지, 인프로세스 탭/
cc-mcp-toolkit	mcp_flutter / mcp_toolkit 래퍼 (Arenukvern) — Dynamic Tools Registration 기반 앱 내부 MCP. 실행 중인 Flutter 앱이
cc-pixel-loop	Figma + Marionette + Dart MCP를 활용한 픽셀 퍼펙트 Flutter UI 에이전틱 루프 (Read → Write → Reload → Capture → Comp
cc-product	통합 제품개발 파이프라인 (Discovery → Specification → Planning → Design → Scaffold → Epic → Development → Launc
cc-quality	코드 품질 (코드 리뷰, 체크리스트, 버그 리포트, QA Health Score)
cc-serverpod	Serverpod 백엔드 — 모델/엔드포인트 생성, 마이그레이션 + 심화 패턴(아키텍처, 인증, 캐싱, DB, IAP, 테스트; 구 cc-backend 통합)
cc-spec	스펙 명확성 검증 (소크라테스식 인터뷰, Seed spec, 모호성 스코어링, contrarian/simplifier 에이전트, 3단계 평가)

설치#

claude plugins install coco-de/skills/plugins/cc-blueprint