Design Spec Optimizer

设计描述优化器

将用户的原始想法按以下标准模版范式扩展为完整的设计描述。

触发条件

当用户表达一个产品/界面设计意图时触发，包括但不限于：

• "我想做一个 XX"
• "帮我设计一个 XX 页面/小程序/App"
• "我需要 XX 功能"
• 任何简短的产品概念、灵感或需求描述

处理流程

1. 理解用户意图 — 识别核心产品类型、目标用户、核心功能
2. 主动追问（如必要） — 若信息严重缺失，最多追问 1–2 个关键问题（如平台偏好、核心场景）
3. 按范式输出 — 直接输出完整的设计描述，无需等待用户确认每一步

输出范式（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 个维度给出明确约束：

输出原则

• 完整性：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」