Menü
Google Stitch SDK로 UI 시안 생성 및 React 변환 워크플로우.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| 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 원본은 삭제 (코드에 포함 안 함)
AI 프롬프트 템플릿 중앙 관리. 변수 플레이스홀더, 태그 규칙, 프롬프트 주입 방지.
DB 컬럼 ↔ TypeScript 타입 1:1 매핑 강제. enum 값 고정, nullable 규칙.
ZPD 기반 적응적 모드 전환 (Grill-Me → Guide-Me → Quick-Me). 3회 오답 감지, 모드 복귀 로직.
Vercel 배포 전 체크리스트. 환경변수, API 키 노출 방지, OIDC 설정.
수학 오개념 5유형 분류 패턴. AI 응답에 [MISCONCEPTION_TYPE] 태그 강제.
API 라우트 응답 포맷 통일. 성공/실패 구조, HTTP 상태코드, 에러 코드 강제.