name	stitch-design
description	Google Stitch SDK로 UI 시안 생성 및 React 변환 워크플로우.
metadata	{"filePattern":["*/scripts/generate-mockups","*/stitch"],"bashPattern":["stitch","mockup"]}

Stitch 디자인 워크플로우

export STITCH_API_KEY="..."
npx tsx scripts/generate-mockups.ts

Stitch 프롬프트 → HTML/PNG 생성 → 디자인 검토
  → UI-SPEC.md에 결정 기록 → shadcn/ui 컴포넌트로 구현
  → Stitch 원본은 삭제 (코드에 포함 안 함)

Más de este repositorio

mismo repositorio

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

Stitch 프롬프트 → HTML/PNG 생성 → 디자인 검토
  → UI-SPEC.md에 결정 기록 → shadcn/ui 컴포넌트로 구현
  → Stitch 원본은 삭제 (코드에 포함 안 함)