no-ai-slop

不要生成 AI 垃圾界面

AI 和模板构建的 UI 有一系列显而易见的共同特征。根本原因始终相同：千篇一律 + 不加思考地采用默认值——一种字体、一种强调色、一种卡片、一套居中模板，应用到所有内容上。通过同时应用以下两个层级，打造看起来经过精心设计的 UI。

使用方法

• 生成 UI → 始终应用 Layer 1，并应用当前启用的 Layer 2 样式。
• 审查 UI → 对照 Layer 1 检查，修复每一处问题（使用自查清单）。
• 完整参考：TELLS.md（9 个类别约 100 条特征）。本文档是提炼后的常驻规则。

Layer 1 - 通用反模式

字体与排版

• 不要使用默认字体：Inter、Geist，或 “Space Grotesk + Instrument-Serif-italic + Inter” 组合。选择有鲜明个性的字体；让展示字体与正文字体形成明显对比。
• 标题使用纯色，不要使用渐变裁切文本。
• 建立真正的字重层级，不要让 font-semibold/font-medium 成为页面上最粗的字重。
• 标题自然换行：不要手动添加 <br>，不要所有内容都使用 text-balance，不要出现四行标题或孤零零的末尾词。标题保持精炼（约 5-9 个词）。
• 左对齐的正文/副标题应延伸至容器的内容宽度；只有居中文本才设置最大行宽。绝不要使用细窄的悬浮栏。
• 标题/按钮使用句首字母大写。标题上方不要放置间距过大的眉题/导语（胶囊标签、分隔线 + 全大写文字，或字距拉开的全大写文字），让标题成为视觉焦点。
• 价格/统计数据使用 tabular-nums；正文不要使用负字距。

颜色与背景

• 不要默认使用靛蓝/紫罗兰色 600 作为主色，不要使用 “VibeCode 紫” #8B5CF6，不要使用紫到蓝（或琥珀到粉色）的渐变。
• 不要默认使用奶油色/#faf8f4 背景；不要使用点阵网格、网格模糊块、极光或聚光灯背景；不要默认使用玻璃拟态。
• 正文文字要有高对比度（浅色背景使用近黑色，深色背景使用 slate-200 及以上）——正文绝不要使用 gray-400/500。确保符合 WCAG AA。
• 有意选择一种强调色（不要条件反射地选蓝色/紫色），少量使用，并构建成色阶。不要直接使用 Tailwind 状态色；不要使用默认蓝色焦点环。
• 不要默认只使用深色主题。避免统一的柔和阴影；使用边框/对比度和真正的层级系统。

布局

• 不要默认使用居中式主视觉区（眉题 / H1 / 副标题 / 两个同等按钮 / 截图）。使用非对称网格，并设置一个主要 CTA。
• 打破标准的区块顺序和三列等宽的惯性。改变对齐方式、列宽权重和间距节奏。
• 不要使用图标卡片网格堆砌功能；不要使用臃肿的四列页脚或仿照主视觉区的 CTA 横幅，除非有充分理由。

组件

• 不要把 shadcn 默认卡片（rounded-xl border shadow-sm）用于所有内容；不要只给一侧加彩色边框；不要让所有组件都采用“柔和 SaaS”风格的 rounded-2xl + 柔和阴影。选择一套明确的圆角和层级系统。
• 不要在主视觉区使用胶囊徽标；不要使用“Get Started / Learn More”主按钮 + 幽灵按钮组合；不要使用渐变按钮。
• 不要条件反射地使用三档定价方案、“Most Popular” scale-105、数字递增统计，或绿色勾/红色叉对比圆圈。

图像与图标

• 使用真实图像，不要只用文字 + 渐变：优先使用产品截图；摄影图片可使用 Unsplash/Pexels。不要使用 3D 模糊块、网格艺术、双色调图像、渐变背景上的倾斜浏览器样机，或模型生成的人物/标志/图表。
• 使用成熟图标库（Heroicons、Lucide、Phosphor、Hugeicons、Tabler）中的图标，绝不要使用模型生成的 SVG。少量使用；不要给每项功能都配一个圆角方框里的图标；不要用表情符号充当图标；不要把闪光符号等同于 AI。

文案与动效

