ZengFanling ZFL UI
这是一个独立的 UI/UE 设计 skill，用于把需求推进成：
ui.md设计方案imagegen高保真方向图ui-assets/控件切图- 可点击交互的 HTML 网页效果稿
它不依赖原 speckit 才能工作，目录里自带：
默认工作方式
先按下面顺序工作：
- 先主动询问用户有没有参考图、参考页面、竞品截图、历史设计稿或喜欢的风格示例
- 如果用户给了参考图，先读参考图，再提炼可迁移的风格、布局、颜色、组件语言和细节处理
- 如果用户暂时没有参考图，再读需求，提炼页面目标、用户类型、核心任务、关键动作和风格倾向
- 再梳理页面骨架，确定首屏结构、阅读路径、固定区与滚动区
- 再确定颜色策略，明确主题色、辅助色、强调色、中性色、状态色如何分工
- 再检查现有项目组件、样式变量和历史页面，尽量保持一致性
- 如果用户没给够参考，再补做灵感检索和经典页面分析
- 最后再细化页面稿，而不是一开始就直接拼组件
也就是说，画 UI 前默认先问参考图；只有用户明确说没有、暂时不给，或者现有参考不足以支撑设计方向时，才进入自找参考和灵感检索。
设计模式
默认支持两种模式：
- 视觉优先模式（主路径）
- 规范复核模式（辅助路径）
模式选择规则：
- 默认先走视觉优先模式
- 如果用户明确说“想要更漂亮”“先出高保真视觉方向”“先看图”“当前稿子像线框图”“先做图片再反推代码”，直接进入视觉优先模式
- 如果用户没有明确说明，但当前页面属于首页、工作台、核心列表页、关键结果页、品牌感较强页面，也默认进入视觉优先模式
- 规范复核模式不作为主路径，而是用来复核业务结构是否成立、规范是否遵守、组件是否一致、交互与实现是否可落地
适用阶段
如果是 0 到 1 项目：
- 先做“参考图审美分析与设计迁移”
- 分析参考图的风格、色彩、布局、组件语言和交互节奏
- 再结合设计规范完成 UI 方案
如果是 1 到 N 需求：
- 先分析原有 UI / 前端界面的审美、布局、组件语言、交互节奏和可迁移部分
- 再结合本次需求目标与设计规范完成 UI 方案
产物
1. ui.md
如果当前走的是视觉优先模式，第一轮给用户看的外显产物默认应是 高保真方向图；ui.md 可以先保留为轻量版设计底稿，等方向图确认后再补全为完整方案。
完整版 ui.md 至少包含：
- 设计推导结论
- 设计目标
- 适用端：移动端 / PC 端 / 双端
- 灵感检索结论
- 参考图分析结论
- 规范约束摘要
- 布局策略
- 风格策略
- 颜色策略
- 信息架构
- 页面层级
- 关键页面结构
- 核心组件
- 交互说明
- 状态说明
- 文案基调
- 视觉方向
- 响应式要求
- 与现有代码或现有流程的对应关系
2. 高保真方向图
接入 imagegen 时，默认规则是：
- 先完成页面骨架、首屏重心、颜色策略和页面类型判断
- 再把这些信息整理成高保真图片生成提示词
- 一次先生成
2 ~ 3个不同但相近的视觉方向，不要只出一版 - 先选方向，再做 refinement，不要第一版就直接当最终稿
这里的“2 ~ 3 个方向”，默认指 2 ~ 3 张不同风格的单页面高保真图，不是把多个页面拼成一张总览板，也不是做带标题编号的方案展示图。
第一轮默认目标是：
- 先画
1个重点页面的成品级高保真 UI mockup - 不是多页面拼贴
- 不是流程总览图
- 不是白底汇报板
- 不是线框图上色版
- 不是在大画布上摆一排手机界面
第一轮更推荐的构图是：
- 单个重点页面
- 接近真实产品截图或设计稿截图的视角
- 页面内容完整、信息密度真实
- 组件细节完整
- 视觉重心明确
- 像“已经做完的设计稿”，而不是“设计过程说明图”
第一轮输出方式默认是：
- 先直接把生成图片给用户确认
- 不要在用户还没确认视觉方向时抢先生成整套网页
- 可以同步整理这张图对应的页面骨架、颜色策略、组件气质和 refinement 观察，但“看图确认”优先级更高
只有在用户明确说“按这版继续”“这版可以推进”“按这个方向生成网页”之后，才进入 HTML 阶段。
3. 控件切图
在进入 HTML 阶段之前，默认先执行一轮 控件切图。
切图输出默认放在：
ui-assets/
推荐按页面或模块分子目录，例如：
ui-assets/home/ui-assets/dialog/ui-assets/result/
同时生成：
ui-assets/manifest.md
默认优先拆分这些对象：
- 按钮：主按钮、次按钮、描边按钮、危险按钮、禁用态按钮
- 导航块：顶部栏、底部栏、标签切换、分段控件
- 卡片块：数据卡、任务卡、结果卡、提示卡
- 标签与徽标：状态标签、角标、评分标签、提示条
- 输入与筛选：搜索框、输入框、下拉、筛选条
- 图标或弱插画：如果对视觉风格有明显影响，则单独切出
不必机械把整页每一块都切出来，而是优先切那些会影响 HTML 1:1 还原、且短期内不适合只靠 CSS 复刻的视觉单元。
ui-assets/manifest.md 至少记录：
- 切图文件名
- 来源页面
- 所属控件类型
- 在 HTML 中建议作为背景图 / 前景图 / 独立图片 / 遮罩素材使用
- 是否允许后续替换为纯 CSS / SVG 实现
命名建议：
screen-home-card-training.pngbutton-primary-large-default.pngtag-warning-score-low.pngnav-mobile-top-default.png
4. HTML 交互网页
用户确认视觉方向后，默认进入 HTML 交互网页阶段，至少满足：
- 第一轮方向图已经先给用户看过，并且用户已明确认可该视觉方向
ui.md已被用户认可，或用户明确表示“按这版继续出网页”- 控件切图已经完成，或者已经明确说明本页哪些元素不需要切图、可直接用 CSS / SVG 复刻
- 输出的是 可直接在浏览器打开的 HTML 网页效果稿，而不是纯静态截图
- 页面至少包含关键点击反馈、分段切换、弹层 / 抽屉 / 标签切换 / 按钮态等基础交互中的一部分
- 优先复用
ui-assets/中已经拆出的控件切图，按效果图做视觉还原 - 产出后用浏览器验证关键页面，检查视觉完成度与点击交互是否成立
端类型规则
移动端
- 默认按
375 × 812的设计尺寸输出方案 ui.md、方向图和 HTML 效果页中的移动端页面结构、关键区块尺寸、弹层、底部操作区和页面示意，都应以这个基准尺寸来表达- 考虑安全区、底部手势区和滚动区
PC 端
- 默认先遵循 DESIGN_RULES_BUNDLE.md 中的桌面端规范
- 优先考虑页面栅格、内容宽度、信息密度、工作台 / 列表 / 筛选 / 详情 / 弹层结构
- 重点关注组件层级、按钮尺寸、表格可读性、导航与操作区关系、浏览器视口下的首屏重心与关键操作可达性
设计规范
执行时默认优先读取：
如果后续要真正落地前端：
- 生成 Vue 代码前读取 基于vue3前端开发规范.md
- 如果有本地可运行前端，改完后用浏览器能力验证关键页面