wtf.design-task

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Task

Task设计

Pick up an existing Task as a designer. Core value: reads the Gherkin scenarios to identify every UI state that needs design coverage, then helps you document the design references back into the issue so developers have a single source of truth.

See

references/component-spec-template.md

for the expected structure when scaffolding a component spec without Figma frames.

作为设计师接手现有Task。核心价值：读取Gherkin场景以确定所有需要设计覆盖的UI状态，随后协助你将设计参考文档更新至议题中，让开发者拥有单一的事实来源。

如需在没有Figma框架的情况下搭建组件规范，请参考

references/component-spec-template.md

中的预期结构。

Process

流程

0. GitHub CLI setup

0. GitHub CLI 设置

Run steps 1–2 of

../references/gh-setup.md

(install check and auth check). Stop if

gh

is not installed or not authenticated. Extensions are not required for this skill.

Skip this step if invoked from

write-task

or another skill that already ran gh-setup this session.

执行

../references/gh-setup.md

中的步骤1–2（安装检查与授权检查）。如果未安装

gh

或未完成授权，请停止操作。此Skill无需安装扩展。

如果是从

write-task

或其他已在本次会话中运行过gh-setup的Skill调用，则跳过此步骤。

1. Identify the Task

1. 确定目标Task

If the user provided an issue number in their request, use it directly. Otherwise search for recent open issues with label

task

to populate options and call

AskUserQuestion

with

question: "Which Task are you designing?"

header: "Task"

, and

options

