메뉴
UI/UX product design full-cycle methodology — four-stage workflow from requirements research to prototype delivery, design system building guide (tokens → components → patterns), and output specification standards.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Generate curated color token systems with dark/light mode support. Pick from 5 battle-tested palettes (Neutral Modern, Linear Dark, Claude Warm, Cursor Code, Lovable Pop) or generate a custom palette from a base color. Output is a ready-to-paste tokens.css block with semantic variables, automatic dark-mode switching, and WCAG AA contrast validation.
Development methodology selector and executor. Auto-selects the appropriate development method (TDD / BDD / API-First / Security-First / Direct Implementation) based on task context, or use the specified method directly. Supports direct invocation: `/dev-method tdd`, `/dev-method bdd`, etc.
Git workflow covering branch management, normalized commits, remote sync, with staged operation flows. Supports git commit, push, pull, branch, smart commit splitting, AI author tagging, safe branch operations.
通用网络小说创作技能 - 支持对小说项目进行初始化、做大纲/蓝图编排、故事构造与钩子编织、章节正文创作，以及文本级+故事级双重闭环质检。
End-to-end brand visual identity design methodology — a six-stage workflow from brand detective to system architect. Covers brand soul discovery, visual strategy, creative exploration, system building, multi-touchpoint narration, and guardian delivery.
Commercial and e-commerce image generation methodology — three-layer prompt engineering framework (subject-scene / style-texture / technical-constraints), scenario-based template library, and iterative optimization strategies for Chinese e-commerce and social media platforms.
| name | product-ux-workflow |
| description | UI/UX product design full-cycle methodology — four-stage workflow from requirements research to prototype delivery, design system building guide (tokens → components → patterns), and output specification standards. |
| when_to_use | Trigger when the user mentions: UI设计, UX设计, 产品设计, 交互设计, 设计系统, design system, wireframe, prototype, user flow, information architecture |
A complete UI/UX design methodology covering web and app from zero to one. Design philosophy: usability > beauty. Every pixel has a reason. Every click should be effortless.
Before opening any design tool, establish a solid foundation of WHAT and WHY.
Structure content and design the interaction logic before any visual styling.
Map the complete journey:
Design each path step-by-step. Every screen must answer: "What does the user do here, and where do they go next?"
Focus on layout and information priority. No colors, no typography, no real content.
For every component/system state:
| State | Description |
|---|---|
| Normal | Default appearance when data is loaded and ready |
| Loading | Content is being fetched — skeleton, spinner, shimmer |
| Empty | No data available — helpful message + CTA to populate |
| Error | Something went wrong — clear error message + recovery action |
| Edge | Boundary conditions — long text, many items, rapid clicks |
Apply visual treatment to the approved wireframes.
For each core component:
| Breakpoint | Layout | Behavior |
|---|---|---|
| Desktop (≥1024px) | Multi-column, full navigation | Full feature set |
| Tablet (768-1023px) | 2-column condensed | Collapsed sidebar, simplified cards |
| Mobile (<768px) | Single column, bottom nav | Full-width, stacked, touch-optimized |
Convert designs into developer-ready deliverables.
For every element, specify:
Record the rationale behind each significant choice:
handoff/
├── designs/ # Figma file / screenshots with annotations
├── assets/ # Exported icons, images, illustrations
├── specs/ # Dimension and behavior specs
├── tokens.css # Design token CSS variables
└── prototypes/ # Interactive prototype link
Build in layers, bottom-up.
| Token Category | Items |
|---|---|
| Color | Primary, secondary, accent, neutral, semantic (success/warning/error/info) + dark mode equivalents |
| Typography | Font family (primary, mono), weight scale, type scale (h1-h6, body, caption), line-height scale |
| Spacing | 4px base grid → 4/8/12/16/24/32/48/64/96 spacing scale |
| Shadows | Elevation levels (0=flat, 1=card, 2=dropdown, 3=modal, 4=toast) |
| Radius | None(0), sm(4), md(8), lg(12), xl(16), full(9999) |
| Breakpoints | Mobile(375), tablet(768), desktop(1024), wide(1440) |
Every deliverable must contain:
## [Component/Screen Name]
### Design Asset
- [Figma / Screenshot / Wireframe]
### Interaction Specs
- Normal: [description]
- Hover/Focus: [description]
- Loading: [description]
- Empty: [description]
- Error: [description]
### Design Decision
- Why this layout/component/color: [reason]
- Design system compliance: [yes/no, if no explain why]
- Alternatives considered: [list with rejection reasons]
### Dev Annotations
- Key dimensions: [width/height/spacing]
- Responsive behavior: [breakpoint rules]
- Animation: [duration/easing]