Anti Slop Design logo

Anti Slop Design

Community
Melinda-Mel
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 味」时使用。

Overview

PublisherMelinda-Mel
Repositoryanti-slop-design
Skill nameanti-slop-design
Stars
3
Forks
0
Bundled files
2
LicenseMIT
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 2 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by Melinda-Mel on GitHub. Read the source before you install it.

Installation

Install the Anti Slop Design AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/Melinda-Mel/anti-slop-design/tree/main
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/Melinda-Mel/anti-slop-design.git \
  .claude/skills/anti-slop-design
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Anti Slop Design in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Anti Slop Design on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Anti Slop Design is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

反 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 实战踩过的坑

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Anti Slop Design AI skill do?

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

Why use Anti Slop Design on TypingMind?

Because you install it once and use it with any model. Anti Slop Design is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Anti Slop Design in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/Melinda-Mel/anti-slop-design/tree/main. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Anti Slop Design?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Anti Slop Design?

As many as you like. As long as a model supports skills, you can use Anti Slop Design with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Anti Slop Design AI skill free?

Yes. It is published on GitHub by Melinda-Mel under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