重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
npx skills add https://github.com/abhsin/designskills --skill ux-specification将产品需求转化为具体的流程、界面和交互,以便编码代理能够实现。
通过定义产品的外观和行为,弥合产品需求与实现之间的差距。
此技能期望获得:
prd-generation 或用户提供)从 PRD 中提取:
针对每个核心用户故事,定义流程:
需要回答的问题:
针对流程中的每个界面:
针对关键交互:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
如有需要,提出针对性的问题:
使用 Write 工具自动将输出保存到 design/06-ux-spec.md,同时将其呈现给用户。
# UX 规范:[项目名称]
## 概述
[产品及主要用户目标的简要总结]
---
## 信息架构
### 导航结构
[应用名称]
├── [主导航项 1]
│ ├── [子项]
│ └── [子项]
├── [主导航项 2]
└── [主导航项 3]
### 关键用户路径
1. **[路径名称]:** [开始] → [步骤] → [步骤] → [结束]
2. **[路径名称]:** [开始] → [步骤] → [结束]
---
## 用户流程
### 流程 1:[流程名称]
**触发条件:**[什么启动了这个流程]
**用户目标:**[他们试图完成什么]
[开始状态]
↓
[操作/决策]
↓
[界面/状态] ──→ [如果适用,替代路径]
↓
[结束状态]
**步骤:**
1. 用户 [操作]
2. 系统 [响应]
3. 用户 [操作]
4. 系统 [响应]
5. 用户达到 [结束状态]
**错误路径:**
- 如果 [条件]:[发生什么]
- 如果 [条件]:[发生什么]
### 流程 2:[流程名称]
[相同结构]
---
## 界面
### 界面:[界面名称]
**URL/路由:**`/path`
**目的:**[用户在此处完成什么]
**入口点:**[用户如何到达这里]
#### 布局
┌─────────────────────────────────┐
│ [页眉/导航] │
├─────────────────────────────────┤
│ │
│ [主内容区] │
│ [组件] [组件] │
│ │
├─────────────────────────────────┤
│ [页脚/操作] │
└─────────────────────────────────┘
#### 组件
| 组件 | 描述 | 行为 |
|-----------|-------------|----------|
| [名称] | [显示什么] | [如何表现] |
| [名称] | [显示什么] | [如何表现] |
#### 状态
| 状态 | 外观 | 触发条件 |
|-------|------------|---------|
| 默认 | [描述] | 初始加载 |
| 加载中 | [描述] | 数据获取 |
| 空状态 | [描述] | 无数据存在 |
| 错误 | [描述] | 请求失败 |
| 成功 | [描述] | 操作完成 |
#### 操作
| 操作 | 触发条件 | 结果 |
|--------|---------|--------|
| [操作] | [点击/轻触等] | [发生什么] |
| [操作] | [触发条件] | [结果] |
### 界面:[界面名称]
[相同结构]
---
## 组件
### 组件:[组件名称]
**用于:**[界面列表]
**目的:**[它的作用]
#### 属性/输入
| 属性 | 类型 | 描述 |
|------|------|-------------|
| [名称] | [类型] | [控制什么] |
#### 变体
- **[变体 1]:** [描述]
- **[变体 2]:** [描述]
#### 状态
- 默认:[描述]
- 悬停:[描述]
- 激活:[描述]
- 禁用:[描述]
### 组件:[组件名称]
[相同结构]
---
## 交互
### 交互:[名称]
**触发条件:**[用户操作]
**响应:**[系统行为]
**持续时间:**[即时 / 200ms / 异步]
**反馈:**[用户看到/感受到什么]
### 交互:[名称]
[相同结构]
---
## 响应式行为
**断点:**
- 移动端:< 768px
- 平板端:768px - 1024px
- 桌面端:> 1024px
**关键调整:**
- [组件/布局]:[如何变化]
- [组件/布局]:[如何变化]
---
## 设计说明
[可选 — 任何特定的视觉方向、参考资料或约束]
- **风格:**[简约 / 密集 / 趣味 / 等]
- **参考:**[任何灵感或类似产品]
- **约束:**[可访问性、品牌等]
简单项目(1-3 个界面):
中型项目(4-8 个界面):
复杂项目(10+ 个界面):
呈现 UX 规范后,询问:
“准备好用
/prompt-export生成 prompts.md 了吗?还是想先优化任何界面?”
注意: 文件会自动保存到 design/06-ux-spec.md。这将作为开发提示的输入。
每周安装次数
37
仓库
GitHub 星标数
4
首次出现
2026年1月22日
安全审计
安装于
gemini-cli30
codex29
opencode29
cursor27
claude-code27
antigravity21
Turn product requirements into concrete flows, screens, and interactions that coding agents can implement.
Bridges the gap between product requirements and implementation by defining how the product looks and behaves.
This skill expects:
prd-generation or user-provided)Extract from the PRD:
For each core user story, define the flow:
Questions to answer:
For each screen in the flows:
For key interactions:
Ask targeted questions if needed:
Automatically save the output todesign/06-ux-spec.md using the Write tool while presenting it to the user.
# UX Spec: [Project Name]
## Overview
[Brief summary of the product and primary user goal]
---
## Information Architecture
### Navigation Structure
[App Name] ├── [Primary Nav Item 1] │ ├── [Sub-item] │ └── [Sub-item] ├── [Primary Nav Item 2] └── [Primary Nav Item 3]
### Key User Paths
1. **[Path Name]:** [Start] → [Step] → [Step] → [End]
2. **[Path Name]:** [Start] → [Step] → [End]
---
## User Flows
### Flow 1: [Flow Name]
**Trigger:** [What initiates this flow]
**User goal:** [What they're trying to accomplish]
[Start State] ↓ [Action/Decision] ↓ [Screen/State] ──→ [Alternative path if applicable] ↓ [End State]
**Steps:**
1. User [action]
2. System [response]
3. User [action]
4. System [response]
5. User reaches [end state]
**Error paths:**
- If [condition]: [what happens]
- If [condition]: [what happens]
### Flow 2: [Flow Name]
[Same structure]
---
## Screens
### Screen: [Screen Name]
**URL/Route:** `/path`
**Purpose:** [What the user accomplishes here]
**Entry points:** [How users get here]
#### Layout
┌─────────────────────────────────┐ │ [Header/Nav] │ ├─────────────────────────────────┤ │ │ │ [Main Content Area] │ │ │ │ [Component] [Component] │ │ │ ├─────────────────────────────────┤ │ [Footer/Actions] │ └─────────────────────────────────┘
#### Components
| Component | Description | Behavior |
|-----------|-------------|----------|
| [Name] | [What it displays] | [How it behaves] |
| [Name] | [What it displays] | [How it behaves] |
#### States
| State | Appearance | Trigger |
|-------|------------|---------|
| Default | [Description] | Initial load |
| Loading | [Description] | Data fetching |
| Empty | [Description] | No data exists |
| Error | [Description] | Request failed |
| Success | [Description] | Action completed |
#### Actions
| Action | Trigger | Result |
|--------|---------|--------|
| [Action] | [Click/tap/etc.] | [What happens] |
| [Action] | [Trigger] | [Result] |
### Screen: [Screen Name]
[Same structure]
---
## Components
### Component: [Component Name]
**Used in:** [List of screens]
**Purpose:** [What it does]
#### Props/Inputs
| Prop | Type | Description |
|------|------|-------------|
| [name] | [type] | [what it controls] |
#### Variants
- **[Variant 1]:** [Description]
- **[Variant 2]:** [Description]
#### States
- Default: [Description]
- Hover: [Description]
- Active: [Description]
- Disabled: [Description]
### Component: [Component Name]
[Same structure]
---
## Interactions
### Interaction: [Name]
**Trigger:** [User action]
**Response:** [System behavior]
**Duration:** [Instant / 200ms / async]
**Feedback:** [What user sees/feels]
### Interaction: [Name]
[Same structure]
---
## Responsive Behavior
**Breakpoints:**
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
**Key adaptations:**
- [Component/layout]: [How it changes]
- [Component/layout]: [How it changes]
---
## Design Notes
[Optional — any specific visual direction, references, or constraints]
- **Style:** [Minimal / Dense / Playful / etc.]
- **Reference:** [Any inspiration or similar products]
- **Constraints:** [Accessibility, brand, etc.]
Simple project (1-3 screens):
Medium project (4-8 screens):
Complex project (10+ screens):
After presenting the UX spec, ask:
"Ready to generate prompts.md with
/prompt-export, or want to refine any screens first?"
Note: File is automatically saved to design/06-ux-spec.md. This feeds into development prompts.
Weekly Installs
37
Repository
GitHub Stars
4
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli30
codex29
opencode29
cursor27
claude-code27
antigravity21
前端打磨(Polish)终极指南:提升产品细节与用户体验的系统化检查清单
59,700 周安装