正文
获取原文件SKILL.md
Codex Adaptation
执行前完整读取 Codex 执行规则 与 UI 设计实施与验收，核查范围、共享组件、实际产物和证据。保留本文完整页面、状态、设计系统、资产、导出、规范和审计要求；视觉工具使用遵守用户限制。
-
DESIGN：定义视觉系统、组件、页面及适用状态。 -
AUDIT：检查既有界面和资产，输出有依据的问题与未验证项。 -
IMPLEMENT：在用户已授权范围内修改界面并运行受影响验证。 -
使用
$haonan-s003-2-ui触发本技能。 -
接受以下任一输入独立启动：代码/路由、PRD、原型/线框图/截图；Logo、IP、品牌规范和竞品参考属于增强输入，不是启动前提。
-
先读取现有上下文，再决定是否需要提问；已有明确选定方案时不得重新发散风格。
-
用户说“先不动代码”时，仅产出设计稿、规范和切图。只有用户明确说“开始重构/落地/改代码”后才修改工程。
-
不声称页面、切图、构建或视觉验收完整，除非已实际执行相应盘点和验证。
Skill Function
界面更新前检索相关开发记录和当前设计规范。需要盘点现状时同时覆盖路由、Tab、弹窗、抽屉及角色可见状态，使用获准的 DOM 与行为检查；图像读取仍遵守用户限制。交互或业务规则变化使用 需求同步，Token 与组件维护位置使用 设计责任。
- 阶段：S003-2
- 职能：从产品全量盘点到高一致性 UI 设计、全状态设计、切图交付和质量验收。
- 输入：完整项目、仅 PRD 或仅原型中的任一种；可附品牌/IP素材、选定视觉方向、文案限制、目标端与交付格式。
- 输出：设计系统、全页面设计稿、全状态设计稿、配图和图标切图、资产清单、页面映射、设计规范、自查报告；经授权可输出前端实现。
把整套产品视为一个连续世界，而不是若干张孤立页面。既要让首屏惊艳，也要保证最后一个设置页、空状态和确认弹窗仍然遵守同一套视觉语言。以完整性、一致性、真实资产和可落地性为优先级，不用占位符掩盖未完成工作。
必读参考
- 设计语言与 IP 体系：需要确定风格、色彩、空间、插画和组件时，读取 references/visual-system.md。
- 页面与状态覆盖：需要盘点路由、补齐页面或判断完成度时，读取 references/coverage-and-states.md。
- 输入模式与范围推导：只有 PRD 或只有原型/截图时，必须读取 references/prd-and-prototype-inputs.md。
- 切图与交付：需要导出素材、建立清单、打包或处理大文件时，读取 references/delivery-and-slicing.md。
- 质量验收：准备对用户说“全部完成”前，必须读取 references/qa-checklist.md。
工作流
1. 建立唯一事实源
先识别输入模式，再选择事实源和完成度口径：
- 完整项目/代码模式：从路由、页面目录、导航入口、弹窗和条件分支提取真实页面；代码和路由是事实源。
- 仅 PRD 模式：从用户角色、业务目标、功能需求、用户故事、权限和验收条件推导任务流、信息架构、页面清单与必要状态；PRD条目和已确认假设是事实源。
- 仅原型模式：逐屏识别入口、导航、内容层级、控件、交互线索和页面关系，建立屏幕图谱；原型可见内容和已确认假设是事实源。
- 混合模式：用户最新明确决定、批准 PRD、确认原型确定目标范围；代码记录当前实现。缺少实现的需求继续保留，推导内容单独记录。
- 标记用户硬约束：目标端、禁止词、平台尺寸、是否允许改代码、视觉方案、是否需要 Figma 可编辑稿。
- 建立
route-design-map.csv或screen-design-map.csv，同时建立assumptions-and-open-questions.md。
只有 PRD 或原型时允许合理推导，但必须区分“原文明确、由交互必需推导、待确认”三种来源。不得把推测写成既有业务事实。
2. 锁定视觉方向
- 用户未选风格时，给出 2–3 个差异明确的方向，包含关键词、配色、材质、IP使用和适用场景，等待选择。
- 用户已选择“方案2”或提供参考稿时，直接继承该方向，不重新发明首屏、卡片或图标体系。
- 参考竞品时学习其信息层级、反馈循环和游戏化方法，不复制商标、角色或专属视觉资产。
- 先做一张视觉母版：首页或核心任务页 + 关键组件 + IP形象。母版确认后再扩展全量页面。
3. 建立设计系统
至少定义：
- 颜色语义：品牌、主操作、辅助主题、成功、提醒、错误、纸张/背景、文本与边框。
- 字体层级：页面标题、卡片标题、正文、说明、数字和标签。
- 8pt 间距体系、页面安全边距、内容最大宽度、底部安全区。
- 圆角、描边、阴影、玻璃/纸张材质与动效强度。
- 按钮、输入框、Tab、列表、卡片、导航、弹窗、进度、标签、Toast和反馈组件。
- IP出场规则：欢迎、引导、思考、正确、错误、完成、空状态、连续学习和奖励。
- 场景背景映射：不同模块可有不同环境，但共享光线、材质、色温和空间透视。
优先建立组件变量和可复用结构，再绘制剩余页面；不要逐页手工漂移。
4. 分批完成全部页面
按以下顺序推进，每批完成后执行一致性门禁：
- 核心体验：登录/首页/主任务/关键结果页。
- 一级导航模块与核心列表。
- 二级分类、详情、搜索、计划和个人中心。
- 边缘页面：协议、设置、历史记录、管理页。
- 系统状态：加载、空、错误、权限、断网、确认、删除、反馈、完成、锁定、重试。
每批检查同一页面边距、标题位置、卡片圆角、按钮高度、IP比例、背景明度和主题色。若后续页面明显简化，立即回到设计系统修正，禁止以“页面不重要”为由降低完成度。
5. 使用真实视觉资产
- 页面中出现的IP、场景、装饰、内容插画和定制图标都必须有真实图片文件。
- 不用 Emoji、文字符号、CSS图形、空白占位框或随手绘制的 SVG 冒充最终资产。
- 使用获准的源资产；需要新增图像且用户允许时使用图像生成工具，保持角色、视角、材质、光线和色板一致。限定审查或复用现有风格时不强制生成无关图像。
- 先测量组件槽位，再生成或裁切对应比例；禁止拉伸、低清放大和不匹配裁剪。
- 标准功能图标优先使用同一图标库；品牌性图标、关卡图标和IP相关图标提供切图。
6. 生成切图与资产清单
导出至少包含：
- Master 高分辨率版本。
- 目标端 1x、2x；如项目需要再提供 3x/WebP/JPG。
- 透明背景 PNG 用于IP、图标和装饰；大背景按质量与体积选择 JPG/WebP。
- 稳定英文命名、用途、尺寸、格式、透明度和对应页面。
asset-manifest.csv、page-asset-map.csv和预览板。
同一素材的不同尺寸应来自同一个 Master，不得分别生成导致形象漂移。
7. 输出设计规范
设计规范必须说明：
- 品牌理念和视觉关键词。
- 色彩、字体、栅格、间距、圆角、阴影与动效 Token。
- 组件正常/按下/禁用/加载/错误状态。
- IP形象、场景背景、插画和图标使用规则。
- 页面结构模板和模块主题映射。
- 切图规格、命名、适配、安全区与开发标注。
- 禁用做法和常见一致性问题。
同时提供可阅读版 PDF 和可维护的 Markdown/JSON Token 文件。
8. 可选：落地到现有前端
仅在用户授权后执行：
- 建立安全副本或独立分支。
- 先接入 Token、全局主题、字体和真实资产。
- 提炼共享 Hero、IP状态、空状态、导航和卡片组件。
- 逐路由替换视觉层，保留接口、数据结构、状态管理和业务逻辑。
- 将硬编码样式迁移为统一 Token；避免全局覆盖破坏模块辅助主题。
- 执行生产构建和资产引用检查。
- 用户允许视觉工具且浏览器可用时，使用相同视口比较参考稿和实现截图；未执行时明确视觉验收状态。共享组件修改需覆盖全部受影响页面的导航、弹窗、加载、错误、长文本和窄视口状态。
完成定义
只有同时满足以下条件，才可回答“全部完成”：
- 代码模式：真实路由数 = 路由设计映射数，缺失为 0。
- PRD模式：已确认需求/用户故事对应的必要页面与流程节点 = 已设计页面与流程节点，未覆盖为 0；假设与开放问题已单列。
- 原型模式：可见源屏幕 = 已设计源屏幕，缺失为 0；推导出的补充页面和状态单列，不能把未提供的后台规则冒充已确认范围。
- 每个核心流程的必要状态都有设计稿。
- 所有页面使用统一 Token 和组件规则。
- 所有可见定制配图与图标都有切图文件。
- 资产清单引用的文件存在，源码引用缺失为 0。
- 设计规范、页面稿、状态稿、切图和清单齐全。
- 所有压缩包通过完整性检查；若拆包，合计覆盖源文件且缺失为 0。
- 若包含代码，生产构建通过；若声称视觉一致，浏览器对照验收通过。
运行 scripts/audit_ui_delivery.py 检查清单完整性。该脚本只验证结构与文件引用，不代替人工视觉审核。
交互与汇报
- 先报结论，再说明覆盖数量、缺失数量和阻塞项。
- 报告中明确当前采用“代码模式、PRD模式、原型模式或混合模式”，并说明完成度分母来自哪里。
- 不用“基本完整”“应该都包含”之类模糊表述；给出可核查数字。
- 用户要求慢慢做时，按批次汇报但持续推进，不因为批次靠后而降低质量。
- 大文件超过稳定下载限制时，拆成多个可独立解压的主题包；不要只给无法下载的超大单文件。
- 最终提供设计规范、页面稿、切图、清单、自查报告和可选实现包的清晰链接。