toothpick

Toothpick：剔除 AI 味道，打造经得起考验的界面

本指南是什么？

这里没有诸如“必须使用这种字体”或“永远别用那个颜色”之类的规则。你可以使用任何颜色、字体或布局。

它做两件事：

1. 帮你识别 AI 味道：哪些选择是 AI 不经思考的默认项，以及为什么别人一眼就能看出。
2. 帮你避免常见缺陷：那些让界面显得粗糙、廉价或不专业的错误。

只有一条检验标准：这个选择是为这个产品做的，还是你会为任何产品都这么做？ 后者就是 AI 味道。

用户的明确风格、品牌规范和现有代码风格永远优先，即使他们要求的东西属于下面列出的“AI 味道”。

---

什么是 AI 味道

在每一个设计决策上，AI 都会倾向于最常见的选择。它分为两层。

第一层，老套的刻板印象：紫蓝渐变、emoji 做图标、带灰色阴影的相同圆角卡片、“居中标题 + 三个特色卡片”的着陆页、像“解锁无限可能”这样的文案。很多人已经能识别这些。

第二层，假装有品味：一旦被告知“别让它看起来像 AI 生成的”，AI就会切换到另一种同样固定的装扮：

• 奶油色纸张背景、大号衬线标题、赭色或深红强调色，假装“温暖而有品位”
• 近乎黑色的背景、一种霓虹绿、琥珀色或朱红色强调色、到处用等宽字体，假装“黑客风”
• 报纸风格的黑细线、零圆角、密集列布局，假装“瑞士专业风”
• 每个标题上方都有一个全大写标签、到处都是“A · B · C”中间点字符串、每个链接后加“→”、每个小的数据标签用等宽字体、在不表示序列的内容上使用“01 / 02 / 03”
• 巨大的装饰性数字、为不对称而不对称、终端“$”提示符或“●”状态点用作装饰

第二层更难发现，因为它看起来“有设计感”。但它与第一层是同一个问题：样式是外加的，而不是从产品中生长出来的。

完整列表以及为什么每项会被视为 AI 以及何时实际上是合适的，请参见 references/ai-tells.md。

好的界面什么样

references/benchmarks.md 包含了来自 Vercel、GitHub、ChatGPT、Google 和 Linear 的测量数据，以及中国产品钉钉、掘金、微信读书和 sspai 的数据，以及中文界面的不同之处（标题更重、行高更高、字号更小）。英文参考的共通之处：

• 颜色极少：几乎全是黑、白和灰，加上一种功能性颜色
• 一种字体家族；标题很大但不粗
• 轻量分隔：空白、淡色细轮廓、非常淡的阴影，而不是黑色分割线和厚重阴影
• 产品本身是英雄；装饰近乎为零
• 每屏只有一个焦点

这些是参考，不是模板。咖啡馆不应该看起来像 Vercel，但它应该同样克制和精确，让内容处于前面。

参考本身也可能变成新的默认。如果你最近的几个项目，在遮住名称后，看起来都是白色、中性灰、药丸按钮和细边框面板，那么参考已经变成了模板。用它来校准工艺：线条多轻、阴影多柔、标题多细。颜色、材质和英雄来自步骤 2 的列表。

---

工作流程

0. 首先，评估变更规模

变更	示例	执行步骤
小	颜色、间距或文案的更改；修复一个组件；添加一个按钮	阅读相关代码和样式变量，在现有样式中更改它，检查 references/ai-tells.md 中的几个相关条目，然后用一两句话交付（仅当存在占位符时提供占位符列表）
中	在现有产品中新增一个页面或一个新功能的界面	步骤 1，一个三四行的计划，然后步骤 5 到 7。保持产品现有样式；跳过清单和论点
大	新产品、网站、着陆页、重新设计	所有七个步骤

当不确定时，选择较小的规模；用户会要求更多。不要为一个按钮编写设计计划。

1. 理解这是什么：先阅读项目，再了解访客

