// 빅테크 스타일(Stripe, Vercel, Apple) UI 개발. 플래닝 -> 구현까지 한 번에. "프론트엔드", "UI 만들어", "페이지 만들어" 키워드에 활성화.
| name | frontend |
| description | 빅테크 스타일(Stripe, Vercel, Apple) UI 개발. 플래닝 -> 구현까지 한 번에. "프론트엔드", "UI 만들어", "페이지 만들어" 키워드에 활성화. |
빅테크 스타일(Stripe, Vercel, Apple)의 프론트엔드 UI를 플래닝 -> 구현까지 한 번에 진행합니다.
$frontend [요청사항]
|
1. 디자인 규격 작성 (플래닝)
|
2. 사용자 확인
|
3. 구현
|
4. 결과 검증
| 스타일 | 특징 | 적합한 용도 |
|---|---|---|
| Stripe | 그라데이션, 밝은 톤, 미묘한 애니메이션 | 결제, SaaS, 랜딩 |
| Vercel | 다크모드, 미니멀, 모노톤 | 개발자 도구 |
| Apple | 넓은 여백, 타이포 강조 | 제품 소개 |
| Linear | 다크, 보라색 악센트 | 생산성 앱 |
| Notion | 밝은 톤, 아이콘 활용 | 문서/협업 |
## [프로젝트명] 디자인 규격
### 스타일: [선택한 스타일]
### 컬러
- Primary: #[hex]
- Background: #[hex]
- Text: #[hex]
### 타이포
- Display: [폰트] / [크기]
- Body: [폰트] / [크기]
### 컴포넌트
1. [컴포넌트1]: [설명]
2. [컴포넌트2]: [설명]
npm install tailwindcss @tailwindcss/typography
npm install clsx tailwind-merge
npm install framer-motion
npm install lucide-react
npx shadcn@latest init
구현 완료 후:
Nano Banana 2로 이미지 생성/편집. 블로그 이미지, 썸네일, 아이콘, 다이어그램 등. "이미지 생성", "그려줘", "만들어줘" 키워드에 활성화.
TypeScript 및 빌드 에러를 점진적으로 수정. "빌드 에러", "build error", "컴파일 에러" 키워드에 활성화.
변경사항 커밋, 푸시, PR 생성을 한 번에 수행. "커밋", "PR", "푸시" 키워드에 활성화.
컨텍스트 관리 가이드. Codex 세션에서의 효율적인 컨텍스트 관리 방법 안내. "컨텍스트", "세션 관리" 키워드에 활성화.
현재 프로젝트의 코드 변경사항을 분석하여 /docs/ 폴더에 문서를 자동 생성합니다. "문서화", "docs", "문서 생성" 키워드에 활성화.
agent-browser CLI를 활용한 E2E 테스트 자동화. 스냅샷 기반 접근성 트리와 ref 시스템으로 안정적인 브라우저 테스트를 수행합니다. "E2E", "브라우저 테스트", "agent-browser" 키워드에 활성화.