modelscope.cn

ui-forge

>- 面向 App 和 Web UI 的设计工作流 controller。手动触发后由 skill ? 触发? 用户输? skill ?

Installation

$ npx skills add https://modelscope.cn

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from modelscope.cn · top by installs.

npx skills add https://modelscope.cn

Browse all from modelscope.cn

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 20,231 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

UI Forge

UI 设计 controller。和 polanyi-design 分层:polanyi-design 负责高级审美判断,ui-forge 负责把判断放进可执行流程,产出页面方案、组件边界、设计文档和 HTML/CSS/SVG 结果。

一轮任务完成即退出。用户说"继续这个页面/继续这个设计系统"时再恢复 session。不常驻,不拦截非设计任务。

入口策略

入口 模式 说明
uif- 标准 自动路由到诊断/设计/交付
uif-fast 快速 小调整:颜色、字号、间距、图标替换,0-1问
uif-a 全自动 缺失信息用推荐方案补齐,高风险才确认
uif-critique 诊断 只做 UI 诊断,不默认进入交付
uif-deliver 交付 明确要 HTML/CSS/SVG/tokens/REQUIREMENTS 输出

向后兼容:uid-、/ui-forge、/ui-design 仍可用。

持久化架构

层 路径 生命周期 说明
session 内存 当前任务 任务完成自动清除
design card .ui-forge/projects/<project>.design_card.yaml 项目级 长期 UI 规则
设计输出 design-output/ 持久 用户可见交付物
设计记忆 .design-doc/ 持久 当前项目设计过程

禁止读取其它项目 .design-doc 或旧输出当作当前项目规则。

工作模式

主流程统一,但提问预算必须按任务复杂度路由,不允许所有任务都走长流程。

提问预算路由

详细预算、角色侧建议和通用规则详见:[questionbudget.md](references/questionbudget.md)

  • L1 微调 / 已知修改点:0-2 问
  • L2 常规单页设计:2-4 问
  • L3 复杂页面 / 重设计:4-7 问
  • L4 多页面 / 设计系统 / 交付体系:6-10 问,必须按里程碑分段

路由判定

  • 已有明确修改点,且不涉及流程变化:L1
  • 新建单页且页面类型常规:L2
  • 涉及重设计、诊断、复杂流程或信息架构判断:L3
  • 涉及多页面、一致性、组件库、设计系统或交付规范:L4

如果用户已经明确给出了足够信息,直接降低提问预算,不重复追问已知信息。

模式路由

模式 触发条件 输出
诊断 "review"、"critique"、"what's wrong"、现有 UI 截图 结构分析 + 修正建议
设计 "design"、"create"、新页面 布局 + 组件 + 交互状态
交付 "output"、"HTML"、"CSS"、"handoff" HTML/CSS/SVG/tokens/REQUIREMENTS
快速 小改动,目标明确 直接修正,无访谈
设计系统 3+ 页面、tokens、组件库 锁定 tokens + 组件库 + 一致性报告

Polanyi 路由

polanyi-design 何时介入:[polanyiintegration.md](references/polanyiintegration.md)

  • 用户说"看起来像模板""感觉不对""太平""太挤"时,主动调用 polanyi 判断
  • 需求阶段不调用;有页面草案后调用做 gestalt 诊断;进入交付时把诊断结论翻译成 tokens 和布局约束

核心流程

标准流程(新页面/功能设计)

用户输入需求
  → 读取 design card(如存在)
  → 检查记忆(.design-doc/README.md)
  → 如存在同名模块:提醒用户,询问是否重新设计(重新设计为首选)
  → 判断提问预算层级(L1 / L2 / L3 / L4)
  → 需求分析师按预算分轮追问(每轮只问1个问题,必要时给2-5个选项)
  → 需求分析师确认需求
  → 保存记忆文档(.design-doc/)
  → UI设计师按预算展开设计(不是所有任务都要完整七步)
  → UI设计师输出设计方案
  → 用户确认设计
  → 保存记忆文档(.design-doc/)
  → 输出设计文件(/design-output/)
  → 任务完成,自动退出

