一键导入
sf-ui-design
生成或更新 SpecForge work item 的 UI design;用于 ready artifact 为 ui_design,或需求涉及页面、交互、视觉风格、状态矩阵和 Pencil 原型证据时。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
生成或更新 SpecForge work item 的 UI design;用于 ready artifact 为 ui_design,或需求涉及页面、交互、视觉风格、状态矩阵和 Pencil 原型证据时。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
SpecForge requirements 主能力包。用于把 brief、brainstorm、PRD、research、gap report、wiki 当前事实和用户确认转成可测试、可追踪、可交给 UI / technical design / tasking / verification 的 REQ / AC / NFR / 边界 / handoff 行为契约。
生成或更新 SpecForge 工作项的需求规格;用于活跃工作项的 ready artifact 为 requirements,或需要把产品需求文档 / 简报转成可测试行为、边界、用户故事、验收标准和影响面标记时。
SpecForge 内部需求技能。用于为 work item 生成清晰、可测试的功能需求、非功能需求、范围边界、不在范围内和验收标准。
SpecForge 跨阶段代码智能能力包。用于任何阶段需要 Wiki-first 定位现有代码范围、选择 CodeGraph / MCP / SCIP / Repomix / rg、检查 provider freshness、归一 graph_facts、分析影响面 / affected tests 或生成 Wiki 回写候选时必读;不要只在 sf-steering 中使用。
为存量项目或大型代码库建立 SpecForge 项目画像;用于新需求或 bugfix 前理解现有架构、刷新 wiki、生成后续 work item 的上下文基线。
SpecForge 测试工程主能力包。用于 sf-verify 在验证前把 requirements、tasks、UI、technical design 和 code review 风险转成可解析 TC/PW 用例、runtime runbook、auth strategy、自动化计划和可归档 evidence。
| name | sf-ui-design |
| description | 生成或更新 SpecForge work item 的 UI design;用于 ready artifact 为 ui_design,或需求涉及页面、交互、视觉风格、状态矩阵和 Pencil 原型证据时。 |
执行任何 node .specforge/... 命令或读取 .specforge/... 文件前,必须先定位宿主项目根:项目根是“包含 .specforge/ 目录的业务项目目录”,不是 .specforge/ 目录本身。若当前目录是 .specforge/ 或其任意子目录,先 cd .. 回到宿主项目根;若当前目录是 frontend/、backend/ 等子目录,也先向上回到包含 .specforge/ 的项目根。禁止从 .specforge/ 内执行 node .specforge/core/scripts/...,否则会形成 .specforge/.specforge/... 的错误路径。
.specforge/ 且有 active work item:Embedded 模式,按 artifact graph 写入 01-spec/ui-design.md,并产出 Pencil 证据。.specforge/ 但无 active work item:Lightweight 模式,可先做 UI 方向访谈、页面地图和状态矩阵草稿;需要落档时输出 specforge-import-ready.md 格式内容,或先路由 sf-intake 创建 work item。.specforge/:Standalone 模式,不要运行 .specforge/... 命令或调用 .specforge 下的 Pencil 脚本;输出可导入的 specforge-import-ready.md。Standalone 草稿不等同于正式 Pencil 证据。sf-ui-design 把 requirements 中的用户可见体验转成可审查的 UI 设计证据。它不写技术架构、API、数据库设计或实现任务。
SpecForge 固定使用 Pencil 做正式 UI 原型。Figma、HTML、ASCII、截图、竞品和第三方设计 skill 只能作为参考输入;最终必须归一为 01-spec/ui-design.md、01-spec/ui-mockup.pen 和 01-spec/ui-mockup-export/*.png。
本文件只负责运行入口和路由。真正的 UI 设计执行细则由 .specforge/skills/sf-ui-design/stages/ui-design/SKILL.md 维护;访谈、第三方参考编排、Pencil 保存重读门禁和视觉 review 由 references/ui-design-process.md 维护。
按顺序读取:
references/ui-design-process.md.specforge/skills/sf-ui-design/stages/ui-design/SKILL.md.specforge/core/artifacts/templates/ui-design.md.specforge/core/standards/product.md、design.md、workflow.md、ai-toolkit.md.specforge/core/standards/pc-ui-design-spec.md,仅当 PC 端业务系统规范适用.specforge/core/skills/ui-ux/design-system/SKILL.md,仅当需要设计语言、Design Contract、组件契约、页面模式、动效、外部参考或 Visual QA.specforge/core/skills/ui-ux/pencil/SKILL.md,仅当需要创建、保存、重读或导出 .pen进入 design-system 后,模式判断只读 .specforge/core/skills/ui-ux/design-system/references/read-profiles.md#Design Mode Routing;不要在 sf-ui-design 里维护第二份 Product UI / Brand Surface / Hybrid 规则。
Embedded 模式先运行:
node .specforge/core/scripts/instructions.mjs
如果输出 Instructions blocked,按 Route 处理阻断;尤其是 ui-direction-unconfirmed 时,先输出体验方向确认卡,不创建 Pencil 原型。
确认 ready artifact 包含 ui_design 且没有阻断后运行:
node .specforge/core/scripts/create-artifact.mjs ui_design
Standalone 模式不运行 .specforge/... 命令,只输出 specforge-import-ready.md 草稿;草稿不能冒充正式 Pencil 证据。
01-spec/ui-design.md、01-spec/ui-mockup.pen 和 01-spec/ui-mockup-export/*.png;若 Pencil 受阻,写清阻断原因和后续验证方式。ui-design.md 写 N/A、跳过理由和验证方式,然后停止。design-contract.schema.json 的 JSON block;需要设计系统时必须包含 color_system 和 foundation_system。01-spec/design/components/<component-name>.contract.md 或 N/A 理由。.pen 非空,截图必须来自保存后的目标文件。node .specforge/core/scripts/instructions.mjs,把下一步 route 展示给用户。.pen 未保存、保存后无法重读、重读后仍为空画布,或截图不是来自保存后的目标文件。