design-spec

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

[IMPORTANT] Use
TaskCreate
to break ALL work into small tasks BEFORE starting — including tasks for each file read. This prevents context loss from long files. For simple tasks, AI MUST ask user whether to skip.

[重要提示] 在开始工作前，请使用
TaskCreate
将所有工作拆分为小任务——包括每个文件读取的任务。这可以避免长文件导致的上下文丢失。对于简单任务，AI必须询问用户是否跳过。

Quick Summary

快速概述

Goal: Create structured UI/UX design specification documents from requirements or PBIs for developer handoff.

Workflow:

Read Source — Extract UI requirements from PBI, story, or Figma URL
Determine Complexity — Quick Spec (sections 1-4) vs Full Spec (all 7 sections)
Build Component Inventory — List new vs existing components
Define States & Tokens — Interactions, design tokens, responsive breakpoints
Save Artifact — Output to
```
team-artifacts/design-specs/
```

Key Rules:

If Figma URL provided, run
```
/figma-design
```
first to extract specs
Reference existing design system tokens from
```
docs/project-reference/design-system/
```
Include accessibility requirements (keyboard nav, ARIA labels, contrast)

Be skeptical. Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence percentages (Idea should be more than 80%).

目标： 根据需求或PBI创建结构化的UI/UX设计规范文档，用于交付给开发人员。

工作流程：

读取源内容 — 从PBI、用户故事或Figma URL中提取UI需求
确定复杂度 — 快速规范（第1-4节） vs 完整规范（全部7节）
构建组件清单 — 列出新增与现有组件
定义状态与设计令牌 — 交互逻辑、设计令牌、响应式断点
保存成果 — 输出至
```
team-artifacts/design-specs/
```
目录

核心规则：

若提供Figma URL，请先运行
```
/figma-design
```
提取规范
参考
```
docs/project-reference/design-system/
```
中的现有设计系统令牌
包含无障碍需求（键盘导航、ARIA标签、色彩对比度）

保持质疑，运用批判性思维与顺序思维。所有结论需有可追溯的依据，可信度需超过80%。

Design Specification

设计规范

Create structured UI/UX design specification documents from requirements or PBIs for developer handoff.

根据需求或PBI创建结构化的UI/UX设计规范文档，用于交付给开发人员。

When to Use

适用场景

A PBI or user story needs a design spec before implementation
Translating requirements into concrete UI layout, states, and tokens
Documenting component inventory and interaction patterns
Creating responsive breakpoint specifications

PBI或用户故事在开发前需要设计规范
将需求转化为具体的UI布局、状态与设计令牌
记录组件清单与交互模式
创建响应式断点规范

When NOT to Use

不适用场景

Extracting specs from Figma -- use
```
figma-design
```
first, then this skill
Building the actual UI -- use
```
frontend-design
```
Full UX research and design process -- use
```
ux-designer
```
Reviewing existing UI code -- use
```
web-design-guidelines
```

从Figma提取规范——请先使用
```
figma-design
```
技能，再使用本技能
实际UI开发——使用
```
frontend-design
```
技能
完整的UX研究与设计流程——使用
```
ux-designer
```
技能
审查现有UI代码——使用
```
web-design-guidelines
```
技能

Prerequisites

前置条件

Read before executing:

The source PBI, user story, or requirements document
```
docs/project-reference/design-system/
```
-- project design tokens (if applicable)
Existing design specs in
```
team-artifacts/design-specs/
```
for format consistency

执行前请阅读：

源PBI、用户故事或需求文档
```
docs/project-reference/design-system/
```
——项目设计令牌（若有）
```
team-artifacts/design-specs/
```
中的现有设计规范，以保证格式一致性

Workflow

工作流程

Read source input
- IF Figma URL provided → run
```
/figma-design
```
  first to extract specs, then continue
- IF PBI/story → extract acceptance criteria and UI requirements
- IF verbal requirements → clarify with user before proceeding

Determine spec complexity

IF single form or simple component → Quick Spec (sections 1-4 only)
IF full page or multi-component view → Full Spec (all 7 sections)
IF multi-page flow → Full Spec + Flow Diagram

Build component inventory
- List all UI components needed
- Identify reusable vs feature-specific components
- Note existing components from shared component library or design system
Define states and interactions
- Default, hover, active, disabled, error, loading, empty states
- User interactions (click, drag, keyboard shortcuts)
- Transitions and animations
Extract design tokens
- Colors, typography, spacing, shadows, border-radius
- Reference existing design system tokens where possible
Document responsive behavior
- Mobile (320-767px), Tablet (768-1023px), Desktop (1024px+)
- What changes at each breakpoint (layout, visibility, sizing)

Save artifact

Path:

team-artifacts/design-specs/{YYMMDD}-designspec-{feature-slug}.md

读取源输入
- 若提供Figma URL → 先运行
```
/figma-design
```
  提取规范，再继续
- 若为PBI/用户故事 → 提取验收标准与UI需求
- 若为口头需求 → 先与用户确认清楚再推进

确定规范复杂度

若为单一表单或简单组件 → 快速规范（仅第1-4节）
若为完整页面或多组件视图 → 完整规范（全部7节）
若为多页面流程 → 完整规范 + 流程图

