SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场wtf.design-task

wtf.design-task

设计与创作

查看项目

更新于 10-16 02:06

技能介绍

用途

wtf.design-task 用于设计师接手一个已有的 Task issue 并为其补充设计覆盖。它读取 Task 中的 Gherkin 场景，找出所有需要设计覆盖的 UI 状态，并把设计参考记录在 issue 中，让开发者拥有单一事实来源。

主要能力

  • 识别并读取 Task：从 issue 编号或最近标记为 task 的开放 issue 中选择，按 spec-hierarchy 从 Task 提取功能描述、Gherkin 和 Design Reference，从父 Feature 提取用户故事、验收标准和视觉上下文。
  • 生命周期检查：对 Task 上的 designed 标签应用 present-label overwrite gate，输出为 "Design Reference"，重跑动词为 "Redesign"。
  • 加载设计指导文档：按 steering-doc-process 的严格消费端加载方式读取 docs/steering/DESIGN.md（推荐技能 wtf.steer-design），应用其中的设计原则、令牌、组件模式和无障碍标准。
  • 探索设计系统：并行运行搜索，包括现有 UI 组件（Glob src/components 等）、设计令牌（tokens/theme/variables/design-tokens 文件及 CSS 自定义属性或 Tailwind 配置键）、Storybook 故事（.stories. / .story.）、以及 .md、.mdx 和 issue 正文中的 figma.com URL。
  • 从 Gherkin 识别 UI 状态：为每个场景识别其代表的 UI 状态（如 empty、loading、error、success、disabled、边界情况），记录 When/Then 步骤暗示的交互或过渡，形成设计覆盖清单。
  • 处理设计资产：通过 AskUserQuestion 询问用户选择路径——Path A 由人提供 Figma 帧并校验覆盖；Path B 通过 Figma MCP 的 generate_figma_design 从 Gherkin 场景和设计系统生成帧；Path C 仅脚手架文本组件规格（无 Figma）；Partial 为部分已设计、其余生成或脚手架。
  • 起草 Design Reference：按 STE 写作规范产出帧 URL 与 Gherkin 场景的映射（或脚手架组件规格）、覆盖矩阵、组件拆解（代码库中已有与新增）、交互说明（hover、focus、error 状态、过渡）、响应式行为（如适用）以及要应用的设计令牌。
  • 复核与更新：向用户展示草稿并确认是否覆盖 Gherkin 中所有状态，然后仅替换 Task issue 中的 Design Reference 部分，保留其他部分，并添加 designed 标签。

使用方式

技能按步骤执行：0. GitHub CLI 设置（运行 ../references/gh-setup.md 的步骤 1–2，检查安装与认证，未安装或未认证则停止；若本会话已由 wtf.write-task 或其他技能运行过 gh-setup 则跳过）。1. 识别 Task。2. 生命周期检查。3. 加载设计指导文档。4. 探索设计系统。5. 从 Gherkin 识别 UI 状态。6. 询问设计资产。7. 起草 Design Reference。8. 与用户复核。9. 更新 Task issue。10. 提供继续选项。

更新 issue 时使用 gh body 辅助工具：

python3 .wtf/gh-body.py read <task_number> # prints a temp path; Read it, edit the Design Reference section python3 .wtf/gh-body.py edit <task_number> --body-file "<path-from-read>"

添加生命周期标签：

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

最后打印更新后的 Task issue URL。

适用场景

适用于设计师领取 Task issue 并需要为其补充设计覆盖的工作流，尤其是团队使用 Gherkin 场景描述需求、需要将设计参考集中记录在 issue 中作为开发者单一事实来源的场景。触发短语如 "I want to design task"。

限制

  • 依赖 GitHub CLI（gh）已安装并完成认证，否则流程停止。
  • Path B 依赖 Figma MCP 工具 generate_figma_design 可用；不可用时警告用户并改用 Path C（脚手架）。
  • Path C 不产出 Figma 帧，仅生成文本组件规格。
  • 组件规格结构参见 references/component-spec-template.md。
  • 关于收费、价格、平台支持范围等具体信息，资料中暂未提供。