pre-filled with 1–2 likely open Task issue references inferred from GitHub search (e.g. recent open issues labeled

task

Fetch the Task first, extract the Feature number from its Context section, then fetch the Feature:

bash

gh issue view <task_number>    # Functional Description, Gherkin, Design Reference — also yields feature number

如果用户在请求中提供了议题编号，请直接使用该编号。否则，搜索带有

task

标签的近期未关闭议题，生成选项列表，然后调用

AskUserQuestion

，参数为：

question: "你要设计哪个Task？"

，

header: "Task"

，

options

预填充1-2个从GitHub搜索推断出的可能的未关闭Task议题参考（例如，带有

task

标签的近期未关闭议题）。

先获取Task，从其Context部分提取Feature编号，然后获取Feature：

bash

gh issue view <task_number>    # 功能描述、Gherkin、设计参考——同时获取Feature编号

Extract feature number, then:

提取Feature编号后执行：

gh issue view <feature_number> # User stories, ACs, visual context

undefined

gh issue view <feature_number> # 用户故事、验收标准、视觉上下文

undefined

2. Lifecycle check

2. 生命周期检查

Check whether the task already has a

designed

label:

bash

gh issue view <task_number> --json labels --jq '.labels[].name'

If the

designed

label is present, call

AskUserQuestion

with:

```
question
```
: "This task already has a
```
designed
```
label. Continuing will overwrite the existing Design Reference. How would you like to proceed?"
```
header
```
: "Already designed"

options

[{label: "Redesign it", description: "Overwrite the existing Design Reference with a new one"}, {label: "Exit", description: "Leave the existing design as-is"}]

Redesign it → continue.
Exit → exit immediately.

If the

designed

label is absent, continue silently.

检查该Task是否已带有

designed

标签：

bash

gh issue view <task_number> --json labels --jq '.labels[].name'

如果存在

designed

标签，调用

AskUserQuestion

，参数为：

```
question
```
: "此Task已带有
```
designed
```
标签。继续操作将覆盖现有的设计参考。你希望如何处理？"
```
header
```
: "已完成设计"

options

[{label: "重新设计", description: "用新的设计参考覆盖现有内容"}, {label: "退出", description: "保留现有设计不变"}]

重新设计 → 继续操作。
退出 → 立即退出。

如果不存在

designed

标签，则静默继续。

3. Load the design steering document

3. 加载设计指导文档

Use the Read tool to attempt reading

docs/steering/DESIGN.md

If the file exists: keep its content in context. Use its design principles, tokens, component patterns, and accessibility standards to inform every decision in this session. Do not surface it to the user — just apply it silently.

If the file does not exist, call

AskUserQuestion

with:

```
question
```
: "docs/steering/DESIGN.md doesn't exist yet. This document captures your design principles, tokens, and component patterns. Would you like to create it now?"
```
header
```
: "Design steering doc missing"

options

[{label: "Create it now", description: "Run

steer-design

 before continuing (recommended)"}, {label: "Skip for this session", description: "Continue without it — design decisions won't reference project standards"}]

Create it now → follow the
```
steer-design
```
process, then return to this skill and continue from step 4.
Skip for this session → continue without it.

使用Read工具尝试读取

docs/steering/DESIGN.md

。

如果文件存在：将其内容保留在上下文环境中。使用其中的设计原则、设计令牌、组件模式和无障碍标准指导本次会话中的所有决策。无需向用户展示该文档内容——仅需静默应用。

如果文件不存在，调用

AskUserQuestion

，参数为：

```
question
```
: "docs/steering/DESIGN.md 文件尚未创建。该文档用于记录你的设计原则、设计令牌和组件模式。你是否想要现在创建它？"
```
header
```
: "缺少设计指导文档"

options

[{label: "现在创建", description: "先执行

steer-design

流程，再继续操作（推荐）"}, {label: "本次会话跳过", description: "不创建文档继续操作——设计决策将不参考项目标准"}]

现在创建 → 遵循
```
steer-design
```
流程，之后返回此Skill并从步骤4继续。
本次会话跳过 → 直接继续操作。

4. Explore the design system

4. 探索设计系统

Use the Agent tool with these concrete searches (run in parallel):

```
Glob('src/components/**/*', 'src/**/components/**/*', 'components/**/*')
```
— existing UI components; note file names that match domain objects or UI states in the Task
```
Glob('**/{tokens,theme,variables,design-tokens}.{css,scss,ts,js,json}')
```
+
```
Grep
```
for CSS custom property declarations (
```
--
```
) or Tailwind config keys — design tokens in use (colors, spacing, typography)
```
Glob('src/**/*.{stories,story}.{ts,tsx,js,jsx,mdx}')
```
— Storybook stories as pattern references for similar screens or flows
```
Grep
```
for
```
figma.com
```
URLs across all
```
.md
```
,
```
.mdx
```
, and issue body files in the repo — existing Figma references linked in related issues or docs

使用Agent工具并行执行以下具体搜索：

```
Glob('src/components/**/*', 'src/**/components/**/*', 'components/**/*')
```
—— 现有UI组件；记录与Task中的领域对象或UI状态匹配的文件名
```
Glob('**/{tokens,theme,variables,design-tokens}.{css,scss,ts,js,json}')
```
+
```
Grep
```
查找CSS自定义属性声明（
```
--
```
）或Tailwind配置键——当前使用的设计令牌（颜色、间距、排版）
```
Glob('src/**/*.{stories,story}.{ts,tsx,js,jsx,mdx}')
```
—— Storybook故事，作为类似界面或流程的模式参考
```
Grep
```
在仓库所有
```
.md
```
、
```
.mdx
```
和议题正文文件中查找
```
figma.com
```
链接——相关议题或文档中已有的Figma参考

5. Identify UI states from Gherkin

5. 从Gherkin场景识别UI状态

For each Gherkin scenario in the Task:

Identify the UI state it represents (e.g. empty, loading, error, success, disabled, edge case)
Note any interaction or transition implied by the When/Then steps

List these states explicitly — this becomes the design coverage checklist.

针对Task中的每个Gherkin场景：

识别其代表的UI状态（例如：空状态、加载状态、错误状态、成功状态、禁用状态、边缘情况）
记录When/Then步骤中隐含的任何交互或过渡效果

明确列出这些状态——这将成为设计覆盖范围检查清单。

6. Ask about design assets

6. 询问设计资产处理方式

Call

AskUserQuestion

with

question: "How would you like to handle design assets for this task?"

header: "Design assets"

, and

options

{label: "I have Figma frames", description: "Provide frame URLs — I'll validate coverage against Gherkin scenarios"}

{label: "Generate designs for me", description: "I'll use Figma MCP to generate frames from the Gherkin scenarios and design system"}

{label: "Scaffold a spec only", description: "No Figma — produce a text component spec from the scenarios"}

{label: "Partial — some states designed", description: "Provide available frames; remaining states go to generate or scaffold"}

Path A — Human provides frames: Collect frame URLs. For each Gherkin scenario from step 5, check whether a frame covers it. Flag any scenario with no matching frame as a gap. Present the coverage matrix: scenario → frame URL (or ⚠ gap). If gaps exist, call

AskUserQuestion

asking whether to generate the missing frames (route to Path B) or leave them as pending.

Path B — AI generates via Figma MCP: Check whether the Figma MCP tool

generate_figma_design

is available. If unavailable, warn the user and fall back to Path C (scaffold).

If available: for each uncovered UI state, call

generate_figma_design

with:

The Gherkin scenario as the design brief
Component patterns and tokens from
```
docs/steering/DESIGN.md
```
(loaded in step 3)
Any shared components identified in the parent Feature's Design Handoff (if available)

Collect the generated frame URLs and treat them as Path A frames from this point forward.

Path C — Scaffold spec only: Draft a component spec using the structure in

references/component-spec-template.md

, listing each state with its required UI elements and interactions. No Figma frames — this is a text-only design brief for the developer.

Partial: Collect available frame URLs, run Path A validation on covered states. For uncovered states, call

AskUserQuestion

asking whether to generate (Path B) or scaffold (Path C) the remainder.

调用

AskUserQuestion

，参数为

question: "你希望如何处理此Task的设计资产？"

，

header: "设计资产"

，选项如下：

{label: "我已有Figma框架", description: "提供框架链接——我会对照Gherkin场景验证覆盖范围"}

{label: "为我生成设计", description: "我将使用Figma MCP根据Gherkin场景和设计系统生成框架"}

{label: "仅搭建规范文档", description: "无需Figma——根据场景生成纯文本组件规范"}

{label: "部分完成——部分状态已设计", description: "提供已有的框架；剩余状态选择生成或搭建规范"}

路径A — 人工提供框架： 收集框架链接。针对步骤5中的每个Gherkin场景，检查是否有对应的框架覆盖。标记任何无匹配框架的场景为缺口。展示覆盖矩阵：场景 → 框架链接（或 ⚠ 缺口）。如果存在缺口，调用

AskUserQuestion

询问是否生成缺失的框架（跳转至路径B）或标记为待处理。

路径B — 通过Figma MCP由AI生成： 检查Figma MCP工具

generate_figma_design

是否可用。如果不可用，向用户发出警告并 fallback 至路径C（搭建规范）。

如果可用：针对每个未覆盖的UI状态，调用

generate_figma_design

，参数包括：

以Gherkin场景作为设计 brief
步骤3中加载的
```
docs/steering/DESIGN.md
```
中的组件模式和设计令牌
父Feature的设计交付中已识别的任何共享组件（如果可用）

收集生成的框架链接，从此处开始将其视为路径A中的框架。

路径C — 仅搭建规范文档： 使用

references/component-spec-template.md

中的结构起草组件规范，列出每个状态及其所需的UI元素和交互。无需Figma框架——这是供开发者使用的纯文本设计 brief。

部分完成： 收集可用的框架链接，针对已覆盖状态执行路径A的验证。针对未覆盖状态，调用

AskUserQuestion

询问是生成（路径B）还是搭建规范（路径C）剩余部分。

7. Draft the Design Reference

7. 起草设计参考文档

Produce the content for the Design Reference section of the Task:

Frame URLs mapped to Gherkin scenarios (Path A/B), or scaffolded component spec (Path C)
Coverage matrix: scenario → frame URL or ⚠ pending
Component breakdown: which exist in codebase, which are new
Interaction notes: hover, focus, error states, transitions
Responsive behavior if applicable
Design tokens to apply

生成Task的设计参考部分内容：

映射到Gherkin场景的框架链接（路径A/B），或搭建好的组件规范（路径C）
覆盖矩阵：场景 → 框架链接或 ⚠ 待处理
组件分解：哪些已存在于代码库中，哪些是新增的
交互说明：悬停、聚焦、错误状态、过渡效果
适用的响应式行为
需应用的设计令牌

8. Review with user

8. 与用户审核

Show the draft. Then call

AskUserQuestion

with

question: "Does this cover all the states in the Gherkin?"

header: "Review"

, and

options: [{label: "Yes — looks complete", description: "Proceed to update the task"}, {label: "Missing states", description: "I want to add more coverage"}, {label: "Other changes", description: "I want to adjust something else"}]

Apply edits, then proceed.

展示草稿。然后调用

AskUserQuestion

，参数为

question: "这是否覆盖了Gherkin中的所有状态？"

，

header: "审核"

，选项：

[{label: "是——看起来完整", description: "继续更新Task"}, {label: "缺少状态", description: "我想要补充更多覆盖范围"}, {label: "其他修改", description: "我想要调整其他内容"}]

。

应用修改后继续操作。

9. Update the Task issue

9. 更新Task议题

Note: read the current issue body first (
gh issue view <task_number>
), replace only the Design Reference section with the new content, and preserve all other sections unchanged. Write the full updated body to a temp file and use
--body-file
.

bash

gh issue edit <task_number> --body-file /tmp/wtf-design-task-body.md

Add the

designed

lifecycle label to mark this step complete:

bash

gh issue edit <task_number> --add-label "designed"

Print the updated Task issue URL.

注意：先读取当前议题正文（
gh issue view <task_number>
），仅替换设计参考部分为新内容，保留所有其他部分不变。将完整的更新后正文写入临时文件，并使用
--body-file
参数。

bash

gh issue edit <task_number> --body-file /tmp/wtf-design-task-body.md

添加

designed

生命周期标签以标记此步骤完成：

bash

gh issue edit <task_number> --add-label "designed"

打印更新后的Task议题链接。

10. Offer to continue

10. 提供后续操作选项

Call

AskUserQuestion

with:

```
question
```
: "What's next?"
```
header
```
: "Next step"

options

[{label: "Implement this Task", description: "Run

implement-task

 for this Task now (default)"}, {label: "Design another Task", description: "Design another Task for the same Feature"}, {label: "Stop here", description: "Exit — no further action"}]

Implement this Task → follow the
```
implement-task
```
process, passing the Task number in as context so the user is not asked for it again.
Design another Task → restart this skill from step 1, reusing the same Feature context.
Stop here → exit.

调用

AskUserQuestion

，参数为：

```
question
```
: "下一步做什么？"
```
header
```
: "下一步"

options

[{label: "实现此Task", description: "立即为该Task执行

implement-task

流程（默认选项）"}, {label: "设计另一个Task", description: "为同一Feature设计另一个Task"}, {label: "到此为止", description: "退出——无进一步操作"}]

实现此Task → 遵循
```
implement-task
```
流程，传入Task编号作为上下文，避免再次询问用户。
设计另一个Task → 从步骤1重启此Skill，复用相同的Feature上下文。
到此为止 → 退出。