构建组件清单
- 列出所有需要的UI组件
- 区分可复用组件与功能专属组件
- 记录来自共享组件库或设计系统的现有组件
定义状态与交互
- 默认、悬停、激活、禁用、错误、加载、空状态
- 用户交互（点击、拖拽、键盘快捷键）
- 过渡与动画效果
提取设计令牌
- 色彩、排版、间距、阴影、圆角
- 尽可能参考现有设计系统令牌
记录响应式行为
- 移动端（320-767px）、平板端（768-1023px）、桌面端（1024px+）
- 每个断点处的变化（布局、可见性、尺寸）

保存成果

路径：

team-artifacts/design-specs/{YYMMDD}-designspec-{feature-slug}.md

Output Format

输出格式

markdown

undefined

markdown

undefined

Design Spec: {Feature Name}

设计规范：{功能名称}

Source: {PBI/story reference} Date: {YYMMDD} Status: Draft | Review | Approved

来源： {PBI/用户故事参考} 日期： {YYMMDD} 状态： 草稿 | 审核中 | 已批准

1. Overview

1. 概述

{1-2 sentence summary of what this UI does}

{1-2句话总结该UI的功能}

2. Component Inventory

2. 组件清单

Component	Type	Source	Notes
UserCard	New	Feature-specific	Displays user avatar + name
DataTable	Existing	shared library	Reuse with custom columns

组件名称	类型	来源	备注
UserCard	新增	功能专属	展示用户头像+名称
DataTable	现有	共享库	复用并自定义列

3. Layout

3. 布局

{Description or ASCII wireframe of layout structure}

Desktop: {layout description}
Tablet: {layout changes}
Mobile: {layout changes}

{布局结构的描述或ASCII线框图}

桌面端：{布局描述}
平板端：{布局变化}
移动端：{布局变化}

4. Design Tokens

4. 设计令牌

Token	Value	Usage
$primary	#1976D2	Action buttons, links
$text-body	14px/1.5 Inter	Body text
$gap-md	16px	Section spacing

令牌	值	用途
$primary	#1976D2	操作按钮、链接
$text-body	14px/1.5 Inter	正文文本
$gap-md	16px	区块间距

5. States & Interactions

5. 状态与交互

Element	Default	Hover	Active	Disabled	Error
Save btn	Blue/white	Darken 10%	Scale 0.98	Gray/50% opacity	--

元素	默认状态	悬停状态	激活状态	禁用状态	错误状态
保存按钮	蓝底白字	加深10%	缩放至0.98	灰色/50%透明度	--

6. Accessibility

6. 无障碍设计

Keyboard navigation order
ARIA labels for interactive elements
Color contrast compliance notes

键盘导航顺序
交互元素的ARIA标签
色彩对比度合规说明

7. Open Questions

7. 待解决问题

{Any unresolved design decisions}

undefined

{未确定的设计决策}

undefined

Examples

示例

Example 1: Simple form spec

示例1：简单表单规范

Input: "Design spec for employee onboarding form"

Output: Quick Spec with sections 1-4 covering form fields (name, email, department dropdown, start date picker), validation rules, submit/cancel actions, and mobile stacking behavior.

输入： "为员工入职表单创建设计规范"

输出： 仅包含第1-4节的快速规范，涵盖表单字段（姓名、邮箱、部门下拉框、入职日期选择器）、验证规则、提交/取消操作，以及移动端堆叠布局行为。

Example 2: Complex dashboard spec

示例2：复杂仪表盘规范

Input: "Design spec for recruitment pipeline dashboard with drag-and-drop columns"

Output: Full Spec covering Kanban board layout, candidate cards (component inventory), drag-and-drop interactions, column states (empty, populated, over-limit), filter bar, responsive collapse to list view on mobile, and accessibility for keyboard drag operations.

输入： "为带有拖拽列的招聘流程仪表盘创建设计规范"

输出： 完整规范，包含看板布局、候选人卡片（组件清单）、拖拽交互、列状态（空、已填充、超出限制）、筛选栏、移动端折叠为列表视图，以及键盘拖拽操作的无障碍设计。

Related Skills

Skill	When to use instead
`ux-designer`	Full UX design process with research
`figma-design`	Extract specs from Figma designs
`frontend-design`	Build the actual UI implementation
`web-design-guidelines`	Review existing UI for compliance

技能名称	替代使用场景
`ux-designer`	包含研究的完整UX设计流程
`figma-design`	从Figma设计中提取规范
`frontend-design`	实际UI开发实现
`web-design-guidelines`	审查现有UI的合规性

Workflow Recommendation

工作流推荐

IMPORTANT MUST: If you are NOT already in a workflow, use
AskUserQuestion
to ask the user:
Activate
design-workflow
workflow (Recommended) — design-spec → code-review
Execute
/design-spec
directly — run this skill standalone

重要必须执行： 若尚未处于工作流中，请使用
AskUserQuestion
询问用户：
激活
design-workflow
工作流（推荐）—— design-spec → code-review
直接执行
/design-spec
—— 独立运行本技能