L6-11：设计方案散弹枪 —— 一口气探索5个完全不同的设计方向

🎯 学什么：生成多个视觉方案、在比较板上并排评估、收集结构化反馈、迭代直到锁定方向——不是审查，是探索。核心洞察：(1) 反收敛是设计探索的真正挑战——AI 生成设计时最容易犯的错误是三个"变体"实际上是一个方案的三种微调；(2) 比较板方法的三个支柱：多方案同步生成、浏览器中并排查看、结构化评分+自由评论；(3) 品味记忆的两层设计——taste-profile.json（持久审美DNA）vs approved.json（会话级项目适配）——让 AI 区分"你的审美底色"和"这个项目的正确选择"。 💡 难易度：⭐⭐⭐ | ⏱️ 预计时间：30 分钟

---

[!quote]- 📖 原Skill精要 技能名称：design-shotgun 核心功能：设计方案散弹枪——生成多个 AI 设计变体、打开比较板并排评估、收集结构化反馈、迭代直到锁定方向。独自运行的设计探索，随时可用。 所属体系：gstack 虚拟工程团队 协作关系：产出经审批的设计方案后交给 [[L6-12-设计稿转代码|design-html]] 实现

---

1. 课程概览

💡 白话小课堂：design-shotgun 的"散弹枪"比喻很贴切——不是瞄着一个点打一枪，而是一次喷出多颗子弹，覆盖不同方向。单独评估一个设计很困难——只有在看到 A/B/C 并排时，"A 比 B 好因为 X"才成为可能的思考。

---

2. 设计的"比较板"方法

---

3. 五步工作流

---

4. 反收敛：设计探索的真正挑战

⚠️ 避坑指南：AI 设计天生的毛病就是"三个变体其实是一个方案"——同样的字体、相似的色温、差不多的布局，只是换了个标题。如果你看到两个变体互换标题后看不出差异，它们就太像了。

🔑 核心秘诀：反收敛的本质不是追求"多样性"而是追求"决策信息量"。

---

5. 反馈循环的工程设计

---

6. 从发散到收敛

---

7. 结构拆解：设计方案散弹枪 Skill 模板

---

8. 电商案例：为女装电商 App 探索视觉方向

🛒 实战案例：大促活动落地页是电商转化率最高的页面类型之一。某美妆电商平台备战618大促，需要设计一个"精华液专场"活动页。设计团队只有一个模糊的方向——"要有大促感、要有紧迫感、要突出折扣"。但具体走什么视觉路线完全不确定。用design-shotgun生成5个截然不同的设计方向。

• 上下文收集：目标用户——25-35岁女性美妆消费者，主要从抖音/小红书种草后跳转；核心转化路径——看到活动页→浏览爆款→比价→下单；竞品参考——天猫小黑盒（科技感）、小红书商城（社区感）、京东美妆（专业感）。关键约束——移动端为主（85%流量），页面需要在3G网络下3秒内渲染完成（图片体积限制）。
• 5个方向生成： A·闪购倒计时风——深色背景+荧光霓虹绿强调+超大倒计时数字钟+价格标签用爆炸贴设计（"最后2小时"）。灵感来源：东南亚闪购App。适配点：紧迫感强，适合限时秒杀。不适合点：偏男性化色彩。 B·实验室解谜风——暖灰实验报告纸背景+数据表格展示成分对比+分子结构图装饰+每款精华液标注核心成分浓度和pH值。灵感来源：成分护肤品牌的科学营销。适配点：差异化极强，成分党会驻足细看。不适合点：非成分党可能跳过。 C·明星化妆台风——柔光粉色+金色点缀+圆润卡片+每款产品旁附"XX明星同款"标签+用户评价用引用块突出展示。灵感来源：小红书美妆笔记。适配点：温暖亲切，女性用户接受度高。不适合点：太普通——和竞品雷同度80%。 D·盲盒惊喜风——深紫+金色闪光+翻转动画+隐藏价格（点开才显示）+每日限量解锁新商品。灵感来源：泡泡玛特+惊喜营销。适配点：互动性极强，年轻用户好奇心驱动点击。不适合点：中高端用户反感"看不到价格"。 E·极简质感风——纯白背景+超大商品图+单一金色强调+字号对比强烈（标题28px粗体、价格40px粗体、描述14px细体）+最少的UI元素。灵感来源：Apple官网。适配点：高端感强，和"精华液=高端品类"匹配。不适合点：紧迫感弱，大促氛围不足。

