Menu
빅테크 스타일(Stripe, Vercel, Apple) UI 개발. 플래닝 -> 구현까지 한 번에. "프론트엔드", "UI 만들어", "페이지 만들어" 키워드에 활성화.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Nano Banana 2로 이미지 생성/편집. 블로그 이미지, 썸네일, 아이콘, 다이어그램 등. "이미지 생성", "그려줘", "만들어줘" 키워드에 활성화.
Master Python asyncio, concurrent programming, and async/await patterns for high-performance applications. Use when building async APIs, concurrent systems, or I/O-bound applications requiring non-blocking operations.
TypeScript 및 빌드 에러를 점진적으로 수정. "빌드 에러", "build error", "컴파일 에러" 키워드에 활성화.
변경사항 커밋, 푸시, PR 생성을 한 번에 수행. "커밋", "PR", "푸시" 키워드에 활성화.
컨텍스트 관리 가이드. Codex 세션에서의 효율적인 컨텍스트 관리 방법 안내. "컨텍스트", "세션 관리" 키워드에 활성화.
현재 프로젝트의 코드 변경사항을 분석하여 /docs/ 폴더에 문서를 자동 생성합니다. "문서화", "docs", "문서 생성" 키워드에 활성화.
| 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
구현 완료 후: