wtf.steer-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Steer Design

设计指导（Steer Design）

Generate or refine

docs/steering/DESIGN.md

— the design guidelines document. This document is the canonical reference for design decisions, the system in use, tokens, patterns, and accessibility requirements that every designer and implementer must follow.

See

references/design-template.md

for the expected document shape.

生成或完善

docs/steering/DESIGN.md

——设计指南文档。这份文档是所有设计师和开发人员必须遵循的设计决策、所用系统、设计令牌、模式以及无障碍要求的权威参考。

可查看

references/design-template.md

了解文档的预期结构。

Process

流程

1. Check if the document already exists

1. 检查文档是否已存在

Use the Read tool to attempt reading

docs/steering/DESIGN.md

If the file exists, call

AskUserQuestion

with:

```
question
```
: "docs/steering/DESIGN.md already exists. What would you like to do?"
```
header
```
: "Design doc found"

options

[{label: "Refine it", description: "Review and improve the existing document"}, {label: "Exit", description: "Leave it as-is"}]

Refine it → read the current document, then skip to step 4 (use existing doc as context, only ask about gaps or outdated sections).
Exit → exit immediately.

If the file does not exist, continue to step 2.

使用Read工具尝试读取

docs/steering/DESIGN.md

。

如果文件已存在，调用

AskUserQuestion

工具，参数如下：

```
question
```
: "docs/steering/DESIGN.md已存在，您想进行什么操作？"
```
header
```
: "找到设计文档"

options

[{label: "完善文档", description: "审阅并改进现有文档"}, {label: "退出", description: "保持文档原样"}]

完善文档 → 读取当前文档，然后跳至步骤4（以现有文档为上下文，仅询问内容缺失或过时的部分）。
退出 → 立即退出流程。

如果文件不存在，继续执行步骤2。

2. Research the codebase and design artifacts

2. 研究代码库和设计资产

Use the Agent tool to extract design facts directly from the codebase. Do not ask the user for things that can be read:

Design system: look for a Storybook config, component library imports, design-system packages in
```
package.json
```
Tokens: CSS custom properties (
```
--color-*
```
,
```
--spacing-*
```
), Tailwind config, theme files, token definition files
Components: existing UI components and their structure (look for
```
components/
```
,
```
ui/
```
,
```
src/components/
```
)
Figma links: any Figma URLs in README, existing issues, or
```
docs/
```
Accessibility: existing WCAG references, axe configs, jest-axe usage
Responsive breakpoints: Tailwind config, CSS media queries, layout files
VISION.md if it exists — extract any design principles already stated there

Also check

docs/steering/VISION.md

for any existing principles that should carry over.

Synthesise findings. Produce a draft of Stack, Tokens, and Component Patterns from this research alone where possible.

使用Agent工具直接从代码库中提取设计相关信息。对于可通过读取获取的内容，无需询问用户：

设计系统：查找Storybook配置、组件库导入、
```
package.json
```
中的design-system包
设计令牌：CSS自定义属性（
```
--color-*
```
、
```
--spacing-*
```
）、Tailwind配置、主题文件、令牌定义文件
组件：现有UI组件及其结构（查找
```
components/
```
、
```
ui/
```
、
```
src/components/
```
目录）
Figma链接：README、现有issues或
```
docs/
```
目录中的任何Figma URL
无障碍设计：现有WCAG参考、axe配置、jest-axe使用情况
响应式断点：Tailwind配置、CSS媒体查询、布局文件
VISION.md（若存在）——提取其中已明确的设计原则

同时检查

docs/steering/VISION.md

，提取任何需要延续的现有原则。

整合研究结果。尽可能仅通过此研究生成Stack、设计令牌和组件模式的草稿。

3. Interview the user for gaps only

3. 仅针对信息缺口询问用户

Only ask about what research could not determine. Work through questions one at a time using

AskUserQuestion

Topics that may need input:

Design principles — "What 3–5 principles guide every design decision for this product?"
- Pre-fill with principles inferred from VISION.md or any existing design docs.
Design system — "What design system are you using? Do you have a Figma library?"
- Pre-fill with anything found in the codebase or imports.
Token gaps — "Are there tokens not yet defined in code that designers rely on?"
- Pre-fill with gaps inferred from the design system research.
Responsive strategy — "How does the layout adapt across breakpoints?"
- Pre-fill with breakpoints found in the codebase.
Accessibility target — "Are there any accessibility requirements beyond WCAG 2.1 AA?"
- Pre-fill with any existing a11y config found.

Skip any topic already answered by research.

仅询问研究无法确定的内容。使用

AskUserQuestion

工具逐个提出问题。

可能需要用户输入的主题：