• 不要使用破折号（改用带空格的连字符或句号）。不要使用空洞套话（提升/解锁/加速/无缝），不要使用 “delve/tapestry/boasts” 这类措辞、机械的三段式表达、“Not just X - it's Y” 或 “Transform your X / Simple, transparent pricing”。
• 文案要具体，使用真实或不寻常的数字，提供有名称的证明，并使用描述实际操作的 CTA 标签（而非 “Get Started”）。
• 不要让所有内容都淡入上移，不要统一使用 hover:scale-105，也不要条件反射地使用数字递增、跑马灯或视差效果。动效应少而精、目的明确；尊重 prefers-reduced-motion。

一致性

• 每个组件的所有实例看起来和行为都完全一致：所有按钮共享相同的悬停、激活和焦点状态，所有卡片使用相同的边框、阴影和圆角，所有链接采用相同的样式。不一致（有些按钮按下时有反馈，有些只有悬停效果）会显得粗心、像是生成出来的。
• 每种交互和组件样式只定义一次——使用共享类或设计令牌——并重复使用。不要为每个实例重新输入实用类字符串；不一致正是这样悄然出现的。
• 间距、圆角、阴影和颜色都来自同一套比例，并在所有地方统一使用。

响应式与移动端（两者都要构建并测试）

• 移动端不是事后才考虑的。每种布局都必须能在宽度约为 375px 的屏幕上正常显示，且不出现水平溢出。
• 如果导航栏链接在移动端隐藏，就必须提供汉堡按钮和可正常使用的移动端菜单。AI 经常会隐藏链接却忘了添加菜单——绝不要发布这样的页面。
• 将网格调整为 1–2 列，确保点击目标尺寸不小于 44px，并合理缩小字号。
• 在宣布完成前，务必在移动端宽度下进行实际测试，而不只是检查桌面端。

第 2 层——风格方向

风格方向是针对所选外观的正向“按此构建”规范（字体、颜色、布局、表面样式、动效）。此开源基础版本提供下方的一种示例风格方向。更多风格方向——每种都配有相应的UI 工具包，其中包含 AI 可直接组合使用的预构建组件，以确保输出一致，而不只是好看——属于商业层（参见项目 README）。

大胆编辑风（示例风格方向）

• **字体：**展示字体 = Archivo 800–900，大字号，左对齐，字距约为 -0.02em。正文 = Newsreader（衬线），引导段落 18px / 正文 17px，行高约为 1.6。标签 = Archivo，小号、中等字重，句式大小写。
• **颜色：**纸白 #ffffff，墨黑 #14120f，次要文本 #44423d（高对比度）。一种强调色：朱红 #e0402b，少量使用（一个 CTA、链接、一条细分隔线）。
• **布局：**12 列、不对称。主视觉区 = 左侧标题、全宽副标题和 CTA，右侧为真实且带边框的图片。留白充足且有目的；左对齐。
• **表面样式：**小圆角（4–6px）或直角。1px 细边框（墨色约 12%）。不使用投影——通过边框和对比来区分。
• **图像：**使用简洁细边框框起的真实截图或摄影图片。不使用渐变或色块。
• **图标：**谨慎使用 Heroicons/Phosphor，并与文本字号一致、内联显示。
• **动效：**尽量精简；最多使用一种轻微的显现效果，并兼顾减少动态效果设置。
• **细节：**采用编辑式结构——细分隔线、编号索引、鲜明的层级；价格使用等宽数字。

自检（有任何一项回答“是”，就进行修正）

默认字体（Inter/Geist）？渐变或任何紫色元素？奶油色背景或色块/网格背景？灰色正文？主视觉区上方的胶囊标签/眉题？图标卡片网格？shadcn 默认卡片或无处不在的柔和阴影？长破折号？孤立的 / 四行的 / 使用 <br> 的标题？狭窄且漂浮的副标题？模型生成的图标或表情符号图标？没有真实图片？所有元素都使用上浮淡入效果？按钮的悬停/激活状态不一致？没有汉堡按钮和移动端菜单？在 375px 宽度下显示异常？未经移动端测试？

参考

TELLS.md（完整目录）。examples/aerolaunch-hero/（将示例风格方向应用于真实主视觉区）。