菜单
웹 서비스 디자인 시스템을 설계하고 Tailwind CSS 코드로 구현하는 스킬. 컬러 팔레트, 타이포그래피, 컴포넌트 variant, 페이지 레이아웃을 정의한다. '디자인 해줘', '디자인 시스템 만들어줘', '색상 팔레트', 'UI 설계' 요청 시 반드시 이 스킬을 사용할 것.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
웹 서비스 아이디어를 리서치하고 제안하는 스킬. 인기 웹 트렌드 조사, 시장 분석, 경쟁 서비스 분석 후 실현 가능한 아이디어를 제시한다. '아이디어 줘', '뭐 만들까', '트렌드 조사', '어떤 서비스 만들면 좋을까' 요청 시 반드시 이 스킬을 사용할 것.
구현된 웹 서비스의 기능, UX, 디자인, 접근성, SEO를 종합 검수하는 스킬. '앱 검수', '기능 점검', 'UX 검토', '디자인 QA', '출시 전 점검' 요청 시 반드시 이 스킬을 사용할 것.
웹 서비스 기획서(PRD)를 작성하는 스킬. 유저 스토리, 기능 목록, 페이지 구조, FSD 모듈 맵, API 엔드포인트를 정의한다. '기획해줘', 'PRD 작성', '기능 정의해줘', '페이지 흐름 설계해줘' 요청 시 반드시 이 스킬을 사용할 것.
| name | design-system |
| description | 웹 서비스 디자인 시스템을 설계하고 Tailwind CSS 코드로 구현하는 스킬. 컬러 팔레트, 타이포그래피, 컴포넌트 variant, 페이지 레이아웃을 정의한다. '디자인 해줘', '디자인 시스템 만들어줘', '색상 팔레트', 'UI 설계' 요청 시 반드시 이 스킬을 사용할 것. |
검증 항목 (모두 PASS 필수):
1. postcss.config.mjs — '@tailwindcss/postcss' 플러그인
2. src/app/globals.css — @import 'tailwindcss'
3. src/app/layout.tsx — import './globals.css'
4. tsconfig.json — path alias 설정
src/app/globals.css CSS 변수 업데이트src/shared/config/theme.ts 업데이트_workspace/03_design_system.md 저장| Step | Agent |
|---|---|
| 0-6 | design-architect |