设计咨询 (design-consultation)

设计咨询（design-consultation）

概述

design-consultation 让 AI 充当产品设计师，提供 UX、视觉设计、用户流程方面的咨询。它的核心是：帮助你从设计角度思考问题，提供专业设计建议。

作为程序员，你可能遇到过：

• “我不知道这个功能怎么做 UI”——没有设计思路
• “这个界面怎么设计才合理？“——不知道最佳实践
• “这个交互怎么优化？“——没有改进方向

design-consultation 就是解决这些的。

咨询维度

1. UX 咨询

问题：
- 用户会怎么使用这个功能？
- 最好的信息架构是什么？
- 用户流程怎么设计最顺畅？

2. 视觉咨询

问题：
- 这个功能应该什么风格？
- 颜色怎么搭配？
- 布局怎么设计？

3. 交互咨询

问题：
- 用户怎么和界面交互？
- 最佳的操作路径是什么？
- 反馈怎么设计？

实践案例

案例 1：搜索功能设计

我：要做搜索功能，但不知道怎么设计

design-consultation 会问：

1. 用户意图
   - 用户想搜什么？
   - 搜不到怎么办？
   - 需要过滤/排序吗？

2. 输入方式
   - 关键词搜索？
   - 分类筛选？
   - 自然语言？

3. 结果展示
   - 列表还是网格？
   - 展示什么信息？
   - 分页还是无限滚动？

4. 空状态
   - 搜不到怎么办？
   - 怎么引导用户？

5. 加载状态
   - 加载多久能接受？
   - 用骨架屏还是加载动画？

案例 2：设置页面设计

我：要做用户设置页面，很多选项

design-consultation 会建议：

1. 信息架构
   - 按功能分组
   - 常用设置放前面
   - 高级设置放后面

2. 布局
   - 侧边栏导航
   - 当前分类高亮
   - 保存按钮位置

3. 表单设计
   - 即时保存 vs 手动保存
   - 修改提示
   - 撤销功能

案例 3：通知系统设计

我：要做站内通知系统

design-consultation 会考虑：

1. 通知类型
   - 系统通知
   - 互动通知
   - 内容通知

2. 展示方式
   - 顶部小红点
   - 通知中心
   - 邮件通知

3. 优先级
   - 即时推送
   - 批量推送
   - 可关闭

4. 已读状态
   - 未读红点
   - 标记已读
   - 一键已读

常用设计模式

导航

1. 顶部导航
   - 适合：主导航项少（<5）
   - 优点：简洁
   - 缺点：空间有限

2. 侧边栏导航
   - 适合：导航项多
   - 优点：可扩展
   - 缺点：占用空间

3. 底部导航
   - 适合：移动端
   - 优点：拇指友好
   - 缺点：项少（<5）

表单

1. 即时验证
   - 输入时实时验证
   - 即时反馈

2. 分步骤
   - 长表单分成多步
   - 进度指示器

3. 分组
   - 相关字段放一起
   - 减少认知负荷

反馈

1. 成功
   - 绿色提示
   - 自动消失
   - 或跳转到结果页

2. 错误
   - 红色提示
   - 具体错误信息
   - 聚焦到错误字段

3. 加载
   - 骨架屏
   - 加载动画
   - 禁用交互

速查卡片

咨询维度

• UX 咨询
• 视觉咨询
• 交互咨询

使用场景

• 新功能设计
• 界面优化
• 设计方案不确定

输出

• 设计建议
• 最佳实践
• 具体方案

与其他技能

• design-review - 设计审查
• plan-design-review - 设计计划审查
• brainstorming - 头脑风暴
• office-hours - 产品思考

---

查看源文件: GitHub原始文件