Design Pipeline

Name: Design Pipeline
Author: sodam-ai

ASecurity

Figma 디자인을 shadcn/ui 코드로 만들고 실제 브라우저 검증(Playwright+axe-core+3뷰포트)을 통과해야만 완료로 표시하는 파이프라인. "Figma", "디자인 코드로", "컴포넌트 만들어", "shadcn" 등 UI 생성 요청 시 사용.

7 stars
0 votes
0 copies
1 view
Added September 4, 2026

developmentapi

Works with

Security analysis

A100/100

Scanned September 4, 2026

npx -y skills add sodam-ai/SoDam-Design-Kit --skill design-pipeline --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Design Pipeline?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Design Pipeline

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/sodam-ai-design-pipeline/badge)](https://www.skillsdirectory.com/skills/sodam-ai-design-pipeline)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
name: design-pipeline
description: Figma 디자인을 shadcn/ui 코드로 만들고 실제 브라우저 검증(Playwright+axe-core+3뷰포트)을 통과해야만 완료로 표시하는 파이프라인. "Figma", "디자인 코드로", "컴포넌트 만들어", "shadcn" 등 UI 생성 요청 시 사용.
---

# design-pipeline

`.PRD/04_PROJECT_SPEC.md`의 절대 규칙(DO NOT/ALWAYS DO)을 그대로 따릅니다.

## 핵심 규칙 (요약 — 전문은 04_PROJECT_SPEC.md)
- 컴포넌트 1개 단위로 작게 시작
- component-map.json 재사용 우선, Figma 구조 데이터 사용(스크린샷 추측 금지)
- 검증 순서 고정: 생성 → dev server 자동 기동 → Playwright 렌더 → axe-core → 3뷰포트 → Lighthouse(참고)
- PASS 조건 4가지(02_DATA_MODEL.md 단일 출처): 렌더 성공·콘솔 에러 0·axe critical/serious 0·3뷰포트 스크린샷 존재
- FAIL 시 실패 사유를 다음 시도에 주입, 최대 3회, 2연속 FAIL만 확정
- 표시(presentation) 코드만 수정 — 로직·인증·저장·API 파일 금지

## 관련 명령
- `/sodam-design-kit:setup`
- `/sodam-design-kit:pipeline`