jh941213 프론트엔드 UI 개발
빅테크 스타일(Stripe, Vercel, Apple)의 프론트엔드 UI를 플래닝 → 구현까지 한 번에 진행합니다.
워크플로우
/frontend [요청사항]
↓
1. 디자인 규격 작성 (플래닝)
↓
2. 사용자 확인
↓
3. frontend-developer 컨텍스트에서 구현
↓
4. 결과 검증
Phase 1: 플래닝
디자인 스타일 선택
| 스타일 | 특징 | 적합한 용도 |
|---|---|---|
| Stripe | 그라데이션, 밝은 톤, 미묘한 애니메이션 | 결제, SaaS, 랜딩 |
| Vercel | 다크모드, 미니멀, 모노톤 | 개발자 도구 |
| Apple | 넓은 여백, 타이포 강조 | 제품 소개 |
| Linear | 다크, 보라색 악센트 | 생산성 앱 |
| Notion | 밝은 톤, 아이콘 활용 | 문서/협업 |
규격서 템플릿
## [프로젝트명] 디자인 규격
### 스타일: [선택한 스타일]
### 컬러
- Primary: #[hex]
- Background: #[hex]
- Text: #[hex]
- Border: #[hex]
- Accent: #[hex]
### 타이포
- Display: [폰트] / [크기]
- Body: [폰트] / [크기]
### 컴포넌트
1. [컴포넌트1]: [설명]
2. [컴포넌트2]: [설명]
### 레이아웃
- Max width: [px]
- 주요 구조: [설명]
Phase 2: 구현
이 스킬은 frontend-developer 컨텍스트로 실행됩니다 (frontmatter의 context: fork + agent 지정). 별도 에이전트를 다시 호출하지 않고 그대로 구현을 진행합니다.
구현 순서
- CSS 변수 (globals.css)
- 유틸리티 (lib/utils.ts)
- UI 컴포넌트 (components/ui/)
- 레이아웃 (components/layout/)
- 기능 컴포넌트
- 페이지 조립
- 애니메이션
필수 의존성
npm install tailwindcss @tailwindcss/typography
npm install clsx tailwind-merge
npm install framer-motion
npm install lucide-react
npx shadcn@latest init
Phase 3: 검증
구현 완료 후:
- TypeScript 에러 없음
- 빌드 성공
- 반응형 확인
- 접근성 확인
사용 예시
/frontend 로그인 페이지 만들어줘. Vercel 스타일로, 이메일/비밀번호 입력 폼과 소셜 로그인 버튼 포함.
/frontend 대시보드 만들어줘. Stripe 스타일로, 사이드바 + 메인 콘텐츠 영역 + 차트 카드들.