Menu
用于会影响产品一致性的前端 UI 任务，包括 app 界面、可见组件、布局、样式、导航、弹窗、卡片、设置、列表、表单、颜色、字体、截图参考界面、组件库复用和其他 renderer-facing surface。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | design-rail-ui |
| description | 用于会影响产品一致性的前端 UI 任务，包括 app 界面、可见组件、布局、样式、导航、弹窗、卡片、设置、列表、表单、颜色、字体、截图参考界面、组件库复用和其他 renderer-facing surface。 |
Design Rail UI 是一套给 coding agent 和开发者共用的前端 UI 工作流。
它的目标不是让 agent 自由发挥设计，而是让 UI 修改保持同一套产品语言：先读图，先确认，再按最小范围实现。
只要任务会影响可见 UI，就使用这个 skill：
以下情况不用：
提出 UI 改法前必须读：
references/design.mdreferences/workflow.mdreferences/component-rules.mdreferences/ui-communication-glossary.mdreferences/screenshot-reading.md涉及代码实现时还必须读：
references/implementation-rules.md需要更多页面模式、颜色家族、结构术语时再读：
references/ui-glossary.md识别到 UI 任务后，不允许直接实现。
只要任务涉及截图、参考图、视觉风格、布局、层级、密度、颜色、组件处理或组件库复用，确认就是必需步骤。
实现前必须完成：
surfacemoduleissuesadjustments以下情况必须先确认：
module changenew module没有确认，就不能实现。
如果用户提供截图，必须先返回截图差异报告和改法选项，然后停下来等待用户确认。
当用户提供当前截图、参考截图或模糊视觉反馈时，先输出：
当前 surface（Current surface）:
目标 module（Target module）:
参考图阅读（Reference reading）:
当前差异（Current mismatch）:
可能原因（Likely cause）:
推荐改法路径（Recommended adjustment paths）:
需要你确认（Need your decision on）:
然后停止，等待用户确认。
不能在第一次截图分析的同一轮里直接改文件，除非用户已经明确确认了改法。
Design Rail 不绑定某一个组件库。每个项目可以使用自己的组件库，例如 HeroUI、shadcn/ui、Radix、Headless UI 或内部组件系统。
进入实现前，agent 必须先检查当前项目的组件环境：
package.json 是否已有 UI 组件库src/components/ui、src/renderer/components/ui、components/ui实现优先级：
components/ui 或类似 UI 入口禁止默认重写：
先把任务分类：
small changemodule changenew module然后识别：
完整流程见 references/workflow.md。
实现前必须返回结构化 UI reading：
当前 surface（Current surface）:
目标 module（Target module）:
观察到的问题（Observed issues）:
建议改法（Proposed improvements）:
模式方向（Pattern direction）:
颜色方向（Color direction）:
密度方向（Density direction）:
组件复用（Component reuse）:
需要你确认（Need your decision on）:
最低必须包含：
当前 surface（Current surface）目标 module（Target module）观察到的问题（Observed issues）建议改法（Proposed improvements）如果涉及截图，还必须包含：
参考图阅读（Reference reading）当前差异（Current mismatch）可能原因（Likely cause）推荐改法路径（Recommended adjustment paths）需要你确认（Need your decision on）然后停下来等待用户确认。
用户确认后：
Design directionworkflow.mdcomponent-rules.mdimplementation-rules.md不要静默创造新的局部 UI 模式。
讨论 UI 时不要停留在模糊词：
更干净更高级更现代更好看必须翻译成：
surfacemoduleissueadjustmentdecision非平凡 UI 任务还要确认：
pattern directioncolor directiondensity directioncomponent reuse使用 references/ui-communication-glossary.md 处理：
使用 references/screenshot-reading.md 处理：
使用 references/ui-glossary.md 处理：
UI 任务完成必须同时满足：
pending user review详细验收流程见 references/workflow.md。