Back to Details

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:
  1. Read Source — Extract UI requirements from PBI, story, or Figma URL
  2. Determine Complexity — Quick Spec (sections 1-4) vs Full Spec (all 7 sections)
  3. Build Component Inventory — List new vs existing components
  4. Define States & Tokens — Interactions, design tokens, responsive breakpoints
  5. 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设计规范文档，用于交付给开发人员。
工作流程：
  1. 读取源内容 — 从PBI、用户故事或Figma URL中提取UI需求
  2. 确定复杂度 — 快速规范（第1-4节） vs 完整规范（全部7节）
  3. 构建组件清单 — 列出新增与现有组件
  4. 定义状态与设计令牌 — 交互逻辑、设计令牌、响应式断点
  5. 保存成果 — 输出至
    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

工作流程

  1. 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
  2. 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
  3. Build component inventory
    • List all UI components needed
    • Identify reusable vs feature-specific components
    • Note existing components from shared component library or design system
  4. Define states and interactions
    • Default, hover, active, disabled, error, loading, empty states
    • User interactions (click, drag, keyboard shortcuts)
    • Transitions and animations
  5. Extract design tokens
    • Colors, typography, spacing, shadows, border-radius
    • Reference existing design system tokens where possible
  6. Document responsive behavior
    • Mobile (320-767px), Tablet (768-1023px), Desktop (1024px+)
    • What changes at each breakpoint (layout, visibility, sizing)
  7. Save artifact
    • Path: 
      team-artifacts/design-specs/{YYMMDD}-designspec-{feature-slug}.md
  1. 读取源输入
    • 若提供Figma URL → 先运行
      /figma-design
      提取规范，再继续
    • 若为PBI/用户故事 → 提取验收标准与UI需求
    • 若为口头需求 → 先与用户确认清楚再推进
  2. 确定规范复杂度
    若为单一表单或简单组件 → 快速规范（仅第1-4节）
若为完整页面或多组件视图 → 完整规范（全部7节）
若为多页面流程 → 完整规范 + 流程图
  3. 构建组件清单
    • 列出所有需要的UI组件
    • 区分可复用组件与功能专属组件
    • 记录来自共享组件库或设计系统的现有组件
  4. 定义状态与交互
    • 默认、悬停、激活、禁用、错误、加载、空状态
    • 用户交互（点击、拖拽、键盘快捷键）
    • 过渡与动画效果
  5. 提取设计令牌
    • 色彩、排版、间距、阴影、圆角
    • 尽可能参考现有设计系统令牌
  6. 记录响应式行为
    • 移动端（320-767px）、平板端（768-1023px）、桌面端（1024px+）
    • 每个断点处的变化（布局、可见性、尺寸）
  7. 保存成果
    • 路径：
      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. 组件清单

ComponentTypeSourceNotes
UserCardNewFeature-specificDisplays user avatar + name
DataTableExistingshared libraryReuse 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. 设计令牌

TokenValueUsage
$primary#1976D2Action buttons, links
$text-body14px/1.5 InterBody text
$gap-md16pxSection spacing
令牌值用途
$primary#1976D2操作按钮、链接
$text-body14px/1.5 Inter正文文本
$gap-md16px区块间距

5. States & Interactions

5. 状态与交互

ElementDefaultHoverActiveDisabledError
Save btnBlue/whiteDarken 10%Scale 0.98Gray/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

相关技能

SkillWhen 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
IMPORTANT Task Planning Notes (MUST FOLLOW)
  • Always plan and break work into many small todo tasks
  • Always add a final review todo task to verify work quality and identify fixes/enhancements
技能名称替代使用场景
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:
  1. Activate 
    design-workflow
    workflow     (Recommended) — design-spec → code-review
  2. Execute 
    /design-spec
    directly     — run this skill standalone
重要必须执行： 若尚未处于工作流中，请使用
AskUserQuestion
询问用户：
  1. 激活
    design-workflow
    工作流    （推荐）—— design-spec → code-review
  2. 直接执行
    /design-spec
    —— 独立运行本技能