设计原则 — "指导该产品所有设计决策的3-5条原则是什么？"
- 预先填入从VISION.md或现有设计文档中推断出的原则。
设计系统 — "您正在使用什么设计系统？是否有Figma组件库？"
- 预先填入从代码库或导入内容中发现的信息。
令牌缺口 — "是否存在代码中尚未定义但设计师依赖的设计令牌？"
- 预先填入从设计系统研究中推断出的缺口。
响应式策略 — "布局如何跨断点适配？"
- 预先填入从代码库中找到的断点信息。
无障碍设计目标 — "除WCAG 2.1 AA标准外，是否有其他无障碍要求？"
- 预先填入发现的现有无障碍配置。

跳过已通过研究得到答案的主题。

4. Draft the document

4. 撰写文档草稿

Using

references/design-template.md

as the shape reference, fill in all sections with gathered context. Replace every

[PLACEHOLDER]

with real content.

Writing rules:

Tokens must reflect what is actually defined in the codebase — not aspirational values
Component patterns reference real component paths where they exist
Accessibility section always includes the baseline rules from the project's CLAUDE.md (if present) plus any additions
Principles are written as design directives, not engineering constraints

以

references/design-template.md

为结构参考，填入所有收集到的上下文信息。将所有

[PLACEHOLDER]

替换为真实内容。

撰写规则：

设计令牌必须反映代码库中实际定义的内容——而非理想化的数值
组件模式需引用实际存在的组件路径
无障碍设计部分需始终包含项目CLAUDE.md（若存在）中的基线规则及任何补充内容
设计原则需以设计指令的形式撰写，而非工程约束

5. Review with user

5. 与用户审阅草稿

Show the draft. Then call

AskUserQuestion

with

question: "Does this reflect the design direction accurately?"

header: "Review"

, and

options: [{label: "Looks good — save it", description: "Write to docs/steering/DESIGN.md"}, {label: "I have changes", description: "I want to adjust something first"}]

Apply edits, then proceed.

展示草稿。然后调用

AskUserQuestion

工具，参数如下：

question: "这份文档是否准确反映了设计方向？"

header: "审阅"

options: [{label: "没问题——保存文档", description: "写入docs/steering/DESIGN.md"}, {label: "我需要修改", description: "我想先调整一些内容"}]

。

应用修改后，继续流程。

6. Write the document

6. 写入文档

bash

mkdir -p docs/steering

Write the final content to

docs/steering/DESIGN.md

Commit the file:

bash

git add docs/steering/DESIGN.md
git commit -m "docs: add design guidelines steering document"

Print the file path.

bash

mkdir -p docs/steering

将最终内容写入

docs/steering/DESIGN.md

。

提交文件：

bash

git add docs/steering/DESIGN.md
git commit -m "docs: add design guidelines steering document"

打印文件路径。

7. Offer wiki sync

7. 提供Wiki同步选项

Call

AskUserQuestion

with:

```
question
```
: "Would you like to sync this to the GitHub wiki?"
```
header
```
: "Wiki sync"

options

[{label: "Yes — push to wiki", description: "Publish DESIGN.md as a wiki page"}, {label: "Not now", description: "Skip wiki sync"}]

If yes:

bash

REPO=$(gh repo view --json nameWithOwner -q .nameWithOwner)
git clone https://github.com/$REPO.wiki.git /tmp/wiki-sync
cp docs/steering/DESIGN.md /tmp/wiki-sync/WTF-Design.md
cd /tmp/wiki-sync && git add WTF-Design.md && git commit -m "Sync: design guidelines" && git push
rm -rf /tmp/wiki-sync

调用

AskUserQuestion

工具，参数如下：

```
question
```
: "是否需要将此文档同步到GitHub Wiki？"
```
header
```
: "Wiki同步"

options

[{label: "是——推送至Wiki", description: "将DESIGN.md发布为Wiki页面"}, {label: "暂不同步", description: "跳过Wiki同步"}]

如果选择是：

bash

REPO=$(gh repo view --json nameWithOwner -q .nameWithOwner)
git clone https://github.com/$REPO.wiki.git /tmp/wiki-sync
cp docs/steering/DESIGN.md /tmp/wiki-sync/WTF-Design.md
cd /tmp/wiki-sync && git add WTF-Design.md && git commit -m "Sync: design guidelines" && git push
rm -rf /tmp/wiki-sync

8. Offer to continue

8. 提供后续操作选项

Call

AskUserQuestion

with:

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

options

[{label: "Create QA.md", description: "Run

steer-qa

to document the QA standards"}, {label: "Create TECH.md", description: "Run

steer-tech

to document the technical guidelines"}, {label: "Create VISION.md", description: "Run

steer-vision

 to document the product vision"}, {label: "Stop here", description: "Exit — no further action"}]

Route to the appropriate skill based on the answer.

调用

AskUserQuestion

工具，参数如下：

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

options

[{label: "创建QA.md", description: "运行

steer-qa

以记录QA标准"}, {label: "创建TECH.md", description: "运行

steer-tech

以记录技术指南"}, {label: "创建VISION.md", description: "运行

steer-vision

以记录产品愿景"}, {label: "到此为止", description: "退出——无进一步操作"}]

根据用户的回答跳转至对应的Skill。