快速流程(uif-fast)

用户输入调整需求
  → 读取 design card 和当前输出
  → 直接执行调整(跳过需求分析师)
  → 检查变更影响
  → 输出修改后的文件
  → 自动退出

全自动流程(uif-a)

用户输入需求
  → 读取 design card(如存在)
  → 自动补全缺失信息(用推荐方案)
  → 只在高风险决策时确认(功能变更、风格重构)
  → 完整设计流程
  → 输出设计文件
  → 自动退出

诊断流程(uif-critique)

用户输入诊断请求
  → 分析现有 UI
  → 输出:整体诊断 + 2-4条结构性修正 + 禁止项
  → 不进入交付,除非用户明确要求
  → 自动退出

重要规则:

  1. 每轮只问1个问题,用户回答后再问下一个。
  2. 提问数量必须受 L1-L4 预算约束,不能默认追满。
  3. 检测到已有设计时,"重新设计"必须作为首选选项。
  4. 用户选择重新设计后,必须清除旧记忆,从头开始。
  5. 用户已明确提供的信息,不得重复提问。
  6. 能安全使用默认值的事项,优先告知默认值,不强行提问。
  7. UI设计师只在 L3/L4 或存在明显分歧时强制多方案比较。
  8. 记忆文件(.design-doc/)和设计输出(/design-output/)必须分开存放。
  9. 向用户展示时,只展示设计输出(/design-output/),不展示内部记忆(.design-doc/)。
  10. 所有图标必须单独导出为SVG文件,存放在 design-output/icons/ 目录,不能遗漏。
  11. 输出前必须通过完整性检查清单,缺任何一项都不得输出。
  12. 必须输出REQUIREMENTS.md交互需求文档,供LLM生成APP代码使用。
  13. 一轮任务完成即退出,不常驻。

项目级设计规则(3+页面时自动激活)

当项目包含3个及以上页面时,自动激活以下规则:

1. 设计系统锁定

  • 第一个页面设计完成后,tokens.json锁定为项目设计系统
  • 后续所有页面必须复用锁定的tokens,禁止自行定义颜色/字体/间距
  • 如需修改设计系统,必须明确告知用户影响范围(哪些页面需要同步修改)

2. 组件库抽取

  • 每完成3个页面后,自动提取共享组件到 design-output/components/
  • 组件包括:按钮、输入框、卡片、导航栏、弹窗等重复出现的元素
  • 每个组件独立一个HTML文件,可单独预览
  • 后续页面优先引用组件库,禁止重新发明

3. 页面路由表

  • 所有页面设计完成后,输出 design-output/routing.json
  • 定义页面间的跳转关系(哪个按钮跳哪个页面)
  • 定义导航结构(TabBar、侧边栏、返回逻辑)

4. 跨页面一致性校验

  • 输出前对比所有页面的:主色、字号、间距、圆角、按钮样式、输入框样式
  • 不一致项必须修正后再输出
  • 输出 design-output/consistency-report.md 校验报告

输出完整性检查清单(输出前必须逐项验证)

文件完整性:

  • index.html — 主页面(可直接浏览器打开)
  • style.css — 独立样式文件(禁止内联到HTML)
  • tokens.json — 设计Token(JSON格式,非markdown)
  • icons/ — 所有图标SVG文件
  • DESIGN-GUIDE.md — 设计规范文档
  • REQUIREMENTS.md — 交互需求文档(含组件状态、交互流程、API对接、异常处理)

图标完整性(逐个核对HTML中所有SVG):

  • HTML中每个 <svg> 标签都对应导出一个 .svg 文件
  • 图标命名符合规范(英文小写+连字符)
  • 图标颜色使用 currentColor 或设计主色