• 在现有项目中，先阅读再动手。 在任何计划或代码之前，找出：

  • 项目实际有哪些功能（阅读 README、路由、页面和 API；不要从页面标题猜测）
  • 现有组件、样式变量、图标集和字体。新 UI 使用它们；不要启动一个并行系统
  • 数据模型和 API 返回的实际字段。基于这些字段构建 UI
  • 文案中的现有词汇。对同一事物保持同一名称

  用几行写下“项目有什么”，并在此基础上制定计划。对于你无法读取的内容（例如，后端不在仓库中），询问用户或坦率地陈述你的假设。

• 产品或内容是什么？目标用户是谁？如果不清楚，做一个具体的假设，用一句话说明，然后继续，而不是反复询问。

• 确定此页面的模式（判断页面，而非产品：开发者工具的主页是 Persuade，其仪表盘是 Operate）：

模式	访客成功的标志	示例	设计精力投入方向
Persuade	做出决定并采取行动	主页、着陆页、活动页、定价页	观点和冲击力；用真实的图像说服
Operate	完成任务	管理后台、仪表盘、编辑器、设置、工具	可扫描、一致、高效；个性体现在精确的细节中
Read	理解内容	文档、文章、帮助中心、更新日志	清晰的结构、舒适的阅读体验
Showcase	沉浸于作品中	作品集、画廊、案例研究	作品引领，界面退后

匹配参考：Persuade 和 Showcase 使用 references/web.md，Operate 使用 references/app-desktop.md，移动端额外使用 references/mobile.md。项目 README 及其中的思维导图或图表使用 references/readme.md。

• 优化还是重新设计？ 优化保持现有样式、文案和行为，仅更改范围内内容。重新设计替换整体外观，但保留产品事实、内容和功能。不要在半路将新样式修补到旧样式上。

2. 梳理仅属于此主题的项目

写下 8–12 个属于这个客户且不用于任何竞争对手的具体事物：名称及其含义、街道和城市、门牌号和店招、材质和颜色、它的数字（座位数、海拔、从业年数）、它的约束（每月一批、冬季关闭）、它的惯例（五点生炉）、它世界里的印刷品（收据、标签、时刻表）。

设计创意来自这个列表，而不是来自“这个行业的网站通常是什么样”。我们借鉴的一个开源技能进行了盲测：获胜页面使用了此类列表中的项目；失败页面虽然构图良好，但基于通用的行业理念。

3. 在选定章节之前先写论点

营销页面的每个部分都应该是一个主张及其证据，每行一个：

英雄区：本周三种烘焙，周五发货 → 证据：三个袋子，烘焙日期
咖啡豆：每种都有明确的产地和风味 → 证据：真实产地，海拔，杯测笔记
...

删除任何没有主张的部分。这能让你远离那种陈旧的“英雄区、品牌墙、三个特色、客户评价、定价、常见问题”结构。

4. 写一个简短的计划

• 颜色：4–6 个值，每个值标明使用位置
• 字体：使用哪些字体以及各自的作用
• 布局：一句关于布局理念的话，必要时附上一个简单的 ASCII 线框图，以及对齐方式
• 英雄区：此页面上最有说服力的东西，以及你实际拥有哪些素材（不要围绕不存在的图像进行设计）
• 强度：克制（Operate 和 Read 的默认值）、一个英雄（Persuade 的默认值：从清单中选一个大胆的图像，其他一切保持安静），或一个完整的概念（参见下面的“何时承诺一个强概念”）

5. 检查计划：默认还是选择？

• 面对类似的简报，我会得出大致相同的计划吗？如果是，那么那部分就是默认项；回到步骤 2 的列表寻找创意。
• 是否命中了 references/ai-tells.md 中的任何条目？如果是，更改它，或者能够说明为什么这个产品需要它。
• 装饰是否多于内容？

在你的回复中简要说明你更改了什么以及为什么。

6. 构建

• 使用 CSS 变量管理颜色和间距。注意选择器特异性，这样类就不会相互覆盖（尤其是节的内边距）。
• 示例内容是真实且具体的，数字要能加总。
• 当页面显示产品的界面时（例如 SaaS 主页上的截图占位），将其构建为该产品的一个真实片段：真实数据、能加总的数字、一个明确的发现。而不是灰色块和虚假数字。
• 工艺细节在 references/craft-details.md 中。

7. 查看结果，批量修复，然后移除一件东西

