Design Spec Optimizer
📖 技能介绍
name: design-spec-optimizer description: "当用户给出一个产品或界面设计想法时，自动按标准模版范式将其优化为结构清晰、细节完备的设计描述。适用于小程序、App、网页、H5 等任何界面类产品设计任务。"
设计描述优化器
将用户的原始想法按以下标准模版范式扩展为完整的设计描述。
触发条件
当用户表达一个产品/界面设计意图时触发，包括但不限于： - "我想做一个 XX" - "帮我设计一个 XX 页面/小程序/App" - "我需要 XX 功能" - 任何简短的产品概念、灵感或需求描述
处理流程
- 理解用户意图 — 识别核心产品类型、目标用户、核心功能
- 主动追问（如必要） — 若信息严重缺失，最多追问 1–2 个关键问题（如平台偏好、核心场景）
- 按范式输出 — 直接输出完整的设计描述，无需等待用户确认每一步
输出范式（5 大模块）
每个设计描述必须包含以下 5 个模块，按顺序呈现：
1. 产品定位
用一句话精确定义产品类型，格式：
「XX 型 + 产品形态」，解决「核心痛点」，面向「目标用户」。
示例：
「实用型待办清单小程序」，帮助上班族快速记录与追踪每日任务，面向 20–35 岁职场人群。
2. 设备规格
明确设计与开发的边界条件： - 参考尺寸：如 375×812（iPhone 标准）、1440×900（桌面端）、自适应等 - 色彩模式：深色模式 / 浅色模式 / 双模式 - 平台约束：iOS/Android/微信小程序/Web/H5 等 - 其他技术约束：如需兼容 RTL、最低系统版本等
3. 页面清单
用编号列出所有页面的核心内容模块，格式：
① 页面名称 — 核心内容模块 A / 核心内容模块 B / 核心内容模块 C
② 页面名称 — ...
...
每个页面需列出 2–4 个核心模块，体现信息层级。
4. 完整闭环
用箭头串联用户操作路径，体现功能联动。格式示例：
首页浏览 → 点击条目进入详情 → 执行操作（如编辑/删除） → 返回首页状态同步
或多分支路径：
启动页 → 首页（浏览列表） → [分支 A] 点击添加 → 新建页 → 保存返回
→ [分支 B] 点击条目 → 详情页 → 编辑/删除 → 返回
5. 视觉调性
从 5 个维度给出明确约束：
| 维度 | 说明 | 示例 |
|---|---|---|
| 配色 | 主色 + 辅助色 + 背景色，附色值 | 深灰底 #1A1A1A + 品牌青 #00D4AA + 纯白文字 |
| 控件 | 圆角、投影、描边等 | 圆角 12–16px，柔和投影 0 4px 12px rgba(0,0,0,0.15) |
| CTA 策略 | 主按钮与次级操作的层级区分 | 每页 1 个厚实主 CTA（高度 48px，圆角 12px），次级操作用文字链或幽灵按钮 |
| 排版 | 留白、字重、字号层级 | 模块间距 24px，字重 400/600/700 三级，标题 20px / 正文 16px / 辅助 12px |
| 数据 | 使用真实示例数据填充 | 任务名称用「完成季度报告」「预约牙医」等真实场景数据 |
输出原则
- 完整性：5 大模块缺一不可，即使想法很简单也要完整覆盖
- 具体性：避免模糊描述（如「好看的颜色」），必须给出可量化的参数
- 真实性：所有示例数据必须贴近真实使用场景，禁用「示例文字」「Test」等占位符
- 一致性：视觉调性各维度之间需保持风格统一
- 可执行性：描述需具体到可直接进入 UI 设计或前端开发阶段
使用示例
用户输入：
"我想做一个记录喝水的小程序"
优化后输出：
产品定位：「健康习惯追踪型小程序」，帮助用户记录每日饮水量并养成规律喝水习惯，面向关注健康的 18–40 岁人群。
设备规格：375×812 标准视口，支持深色/浅色双模式，微信小程序平台。
页面清单：
① 首页 — 今日饮水进度环 / 快捷记录按钮组（150ml/250ml/500ml） / 本周统计简报
② 记录页 — 自定义水量滑块 / 饮品类型选择（水/茶/咖啡/果汁） / 时间标签
③ 历史页 — 日历视图 / 每日详情列表 / 趋势图表
④ 设置页 — 每日目标设定 / 提醒时间 / 单位切换（ml/oz）
完整闭环： 启动页 → 首页查看今日进度 → 点击快捷记录 / 自定义记录 → 记录页选择水量与类型 → 保存返回首页进度实时更新 → 下滑查看本周简报 → 点击日历进入历史页回顾 → 设置页调整目标与提醒
视觉调性： - 配色：浅蓝白渐变底 #F0F8FF → #FFFFFF + 清新蓝 #4A90E2 为主 CTA 色 + 深灰 #333333 文字 - 控件：圆角 16px 大卡片，水波纹点击反馈，进度环线宽 8px - CTA 策略：首页底部悬浮一个 56px 圆形主按钮（+），记录页保存按钮为全宽 48px 实心按钮，次级操作用图标按钮 - 排版：页面边距 16px，模块间距 20px，字重 400/600 两级，标题 18px / 数据 32px / 正文 14px - 数据：水量示例「晨起第一杯 250ml」「下午茶 150ml」，目标默认 2000ml，时间显示「08:30」「14:15」
🤖 AI 评测
这是一款相当好用的设计描述优化工具，能够将模糊的产品想法快速转化为结构清晰、细节完备的设计规范。5 大模块的划分非常合理，输出内容具体可执行，示例贴近真实使用场景。优点是逻辑清晰、要求明确，生成的设计描述可以直接用于指导 UI 设计和开发。不足之处在于缺乏更多不同类型产品的示例参考，且对复杂需求的处理说明较少。整体质量良好，适合需要快速产出设计文档的团队使用。