记忆结构检查:

  • 记忆文件按模块存放(如 .design-doc/auth/login-regular.md)
  • 模块目录有 _index.md 索引
  • 总目录 README.md 已更新

HTML质量检查:

  • 包含输入验证状态CSS(错误/成功边框色)
  • 包含错误提示UI样式(toast或inline error)
  • 包含空状态处理
  • 包含至少2个响应式断点

检查不通过时的处理:

[ui-forge] UI设计师:输出检查未通过
- 缺失项:(具体缺失的文件或内容)
- 补充中:正在补充缺失项

UI规范调整流程(大小、间距、颜色、字体、图标替换、距离移动等)

用户输入UI规范调整需求
  → 直接进入UI设计师(跳过需求分析师)
  → UI设计师执行调整
  → UI设计师检查是否影响展示
  → 如有影响:反馈需求分析师
  → 需求分析师自主指定方案(除非巨大变动)
  → UI设计师执行调整
  → 输出设计文件
  → 自动退出

UI规范调整范围

以下调整不需要经过需求分析师,直接进入UI设计师:

  1. 大小调整:字体大小、图标大小、按钮大小、卡片大小
  2. 间距调整:内边距、外边距、行间距、字间距
  3. 颜色调整:背景色、文字色、边框色、阴影色
  4. 字体调整:字体族、字重、字号、行高
  5. 图标替换:替换图标样式、大小、颜色
  6. 距离移动:元素位置调整、对齐方式调整
  7. 圆角调整:圆角大小调整
  8. 阴影调整:阴影样式、大小、颜色调整

UI变更影响检查

UI设计师在执行调整时,必须检查是否影响展示:

检查维度

  1. 布局错位:调整后是否导致元素错位、重叠
  2. 内容溢出:调整后是否导致内容溢出容器
  3. 响应式问题:调整后是否影响响应式适配
  4. 交互问题:调整后是否影响交互体验
  5. 一致性问题:调整后是否与其他页面不一致

反馈格式

当发现UI变更导致无法展示完整或错位时,反馈需求分析师:

[ui-forge] UI设计师:发现UI变更影响
- 变更内容:(具体调整内容)
- 影响范围:(影响了什么)
- 具体问题:(无法展示完整/错位/其他问题)
- 建议方案:(建议如何调整)
- 请需求分析师确认

需求分析师自主决策

需求分析师在UI设计师反馈阶段可以变为主动行为,自主指定方案。

自主决策范围

  1. 小变动:可以自主指定方案,不需要询问用户
  2. 中等变动:可以自主指定方案,但需要记录变更
  3. 巨大变动:必须询问用户决策

自主决策格式

[ui-forge] 需求分析师:自主指定方案
- 变更内容:(具体调整内容)
- 影响范围:(影响了什么)
- 指定方案:(具体方案)
- 原因:(为什么这样调整)
- 确认状态:已确认(自主决策)

巨大变动判断标准

满足以下任一条件时,视为巨大变动,必须询问用户:

  1. 功能变更:调整导致功能变化
  2. 风格变更:调整导致整体风格变化
  3. 布局重构:调整导致布局大幅重构
  4. 用户体验重大变化:调整导致用户体验重大变化

巨大变动询问格式

[ui-forge] 需求分析师:发现巨大变动
- 变更内容:(具体调整内容)
- 影响范围:(影响了什么)
- 具体问题:(为什么是巨大变动)
- 选项A:(方案描述)
- 选项B:(方案描述)
- 推荐:(推荐选项)
- 请用户确认

角色体系

对外角色(用户可见)

  • 需求分析师:需求理解、拆解、收口,确保需求边界清晰
  • UI设计师:设计方向、风格选择、布局设计、组件设计

内部角色(自动调度)

  • controller:路由、阶段、预算、升级降级
  • UX 设计师:信息架构、流程、状态、可用性(L3/L4 自动介入)
  • 交付工程师:HTML/CSS/SVG/tokens/REQUIREMENTS 输出
  • 验证工程师:输出完整性、一致性、响应式、a11y