• 查看真实尺寸：桌面端、手机端（约 375px）、如果你构建了暗色模式也要看。一次性查看，一起修复所有问题；不要每次微调后都截图。
• 检查 checklist.md。
• 就像出门前照镜子一样，移除一件饰品。
• 当你无法看到结果时（模型无法读取图像，或没有浏览器）：不要假装你看了。改为审查代码：在每个断点处最长的文本是否适合列宽、从颜色值计算出的对比度是多少、所有交互状态是否都已编写。在交付时说明你尚未在浏览器中查看，并请求用户提供一张桌面端和一张手机端截图以便再次检查。

克制不是空洞

移除装饰只完成了工作的一半。一个失去了标签、分割线和卡片，但没有得到任何替代的页面会显得单薄，甚至可能输给一些仍然带有 AI 味道但更丰富的页面。另一半工作是实质内容：更大胆的字号层级、大面积的色块、该主题世界的真实图片、每个部分都填充了完整的内容。

何时承诺一个强概念

克制是默认值，不是上限。当以下所有条件都成立时，全页面的视觉概念（漫画、报纸、技术绘图、门票）才是合适的：

• 它有来源：用户要求了它，或者主题自身的世界使用这种语言（建筑师的图纸、印刷厂的校样、铁路时刻表），并且你可以在步骤 2 的列表中找到它
• 每个设计手法都映射到内容：写下映射关系，例如“速度线：请求堆积”、“网纹密度：锁的轻重”。放弃任何你无法映射的设计手法
• 它仍然可以准确阅读：代码、数字、表格和按钮仍然可以无误地阅读和点击。概念服务于内容，绝不会导致用户误读
• 事实不变：新样式保留了所有产品事实、功能、数字和占位符列表
• 它知道在哪里停止：在主线上充分使用，在细节上保持克制；不要在每个角落都放主题元素

如果任何一条不满足，退回到一个英雄：仅将这种语言用于英雄区或一个部分。与风格化装扮的区别：装扮适合任何产品（奶油色配衬线、近黑色配霓虹色、报纸风格细线）；而一个强概念只对这个产品有意义。

交付时，用一两句话解释设计理念，以便用户轻松调整方向，并附上占位符列表（见“绝不造假，不愚弄开发者”）。

当用户要求更改时

用户说的	意思是
更大胆	更大的字号对比、大面积的色块、更大的英雄区。不是更多装饰
更安静 / 太杂乱	更少的颜色和动画，更少的字号，移除次要元素
简化	删除没有主张的部分和元素；保留核心
更多打磨	工艺：对齐、间距、圆角、阴影、状态、浏览器原生部分
准备好上线了吗？	错误、空状态、非常长的内容、其他语言、边界情况

---

绝不造假，不愚弄开发者

用户和开发者都应该能分辨出什么是真实的，什么还没有完成。

在最终用户面前绝无造假

• 没有编造的 logo、客户 logo 墙或合作伙伴徽章。没有用“$”、“▲”或“●”等符号拼凑的假 logo；如果没有 logo，纯文本的产品名称就足够了。
• 没有编造的用户数、满意度、增长率、客户评价或媒体报道。
• 检查专业事实（技术细节、标准、法规、医学、金融、统计）。AI 写这些很流畅，它的错误看起来也同样流畅：
  • 列出页面上的专业声明。在文档或标准中查找你能找到的内容，并在代码注释中注明来源
  • 你无法确认的内容，要么省略，要么在占位符列表中标注“未验证”
  • 页面上的数字必须相互一致（每秒 70 个请求持续 41 秒等于 2870 个请求）

绝不愚弄开发者

• 没有编造的功能：界面中显示的每个功能都必须存在于项目中或已被明确要求。不要为了美化页面而添加“智能推荐”或“一键导出”。
• 模拟数据绝不冒充真实数据：尽可能连接真实 API。当无法连接时，将模拟数据放在一个位置（例如 mock/），使用与真实 API 相同的字段，并在代码中标记为模拟。不要将吸引人的数字硬编码到组件中，让页面看起来“完成”了。
• 没有虚假交互：未连接的按钮、表单或链接不得获得假装其有效的点击动画。将其禁用并标记为“未连接”，或在交付说明中列出。
• 从头构建的演示和概念 可以使用虚构的品牌和数据，但页面必须说明这是一个示例。

附上占位符列表

...