从需求到设计原型：LLM 辅助产品设计方法

目标

思路

LLM 本质：输入（图片/文字）tokenize 后，transformer 逐个预测下一个 token。训练语料以语言 / 代码为主，所以 LLM 的语言、代码类输出比像素级图像输出更稳定。

推论：用 HTML/CSS（文本格式）承载设计图，而不是让 LLM 直接出图。需求文档 → 文本格式设计稿 → 导入设计软件微调。

难点

• 样式控制：让 LLM 稳定输出符合规范、风格统一的结果，不是每页各画各的
• 信息密度：喂给 LLM 足够细节，顾及每个设计点，不漏字段 / 不漏状态
• 审美传递：把人对设计的品味喂给 LLM

尝试

工具

Claude + Claude Code。模型：Opus / Fable。

准备：三项输入

• 产品需求
• Mobbin MCP 调研最佳实践，结合产品需求生成调研报告（含设计取舍）
• 蒸馏设计规范文档

M1 · 首页：KPI 环比 + 设备实时态势 时间筛选 / 总揽 / 设备 / 工单

需求回显：右上角时间 filter（默认近 30 天）；总揽 = 桩数 / 在线率 / 工单数 / 设备使用率 + 环比；设备 = 离线 / 在线 / 充电中 / 占用 / 空闲 / 故障 六态；工单 = 总数 / 待处理 / 已完成 / MTTR

• KPI 卡范式收敛：大数字 + 环比箭头（颜色语义固定绿好红坏）+ 迷你趋势线 + 基准说明文字。环比必须写清对比对象（"较上月" / 具体区间），Juicebox / Seline 都把基准值直接印在卡上。
• 时间筛选：预设下拉（今天 / 7 天 / 30 天 / 12 个月 / 自定义）放右上角，30 天为默认——与需求一致，这是行业默认值。
• 设备六态（离线 / 在线 / 充电中 / 占用 / 空闲 / 故障）属于实时快照，参考 Vapi / Twingate 的做法：计数行 + 状态色点，点击即跳转到对应筛选的设备列表，不跟随时间 filter。

头部差异点

Whop 把「对比基准」做成可编辑的双区间（本月 vs 任选历史区间）——运维场景对应"这个月 vs 去年同月"（充电量有季节性，环比上月会误判）；Seline 在环比旁标注对比区间原文，避免口径争议。多数产品只给固定"vs 上期"，这两家把口径交给用户。

落点：首页三行——① KPI 环比行（桩数 / 在线率 / 设备使用率 / 工单数 + MTTR，受右上角时间 filter 控制，默认 30 天，环比基准"上一个同长区间"，口径印在卡上）；② 设备实时行（六态计数 + 色点，点击进列表，不受 filter 控制，标注"实时"）；③ 进行中事件 / 我的工单（沿用前轮 incident.io 分阶段布局）。

每个模块统一四段：需求回显 → 竞品截图 → 范式收敛 → 落点。落点是喂给 LLM 的直接输入——写到"哪一行放什么、受不受 filter 控制"这个颗粒度，生成阶段不用再临场决定。

| 颜色 | Light Mode | Dark Mode | 语义用途 |
|------|-----------|-----------|----------|
| **蓝色 Blue** | `#007AFF` | `#0A84FF` | 主要操作、链接 |
| **绿色 Green** | `#34C759` | `#30D158` | 确认、成功 |
| **红色 Red** | `#FF3B30` | `#FF453A` | 危险、删除 |
| **灰色 Gray** | `#8E8E93` | `#8E8E93` | 禁用、次要 |

Flying Wheel

效果展示

后续

• html 通过 MCP 导入 Figma 微调（可选）
• html 文件直接交付前端开发
• 生成 OpenAPI 格式文档，供后端开发

附录

能力矩阵：传统流程 vs LLM 辅助流程

● 明显优势　◐ 有条件优势 / 依赖投入　— 无明显优势；个人判断，待更多案例验证

产出物

• 调研报告：充电桩运维平台 · 五大功能模块设计模式调研.html
• 设计规范：Apple 设计系统总览.md
• 原型：APS Dashboard 首页原型.html