메뉴
빅테크 스타일(Stripe, Vercel, Apple) UI 개발. 플래닝 -> 구현까지 한 번에. "프론트엔드", "UI 만들어", "페이지 만들어" 키워드에 활성화.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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
구현 완료 후: