# Anti Slop Design

> 让 AI 产出「不像 AI 做的」设计。**提炼总结自** Lenny's Newsletter《How to turn your AI into a world-class designer》(Anshu Chimala) 的 Discover/Define/Deliver 三阶段法——随机种子注入多样性、野心提示定调、批评家子代理迭代、图片/视频生成增强、最后做减法。当用户要 AI 做落地页/App UI/网页，且抱怨结果千篇一律、紫色渐变、模板脸，或主动要求「有风格一点」「别那么 AI 味」时使用。

- Skill: `melinda-mel/anti-slop-design` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add melinda-mel/anti-slop-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/melinda-mel/anti-slop-design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Melinda-Mel (https://skillmd.com/u/melinda-mel)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/melinda-mel/anti-slop-design

---


# 反 AI 味设计（Anti-Slop Design）

> **本 skill 是对一篇公开文章的「提炼总结」，不是原文翻译或转载。**
> 方法论与原始洞察归原作者所有；本仓库只做流程化整理，并补了落地细节（见 README「与原文的差异」）。

来源：Anshu Chimala（前 Apple 设计/工程负责人，12 年），
《How to turn your AI into a world-class designer》，Lenny's Newsletter，2026-09-01。
<https://www.lennysnewsletter.com/p/how-to-turn-your-ai-into-a-world>
原文松散借鉴了 Double Diamond，但把「人类设计团队」换成了「AI 智能体团队」。

## 一句话原理

LLM 是 next-token 预测器。做设计时它每一步都选**最可能取悦所有人**的那个 token，
结果就是「设计委员会」式的最大公约数——安全、正确、平庸。
而好设计起始于**感受**，靠打破规则制造记忆点。两者天然相反。

**所以核心动作只有一个：把模型从「最可预测的选择」上推开。**
下面六个技巧都在做这件事，只是推的方式不同。

## 何时用 / 何时不用

**用**：落地页、App UI、产品官网、活动页、数据看板、任何「要好看且要有辨识度」的生成任务。

**不用**：
- 后台管理系统、表单、工具类界面——这里可预测性是优点，别硬加风格。
- 已有明确品牌规范要严格遵守的场景（这时风格自由度是被约束的）。
- 只差一个按钮改个颜色的微改动——直接改，别开流程。

**与 `frontend-design` 的关系**：那个技能管「做成什么样」（配色、字体、排版的具体审美判断），
这个技能管「怎么驱动 AI 走到那儿」（流程编排、子代理、素材生成、做减法）。
两者互补，做完整页面时**先跑本技能的流程定方向，再用 `frontend-design` 的审美原则落地细节**。

## 三阶段总览

| 阶段 | 目标 | 技巧 | 成本 |
|---|---|---|---|
| **Discover** 探索 | 跳出平均解，拿到有野心的设计简报 | T1 种子串、T2 野心提示 | 免费 |
| **Define** 深化 | 给设计注入个体性格 | T3 批评家子代理、T4 图片生成、T5 视频生成 | T3 低、T4/T5 **花钱** |
| **Deliver** 交付 | 磨掉粗糙边缘，收干净 | T6 做减法 | 免费 |

### 决策路径（按预算走）

- **零预算或快速验证** → T1 + T2 + T6。这三个是全套里性价比最高的，光靠它们就能甩开 90% 的 AI 生成物。
- **有预算、要出成品** → 加 T3，再上 T4（图片）。T5（视频）是锦上添花，只在「动态本身就是卖点」时用。
- **只跑一遍** → T2 + T6：写一个野心提示，然后把多余的东西删掉。

---

## Stage 1 · Discover：先把空间摊开

最难的是对着空白屏。原则是**先宽后深**。

### T1 · 种子串注入多样性（免费，30 秒）

模型没法自己随机——它只能预测最可能的 token。所以"请给我一个随机的设计"没用，
它会吐出**听起来随机但实际不随机**的东西（同一个配色、同一套结构、甚至连比喻都一样）。
解法：从模型外部注入随机性。用真随机字符串当灵感来源（Sakana AI 的 String Seed of Thought）。

```bash
# 生成种子串（本地跑，别让模型自己编随机数）
openssl rand -hex 24
```

模板见 `references/prompt-library.md` → T1。关键点：
- 用**脚本**生成，不要让模型"想一个随机字符串"。
- 引导它从串里找**子模式、特殊数字、涌现的结构**，而不只是表面字符。
- **不要把串展示在设计里**，只是灵感来源。

### T2 · 提示词要「野心勃勃」（免费，最高杠杆）

与其说"帮我做个落地页"，不如**把你的品味带进来**：先想一个灵感源（一款游戏、一种室内设计潮流、
一个艺术装置），再描述你希望它如何影响输出。

三个真实例子（原文）：
- 「像素艺术主题，每一屏都像游戏里的一帧静照，但它依然是个能用的落地页。」
- 「等距 3D 立体城市，不同功能变成不同的街区或建筑。」
- 「彻底不对称的布局、不和谐的色彩与字体、令人不适的留白。打破所有规则，但还是要好看。」

**找不到灵感时的三步法**（AI 辅助，但方向由你掌舵）：
1. 让 AI 大量列想法，**故意不给细节** → 只为激发你的想象。
2. **你挑喜欢的，描述你对它的真实反应**（喜欢什么、觉得哪里俗气、想要什么不要什么），让 AI 打磨。
3. 反复到你满意，再让 AI 写「能直接给智能体用的 POC 提示词」。

> ⚠️ 关键：AI 生成的想法直接喂回 AI，出来还是平均值——别人也能这么干。
> **必须你主动掌舵方向**，结果才是只有你能做出来的。
>
> 如果你心里冒出「这肯定不行」——说明方向对了。跑一次，模型经常会让你意外。
> 失败的提示词**别删，存下来**，等新模型出来再试一遍。

---

## Stage 2 · Define：给设计装上性格

初始产出再怎么提示，通常还是摆脱不了通用骨架（左文右图、顶部导航、下面 CTA）。这一阶段解决它。

### T3 · 批评家子代理 + 正反馈循环（低成本，效果最猛）

让写代码/做设计的智能体**自己评审自己**是无效的——它会看到自己的代码、过去的决策和理由，
无法「退一步看全局」。

**解法**：把判断权交给**另一个全新的智能体**——「设计批评家」。它只看截图，不看代码、
不看实现、不知道之前迭代过多少次，只回答一个问题：够不够格。

**在 WorkBuddy 里的做法**（对应原文的 subagent）：
1. 用浏览器技能（如 `agent-browser`）对当前页面截图，存到本地绝对路径。
2. 用 Agent 工具**新起一个子代理**（全新上下文），只给它**截图路径 + 批评家提示词**，
   明确不给代码和迭代历史。模型选 `reasoning`（对应原文「用大而贵的模型当批评家」）。
3. 把批评反馈交回实现方（用便宜快的模型即可），改一版，再截一次图，重新请批评家打分。
4. **停止条件**：连续 1–2 轮，分数到 9/10 就停。

**设批评家的四条铁律**（照抄原文的分级）：
- ❌ 差：「判断这个设计美不美，像不像 AI 做的」——太主观，每次结果漂移。
- ⚠️ 还行：「审视我们要的美学，想象顶级设计工作室会怎么做，然后按那个标准打分」——仍模糊，但有了一致框架。
- ✅ 好：「这里有 5 个设计：4 个专业案例 + 1 张我们产品的截图。按完成度和品味排序。」——具体、客观、有视觉基线。
- 另外：**给参考图**（竞品截图、你喜欢的设计、AI 生成的概念图都行），但要说明
  「这是基线和情绪板，**不是**要你照抄」。

**三个防翻车点**：
- **停止条件必须写清**，否则批评家永远不满意，智能体会烧 token 到死。先跑 1–2 轮看是否收敛。
- **9/10 的门槛不要写进批评家提示词**——那会污染它的客观打分。门槛由实现方掌握。
- **每轮用同一份批评家提示词**，否则基线漂移，迭代没有意义。

原文数据：批评家只占不到 10% 的输出 token；让贵模型直接重做页面，成本翻倍、时间更长。

### T4 · 用图片生成填血肉（**花钱**）

编码智能体爱写代码，于是它用**渐变、形状、基础图案**这些代码里顺手的替代品——
这三样正是「AI 味」的最大破绽。喂进真实图像，质感立刻上去。

> 💰 **费用闸门（硬性）**：这一步会花钱。动手前必须先出报价单
> （生成张数 / 分辨率 / 预计金额），**等使用者确认后再提交**。不许擅自提高规格或重复生成。
> 原则：**花钱的任务先报价、等确认再执行**。

在 WorkBuddy 里用 `ImageGen`（需先 `connect_cloud_service` 取 tempKey）。
落地后**必须让智能体在浏览器里逐帧验证**效果对不对。

API key 安全（原文建议）：单独开一个**限额很紧**的 key，只给智能体用；
写进 gitignore 的 `.env.agents`，并在 AGENTS.md 里注明「仅供开发期使用，不得随产品发布」。

### T5 · 用视频生成做高级动效（**花钱**，可选）

两个用法：
1. **会动的图形**：生成**纯色背景**的循环短片，然后抠像/用视频抠图模型去背景，
   得到一个可以叠在 UI 任意位置的动画，且看不出是视频。
2. **状态之间的流体转场**：很多视频模型支持关键帧插值。拿两张产品静帧生成过渡片段，
   用户操作时播放，或随滚动/滑动**逐帧 scrub**。

> 💰 同样先报价后执行。模型迭代快，原文建议用 fal.ai 这类聚合平台，一个 key 让智能体自己挑模型。

---

## Stage 3 · Deliver：做减法

### T6 · 砍掉不产生价值的元素（免费，最容易被跳过）

**AI 只会加，几乎不会减。** 而「什么都要解释一遍、塞满没用的元素」正是 AI 味的头号特征。
反过来，**懂得克制的设计立刻显得高级**。

原文作者说：打磨 AI 设计时，**大部分精力都花在删东西上**。

真实案例（他做的卡路里 App，已经明确要求了「clean, minimalist」，还是多出一堆）：
- 背景和进度条上的粉色发光 → 删
- 文字上随机的高亮色 → 删
- 图片已经表达清楚了，还额外加标签和留白 → 删
- 做得比 iOS 原生组件还丑的自定义按钮和输入框 → 换回原生

他给 Claude 的三条指令（可直接复用）：
1. 把布局简化成**以图片为中心的网格**。
2. **去掉渐变、发光、多余的容器**。
3. 追求真正极简、**接近原生**的观感。

> 今天的模型不会自己想到做这些——它不爱冒险，而「删代码」恰恰是冒险。
> **这一步必须你推它。** 做完问自己：什么才是真正必须在屏幕上的？
> 屏幕上东西更少，传达的反而更多。

### T6+ · 压实留白：信息密度也是品味（2026-09-20 实测补）

模型做排版时有个稳定偏好：**留白给得很大方**，因为它把「宽松」等同于「高级」。
但在窄屏载体（手机长图、微信、竖版卡片）上，过量的留白只有一个后果——
**滚好几屏才读完一段内容**，读者先累再走。这时留白不是呼吸感，是浪费。

实测（2026-09-20，长图渲染器 `~/.local/bin/md2pic`）：同一篇 1819 字口播稿，
**只压间距，不动字号、不动一个字的内容**，长图 14901px → 13230px（-11%），
使用者的评价是「压缩后信息密度看着高了」——**同一份内容，压紧反而更像人做的**。

该压的地方（按影响从大到小）：
1. 封面 / 页头上下留白（通常最虚胖）
2. 每个章节标题的上下外边距（h2 这类横幅最容易撑空）
3. 段落之间的间距
4. 卡片 / 引用块的内部 padding
5. 行高（1.72 → 1.64 一档就够，**再往下就该动字号了，别动**）

做法（可复用到任何 CSS 排版）：
- **改前先量**：`sips -g pixelHeight 旧图`。改后用**同一份内容**重渲染再量，
  用「同内容的像素高度」当客观指标，比肉眼靠谱。
- 批量改 CSS 用**「每处必须恰好命中 1 次」的替换脚本**，任一处命中数 ≠ 1 就整体不落盘——
  同名规则会在不同主题里重复出现（`.kp p{...}` 在 paper / tabs 两个主题各一份），
  这条断言能立刻抓出来，比逐条手改稳。
- 改前**备份**（`cp 文件 /tmp/xxx.bak.$(date +%H%M%S)`），改完裁前两屏**自己看一眼**——
  「密度高」和「挤成一团」是两回事，这一步不能省。
- 对方只说「压一些」就**停在这一档**，不要自动进入「再压一档」的循环。

---

## AI 味自检清单（Slop Checklist）

交付前逐条过，中一条就回去改：

- [ ] 紫色 / 蓝紫渐变（最高频的 AI 默认解）
- [ ] 左文右图 + 顶部导航条 + 下面一个 CTA 按钮（万能骨架）
- [ ] glow / 发光效果、渐变背景冒充真实材质
- [ ] 文案过度解释，或元素没有任何实际用途
- [ ] 自定义按钮/输入框比平台原生组件还难看
- [ ] 装饰性 emoji 堆砌
- [ ] 陶罐、咖啡杯、握手这类"安全的"配图隐喻
- [ ] **留白超标**：段落/标题上下空隙比内容还显眼、行高松到一眼看出"虚"，
      信息密度低（手机上尤其致命）→ 按 T6+ 压紧一档再交
- [ ] 换一个模型重跑，出来的东西跟你这个几乎一样 → 说明还没脱slop

## 常见坑

1. **跳过 Discover 直接让 AI 做** → 必然拿到默认解。先花 5 分钟做 T1/T2。
2. **让批评家看代码** → 立刻失去客观性。只给截图。
3. **不设停止条件** → 无限迭代烧钱。先 1–2 轮看收敛趋势。
4. **AI 给的灵感直接用** → 还是平均值。必须由使用者自己挑、自己说好恶。
5. **只加不减** → 90% 的"AI 感"来自冗余，不是来自不够花哨。
6. **失败的提示词扔掉** → 存进 `references/prompt-library.md` 的「待复活区」，新模型出来再试。

## 文件

- `references/prompt-library.md` — 六个技巧的完整提示词模板（英文原版 + 中文变体）+ 待复活区
- `references/applying-to-existing-html.md` — **把一份已有 HTML 报告重做成多版式**的完整流水线
  （抽数据 → 多主题渲染 → 内容保真校验 → 截图 + 批评家），含 2026-09-20 实战踩过的坑