• 比较板反馈：设计团队5人投票评星——方向A(⭐⭐⭐⭐功能性强但视觉偏男性化)、方向B(⭐⭐⭐⭐⭐差异化最强，最符合品牌定位——成分透明)、方向C(⭐⭐⭐太普通)、方向D(⭐⭐互动有趣但不符合用户画像)、方向E(⭐⭐⭐质感好但大促感不足)。最终选择：B(实验室解谜风)——差异化最强且与品牌"成分透明"定位深度一致。
• Remix融合：提取B的实验室报告风格(80%)，融入A的倒计时元素(15%)和E的价格字重对比(5%)。最终方案：实验室报告底色+成分对比数据表格+每款精华液浓度标签+顶部轻量化倒计时条+大号价格强调。生成HTML预览后A/B测试——实验室解谜风vs原活动页模板，加购转化率从3.8%提升到5.2%（+37%）。

🔑 启示：设计散弹枪不是"随便生成5个方案碰运气"——是每一种方案对应一种用户心理模型（紧迫感/求知欲/信任/好奇心/品质感），5个方向=5种假设，A/B测试选出的不光是"哪个更好看"，更是"哪种心理模型对你的用户最有效"。 → 关键评论："极简但不冷淡，搭配灵感功能成为设计亮点而非后加的功能" → 日期：2025-11-15 → 分支：feature/redesign-v2

关键洞察

1. 反收敛成功：5 个变体确实来自 5 个不同的设计团队 ——编辑杂志、纯粹画廊、温暖俏皮、冷感粗野、温和混合。 没有一个看起来是另一个的微调。

2. 比较板的价值：创始人最初说"想要极简"（可能指向 B）， 但在并排对比中，她发现纯白极简丢失了搭配灵感功能的展示空间。 没有比较板，她可能选了 B，3 周后才发现不合适。

3. 品味记忆的冲突处理： 持久画像（科学极简）vs 新选择（温和混合+编辑排版）。 gstack 询问是否更新 taste-profile.json——创始人选择更新： "女装项目需要温暖——这不是一次性特例，是这个品类的长期偏好。"

4. 从发散到收敛： 5 方向 → 评分+评论 → 发现最爱（E）+ 希望融入的元素（A 的编辑排版） → Remix 生成融合方案 → 确认 → approved.json。 整个过程 45 分钟。

---

## 9. 掌握检验

**Q1**：design-shotgun 工作流中，"先出文字概念再确认后才生成图像"（Step 3a→3b）的设计原因是什么？
- A) 只是为了节省时间
- B) 避免在错误方向上浪费图像生成——文字概念是廉价的（秒级生成），图像生成是昂贵的（分钟级+算力成本）。先对齐"这个大致方向对吗？"再投入生成成本
- C) 文字描述比图像更准确
- D) AI 不能直接生成图像

**Q2**：反收敛的硬要求包括"每个变体必须用不同的字体族、色彩调色板、布局方法"。在女装电商案例中，5 个变体（编辑/画廊/俏皮/粗野/混合）分别使用了完全不同的字体族、色板和布局。请挑选 2 个变体，从这三个维度对比它们的具体差异——证明它们不是"同一个方案的三种微调"。

**Q3**：品味记忆的双层设计（taste-profile.json vs approved.json）各自解决什么问题？在案例中，当创始人的新选择（"温和混合"）与持久画像（"科学极简"）矛盾时，gstack 是如何处理的？
- A) gstack 拒绝创始人的新选择，坚持持久画像
- B) gstack 明确告知冲突并询问——"你的品味画像偏向科学极简，但这次你要温和混合。我照做，但要更新品味画像还是当一次性特例？"——最终创始人选择更新画像，因为女装品类的审美需要会与护肤品不同
- C) gstack 自动覆盖持久画像
- D) taste-profile.json 和 approved.json 是一样的

**Q4**：比较板方法中，"结构化评分（1-5 星）+ 自由评论"的组合为什么比单纯投票或单纯评论更有效？在案例中，创始人给 E（混合风）打了最高分 5 星，但评论中透露了关键信息——"搭配功能在网格+局部破格的布局下非常自然"。如果只有 5 星评分没有评论，gstack 的 remix 规格会有什么不同？

**Q5**：feedback-pending.json（Regenerate/Remix）和 feedback.json（最终选择）的区别是什么？在案例中，创始人选择了"E + 融入 A 的编辑排版"——这个反馈触发了 feedback-pending.json 还是 feedback.json？gstack 接下来做了什么？

