cc-blueprint

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

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

Skills#

이름	설명
coui-library-stretch-audit	Figma에서 CoUI 부품을 늘렸을 때 내부 요소가 잘리거나 크기를 따라오지 않을 때 사용합니다. 실제 크기를 측정해 결함 여부를 확인하고 CoUI 라이브러리에서 고칠 위치를 정
coui-library-update	CoUI 라이브러리의 새 버전을 제품 Figma 파일에 반영할 때 사용합니다. 변경된 부품과 영향을 받는 화면을 찾고, 갱신 후 디자인 일치 여부와 재작업 대상을 확인합니다.
design-self-check	Figma 화면을 작성한 뒤나 개발에 넘기기 전에 설계 규칙 준수 여부를 확인할 때 사용합니다. 요구사항, 브랜드, CoUI 사용 방식과 화면 간 일관성을 검사하고 수정할 항목을
widgetbook-wiring	구현한 화면을 Widgetbook과 화면 비교 테스트에 등록할 때 사용합니다. 상태별 미리보기, Figma 연결과 스냅샷을 구성해 화면을 확인하고 변경 전후를 비교할 수 있게 합니

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#

이름	설명
AI 슬롭 지문 — 노드 값으로 세는 패턴	작업규칙(L0/L1/L2)을 다 지키고 마감 판정( `figma-quality-rubric.md` )까지 통과해도, 화면이 어느 서비스에 넣어도 어색하지 않은 모습 으로
CoUI Figma 라이브러리 소비 규약	cc-blueprint 가 Figma 에서 제품 화면을 저작할 때 쓰는 부품의 출처와 사용 방식을 고정한다.
Figma 브랜드 선택·저작·바인딩	디자이너가 CoUI 라이브러리에 이미 게시한 팔레트( `Demo {이름}` 과 `CoUI` ) 중 이 제품에 맞는 하나를 고르고 ,
Figma 시안 품질 판정 — wireframe-level / needs-polish / shippable	`design-self-check` 는 규칙을 지켰는지 (L0/L1/L2)를, 이 문서는 얼마나 마감됐는지 를 가른다. 둘은 다른 질문이라 게이트에 섞지 않는다.
Figma 작업규칙 SoT — 제품 화면 저작	cc-blueprint 의 모든 Figma 저작(`/cc-blueprint:design`)과 검증(`design-self-check`,
Figma 조립 패턴 — 부품을 놓은 뒤 화면을 짓는 법	부품 선택(consumption)과 등급(workflow §4)을 지켜도 같은 부품을 페이지마다 다르게 조립하면 마감이 갈린다. 이 문서는 그 저작 선택을 한 번만 정한다 :
방향 — 톤을 정하고, 다른 구조를 먼저 보고, 제품끼리 다르게	작업규칙 · 조립 패턴 · 슬롭 지문을 다 지켜도 같은 디자인 시스템으로 만든 제품은 한곳으로 모인다 — 부품과 간격이 같으므로,

References#

이름	설명
recipes — 결정적 부분의 실행 코드 (use_figma)	같은 입력이면 같은 Figma 결과가 나와야 하는 단계(표지 · 프로토타입 링크 · 브랜드 특성화 · 브랜드 바인딩 · 슬롭 지문 측정 · 한글 어절 줄바꿈 · 프레임 모드 읽기

관련 플러그인#

플러그인	설명
cc-bricks	cob(co-bricks) 기반 브릭 생성 가이드. kobic Clean Architecture feature 모듈 11종 + 그린필드 프로젝트 초기 세팅(project-init
cc-coui	CoUI 컴포넌트 라이브러리 (크로스플랫폼 컴포넌트 128종) + 조합/확장 가이드
cc-coui-sync	CoUI 디자인 시스템의 Figma↔코드 동기화 — 캔버스 드리프트 감지(/absorb), 플러그인이 그리는 코드의 출처 측정(/status), 디자이너 결정의 코드 흡수 전 과정
cc-coui-upgrade	앱이 참조하는 coui 버전 올리기(Flutter 앱·Jaspr 웹 앱) — 형제 패키지를 한 커밋으로 고정하는 핀 계산·검사(coui_pin.py), 홉 계획, 시각 회귀 게이트
cc-designer	디자인 실무 레퍼런스 + 의사결정 스킬 (UI 디자인, 인터랙션 디자인, 정보 구조, 디자인 시스템, 디자인 옵스, 비주얼 크리틱). owl-listener/designer-ski
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-product-auto	서비스 채팅·기획 파일을 HTML PRD → CoUI Figma → cob 조립 → 화면 개발 → app·console·widgetbook GitHub Pages 배포로 연결하는
cc-quality	코드 품질 (코드 리뷰, 체크리스트, 버그 리포트, QA Health Score)
cc-serverpod	Serverpod 백엔드 — 모델/엔드포인트 생성, 마이그레이션 + 심화 패턴(아키텍처, 인증, 캐싱, DB, IAP, 테스트; 구 cc-backend 통합)
cc-spec	Jev 판정 게이트 — Seed spec 을 쓰고 TypeSafe Jev(판정 전용 모델)로 모호성·3관점 패널·드리프트를 보정 확률로 판정해 잠금

설치#

curl -fsSL https://skills.cocode.im/install.sh | bash -s -- --plugin cc-blueprint

도구별 설치 안내 · 설치 옵션과 업데이트