moe-ui-skill

# 萌 UI 把用户选择的视觉方向转化成可实现、可交互的界面。默认追求温暖、治愈、可爱、简洁和清新，但用户提供的品牌与视觉要求优先，不把某个项目的角色、颜色或导航结构推广到其他产品。 核心流程：**浏览预置风格图并选择 → 生成并确认实际产品第一页 → 扩展关键页面 → 生成素材 → 代码实现 → 对照调整**。风格库预览是选风格的示例，不是用户产品的最终页面。先选风格，再为真实产品生图。 ## 开始前 - 检查目标项目、已有页面、组件和资源，确认真实功能、主导航、关键交互及用户最新约束。只询问确实缺失的信息。 - 默认选择最能代表产品、使用频率高的一个关键页面。锁定相同视口、布局、功能、示例内容与状态，再比较视觉风格。 - 已有明确选中的参考图时，从适用阶段继续，不重复探索或要求再次选择。用户只要求预览时不擅自实现代码。 - 生图使用当前可用的 imagegen 技能和内置图像工具；使用前读取该技能，遵循其参考图、透明背景和保存规则。不存在可用生图能力时说明限制，不以代码绘制占位图冒充已生成素材。 - 读取本地参考图后再使用；每次生成调用都传入完整的布局约束、风格要求及必要参考图，不能依赖未验证的跨调用状态或模型记住前一张图。 ## 1. 浏览预置风格并选择 先读取 [风格库索引](references/styles.md)，使用索引中真实存在的预览图片。默认展示全部预设（当前六种），按编号、名称逐张展示或并排呈现；不要只列名称让用户盲选，也不要为每次选风格重新生图。 - 优先推荐第一项「清新蜡笔」，它是本技能创建者明确选中的方向。其特征为干净白底、柔和浅色、简单蜡笔插画和独立彩色操作图标。推荐不等于替用户选择。 - 预置图片保持同类功能骨架，让区别来自媒介、角色造型、配色、气泡轮廓和图标；不要把各个 preset 约束成同一套设计换材质。示例导航、角色、文案不绑定用户产品。 - 明确告知用户当前展示的是风格样例，选中后将按实际产品结构生成第一页。 - 用户明确选择或授权你自行选择前，不生成实际页面或批量素材。没有喜欢的预设时，根据反馈补充方向，不强迫六选一。 - 用户已提供或选定风格时跳过这一阶段；不要再次要求选择。 ## 2. 生成并确认实际产品第一页 读取所选风格目录的 `prompt.md`，查看该目录 `preview.png`；将其作为风格参考，按真实业务生成一个完整关键页面。 - 锁定视口、真实导航、必要控件和交互，清晰区分风格参考和布局参考。不得凭空增加阅读回执、在线状态、电话或视频等不存在的功能。 - 参考图必须完整展示页面结构，包括必要安全区、内容和底部操作区；没有设备外框遮挡，没有不必要的装饰封面。 - 检查文字、功能、空间利用率以及图标风格。展示结果后，根据用户反馈调整这一页，直到用户明确表示满意或已授权自行判定。 - **用户选中风格不等于确认第一页满意**。第一页满意之前不批量扩展页面。已有用户满意的完整产品参考图时直接沿用，不重复生成或确认。 ## 3. 扩展页面 以选中图作为唯一主视觉基准，按授权范围生成其余主要页面；必要时补关键详情或状态。 - 每次带上选中参考图，保持角色造型、配色、字级、图标媒介、圆角、导航和间距一致。 - 页面结构以实际业务为准，不能把每一页都套成聊天页，也不能照搬候选图中不存在的功能。 - 检查完整视口、真实入口、内容密度、选中态和可触达操作。用户后续纠正优先于旧参考图。 - 第一页确认满意后，已获授权的后续阶段连续完成，不为每一张参考图增加例行审批。 ## 4. 生成素材 先在工作上下文列出实际需要的可复用素材，再逐个生成并接入项目。无需为此额外创建文档。 - 拆分角色、场景插画、主导航图标、输入/操作图标与必要装饰。覆盖容易遗漏的底栏和输入条图标，避免主体是插画而操作区仍是风格冲突的默认线框图标。 - 使用生图模型生成独立素材。需要抠出使用的元素显式要求真正透明背景；不能用白底或棋盘格假装透明。完整矩形场景图是否透明按其用途决定。 - 同套素材保持一致的角色、视角、笔触、视觉重量和色板；在实际显示尺寸下仍应容易辨认。图标的可点击区域由代码提供，不要求插画本体占满触控区域。 - 每个可复用元素单独交付，避免把整张界面截图或含文字/按钮的合成大图当作素材。正文、标签、动态数字不烘焙进图片。 - 检查透明通道、边缘、留白、尺寸与小图可读性。保存到项目的稳定资源目录，使用语义化文件名；需要时优化分辨率及体积，保留源图，不覆盖未获授权替换的资源。 - 示例头像、示例回忆和生成场景不能覆盖用户真实数据；需要区分生成内容时沿用产品的标识规则。 ## 5. 代码实现 用真实组件还原布局、交互和动态内容，用图片承担视觉素材。 - 优先沿用现有架构、设计令牌和共用组件，统一颜色、间距、字级、控件状态及资源映射。 - 保留真实业务、接口、权限、导航、键盘行为、加载/失败/空状态与无障碍语义。不要把截图中的样例数据变成真实业务数据。 - 独立插画图标并不意味着拆散控件：例如一体式输入条仍是一个整体容器，内部操作换成插画素材即可。 - 确保安全区、长文本、不同屏宽和键盘出现时布局正常；插画保持比例，正文依旧清晰可读。 - 按用户与项目约束运行必要检查。不要因本技能自动新增测试、文档、提交、部署、新会话或 worktree；这些遵循当前任务的授权与开发阶段。 ## 6. 对照调整 把实现与选中参考图按相同视口和相近状态比较，优先修正影响观感和使用的问题：布局/空间分配 → 字级与密度 → 素材风格和尺寸 → 配色与细节。 - 在允许的验证范围内查看实际渲染。视觉检查和完整端到端测试是不同工作，不绕过用户的测试限制。 - 对照确认完整导航、输入/操作区、图标一致性、插画比例及交互可用性。不要只比较配色便宣称还原完成。 - 一次针对具体差异修正，避免已经选定后无依据反复更换风格。 - 无法查看运行效果时明确说明仅完成哪些静态检查，不能宣称视觉或设备验证通过。 - 交付最终参考图、已接入素材及实现入口，简述完成内容和验证范围。未获用户授权不额外创建报告文件。