원클릭으로 Manus에서 모든 스킬 실행

시작하기

figma-design-pipeline

Figma 디자인 구현 + 검증 파이프라인. figma-to-code 후 design-check 순차 실행. "/figma-pipeline", "피그마 파이프라인" 등의 요청 시 사용

Manus에서 실행

스타0

포크0

업데이트2026년 5월 2일 05:34

출처

gihwan-dev

gihwan-dev/resume-with-chatbot

GitHub 저장소 열기 Creator 저장소 보기

설치 명령

다운로드

Manus에서 실행

Codex Command: Figma Design Pipeline

이 커맨드는 Figma 디자인을 코드로 구현한 뒤 디자인 검증까지 자동으로 수행하는 파이프라인입니다. figma-to-code → design-check 순서로 실행됩니다.

워크플로우 (3단계)

Step 1. 입력 파싱 + 사전 검증

$ARGUMENTS에서 Figma URL과 컴포넌트 파일 경로를 파싱합니다.

파싱:

URL에서 node-id=(\d+-\d+) 패턴 추출
-를 :로 치환하여 MCP 호출용 nodeId 생성
파일 경로에서 컴포넌트 이름, FSD 레이어 추출

사전 검증:

FIGMA_TOKEN 환경변수 존재 확인 (design-check Phase 2에서 Figma REST API 스크린샷 캡처에 필요)
미설정 시: 토큰 생성 안내 후 중단 (https://www.figma.com/developers/api#access-tokens)

Step 2. figma-to-code 실행

.Codex/skills/figma-to-code/SKILL.md를 읽고 해당 워크플로우 전체(Phase 1~6)를 실행합니다.

동일한 Figma URL과 컴포넌트 경로를 인자로 전달합니다.

완료 게이트:

대상 파일이 존재하는지 확인
파일 내용이 비어있지 않은지 확인
게이트 실패 시 사용자에게 알리고 중단

Step 3. design-check 실행

.Codex/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 이슈가 발견된 경우:

해당 이슈를 기반으로 코드 수정 제안
사용자 승인 시 코드 수정 수행
design-check만 재실행하여 개선 확인
이슈가 해소될 때까지 반복 (최대 3회)

에러 처리

상황	대응
`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 확인 완료
figma-to-code: Figma 데이터 수집 → 토큰 매핑 → ColumnHeader.tsx 코드 생성
design-check: 스크린샷 캡처 → 비교 → 보고서 생성

출력

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

이 저장소의 다른 Skills

같은 저장소

clean-code-inspector

gihwan-dev/resume-with-chatbot

React 코드 품질 분석. git diff 기반으로 변경된 코드의 클린 코드 점수 평가. "코드 리뷰", "품질 검사" 등의 요청 시 사용

2026-05-020

unused-code-cleaner

gihwan-dev/resume-with-chatbot

AI 코드 생성 후 불필요한 코드 정리 스킬. git diff로 변경된 TS/JS 파일을 분석하여 사용되지 않는 코드를 자동 제거한다. 트리거: unused 코드 정리, 불필요한 코드 삭제, dead code 제거, 코드 클린업, AI 작업 후 정리 요청 시

2026-05-020

commit

gihwan-dev/resume-with-chatbot

컨벤셔널 커밋 메시지 생성. "커밋해줘", "커밋", "변경사항 저장" 등의 요청 시 사용

2026-05-020

complexity-refactor

gihwan-dev/resume-with-chatbot

순환 복잡도(Cyclomatic Complexity)가 높은 함수를 인간의 논리적 사고 흐름에 맞게 재구성하는 스킬. "복잡한 함수 정리해줘", "이 함수 읽기 어려워", "순환 복잡도 낮춰줘", "리팩토링 해줘" 등의 요청에 사용. 단순 코드 추출이 아닌 논리적 재구성을 수행하며, 성능보다 가독성과 수정 용이성을 우선시함.

2026-05-020

component-screenshot

gihwan-dev/resume-with-chatbot

Story 파일에서 컴포넌트 스크린샷 캡처. "/screenshot", "스크린샷 캡처" 등의 요청 시 사용

2026-05-020

deep-think

gihwan-dev/resume-with-chatbot

Deep reasoning skill using Codex'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

2026-05-020

name	figma-design-pipeline
description	Figma 디자인 구현 + 검증 파이프라인. figma-to-code 후 design-check 순차 실행. "/figma-pipeline", "피그마 파이프라인" 등의 요청 시 사용
disable-model-invocation	false
argument-hint	<Figma URL> <컴포넌트 파일 경로>

argument: $ARGUMENTS

Codex Command: Figma Design Pipeline

이 커맨드는 Figma 디자인을 코드로 구현한 뒤 디자인 검증까지 자동으로 수행하는 파이프라인입니다. figma-to-code → design-check 순서로 실행됩니다.

워크플로우 (3단계)

Step 1. 입력 파싱 + 사전 검증

$ARGUMENTS에서 Figma URL과 컴포넌트 파일 경로를 파싱합니다.

파싱:

URL에서 node-id=(\d+-\d+) 패턴 추출
-를 :로 치환하여 MCP 호출용 nodeId 생성
파일 경로에서 컴포넌트 이름, FSD 레이어 추출

사전 검증:

FIGMA_TOKEN 환경변수 존재 확인 (design-check Phase 2에서 Figma REST API 스크린샷 캡처에 필요)
미설정 시: 토큰 생성 안내 후 중단 (https://www.figma.com/developers/api#access-tokens)

Step 2. figma-to-code 실행

.Codex/skills/figma-to-code/SKILL.md를 읽고 해당 워크플로우 전체(Phase 1~6)를 실행합니다.

동일한 Figma URL과 컴포넌트 경로를 인자로 전달합니다.

완료 게이트:

대상 파일이 존재하는지 확인
파일 내용이 비어있지 않은지 확인
게이트 실패 시 사용자에게 알리고 중단

Step 3. design-check 실행

.Codex/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 이슈가 발견된 경우:

해당 이슈를 기반으로 코드 수정 제안
사용자 승인 시 코드 수정 수행
design-check만 재실행하여 개선 확인
이슈가 해소될 때까지 반복 (최대 3회)

에러 처리

상황	대응
`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 확인 완료
figma-to-code: Figma 데이터 수집 → 토큰 매핑 → ColumnHeader.tsx 코드 생성
design-check: 스크린샷 캡처 → 비교 → 보고서 생성

출력

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