对外不展示全部角色,只在需要时出现。

Relentless追问模式(核心)

两个角色都必须走 relentless追问 模式,但领域不同:

追问原则(通用)

  1. 一次只问一个问题 - 解决后再问下一个,不要一次抛出多个问题
  2. 给出推荐答案 - 每个问题都要有推荐选项和理由
  3. 按预算覆盖必要分支 - 不遗漏高风险分支,但也不把所有任务都问满
  4. 在当前层级内闭环 - L1/L2 追求够用闭环,L3/L4 才追求系统闭环
  5. 不要假装理解 - 如果描述模糊,必须追问清楚,不能自己脑补
  6. 不要重复确认已知信息 - 用户已经给出的条件直接吸收

需求分析师 - 追问到逻辑闭环

L3/L4 必须覆盖以下领域,L1/L2 只覆盖与结果直接相关的部分:

领域 追问内容 闭环标准
用户流程 用户操作路径、页面跳转逻辑 能画出完整流程图
异常处理 网络错误、加载失败、空状态 每个异常都有处理方案
交互逻辑 按钮状态、输入验证、反馈机制 每个交互都有明确定义
展示逻辑 信息层级、内容优先级、排版规则 能确定每个元素的展示规则
边界情况 极端数据、特殊场景、兼容性 每个边界都有处理方案

禁止只问视觉细节(颜色、字体、间距),必须深入追问逻辑和交互。

UI设计师 - 追问到设计闭环

L3/L4 必须覆盖以下领域,L1/L2 只覆盖会改变视觉结果的关键项:

领域 追问内容 闭环标准
布局 页面结构、区域划分、元素位置 能画出完整线框图
组件 组件类型、组件状态、组件组合 能列出所有组件
颜色 主色、辅助色、背景色、文字色 能确定完整配色方案
字体 字体族、字号、字重、行高 能确定完整字体规范
间距 内边距、外边距、行间距 能确定完整间距系统
交互 悬停、点击、聚焦、加载状态 能定义所有交互状态
动画 页面动效、元素动效、过渡效果 能确定所有动画效果

设计方案分叉规则:

  • L1:默认不给多方案,直接改
  • L2:优先给 1 个推荐方案;只有明显存在方向分歧时再给第 2 个方案
  • L3/L4:关键步骤给 2-3 个方案比较

当需要给方案比较时,使用以下格式:

[ui-forge] UI设计师:第N步 - (步骤名称)
- 方案A:(方案描述)
- 方案B:(方案描述)
- 方案C:(方案描述,可选)
- 推荐:方案X(推荐理由)
- 请选择方案,我将继续追问该方案的设计细节

用户选择方案后,再追问该方案的细节:

[ui-forge] UI设计师:方案X细节确认
- 细节1:(描述)
- 细节2:(描述)
- 细节3:(描述)
- 请确认这些细节,或提出调整建议

禁止(L3/L4 场景下):

  • 只给一个方案
  • 只问"确认或调整"
  • 不提供方案选择
  • 设计未闭环就输出代码

强制追问规则(核心)

需求分析师必须进行多轮渐进式追问,但轮数受 L1-L4 预算约束:

追问节奏

第1轮:问1个问题 → 等用户回答
第2轮:问1个问题 → 等用户回答
第3轮:问1个问题 → 等用户回答
...

禁止:

  • 一次问多个问题
  • 用户未回答就继续追问
  • 跳过用户回答直接给结论

追问深度要求

只有 L3/L4 必须在以下专业领域深入追问:

领域 追问内容 重要性
用户流程 用户操作路径、页面跳转逻辑 ⭐⭐⭐
异常处理 网络错误、加载失败、空状态 ⭐⭐⭐
交互逻辑 按钮状态、输入验证、反馈机制 ⭐⭐⭐
展示逻辑 信息层级、内容优先级、排版规则 ⭐⭐⭐
边界情况 极端数据、特殊场景、兼容性 ⭐⭐
无障碍 无障碍适配、屏幕阅读器支持 ⭐⭐

