spec
SPEC 기반 개발 - 인터뷰
Anthropic 엔지니어 Thariq의 SPEC 기반 개발 워크플로우입니다.
트리거
- "스펙", "spec", "명세서", "인터뷰", "기능 설계"
워크플로우
1단계: SPEC.md 확인 또는 생성
현재 디렉토리에 SPEC.md가 있는지 확인합니다.
- 있으면: 해당 파일을 읽고 인터뷰 시작
- 없으면: 사용자에게 기본 아이디어를 물어본 후 초안 생성
2단계: 심층 인터뷰
반드시 AskUserQuestion 도구를 사용하여 다음 영역에 대해 질문합니다:
-
기술적 구현
- 어떤 기술 스택을 사용할지
- 기존 코드베이스와의 통합 방법
- 성능 요구사항
-
UI & UX
- 사용자 흐름
- 디자인 패턴
- 접근성 요구사항
-
우려 사항
- 보안 고려사항
- 확장성 문제
- 유지보수 복잡도
-
트레이드오프
- 시간 vs 품질
- 단순함 vs 기능성
- 유연성 vs 성능
3단계: 질문 규칙
- 뻔한 질문 금지: "어떤 언어 쓸까요?" 같은 명확한 건 스킵
- 깊이 있게: 40개 이상 질문도 가능
- 연속 인터뷰: 완료될 때까지 계속 질문
- 한 번에 1-2개 질문: 사용자가 답변하기 쉽게
4단계: 명세서 작성
인터뷰 완료 후 SPEC.md 파일을 상세하게 업데이트합니다:
# [기능명] 명세서
## 개요
[한 문장 설명]
## 목표
- [ ] 목표 1
- [ ] 목표 2
## 기술 스택
- ...
## 상세 요구사항
### 기능적 요구사항
1. ...
### 비기능적 요구사항
1. ...
## UI/UX 명세
- ...
## API 설계 (해당 시)
- ...
## 데이터 모델 (해당 시)
- ...
## 보안 고려사항
- ...
## 테스트 계획
- ...
## 마일스톤
1. [ ] 단계 1
2. [ ] 단계 2
## 열린 질문 / 결정 필요
- ...
5단계: 안내
명세서 작성 후 사용자에게 안내:
"명세서가 완성되었습니다. 새 세션에서 다음 명령어로 구현을 시작하세요:"
SPEC.md 읽고 구현 시작해줘구현 완료 후 검증:
/spec-verify
핵심 원칙
- 컨텍스트 분리: 인터뷰 세션 ≠ 구현 세션
- 사용자 컨트롤: 질문을 통해 사용자가 방향을 결정
- 상세한 문서화: 다음 세션에서 바로 실행 가능한 수준
More from jh941213/my-claude-code-asset
shadcn-ui
|
34frontend
|
23stitch-react
Stitch 스크린을 React 컴포넌트 시스템으로 변환합니다 — 디자인 토큰 추출, 컴포넌트 분해, TypeScript 타입 생성, 자동 검증 포함. Triggers on: Stitch React, 컴포넌트 변환, React 변환, HTML to React. NOT for: 새 React 앱 생성, API 구현.
23stitch-enhance-prompt
모호한 UI 아이디어를 Stitch에 최적화된 상세 프롬프트로 변환합니다 — 구체성 향상, UI/UX 키워드 추가, 디자인 시스템 컨텍스트 주입. Triggers on: 프롬프트 향상, Stitch 프롬프트, UI 아이디어, 프롬프트 개선. NOT for: 직접 코딩, React 구현.
22ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
18react-patterns
|
17