메뉴
生成或更新 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 未保存、保存后无法重读、重读后仍为空画布，或截图不是来自保存后的目标文件。