메뉴
用于会影响产品一致性的前端 UI 任务，包括 app 界面、可见组件、布局、样式、导航、弹窗、卡片、设置、列表、表单、颜色、字体、截图参考界面、组件库复用和其他 renderer-facing surface。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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。