**Q6**：为什么 design-shotgun 在 Step 5 有一个强制确认步骤——"总是输出总结：这是我从你的反馈中理解到的……是这样吗？"？如果跳过这个确认步骤直接保存 approved.json，可能发生什么类型的"理解偏差"？

---

## 10. 答案

<details>
<summary>点击查看答案</summary>

**Q1**：**B** —— 文字概念是轻量级的（几十个字的描述），5 个方向并行生成只需要几秒。图像生成每个变体可能需要数十秒到分钟级，5 个变体并行也有实质算力成本。最关键的是：如果用户一看文字概念就知道"C 的方向完全不对，D 也不适合我们的品牌"，那么 C 和 D 的图像根本不需要生成——这在设计探索中节约了大量时间和成本。文字概念是"方向探测器"，图像是"方向呈现器"。

**Q2**：以 A（编辑风）和 B（画廊风）为例：(1) 字体族：A 使用 Playfair Display（经典衬线，杂志感）+ Source Serif（正文衬线），B 使用 Neue Haas Grotesk（现代无衬线，单一字体）——一个温暖人文，一个冷静理性。(2) 色板：A 使用暖米色底板 + 深棕文字 + 暗红强调（温暖、层次丰富），B 使用纯白底板 + #1A1A1A 文字 + 单一提取色（极简、冷酷）。(3) 布局方法：A 使用不对称网格 + 大图侧文字 + 引用块（编辑排版，叙事感），B 使用超大商品图 + 最小 UI + hover 才显示信息（画廊式，商品即主角）。这三个维度的差异是根本性的——如果交换 A 和 B 的标题文字（"Editorial"↔"Gallery"），任何设计师都能立即察觉不对劲，因为它们读作完全不同的视觉语言。

**Q3**：**B** —— taste-profile.json（持久审美 DNA）：跨项目、跨会话的偏好聚合，回答"你这个人喜欢什么风格"——如"极简 > 花哨，冷色调 > 暖色调"。approved.json（会话级项目适配）：最近 10 个会话中实际批准的具体设计选择，回答"这个项目的正确选择是什么"。冲突处理原则：当用户的新要求与持久品味矛盾时→明确告知并提供选择。"一次性特例"vs"更新画像"的区别——前者保留画像（下次仍偏向极简），后者调整画像（下次考虑该品类时自动偏向新偏好）。

**Q4**：评分提供"量"（哪个好、好多少），评论提供"质"（为什么好、好在哪里）。单独的评分：gstack 知道 E 最好，但不知道为什么——remix 可能是"把 E 再调一调"。单独的评论：gstack 知道喜欢什么元素，但不知道整体偏好排序——无法确定最终方向。评分+评论组合：5 星 + "搭配功能在网格+局部破格下非常自然"——remixSpec = 保留 E 的布局方法（网格+局部破格）+ 融入 A 的编辑式排版（因为评论中强调搭配灵感需要"杂志专题感"）。如果没有评论，remix 可能只是 E 的微调——不会引入 A 的编辑排版这一关键差异元素。

**Q5**：feedback-pending.json 触发 Regenerate（重新生成不同的变体）或 Remix（混搭不同变体的元素）——会话继续，新变体生成，比较板刷新。feedback.json 触发最终保存——会话结束，结果写入 approved.json。创始人选择"E + 融入 A 的编辑排版"→这是 Remix 行为 → 触发 feedback-pending.json → gstack 生成融合变体（E 骨架 + A 的搭配页面排版）→ 重新展示 → 创始人确认 → 此时触发 feedback.json → 保存 approved.json。区分很重要：feedback-pending = 迭代中（不要保存），feedback = 锁定了（持久化）。

**Q6**：这是防止"我以为你喜欢 X 但其实你想要 Y"的最后一道防线。跳过确认的风险：设计师和 AI 对同一个词的理解可能完全不同。比如创始人说"搭配灵感页面像杂志专题"——gstack 理解为"全幅大图+侧边小字+翻页效果"，但创始人实际想要的是"每期一个主题 + 编辑推荐语 + 相关商品横滑"。没有确认步骤，gstack 保存了错误的理解→3 周后看到实现才发现不对→浪费 3 周。确认步骤只需要 15 秒——"这里是我从你的反馈中理解到的……是这样吗？"——但这 15 秒可以防止数天甚至数周的返工。

（5/6 通过）
</details>

---

## 11. 延伸阅读

- [[L6-12-设计稿转代码|下一课：设计稿转代码 —— 把设计图变成能直接用的网页代码]]