# Zfl UI

> 独立的 UI/UE 设计 skill。Use when the user wants to单独做 UI 方案、UI/UE 设计、高保真方向图、参考图分析、设计迁移、控件切图、HTML 交互效果页，或提到 `zfl-ui`、`UI设计`、`效果图`、`高保真`、`ui.md`、`HTML交互网页`。

- Skill: `zengfanling/zfl-ui` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add zengfanling/zfl-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zengfanling/zfl-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ZengFanling (https://skillmd.com/u/zengfanling)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/zengfanling/zfl-ui

---


# ZFL UI

这是一个独立的 UI/UE 设计 skill，用于把需求推进成：

1. `ui.md` 设计方案
2. `imagegen` 高保真方向图
3. `ui-assets/` 控件切图
4. 可点击交互的 HTML 网页效果稿

它不依赖原 `speckit` 才能工作，目录里自带：

- [DESIGN_RULES_BUNDLE.md](./DESIGN_RULES_BUNDLE.md)
- [基于vue3前端开发规范.md](./基于vue3前端开发规范.md)

## 默认工作方式

先按下面顺序工作：

1. 先主动询问用户有没有参考图、参考页面、竞品截图、历史设计稿或喜欢的风格示例
2. 如果用户给了参考图，先读参考图，再提炼可迁移的风格、布局、颜色、组件语言和细节处理
3. 如果用户暂时没有参考图，再读需求，提炼页面目标、用户类型、核心任务、关键动作和风格倾向
4. 再梳理页面骨架，确定首屏结构、阅读路径、固定区与滚动区
5. 再确定颜色策略，明确主题色、辅助色、强调色、中性色、状态色如何分工
6. 再检查现有项目组件、样式变量和历史页面，尽量保持一致性
7. 如果用户没给够参考，再补做灵感检索和经典页面分析
8. 最后再细化页面稿，而不是一开始就直接拼组件

也就是说，**画 UI 前默认先问参考图**；只有用户明确说没有、暂时不给，或者现有参考不足以支撑设计方向时，才进入自找参考和灵感检索。

## 设计模式

默认支持两种模式：

1. **视觉优先模式（主路径）**
2. **规范复核模式（辅助路径）**

模式选择规则：

- 默认先走视觉优先模式
- 如果用户明确说“想要更漂亮”“先出高保真视觉方向”“先看图”“当前稿子像线框图”“先做图片再反推代码”，直接进入视觉优先模式
- 如果用户没有明确说明，但当前页面属于首页、工作台、核心列表页、关键结果页、品牌感较强页面，也默认进入视觉优先模式
- 规范复核模式不作为主路径，而是用来复核业务结构是否成立、规范是否遵守、组件是否一致、交互与实现是否可落地

## 适用阶段

如果是 **`0 到 1` 项目**：

- 先做“参考图审美分析与设计迁移”
- 分析参考图的风格、色彩、布局、组件语言和交互节奏
- 再结合设计规范完成 UI 方案

如果是 **`1 到 N` 需求**：

- 先分析原有 UI / 前端界面的审美、布局、组件语言、交互节奏和可迁移部分
- 再结合本次需求目标与设计规范完成 UI 方案

## 产物

### 1. `ui.md`

如果当前走的是视觉优先模式，第一轮给用户看的外显产物默认应是 **高保真方向图**；`ui.md` 可以先保留为轻量版设计底稿，等方向图确认后再补全为完整方案。

完整版 `ui.md` 至少包含：

- 设计推导结论
- 设计目标
- 适用端：移动端 / PC 端 / 双端
- 灵感检索结论
- 参考图分析结论
- 规范约束摘要
- 布局策略
- 风格策略
- 颜色策略
- 信息架构
- 页面层级
- 关键页面结构
- 核心组件
- 交互说明
- 状态说明
- 文案基调
- 视觉方向
- 响应式要求
- 与现有代码或现有流程的对应关系

### 2. 高保真方向图

接入 `imagegen` 时，默认规则是：

1. 先完成页面骨架、首屏重心、颜色策略和页面类型判断
2. 再把这些信息整理成高保真图片生成提示词
3. 一次先生成 `2 ~ 3` 个不同但相近的视觉方向，不要只出一版
4. 先选方向，再做 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.png`
- `button-primary-large-default.png`
- `tag-warning-score-low.png`
- `nav-mobile-top-default.png`

### 4. HTML 交互网页

用户确认视觉方向后，默认进入 **HTML 交互网页阶段**，至少满足：

- 第一轮方向图已经先给用户看过，并且用户已明确认可该视觉方向
- `ui.md` 已被用户认可，或用户明确表示“按这版继续出网页”
- 控件切图已经完成，或者已经明确说明本页哪些元素不需要切图、可直接用 CSS / SVG 复刻
- 输出的是 **可直接在浏览器打开的 HTML 网页效果稿**，而不是纯静态截图
- 页面至少包含关键点击反馈、分段切换、弹层 / 抽屉 / 标签切换 / 按钮态等基础交互中的一部分
- 优先复用 `ui-assets/` 中已经拆出的控件切图，按效果图做视觉还原
- 产出后用浏览器验证关键页面，检查视觉完成度与点击交互是否成立

## 端类型规则

### 移动端

- 默认按 `375 × 812` 的设计尺寸输出方案
- `ui.md`、方向图和 HTML 效果页中的移动端页面结构、关键区块尺寸、弹层、底部操作区和页面示意，都应以这个基准尺寸来表达
- 考虑安全区、底部手势区和滚动区

### PC 端

- 默认先遵循 [DESIGN_RULES_BUNDLE.md](./DESIGN_RULES_BUNDLE.md) 中的桌面端规范
- 优先考虑页面栅格、内容宽度、信息密度、工作台 / 列表 / 筛选 / 详情 / 弹层结构
- 重点关注组件层级、按钮尺寸、表格可读性、导航与操作区关系、浏览器视口下的首屏重心与关键操作可达性

## 设计规范

执行时默认优先读取：

- [DESIGN_RULES_BUNDLE.md](./DESIGN_RULES_BUNDLE.md)

如果后续要真正落地前端：

- 生成 Vue 代码前读取 [基于vue3前端开发规范.md](./基于vue3前端开发规范.md)
- 如果有本地可运行前端，改完后用浏览器能力验证关键页面