Menu
Google Stitch SDK로 UI 시안 생성 및 React 변환 워크플로우.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
AI 프롬프트 템플릿 중앙 관리. 변수 플레이스홀더, 태그 규칙, 프롬프트 주입 방지.
DB 컬럼 ↔ TypeScript 타입 1:1 매핑 강제. enum 값 고정, nullable 규칙.
ZPD 기반 적응적 모드 전환 (Grill-Me → Guide-Me → Quick-Me). 3회 오답 감지, 모드 복귀 로직.
Vercel 배포 전 체크리스트. 환경변수, API 키 노출 방지, OIDC 설정.
수학 오개념 5유형 분류 패턴. AI 응답에 [MISCONCEPTION_TYPE] 태그 강제.
API 라우트 응답 포맷 통일. 성공/실패 구조, HTTP 상태코드, 에러 코드 강제.
| name | stitch-design |
| description | Google Stitch SDK로 UI 시안 생성 및 React 변환 워크플로우. |
| metadata | {"filePattern":["**/scripts/generate-mockups*","**/stitch*"],"bashPattern":["stitch","mockup"]} |
export STITCH_API_KEY="..."
npx tsx scripts/generate-mockups.ts
docs/design/stitch-outputs/에 저장 (.gitignore)docs/ref/UI-SPEC.md에 기록UI-SPEC.md 디자인 토큰을 따름Stitch 프롬프트 → HTML/PNG 생성 → 디자인 검토
→ UI-SPEC.md에 결정 기록 → shadcn/ui 컴포넌트로 구현
→ Stitch 원본은 삭제 (코드에 포함 안 함)