Menu
Figma 디자인 구현 + 검증 파이프라인. figma-to-code 후 design-check 순차 실행. "/figma-pipeline", "피그마 파이프라인" 등의 요청 시 사용
Based on SOC occupation classification
| name | figma-design-pipeline |
| description | Figma 디자인 구현 + 검증 파이프라인. figma-to-code 후 design-check 순차 실행. "/figma-pipeline", "피그마 파이프라인" 등의 요청 시 사용 |
| disable-model-invocation | false |
| argument-hint | <Figma URL> <컴포넌트 파일 경로> |
argument: $ARGUMENTS
이 커맨드는 Figma 디자인을 코드로 구현한 뒤 디자인 검증까지 자동으로 수행하는 파이프라인입니다.
figma-to-code → design-check 순서로 실행됩니다.
$ARGUMENTS에서 Figma URL과 컴포넌트 파일 경로를 파싱합니다.
파싱:
node-id=(\d+-\d+) 패턴 추출-를 :로 치환하여 MCP 호출용 nodeId 생성사전 검증:
FIGMA_TOKEN 환경변수 존재 확인 (design-check Phase 2에서 Figma REST API 스크린샷 캡처에 필요).claude/skills/figma-to-code/SKILL.md를 읽고 해당 워크플로우 전체(Phase 1~6)를 실행합니다.
동일한 Figma URL과 컴포넌트 경로를 인자로 전달합니다.
완료 게이트:
.claude/skills/design-check/SKILL.md를 읽고 해당 워크플로우 전체(Phase 1~7)를 실행합니다.
동일한 Figma URL과 컴포넌트 경로를 인자로 전달하여 디자인 검증을 수행합니다.
양 단계의 결과를 종합하여 출력합니다:
Figma Design Pipeline 완료: {ComponentName}
[Step 2] figma-to-code 결과:
- 생성된 파일: {컴포넌트 경로}
- 사용된 토큰: {색상, 타이포 등 요약}
- 사용된 컴포넌트: {목록}
[Step 3] design-check 결과:
- 정량: {diffRatio}% ({pass/fail})
- 정성: {Critical} Critical, {Major} Major, {Minor} Minor
- 보고서: {보고서 경로}
반복 개선:
design-check에서 Critical 또는 Major 이슈가 발견된 경우:
| 상황 | 대응 |
|---|---|
FIGMA_TOKEN 미설정 | 토큰 생성 안내: https://www.figma.com/developers/api#access-tokens |
| Figma URL 형식 오류 | 올바른 URL 형식 예시 제공 |
| figma-to-code 실패 | 에러 내용 출력, design-check 진행하지 않음 |
| design-check 실패 | 에러 내용 출력, 가능한 경우 부분 결과 표시 |
/figma-pipeline https://figma.com/design/abc123/MyProject?node-id=1-2 src/features/widget-builder/ui/ColumnHeader.tsx
FIGMA_TOKEN 확인 완료ColumnHeader.tsx 코드 생성Figma Design Pipeline 완료: ColumnHeader
[Step 2] figma-to-code 결과:
- 생성된 파일: src/features/widget-builder/ui/ColumnHeader.tsx
- 사용된 토큰: text-text-primary, bg-surface-primary-default, rounded-strong
- 사용된 컴포넌트: @exem-fe/react (Button), @exem-fe/icon (FilterIcon)
[Step 3] design-check 결과:
- 정량: 1.8% (PASS)
- 정성: 0 Critical, 0 Major, 1 Minor
- 보고서: artifacts/design-check/ColumnHeader-report.md
React 코드 품질 분석. git diff 기반으로 변경된 코드의 클린 코드 점수 평가. "코드 리뷰", "품질 검사" 등의 요청 시 사용
AI 코드 생성 후 불필요한 코드 정리 스킬. git diff로 변경된 TS/JS 파일을 분석하여 사용되지 않는 코드를 자동 제거한다. 트리거: unused 코드 정리, 불필요한 코드 삭제, dead code 제거, 코드 클린업, AI 작업 후 정리 요청 시
순환 복잡도(Cyclomatic Complexity)가 높은 함수를 인간의 논리적 사고 흐름에 맞게 재구성하는 스킬. "복잡한 함수 정리해줘", "이 함수 읽기 어려워", "순환 복잡도 낮춰줘", "리팩토링 해줘" 등의 요청에 사용. 단순 코드 추출이 아닌 논리적 재구성을 수행하며, 성능보다 가독성과 수정 용이성을 우선시함.
Story 파일에서 컴포넌트 스크린샷 캡처. "/screenshot", "스크린샷 캡처" 등의 요청 시 사용
Deep reasoning skill using Claude Code's Agent Teams. Spawns multiple personas with enforced minimum depth, includes a challenge round where teammates critique each other, and iterates on low-confidence answers. Use when the user prefixes with "deep think", "딥씽크", "깊게 생각해", or requests thorough analysis. Best for complex architecture, debugging, algorithmic, or multi-domain problems. NOT for simple lookups. Requires: CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1
디자인 검증 자동화. Figma vs 구현 비교 리포트 생성. "/design-check", "디자인 검증" 등의 요청 시 사용