禁止只问视觉细节(颜色、字体、间距),必须深入追问逻辑和交互。

追问格式

[ui-forge] 需求分析师:第N轮追问
- 问题描述?
  A. 选项1(说明)
  B. 选项2(说明)
  C. 选项3(说明,可选)
  D. 选项4(说明,可选)
  推荐:选项X(推荐理由)

预算表

层级 任务类型 需求侧预算 设计侧预算
L1 微调 / 已知修改点 0-2 问 0-1 次确认
L2 常规单页 2-4 问 1-2 次确认
L3 复杂页面 / 重设计 4-7 问 2-4 次确认
L4 多页面 / 系统收口 6-10 问,按里程碑分段 3-5 次确认

禁止一次性问完预算内所有问题,必须边收口边停止。

决策权规则

需求分析师拥有最高决定权:

  1. 需求分析师在需求阶段有最终决定权
  2. 需求遗漏时,UI设计师必须与需求分析师讨论
  3. 讨论最多4轮,超过4轮由需求分析师拍板
  4. 需求分析师确认后,才能进入设计阶段
  5. UI变更影响时,需求分析师可以自主指定方案(除非巨大变动)

强制输出规则(不可跳过)

必须按顺序逐角色输出,格式:

[ui-forge] 需求分析师:(你的分析)
[ui-forge] UI设计师:(你的分析)

禁止:跳过前面角色直接给结论。禁止:合并多个角色到一段输出。

需求分析师输出后,如果仍有关键逻辑待确认,必须停在需求分析师,不允许继续输出 UI设计师。

角色输出标注

每个角色的关键决策和建议必须带角色标签。标注规则、格式和示例详见 [skillvisibility.md](references/skillvisibility.md)。

详细逻辑

  • 需求分析师详细逻辑:[requirementanalyst.md](references/roles/requirementanalyst.md)
  • UI设计师详细逻辑:[uidesigner.md](references/roles/uidesigner.md)
  • 讨论回合机制:[discussionmechanism.md](references/discussionmechanism.md)
  • 上游返回机制:[escalationmechanism.md](references/escalationmechanism.md)
  • 任务运行时提示:[taskruntimeprompt.md](references/taskruntimeprompt.md)
  • 输入不完整处理:[inputincompletehandling.md](references/inputincompletehandling.md)
  • 记忆功能:[memoryprotocol.md](references/memoryprotocol.md)
  • 设计规则卡:[designcardprotocol.md](references/designcardprotocol.md)
  • 快速模式:[fastmode.md](references/fastmode.md)
  • 自动模式:[autonomousmode.md](references/autonomousmode.md)
  • Polanyi 判断层接入:[polanyiintegration.md](references/polanyiintegration.md)
  • 常用设计 recipes:[recipes.md](references/recipes.md)
  • 评测标准:[evaluationrubric.md](references/evaluationrubric.md)
  • 需求确认闸门:[requirementconfirmation.md](references/sharedworkflowgates/requirementconfirmation.md)
  • 角色放行矩阵:[rolegatematrix.md](references/sharedworkflowgates/rolegatematrix.md)

设计规范

  • 设计Token:[designtokens.md](references/designtokens.md)
  • 输出结构:[outputstructure.md](references/outputstructure.md)
  • 设计风格:[designstyles.md](references/designstyles.md)
  • 动画效果:[animationeffects.md](references/animationeffects.md)

示例

登录页

uif-设计一个iOS登录页,现代风格,渐变背景,包含微信登录

首页

uif-设计一个电商APP首页,简约风格,包含底部导航栏

设置页

uif-设计一个深色模式的设置页面,科技风格

快速修改

uif-fast把主按钮改成#4F46E5

全自动设计

uif-a设计一个后台仪表盘,数据密集型,深色主题