深入理解并严格遵守。 每次设计或构建任何界面时都要使用这套法则。动手前先读一遍，工作时始终记在心里，发布前再读一遍，并逐条核对你的产出。要经常重读；这些规则很容易忘记，也很容易违反。只要你的任何直觉与本文冲突，以本文为准。

先确认，再证明。 开始前，用平实的话告诉用户：你已经通读整个文件并理解了每一点；同时承诺，在最后会对这里的每一点进行一次完整、细致的复查，找出并修复所有 UI 错误或缺陷，交付你能做到的最佳成果。然后兑现承诺：在宣告完成前，真正逐条检查本文，并修正所有未达标之处。

用户的话高于这些默认规则。 下文的一切都是默认规则——除非用户给出了与之冲突的、具体且无歧义的指示，否则必须严格遵守每一点。如果用户明确要求某种颜色、布局或本文不建议使用的效果，就完全照做，因为那是用户的要求；用户的指示 100% 优先。在没有这类指示时，本文就是法律。

什么是 AI 垃圾感？

泛化、低投入、千篇一律的 AI 产物。要避免它，就必须做出真正的选择。

Lucide React 包

lucide-react 是一套图标包：一个干净、一致的 SVG 线性图标库，以 React 组件形式提供，开源并随包附带（无需网络请求）。可在 https://lucide.dev 浏览。常见图标有 Sparkles、Coffee、Dumbbell、Plane、MapPin。它不包含品牌 Logo（Instagram、GitHub 等）。当每个项目都出现这种统一的细描边风格时，一眼就能看出是模板化产物。

长破折号

AI 写作的经典特征。改用普通连字符、冒号，或者直接把句子拆开。

胶囊形／眉题徽章

位于首屏大标题上方的小胶囊：圆角“药丸”里放一个小图标和一段短文字。也叫 eyebrow（眉题）或 chip（标签块）。作为首屏默认装饰已经被滥用。

字体：Fraunces 和 Work Sans

AI 网站中被滥用的一组搭配：Fraunces（展示用衬线体）配 Work Sans（正文字体）。不要再下意识选这套默认组合。

发光胶囊按钮

全圆角“胶囊”按钮，使用渐变填充，下面再加一层柔和光晕或模糊投影。按钮和卡片下的模糊阴影，是常见的 AI 垃圾感标志。

彩色方块里的超大图标

在一个有填充色的圆角方形或圆形中央放置单个大图标，用作首屏视觉或功能要点图标。“柔和彩色盒子里的图标”已经随处可见。

悬浮卡片

叠在首屏上的小卡片，通过循环动画轻轻上下浮动（往往还带视差或悬停上移）。这种没有目的的装饰性运动毫无意义。

被截断的光晕

按钮或元素背后的柔光、模糊亮光被区块边缘或 overflow: hidden 裁掉，于是光晕突然终止，露出一条硬边。所谓“高级感”光晕出现这种意外的硬边，是再明显不过的破绽。

什么都往里塞的卡片

一张圆角卡片把所有套路叠在一起：彩色方块里的图标、类别胶囊、成排的小圆角标签胶囊、发丝线分隔符、醒目的大价格，以及带底部阴影、会发光的“添加”按钮。单独看没有哪一项一定错误，但把它们全堆进一张卡片，是最典型的 AI 垃圾感。

假 macOS／应用窗口模型

用 CSS 画一张伪产品截图，模仿桌面窗口：符合“Mac 风格”的圆角、深色方盒面板、红黄绿三个交通灯圆点，内部再塞一套模拟 UI（看板列、头像、状态胶囊）。整套“看，这像个真正的应用窗口”的道具，是首屏填充物的标准套路。

字体：Space Grotesk

用来做巨大粗体标题的几何无衬线体（正文通常配 Inter）。辨识度极高，也早已被当作“科技感 SaaS”语气的默认选项而用烂。

紫色，以及蓝到紫的渐变

AI 的默认配色。单独用紫色就已经过度；蓝色和紫色搭配更糟；柔和的蓝紫渐变则是辨识度最高的 AI 垃圾配色。一般来说，这类发光渐变（无论方向如何、采用哪两个相邻色相）都显得像机器生成。请选一套真正经过思考的配色。

带图标和文字的渐变胶囊

最糟糕的叠加组合：一个填充蓝紫渐变的圆角盒或胶囊，里面放小图标和一行文字（通常还是全大写）。渐变、胶囊、图标、标签全挤在这么小的元素里，AI 垃圾感拉满。

默认 CTA 双按钮

两个按钮并排，使用相同的中等圆角：主按钮填充渐变，文字为深色，末尾带小箭头，背后有光晕；旁边则是描边的“幽灵”次按钮（如“看看它如何工作”）。精确的圆角、亮色底上的深色字、尾随箭头和光晕，即使换了颜色，也在无数网站上反复出现。按钮应该有意图地设计，而不是套用这套预设。

三档定价区块

一排三张卡片（免费版／专业版／企业版），标题上方放小胶囊，展示大号价格和“／月”后缀，下面是带对勾的功能列表，底部放前述套路式 CTA。中间那张永远是“重点推荐”：发光渐变边框，顶部边缘悬着“最受欢迎”胶囊。包括“光晕＋胶囊”高亮技巧在内，整套布局就是一项预设。

用户证言／引语卡片

一张宽圆角卡片，顶部中央放巨大的引号图标，中间放居中的引语，下面再放头像、姓名和职位（“Northwind Labs 工程副总裁”）。引语里那个虚构但听起来很厉害的指标（“交付速度提升了 32%”）也是同一套预制品的一部分。

它还有一个近亲：用巨大的圆引号包住一行示例或引文（把弯曲的“智能引号”当装饰，或直接放一个巨型引号字形），试图让内容显得更有人味、更像证言。装饰引号是预制手势，不是设计。如果一句话需要强调，就给它真正的字体处理和空间，而不是在两侧挂一对装饰引号。

渐变圆形首字母头像

在渐变填充的圆形里放两个姓名首字母（如“SD”），代替用户证言、头像和团队列表里的真人照片。它本身就很有 AI 垃圾感；如果还是蓝紫渐变，更是双倍糟糕。

页脚前的 CTA 横幅

紧挨页脚之前，放一个横跨页面的宽圆角盒，用蓝紫渐变灌满，内部是居中标题、一行副文案（“免费开始，无需信用卡”）和一两个按钮（深色“免费开始”加浅色“比较方案”）。这种带最终行动号召的整宽渐变色块是一套固定模板。

Logo 组合（渐变图标方块＋字标）

品牌标志由一个放在小型渐变圆角方块（应用图标式“超椭圆”）里的图标，加上旁边用普通几何字体排出的公司名组成。“渐变方块＋老一套字标”组合，一眼就是 AI 做的 Logo。

字体：Cormorant Garamond

默认的“优雅／奢华／编辑感”衬线体：笔画纤细、粗细反差很大，几乎总会把其中一个词设成斜体来彰显“品味”。完全不同的品牌——摄影师、高级餐厅、房地产公司——都在重复使用它，只是替换旁边搭配的正文字体（Jost、Mulish、Inter……）。无论配什么，问题都出在这款衬线体本身。

左右分栏首屏

所有“高端”品牌反复使用的同一套双栏首屏骨架：一侧是文字栏（加大字距的全大写引导语、大号衬线标题并突出单个词、一行低调副标题、并排的两个按钮，常常还在发丝线下方放一排数据）；另一侧是带框的视觉卡片（图像或粗糙插画，附说明文字，角上钉一个悬浮标签）。摄影师、餐厅和房地产网站都在用，唯一变化只是颜色。真正暴露模板味的是骨架，而非某个单独部件。

网格／方格纸背景

在首屏或区块后面铺一层很淡的细网格线（常用径向蒙版使其逐渐消失），营造“技术感”。只要纯色背景显得太空，就下意识套用这种默认底图。

粗糙的 CSS／SVG“插画”

用手搓的装饰图形代替真实图像：用圆角 div 画柱状图、抽象漂浮圆球、一“盘”渐变球、虚线轨道环、模拟统计卡片。它们之所以显得低投入，是因为它们只是自动生成的占位物，不是真正的插画、摄影或产品 UI。

强调边卡片

一个普通深色方盒，在某条边（左、右、上或下）放一条亮色强调线，里面通常还有图标、大号数字和说明。为了“增加趣味”而给卡片贴一条孤零零的彩色边，是极常见的套路。

背景光晕

从深色区块的角落、边缘或中央渗出一个带强调色的柔和径向光团，为页面增添“氛围”。几乎每个深色首屏和 CTA 色带都在用。（另见“被截断的光晕”，即被裁切的版本。）

假代码片段窗口

一种“开发者”道具：带圆角的深色面板上放交通灯圆点和 quickstart.ts 文件名标签，内部是一小段调用虚构 SDK 的语法高亮代码。配色永远相同（紫色关键字、绿色字符串、灰色注释），字体永远是 JetBrains Mono。窗口、配色、等宽字体和玩具 API 调用合起来就是一整套罐头。（相关：假 macOS／应用窗口模型。）

字体：Sora 和 JetBrains Mono

Sora 是“AI／深科技”标题常用的圆润几何无衬线体；JetBrains Mono 则是所有假代码块的默认字体。只要把它们作为显眼的现成选项使用，马上就会流露机器生成感。

钉在图像上的悬浮标签

把一个小圆角胶囊（图标加一段短标签，如“28°C，晴”）贴在图像或渐变盒的角落，几乎总在左上角。为了让平淡的盒子显得鲜活，人们总会在视觉内容上悬一个小“信息标签”。

字体：Syne

为“前卫／音乐／创意”品牌准备的粗壮、略显怪趣的展示无衬线体，通常以大号粗体全大写出现。和 Space Grotesk、Sora 一样，它是一种会让人觉得“AI 挑了款时髦免费字体”的默认选择。

渐变填充标题文字

通过 background-clip: text，把标题里的词裁成多色渐变（品红到紫再到青，或者蓝到青）。把渐变直接灌进字体，通常只用在一个强调词或整个首屏标题上，已经成了固定套路。

字体：Archivo，以及无处不在的 Inter

Archivo（粗重、运动感、全大写）是“街头服饰／运动／电商”的默认展示字体，往往同时以三种样式出现（实心、强调色描边、空心描边），让人误以为是“三款字体”，实际仍是同一款。而几乎所有这类网站的正文下面都垫着 Inter：一种安全、隐形、默认选中的无衬线体。Inter 本身就是最常见的 AI 垃圾字体。

方盒上的发丝浅色边框

每张卡片、数据框或倒计时方块都包一圈淡淡的 1px 浅色边框（深色底上用低透明度白色，浅色底上用浅灰色）。每个盒子都有细微发光轮廓，常常还加柔和内高光，这就是默认的卡片样式。

倒计时器

一排小方盒，每个里面放一个大数字，下面标单位（天／时／分／秒），为“新品发售”或“促销”制造虚假紧迫感。无论是否真有东西即将结束，都直接塞进一套库存式紧迫感组件。

卡片悬停上浮

默认的卡片交互：悬停时卡片上升，四周均匀绽开投影，边框亮成强调色（有时还带光晕）。不管卡片内容是什么，每个卡片网格都被硬装上同一种“向上位移＋阴影＋发光边框”的过渡。

加大字距的衬线体字标

“奢华”Logo 的惯用动作：品牌名使用全大写衬线体（通常是 Cormorant Garamond），拉开很大的字距，除此之外什么也没有。仿佛给默认衬线体加大字距就能立刻变得优雅，于是时装、地产和高级餐饮品牌个个照搬。（SaaS 里的对应套路就是前述 Logo 组合。）

字体：高反差 Didone 衬线体（Bodoni、Didot）

“奢侈／时尚／腕表”的条件反射式衬线体选择。只要想显得昂贵，人们就会选择 Bodoni Moda、Didot、Playfair 及其同类，用它们强烈的粗细反差营造气质。结果并不昂贵；和 Cormorant 一样，它们只会让人看出这是最明显的默认选择。Didone 并不会自动带来高级感；不经思考地选它，就是 AI 垃圾感。

把等宽字体当作全站语气

等宽字体适合真正的数据：时间戳、代码、价格、真实表格。一旦它被下意识用于版权行、眉题、图注和所有标签，只为暗示“技术感和高级感”，就会变成 AI 垃圾。把它铺满所有非代码文字，只是在穿戏服，不是设计决策。谨慎使用，而且仅限内容确实属于数据的地方。

所有地方都用同一种标签处理

同一种小字号处理——通常是拉大字距的全大写字母（或等宽字体）——同时用于眉题、按钮文字、图号、导航操作和页脚编校信息，就是 AI 垃圾。当页面上每一小段文字都穿着完全相同的“宽字距全大写”制服，它看起来像模板，而不是品牌语气。最明显的特征是小小的、全大写宽字距编校行（“展品 20，光线与克制”）；按钮和眉题也用同样大写样式，更是坐实了这一点。不同角色应当有不同处理，或者干脆删掉标签。所有小文字都穿同一套衣服，就是破绽，正如让一种字体承载整个品牌一样。（与“把等宽字体当作全站语气”和眉题套路同属一家。）

做坏的玻璃效果

玻璃效果只有做到毫无瑕疵才显得高级，而通常并非如此。粗制滥造的版本包括：背景只是平坦、低对比的色块，根本没有值得折射的内容，导致模糊区域出现明显像素化或色带；投影或光晕从元素下方漏出，形成深色或彩色污迹；形状后面永久停着一圈模糊光环，始终无法与页面融合；按下或悬停时，模糊与阴影明显“啪”一下出现或跳动。糟糕的模糊还不如没有模糊。如果你无法让玻璃无缝融合、没有色带、没有漏光、没有跳变，就不要发布玻璃效果。

淡网格背景（再次强调，因为总有人这么做）

即使是低透明度、铺满全页的细模块网格，也会显得粗制滥造。把一张方格纸垫在所有内容后面，不管多淡都很明显。“蓝图”效果只有在节制而具体时才有存在价值（少量标尺刻度、角落裁切标记、一幅真正的技术图），绝不能在整页下面铺满出血网格。拿不准时，完全不要铺网格。

做坏的填充动画

糟糕的悬停动画比没有动画更差。典型失败模式是：线条或长条在过渡中途，端点突然从尖锐变圆（通常是给圆角形状做 scaleY 动画造成的）；只填了预期长度的一部分；或者缓动不顺、看起来卡顿。如果要做填充动画，就用裁剪或宽度／高度变化，保持端点形状稳定；填满预期轨道的全部长度，并确保缓动平滑。半成品式运动会大声宣告它的粗制滥造。

永远不要用入场动画隐藏内容（内容消失陷阱）

危害最大的一种动效错误：让内容以透明度 0（或经过位移的“隐藏”状态）开始，再依赖 JavaScript 或滚动／时间轴把它显示出来。显示动作总有相当高的概率不触发——标签页在后台、时间轴不受支持、动画引擎被限速或暂停、hydration 短暂出错、正在进行截图——于是内容就彻底消失了。整个区块只剩一片空白。无论是 CSS animation-timeline: view()、通过 JS IntersectionObserver 切换 class，还是 motion／Framer 的 initial={{opacity:0}} animate={{opacity:1}} 卡在初始帧，都会发生同样的问题。这三种做法都曾在这里造成空白搜索栏和空白区块。

规则是绝对的：内容默认必须可见。 永远不要让文字或控件的存在依赖动画完成。如果想要动效，就给已经在屏幕上的元素做动画：悬停状态、跑马灯、旋转标记、漂浮图钉、滑动标签指示器、数字计数、已可见元素上的滚动联动视差。只有在回退状态（无 JS、动画从不运行）仍能完整显示内容时，入场显示动画才可以接受。无法保证，就不要隐藏。一个静态但完全可读的页面，胜过一个动画漂亮却渲染为空的页面。

内容被边缘切掉——裁切破绽（以及“避开切口”）

文字或控件被 clip-path、缺口、overflow: hidden 或固定高度削掉边缘，只会显得损坏，而非经过设计。这个破绽很隐蔽，容易漏看：标题大写字母的顶部被平切，控件最上方少了几个像素，标签的下伸部消失在边框里。它几乎从来不是有意为之，而是布局引入裁切后（装饰缺口、裁剪轮廓、太矮的行），内容没有留出足够内边距。

规则是：避开切口。 每当添加 clip-path、缺口、overflow: hidden 或固定高度时，都要证明内容完全位于保留下来的可见区域内：内边距必须大于切口削掉的范围；完成前，还要放大那个具体被裁的边缘或角落，逐像素检查。绝不要想当然地认为靠近切口的文字安然无恙——为了造型加的一个缺口可能裁掉一个真实单词，而你在正常缩放下根本看不出来。如果为了轮廓而裁边，就要在同一个动作里预留好让内容保持完整的内边距。

并列栏未对齐——参差的比较网格

当项目并排用于比较时——定价档位、方案卡片、功能栏、前后对比，或任意两个及以上的重复集合——每一栏中对应的部分必须落在共同的水平网格上：标题、价格或主标题、说明、功能列表顶部，尤其是按钮。某一栏的文案比另一栏长时，如果它把该栏后续行向下推，整个网格就会参差不齐：按钮高度各异、功能列表起点不同、长度不一的副文案把所有内容撞乱。这看起来既损坏又欠考虑，也是比较区块里最刺眼的 AI 垃圾感之一。

对齐绝不能取决于内容长度。不管是两个盒子还是二十个，所有并列行都应跨栏落在同一条线上。要有意识地实现这一点：让卡片等高，并把按钮锚定在每张卡片的底部（短栏的按钮不会浮高，长栏的按钮也不会下沉）；为长度可变的文案预留同等空间，避免一栏中的长说明把邻栏向下推；让各栏共用一套网格，使标题、价格、正文、列表、CTA 等每种角色都共享基线。如果某栏缺少某个值，也要保留它的位置，而不是把空位折叠掉。绝不要让一个单元格中最长的字符串，决定其他所有单元格内容的位置。

文字紧贴边缘

文字硬挤在视口或容器边缘——一行的首字母亲到左边界、标签顶到上边缘、段落右侧没有沟槽——会显得粗制滥造。文字需要边距来安放；碰到边界像是意外溢出，而非有意放置。每个文本块靠近任何边缘时，都要留出明确而充裕的沟槽，并保持这些边距一致，避免任何内容像被硬塞进去。例外是有意的构图，比如故意裁切的超大字标或水印；普通文案毫无空隙地碰到边缘并不属于这种情况，只是缺了边距。

默认的全向阴影

给元素——卡片、按钮、图标、SVG、动画对象——下意识加一圈向四面均匀扩散的柔和阴影，而非出于明确意图，就是 AI 垃圾感。宽大、对称的投影，让一切都“浮在蓬松云朵上”，是最常见的机器生成标志之一。不要默认给东西加阴影。确实需要深度时，就让阴影利落而有方向：位移小、模糊小、贴近表面，颜色取自表面或元素自身，而非一团巨大的黑色晕染；它应该像来自单一光源，而不是向四周发射。更好的是，直接通过色调和同色边缘营造深度，完全不用阴影。阴影要么是一项明确的方向性决策，要么不存在；环绕一切的肥厚光圈就是破绽。

内容被甩到最外侧（默认式不对称）

把一个区块的各部分拆到两侧边缘——比如页脚标语硬贴最左，链接栏挤在最右，中间留下一片无效的巨大空洞，没有任何元素共轴——如果不是有意识的设计，而只是默认做法，就会显得粗制滥造。这种失衡一眼便能察觉：两组内容被放逐到边缘，中间的空白无处安放。除非不对称是经过编排的明确选择，否则应默认采用对称与对齐：把页脚放在真正的网格上，让列与上方内容使用相同边距，在整个宽度上平衡视觉重量，而不是把它们向外推。这条规则不仅适用于页脚：没有创意理由打破时，对称与对齐显得经过思考；散落在边缘则显得没摆好。

缺失（或伪造）本可发挥价值的 Logo 和图标

两种失败是一枚硬币的两面。在社交页脚、“适配这些产品”横条或真实客户 Logo 墙里，如果社交图标或真实公司、集成服务的可辨识 Logo 确实能增加可信度和高级感，却把它们省掉，作品就可能显得单薄、未完成。但在不必要时硬加，或者凭空捏造，则更糟。要具体判断：不需要图标或 Logo 时，完全不要添加；需要且确实能提升作品时，就使用真实标志——像普通编码代理那样从正规来源获取真正的品牌 SVG（官方图标集、品牌自身资源、可信图标包），统一尺寸，采用单一而克制的呈现方式。绝不要发明 Logo，绝不要伪造客户，也不要只为了填空间就塞一排风格统一的图标包。真实标志被诚实、节制地使用，才是高级版本；缺失或造假都是粗制滥造。

实际上什么都没有居中——长期居中失准

最常反复出现的执行错误：原本应该位于盒子、圆形、SVG 图形、徽章、胶囊或按钮正中央的内容，实际却没在中央。数字浮在圆形上部、字形沉在方块下方、标签在胶囊里偏轴——可能只差几个像素，也可能偏得离谱，因为你想当然地认为它居中了，却没有证明。它看起来就是坏的，而且无处不在。凡是想居中的内容，每次都要真正居中，这是默认要求；然后要验证，而不是目测一下就继续。SVG 尤其有陷阱：text-anchor: middle 只负责水平居中，垂直方向仍需要 dominant-baseline: central（或经过测量的 dy）；字形的视觉中心不等于包围盒中心；旋转、描边或带内边距的形状都会改变“中心”的实际位置。放大图形，确认内容在数学上和视觉上都准确居中，然后才能完成。

用第二个盒子伪造阴影

有人叫你别用大阴影时，不要为了“遵守”而在元素后面放一个实际偏移的盒子、复制元素或深色矩形，来模仿阴影。这不是遵守规则，而是在绕规则；效果会比阴影本身更糟：形状背后露出一块硬边灰色板。如果元素确实需要从表面抬起，就使用真实、紧凑、低位移、小模糊的阴影，颜色取自表面或元素自身，让它细微而诚实地凸显出来。小而真实的阴影永远胜过假阴影。绝不要用笨拙几何图形复刻某种效果来逃避规则——应当采用该效果克制而正确的版本。

图标或 Logo 背后有个盒子

把图标放进带填充的方块、标签块、圆形或圆角方形里，就是 AI 垃圾感——Logo 也完全一样。 品牌标志、社交图形或集成 Logo 背后再垫一个彩色或带边框的盒子，看起来像组件库默认样式，不像经过设计的标志。去掉容器：把图标或 Logo 作为裸标记直接放在表面上，有意地设定大小与颜色。背后的盒子除了机器生成感，什么也没增加。如果标志需要与背景分离，请依靠标志自身的粗细、颜色和间距，绝不要在后面垫一块方砖。

标签旁的小短线（眉题刻度）

在 kicker 或眉题标签旁画一条短发丝线——约 ~30px 长，常用渐隐渐变，放在“产品”或“自主编码代理”之前——这只是一种装饰习气，不是设计。它被用来让普通标签显得“设计过”，结果出现在无数机器生成的布局中。单独一条装饰线放在文字旁，没有含义，也不提供结构。去掉它；如果标签确实需要更强的存在感，就通过字体、字重、颜色或间距实现，而不是在旁边硬贴一条小线。（与发丝分隔线和用无圆角线条伪造结构同属一类。）

做坏的超大页脚字标

页面底部的巨型品牌文字只有在真正经过构图时才是有力动作。仅仅把大字粘在那里，为了勾选“标志性字标”这一项，却没有任何工艺，就是粗制滥造；它会以一组具体、可检查的方式失败，而且最糟的版本往往全部命中：

• 它没有居中，也没有与任何东西对齐：文字歪在自己的空间里。
• 它被裁切：大写字母顶部（D 的顶点、E、上伸部）被容器或页面边缘切掉。避开切口——给上下留出真正的呼吸空间，不要削掉任何字形。
• 字体内部有渐变，却与后方的渐变或颜色打架；两组渐变互相冲突，而不是让表面读起来干净统一。
• 字体是默认字体，处理方式等于没有处理：把平面文字粘上去，没有字距决策、没有大小写决策、没有效果、没有想法。

这个手法成功时，靠的是创意转折：充裕的字距、经过选择的大小写（通常全大写）、上下留白、属于品牌的颜色或纹理；文字可以有意从一侧出血，同时在其他方向保持完整并居中。要么做到这些，要么根本不要放巨型字标。签名是一套构图，绝不是为了满足规则而扔进去的一行文字。

互相冲撞的颜色，以及区块之间生硬的颜色接缝

颜色是通往 AI 垃圾感最快的路径之一，而且会从两个方向失败。第一种是颜色互撞：两个高饱和或毫无关联的色相在同一画面打架、强调色不属于任何体系，或者在原本没问题的组件下方铺一层浑浊色洗（暗棕、灰米色、上下不均匀的浅色调）——好元素被扔进坏的颜色环境里也会变丑，问题不在元素，而在色彩语境。第二种是区块之间的硬接缝：上一屏带柔和渐变或光晕，下一屏却在边界处生硬截断，视线撞上一堵墙，而颜色本应延续过去。页面应当作为一个连续表面流动——一个区块的颜色过渡并落入下一个，而不是在硬线上戛然而止。整页都要坚持一套纪律严明的配色，让相邻区块共享或交接色调，并依靠真正的色彩理论（互补与类似关系，而非堆一桌色卡）。只有极少数真正需要的位置才应保留明确的硬色断，比如页脚迈入自己的深色地面。无缝颜色过渡显得考虑周全，但也不要每条边都来一次；好东西太多也会让眼睛疲惫。目标是互补与连续，而不是到处渐变。

做坏的阴影——背后的硬边盒子

如果阴影看起来像一个实心、硬边的圆角矩形坐在元素后面——能看到盒子轮廓，而非柔和衰减——它就做坏了。这通常是因为相对扩散范围而言模糊太小，或实际由第二层承担效果；你看到的不再是光线渐隐到表面，而是一块圆角盒子停在形状后面，阴影效果也因此破裂。真正的阴影无缝融入表面，没有可辨边缘。如果能沿着阴影描出边界，它就不是阴影，而是盒子。让衰减更柔和、缩小位移、把模糊充分延展出去，不要让任何部分像元素背后的复制面板。（如果确实受引擎或捕获方式限制而出现色带，可以谅解；默认就发布一条盒状接缝则不行。）

无法阅读的文字——颜色毫无对比

最基础的错误，却依然常见：文字与背景的明度太接近，根本无法阅读。深色表面上的深色字、中灰面板上的中灰标签、强调色本身上面再放一层暗淡强调色——字确实存在，但眼睛必须费力辨认。在填充按钮上，这不可原谅：如果标签无法清楚地从填充色中分离出来，按钮就在它唯一的职责上失败了。每段文字与背景之间都必须有真正的明度差；拿不准时，把对比推得更强，而不是更弱。颜色不只关乎配色，还必须可读。

只是把元素形状模糊后的光团

一种值得单独命名的坏阴影：所谓光晕或投影，其实只是把元素自身轮廓复制一份、模糊后偏移到背后。由于它从边缘向内缩，边缘本身没有阴影，颜色却积在两侧和底部；你还能看到那份模糊轮廓逐渐变圆——像第一个圆角盒后面悬着第二个。它更像带光环的贴纸，不像受光物体，也无法无缝融入表面。真正的阴影是被投射出来的：有方向、紧凑，而且绝不会复刻元素形状。如果能在元素自己的阴影里（或 Logo、动画标记自己的光晕里）看出它的复制轮廓，就删掉光团，只从单一方向投下一点小而低位移的阴影。永远少一点光团。

当前导航项下面的小圆点

在当前页面链接下面硬加一个小圆点，是条件反射式的 AI 垃圾做法。菜单项下方孤零零的点没有意义——它用装饰代替真正的激活状态，与不断生长的下划线只是换了身衣服。如果当前项必须显得激活，就处理字体：改变当前链接的字重或颜色，而不是在下面拴一个标记。（真正的滑动标签指示器可以是一种有效模式；用散落小点表示“你在这里”则不行。）

两个区块重叠处的内容被裁掉

当一个区块覆盖另一个区块——面板在粘性屏幕上升起、底板向上滑动，或任何高层盖住下层的情况——原本应该跨过接缝继续存在的内容必须完整延续，不能在边界处被斩断。失败形式是：上层把边缘下方的一切裁掉，于是本该继续的文字或控件在区块结束处被切开，只剩一半挂在切口上。如果内容要跨过重叠区域，就把它放在持续可见的层上，并让它完整越过接缝；绝不能让区块边缘（或它的 overflow: hidden）像断头台一样斩掉下面经过的内容。（与“避开切口”同理：你引入的边界绝不能裁掉有效内容。）

拥挤的展示字体——没有呼吸空间

展示数字或单词排得太紧——字母与分隔符挤在一起，字距被拉成负值，字形几乎相碰——即使字体很好，也会显得局促难看。像“0·fail”这样的数据，失败不在字体，而在各部分被压得毫无呼吸空间，小分隔点埋在中间。大字需要空气：放松字距，给分隔符留空间，让数字与单位彼此分开。字体越大，间距越能决定它究竟像经过编排，还是被挤扁了——再美的字形压得太紧也会难看。

覆盖在内容上方的颗粒

高级颗粒纹理作用于表面——背景、渐变、绘画——应当位于内容背后，而不是盖在上面。噪点层如果压在文字、图标、SVG 或终端面板上，就会损害可读性：文字与标记变浑浊、更难辨认，原本想营造触感的效果反而造成伤害。让颗粒留在基底上，文字与控件在上方保持清晰。确实存在一种创意例外：只在一个展示词或一条标题上有意蒙一层颗粒，会显得明确而漂亮；但那是针对单个元素的选择，绝不是拿一整张噪点薄膜盖住包括必读内容在内的所有东西。

冷调蓝炭色（深色 AI 垃圾设计的默认配色）

蓝紫色用在渐变里有 AI 垃圾感，用在深色主题里同样如此。默认的“严肃深色产品”底色——冷调蓝炭色或板岩靛墨色（约 #0c0e15），面板提亮成稍蓝一点的颜色，再“克制地”加一点丁香紫或长春花蓝——就是蓝紫渐变的夜间模式孪生兄弟。它说明没有人真正选择配色，主题只是默认落到了冷蓝深色。深色 UI 不必是蓝色。让它更暖、更中性，或推向一种真正经过选择的色相——墨绿黑、暖炭色、牛血红黑——总之要属于这个品牌，而不是每家深色 SaaS 都在发货的标准靛蓝板岩色。

粉彩糖果渐变背景

蓝紫渐变最出名，但暖粉彩只是甜口版本的同类 AI 垃圾：整页铺满由奶油黄过渡到桃色再到草莓牛奶粉的多色标柔和背景（#ffe6a8 到 #ffc0da 一带），或者薄荷到薰衣草、果子露到奶油的渐变。铺满页面的糖果渐变，和靛蓝渐变一样大声宣告“AI 创业公司落地页”。背景可以承载颜色，但必须是一种经过选择、明确具体的氛围——精心制作的图像、单一而经过思考的色调、只属于这个品牌的渐变——而不是能放在任何产品背后的默认日落果子露色洗。

漂移的柔混渐变色团（糖果极光）

在内容背后漂浮几个巨大、柔和、模糊的径向渐变色团——一个黄色、一个紫色、一个绿色——每个大约 opacity: 0.5，配 mix-blend-mode: multiply 和轻度 blur，让它们融成粉彩极光：这是辨识度最高的机器生成背景之一。正是“正片叠底＋模糊”让它看起来像通用的“柔和渐变球”模板；把十六进制色值调淡也救不了，只会得到更整洁的同一种 AI 垃圾。如果背景需要生命力，就亲自创作它：有真实衰减的方向性光线、精心制作的插画或线场、带颗粒且只采用一种明确颜色的渐变——不要让三个染色圆团在所有内容背后漂来漂去。

物体背后的径向光环

直接放在首屏主体背后的同心柔光（“两圈淡淡光晕”的样子），即使颜色偏暖，也仍显得粗制滥造。暖色救不了居中的径向光环。请用真实的方向性光源照亮物体：一道掠射光或一束带衰减的单向光，而不是在背后摆一个对称光圈。

没有占据第一屏的首屏区

第一视口是一套构图，不是意外。如果首屏比屏幕矮，导致下一节的顶部从下面露出来，而且既不对齐又不对称，那么用户还没滚动，整页就已经显得潦草。让首屏主导首屏折线：尺寸适配视口（或明确控制底边究竟露出什么），让第一帧保持平衡。绝不能让一截无关的半区块渗进首屏。

奶油／米色“编辑感”背景

暖奶油色、骨白和米色已经成为默认的“雅致高级”背景，用到泛滥，开始散发 AI 垃圾感。伸手就拿奶油色，已经等同于过去伸手就拿蓝紫渐变：这是一项安全选择，说明根本没人选配色。请为品牌选择一种真实、具体的背景色。深色、冷色、饱和色或古怪色，都可能比又一张燕麦奶色纸更高级。

AI 垃圾灰（UI 套件默认中性色）

每套 UI 套件都把这种冷调浅灰当作“中性表面”附送，即 gray-100／gray-200 一带（约 #f3f4f6、#eceef2、#e7ecf3）。一旦它被用作页脚色带、区块分隔、卡片填充或页面底色，就有了 AI 垃圾感。它是浅色模式里随手用奶油色的孪生兄弟：安全、未经选择的中性色，说明没人真正做过配色决策。页脚或表面用了这种灰，就像线框稿忘了换掉默认色。请选一种真正属于品牌的表面色：带色相的灰白、加深或加暖的中性色，任何属于这个品牌的颜色都行。所谓灰色从来不真正中性；它只是把“不做决定”装扮成克制。

默认 Google 字体：整套轮换名单

这件事已经被反复验证到令人厌倦：几乎每款免费 Google 字体，只要让它承载品牌，无论哪一类都会显得 AI 垃圾。到目前为止，完整的否决名单如下。

（无衬线／Grotesque）：Inter、Space Grotesk、Sora、Syne、Archivo、Onest、Darker Grotesque、Geologica、Hanken Grotesk、Spline Sans、Schibsted Grotesk、Gabarito、Figtree。“友好圆润”的 Google 无衬线体（Gabarito、Figtree、Quicksand 等）并不是“因为开朗所以安全”的例外；它们和其他字体一样，就是通用创业公司字体。那些从 Google 加载、用来承载每条标题、字标、价格和按钮，同时正文继续使用默认 system-ui 的肥厚、黏腻、气泡感圆润展示花体——Bagel Fat One、Baloo、Fredoka、Chewy、Lobster 及其同类——也不例外。糖果字体读起来不是充满玩心的品牌工艺，只是一款免费猎奇展示字体；再搭 system-ui 正文，更是把破绽翻倍。

（衬线体）：Fraunces、Cormorant、Bodoni 和其他 Didone 字体、Petrona、Hedvig Letters Serif、Brygada 1918、Young Serif。尤其是 Young Serif：一款免费的 Google 展示衬线体（仅单一字重），常被拿来制造“温暖、厚重、古董专利／规格表”的语气，同时承载标题和大号统计数字——无论它看起来多有性格，读起来仍是免费的旧式衬线默认选项。

（等宽字体）：JetBrains Mono、IBM Plex Mono、Spline Sans Mono、Fragment Mono，以及任何“把等宽字体当作全站语气”的做法。尤其要注意 Fragment Mono：它是从高级网站抄来的“参考”等宽字体，但只要开始承载连续标签和状态文字，仍然会显得粗制滥造。从好网站拿一款字体，不等于为当前需求做出了字体选择。

更粗、更重、更有“设计味”，并不会更独特；它仍然是人尽皆知的免费默认款。现在有两条硬规则：

1. 不要继续轮换 Google 字体，寻找那个安全选项。承载品牌身份的字体必须真正独特；达到这里的标准，通常意味着使用有授权或自托管的字体，而且要用得坚定。普通中性字体可以安静地承担正文，但标志性语句绝不能依赖 Google 字体货架上的任何一款。
2. 不要重复使用你已经在这里另一个网站用过的字体（或同样的“衬线标题＋干净无衬线正文”组合）。同一套可辨识的自家搭配跨需求反复出现，本身就是破绽。每个网站都要有自己的字体决策。

悬停“啵一下”（按钮跳动）

按钮悬停时上移（translateY）或放大，就是 AI 垃圾感。这种向上“啵”一下的小动作是模板的默认反射，不是经过思考的交互；按钮在悬停时根本不应移动。请干净地改变状态：切换填充或颜色、让图标横向滑动、让下划线填充。最多只把上浮留给卡片，而且即使在那里也要通过色调保持稳重，绝不能弹跳。

内部发光盒（从里面亮起来的徽章）

带边框的胶囊、标签块、徽章或盒子，内部有发光的染色填充；或者状态点背后有脉冲光晕——这与其他发光套路同属 AI 垃圾感。盒子不应该从内部亮起来。如果徽章需要存在感，就给它诚实的实色表面和真正的边框，而不是内部绽开的光团。带扩散光圈的脉冲“在线”圆点也是同一种条件反射；去掉它。

偏离中心的删除线或切线

画在文字上的线（删除线、划除线、遮盖条）如果没有落在字形的视觉中心，就是粗制滥造；偏得厉害时更是格外刺眼。如果要在单词上画线，它必须穿过字形真正的垂直中心，不能低悬在基线附近，也不能高飘在大写字母顶部。请对照真实的 x-height 测量，不要猜一个百分比。没有居中的穿字线看起来像损坏，而非有意为之。

默认首屏堆叠

最上方是 eyebrow 或 kicker，接着是标题、副标题，然后是主按钮，旁边再放次要文本链接（“开始使用”加“查看证据”）。这种精确的纵向堆叠出现在无数首页。即使字体和颜色没问题，它也是一种 AI 垃圾布局，因为人人都在发布同样的构图。仅仅占满首屏还不够，排列本身必须是一套真正的构图。打破堆叠：改变轴向、拆分或错开元素、让标志性主体占据空间、删掉次链接，或者把元素放到页面中央纵向堆叠以外的地方。

只是跟着滚动的固定背景

用 position: fixed 固定一层背景，让它随着页面滚动一直拖在所有内容下方，连导航下方也毫无分隔，会显得廉价又偷懒。一张平坦的 ASCII 字符网格只在原地闪烁，也不是原本设想的创意动态场，而是静态纹理穿了件戏服。如果背景是标志性设计，它就必须真正做点什么（移动、响应、变形、与内容发生关系），而且不能是一张被拖在每个区块背后的固定薄片，更不能垫在导航下面。要么让它真正有创意并融入整体，要么完全不要把它当作标志性设计。

生硬的图像接缝

一张出血图像紧接着平坦背景区块，图片终点与颜色起点之间形成生硬水平边缘、清晰可见的线，就像把一条带子粘到页面上。要羽化边缘，让照片无缝溶入上下区块，不留接缝。

真正有效的方法（前后两条边都验证过，经历两次失败后得出）：给图像自身的像素加蒙版，并同时满足以下四点，否则仍会出现色带。

1. 使用蒙版，不是叠层。颜色渐变叠层会让下面的图像仍保持完全不透明，眼睛依然能抓到接合处。应让图像自身淡出：mask-image: linear-gradient(to bottom, transparent 0%, ... #000 31%, #000 65%, ... transparent 100%)。
2. 距离既要长，缓动也要细。淡出必须跨越很大距离（这里上下各占区块 ~30%），并设置许多色标（10 个以上），才能平滑缓入。短淡出，或只有两三个色标的淡出，仍会像一条隐约的线。
3. 区块要高。上下两段很长的淡出会吞掉矮区块里的整张图。把图片区块做得足够高（这里是 116vh），让两个羽化区之间保留一条完全不透明的中间区域。
4. 页面颜色连续。上下区块必须使用相同背景色，这样蒙版淡掉的边缘才会露出一整片不间断的表面，没有任何东西能与之形成接缝。

曾让底部变得更糟的失败做法：一个用于提高文字对比度的遮罩，以半透明状态结束在区块边界。这个遮罩本身会在边缘变成一条硬色带。修复方法是：任何用于加深文字背景的效果都只能位于文字背后，并且在抵达上下边缘之前就淡回透明；其余可读性由足够强的文字阴影承担。

饱和强调色

把一种明亮、中等饱和度的品牌色泼在文字、圆点和按钮上，无论是哪种色相，都会产生 AI 垃圾感。双色标题里的强调词、眉题前的小实心点、主按钮的实色填充、唯一的彩色标签：如果它们全都使用同一块鲜艳饱和色，页面就像模板。真正的破绽是饱和度和对比度，不是颜色本身。高级的强调色应当是色调式的：与周围相比明度明显更浅或更深，通常降低饱和度，于是它像经过思考的染色，而不是喷上去的高亮。代码注释的暗灰、运行中进程上的淡文字，就属于正确的强调方式；海报般明亮的填充则不是。如果页面上每一处强调都是同一种吵闹的饱和色，就把它们重调成从背景或墨色延伸出的安静色阶。这也限定了双色标题手法：强调应当是色调变化，绝不是突然蹦出一块饱和色。

下划线填充悬停动画

链接或按钮的下划线在悬停时生长、擦入或移动，是 AI 垃圾感。它是“看，这是可交互的”这种条件反射式花活，到处都能看到：导航项长出下划线，幽灵按钮的下划线从左到右填满。完全不要给下划线做动画。如果悬停状态必须可辨，请干净而安静地改变状态（色调变化、图标滑动）；不断生长的下划线只是模板习气，不是经过设计的交互。

太阳／月亮主题切换器，以及重画的线性图标

一个圆角胶囊，让旋钮在太阳和月亮之间滑动，是标准主题开关，一出现就显得模板化。一组为了显得“定制”而手绘的细单描边图标也一样：带对勾的文档、几颗相连圆点表示“代理”、带勾的盾牌。把常见图标包形状重新画一遍，并不会让它们成为你的图标；读起来仍是通用轮廓集。定制图标需要在标记中体现真正的观点（不同寻常的构造、一致的原创细节、属于品牌的线条粗细），而不是重画默认字形。如果一个图标可以原样放到任何其他产品上，它就是 AI 垃圾。主题开关同理，几乎可以是任何形式，唯独不要再做太阳月亮胶囊。

无圆角发丝线，以及作为装饰的线条

随手放一条细、硬、方头的线来分隔内容，或者摆在文本块旁边，看起来很廉价。单独的水平或垂直发丝线如果只作装饰（段落旁的分隔线、标签下的线、列表边的轨道），就是偷懒伪造结构。线条如果必须存在，就给它明确意图：端点做圆、让它成为原创形状的一部分，或者直接用真正的留白和层级取代。裸露、无圆角的线条本身就是一种破绽。

AI 垃圾式布局（我不断重复的那些构图）

字体是一条轴，布局是另一条；重新上色的布局依然是 AI 垃圾。下面这些正是反复用于这些网站、只换了配色的区块构图。现在每一种本身都是破绽。在工作流第 5 步，要明确问自己：我以前用过这个布局或字体吗？如果用过，就换掉。

kicker 加衬线 H2 的区块标题

每个区块都以一行小号、全大写、强调色的 kicker（“三个地点”“理念”“工作原理”）开头，下面接一个中号衬线标题。这里几乎每个网站、几乎每个区块顶部都长这样。kicker 标签只是装饰，整个模式就是模板。请改变区块的开场方式：去掉 kicker、改变尺度、让区块从图像、数字、完整句子或干脆什么都没有开始。

大号衬线陈述区块

整个区块只有一个 kicker 和一句大号衬线文字，其中单独一个词用斜体强调（“你自己的想法又响了起来”）。一个又一个网站都把它当作“理念／想法”节拍。居中或左对齐的衬线引语，再给一个词加斜体强调，只是一种条件反射，不是构图。

带表单的内嵌咨询“岛屿”

四周留有边距的悬浮圆角面板，内容居中，里面放 kicker、大号衬线标题并把一个词设为斜体强调、一行引导语和一张表单。“告诉我们你何时想消失／我们只组织少量静修”的岛屿，与这里其他每个收尾 CTA 都是同一套预制品，只是颜色不同。内嵌岛屿曾经是一种高级手法；每次都拿它当默认收尾区块，就成了 AI 垃圾。

邮箱胶囊加按钮表单

一个细长胶囊形邮箱输入框，旁边接一个胶囊按钮（“you@email.com”加“申请一个名额”）。这套完全相同的注册行，以不同颜色出现在 Olea、Kiln 和 Alta 上，是这里重复最多的单一组件。邮件订阅不必非得是胶囊输入框旁边摆胶囊按钮。

带叠层说明的图像卡片

一张竖向图片卡，底部用渐变遮罩承载小号全大写元信息标签、衬线名称、地点行，下面再接说明和“链接箭头”。这是旅行／产品卡片预设。内部图像可能真实且优秀，但包裹它的卡片每次都是同一个模板。

首屏之后所有内容都垫同一块纯色

这是这里最糟、也是刚刚发布过的一种做法：首屏用一张惊艳的全出血图像，下面每个区块却全部落到同一种平坦深色（或奶油色）背景，上面摆些盒子。氛围在首屏折线处戛然而止。一个页面不会只因首屏高级就整体高级。整个页面都需要氛围：更多图像、有纹理或色调的表面、真实环境、沿滚动延续标志性设计的深度，而不是第一屏之后把所有内容都放到一片空地上。

重复使用自己的“家族风格”

这是更深的一层。kicker-H2 标题、衬线陈述、图像卡片、带胶囊表单的内嵌岛屿、“衬线＋干净无衬线”字体组合、超大页脚字标——给每份需求套上这组元素，只换一套颜色。即使其中每一项曾经都算“高级”，这套反复出现的工具箱本身就是模板。如果上一个网站和这一个网站共享同样五种区块形状，你只是做了一个主题并换皮，没有在设计。每个网站都要从具体需求出发，重新编排区块。

右侧带面板的首屏堆叠

发布得最多的首屏：一行小眉题或状态文字，接着是巨大标题、一段副文案、两个按钮，右边再悬一张产品面板、图像或卡片。每个部件都可以很干净，整体仍然是 AI 垃圾，因为一千个首页都在使用这个排列。右侧面板里放什么毫无关系。“左栏文字＋右栏物体”的骨架，再装入“眉题→标题→副文案→按钮”的堆叠，本身就是 AI 垃圾。打破它：改变轴向、删掉一些部分、让一个元素占据空间，或者把内容放到整齐的左侧堆叠以外。

多行标题（以及悬空的强调词）

标题折成三行或更多堆叠行时就显得粗制滥造，四行更糟——一列高高的短行台阶，没有节奏、没有构图，只是文字碰到盒子边缘后随便换行。展示标题应控制在一两行，或者真正对它进行构图；绝不能堆成三四行的高塔。双色技巧会让问题更糟，而不是更好：当那个带颜色或斜体的强调词孤零零掉在高高换行堆叠的末尾，它看起来像一块随机泼洒的颜色，与所属短语完全脱节。为什么最底下一个词突然变成橙色？如果要强调一个词，就让强调与行文保持连贯：在受控的一两行标题里有意强调一次，而不是让一个彩色词被遗弃在四行文字堆的脚下。

实心按钮旁边放描边按钮

一个实心填充按钮旁边摆一个描边“幽灵”按钮，就是 AI 垃圾布局，没有例外。“实心主按钮＋描边次按钮”是一套预设，与颜色、圆角或标签无关；再加上下划线或箭头花活，只会让模板味更重。不要把实心和描边按钮的组合当作默认操作行。只留一个清晰操作，或者用不同于这套标准“填充对描边”二元组的方式区分两个操作。

小标签压在大标题上方的区块标题

用一个小标签加下方大标题开启区块（例如等宽或全大写 kicker “它真正做什么”，下面是大号“不是聊天机器人……”），无论使用哪种字体，都是 AI 垃圾布局，并非只有衬线体如此。“上面小字、下面大字”就是区块开头模板。请改变开场方式：去掉标签、改变尺度、从图像、数字或完整句子开始。（这是“kicker＋H2”套路去掉衬线体限制后的广义版本。）

垂直线旁的编号步骤

“工作原理”一栏做成编号项目（01、02、03），旁边纵贯一条线，文字放在线右侧，是 AI 垃圾布局；线条如果还是方头，会更糟。“轨道上的编号列表”是一套预设。请用其他方式编排流程或顺序，绝不要依靠一条普通、无圆角的线来撑起它。

堆叠 AI 垃圾布局（复合规则）

这些构图单独看，或许每一种都有人能为之辩护。一旦它们堆在同一页里（右侧带面板的首屏堆叠，接着是“标签在标题上方”的区块，再来一个同类区块，然后在页脚前放“大号文字＋副文案＋两个按钮”），组合效果会成倍增强，生成感一览无遗。整个页面并不等于一组“各自可以接受”的区块之和。如果它由一串已知 AI 垃圾骨架重新上色、重新堆叠而成，不管每块有多干净，整体仍是 AI 垃圾。请从需求出发，把页面作为一个整体构图；当某个区块命中这份名单时，不能因为“各个部件都没问题”就当它亮了绿灯，正确反应是改掉它。

整套 SaaS 产品页模板（元骨架）

互联网上生成感最强的布局——Stripe／Linear／Vercel 仿品——是一整页按以下精确顺序组装的区块：双栏首屏（左侧标题＋副文案＋按钮，右侧阴影圆角盒里的产品或插画面板）；接着一排三张功能卡片，每张都在染色方块里放图标；再来“面向购物者／面向商家”的标签切换；两三张定价卡片；FAQ 手风琴；整宽 CTA 色块，包含标题、副文案和按钮；最后是用分隔线划开的多栏页脚。每一个区块本身都已经在这份列表里。按这个顺序叠起来，它们不是设计，而是抹掉序列号的默认模板；把它重新涂成绿色，什么也改变不了。如果你正准备构建的页面就是这堆东西，停下来：你没有设计任何东西，只是在重填一张表。先确定真正的标志性设计，再从品牌和需求出发构建区块，让页面无法逐块替换到任何其他产品上。这是最该警惕的布局，因为它看起来“安全又专业”，实则纯粹是 AI 垃圾。

到处把标签和元数据做成染色胶囊块

只要一形成条件反射，把每一小片元数据——类别、状态、标签、“有货”、“在你附近”、距离——都包进一枚带染色背景的小圆角文字胶囊里，就是 AI 垃圾。一页撒满小彩色标签块，看起来像组件库仪表盘，不像经过设计的品牌。请用真正的字体层级和字重来区分信息；只有极少数确实需要被容纳的状态才保留 chip，不要给每个名词都套胶囊。

失灵控件和虚假交互

标签切换、手风琴、滑块、开关或按钮看似可交互，点击后却毫无作用，或明显没有响应，就是 AI 垃圾，而且更糟，因为它根本就是坏的。只要在页面上放了控件，就必须能在浏览器里工作，并通过一次真实点击确认。如果某个东西只是静态道具（假搜索栏、模拟标签条），就不要把它装扮成活控件，诱使用户点击却无法回应。（参见工作流：报告完成前，用真实指针测试每个交互控件。）

更深的破绽：躲开这份清单，仍然可能是 AI 垃圾

上面说的全是表面。真正的问题，是没有做任何创意决定。你可以避开这份列表里的每一项，仍然交付 AI 垃圾，因为当任何东西都不是被真正创造出来时，产出还是会显得像生成品。清单最多让你干净地错过目标，无法替你完成设计。接下来这些条目，正是从一个努力回避清单的成品中抓出来的。

就连“有品味”的换字体也不行

不用 Inter 或 Cormorant，改选公认安全的设计师替代品（Big Shoulders、Newsreader、IBM Plex Mono、Instrument Serif、Bricolage 等），仍然是 AI 垃圾。任何因为“它是公认不错的 Google Fonts 选择”才被挑中的字体，都是破绽。问题从来不在某个字体家族，而在于按名声选字，而非按需求选字。

同一骨架，重新上色

把一个布局记录为 AI 垃圾后，再换套颜色重建，仍然是 AI 垃圾。左右分栏首屏（kicker、超大标题、副标题、两个操作、右侧面板）不会因为配色改变就不再是模板。纸上平铺的墨色，只是给同一套预制件换了一层漆。

标准页脚

一个大字标配一行标语，一条整宽分隔线，下方四栏链接列表使用全大写等宽标签，再来一条线，最后是版权行和一句俏皮收尾。整齐、可读、符合预期。这个没有任何想法的“正确”页脚，就是 AI 垃圾。

完全不用图标

矫枉过正到零图标，本身也是一种破绽。为了躲开图标包风格，把每个图标都删掉，会留下平坦、死气沉沉的界面；这与给所有地方都塞 Lucide 一样偷懒。真正的图标体系是为品牌绘制，而不是为了稳妥全部删除。

避开清单不等于设计

这是最深层的破绽。机械地把一种时髦字体换成另一种，给同一布局重新上色，用线条替代边框，为了安全删除图标：每一个动作都躲过了这里的一条，却没有创造任何东西。设计是一种观点（关于它为谁而做，以及为什么应该长成这样），并且坚定地贯彻这种观点。清单只能让作品少错一点，无法让它变好。

真正的高级感是什么样（工艺，而非回避）

上面大多数“AI 垃圾”技巧都不是永远禁用。它们只是某种真实工具的偷懒默认版本。玻璃、强调边、发光、边框和动效，也都会出现在真正高级的作品里。区别在于执行：工艺、克制，最重要的是独特性。同一个元素，如果只是最明显的预设，就是 AI 垃圾；如果清楚地看得出它专为这一屏而制作，就会显得高级。以下是高级版本的标志。

真正的半透明（液态玻璃）

不是一个普通模糊加半透明填充的平面面板。高级玻璃是一种材料：它叠在值得透过它观看的背景上（照片、丰富色场、实时内容），会折射和弯曲背景；边缘有淡淡的色散，光线捕捉到上沿时形成明亮内高光，带一点轻霜，再通过精细调校的内阴影和投影营造真实深度。它会响应背后的内容。做到这种程度，透明才显得昂贵。AI 垃圾版本只是一个无视背景、带蓝色光晕的磨砂盒。

同色边框与色调式抬升

不画线也能定义容器。让容器表面明度相对背景略微提高或降低，加一条使用表面自身颜色、低透明度的 1px 描边，再在顶边放一层柔和内高光。得到的边缘像一圈捕捉光线的圆润唇边，你能感觉到它，而不是看到一条画出的轮廓。深度与“凸起感”来自光线和色调，而非对比。这是发丝边框套路的高级形态：AI 垃圾版在每个盒子上画生硬、高对比的 1px 线；这里是一道无缝边缘，感知多于看见。

定制几何胜过默认形状

独特性是最强的高级感信号。在卡片上放一条普通直强调边，是预设（AI 垃圾）。完全相同的想法，如果边缘具有原创轮廓，就会变得高级：标记沿对角线切入，中段笔直下行，底部再沿对角线折出；或者做倒角、缺口、自定义括号。具体的形状看起来像有意画出，而不是随手放入。分隔符、角、连接器、容器边缘、下划线都适用：自己发明几何，不要接受默认矩形。

裸图标，不要容器

把每个图标都剥离到标记本身。不要方块、不要 chip、不要背后的彩色圆角方形。高级手法是做减法：屏幕上只留下必须存在的东西。（与“方块里的超大图标”套路相反。）

少说一点

词少、行短。大段文案和层层堆叠的行会显得像填充物。高级界面惜字如金，让层级、间距和视觉内容承担含义。删掉所有不承重的句子。自信体现在你愿意舍弃多少。

定制的内部图标体系

每个图标都作为独立设计对象绘制，遵循一套具体的家族风格，而不是从图标包里抽取。一套在描边、转角和网格上保持一致的定制图标，是最能证明有人参与设计的标志之一。（参见上文“完全不用图标”：答案不是零图标，而是你自己的图标。）

有作者性的微交互

使用定制动效，而非默认的淡入加位移。例如悬停时，线条移动并填充，端点圆润或略微越过边界形成“弹出感”，缓动明显经过刻意调校。动效中使用的任何阴影都要紧凑而有意图，绝不能显得廉价。交互应像专为这一个元素编写，而不是全局套用。克制，加上具体性。

经过思考的光，而非默认光晕

使用光线或光晕时，颜色要具体且出人意料。暖调、带体积感的琥珀色洗，或一道单向光束，显得经过美术指导；条件反射式蓝紫光团则是 AI 垃圾。只有当颜色、方向和衰减都清楚地经过选择，光晕才显得高级。

高级噪点

以极低透明度叠加一层细微胶片颗粒或 Perlin 噪声纹理。它能打破平坦填充和渐变、消除色带，增加模拟式触感，让表面显得物理而昂贵。重点完全在于含蓄：你应该感觉到它，而不是直接看到它。

液态玻璃按钮：一份具体配方

以下是一套玻璃按钮规范里的真实参数，用作理解“高级玻璃”究竟由什么构成的参考。共有两个版本（薄玻璃胶囊和厚实版本）。所有版本都放在真实摄影背景上，让折射确实有东西可弯曲。

共同基础：

• 填充：#2575FF。厚版本把填充透明度降到 50%，让背景可以透过玻璃；薄版本保持实色。
• 标签＋图标：#FFFFFF，100%。字体：Geist Medium，20。图标与标签间距：8。
• 内边距：水平 20，垂直 14。
• 两条透明度 20% 的发丝描边，颜色接近表面（一条染青色 #22BBFD，一条白色 #FFFFFF）。这是同色边缘，不是对比轮廓：即上文所述的受光唇边。
• 内阴影（顶部高光）：#FFFFFF，透明度 20%，Y 轴位移 1，模糊 32。这是上边缘明亮的内部光泽。
• 投影：使用填充色 #2575FF（不是黑色），透明度 6%，Y 轴位移 3，模糊 3。紧凑、配色一致的阴影才是高级做法；柔软黑色光团则是 AI 垃圾版本。

玻璃材质参数：

• 薄胶囊：Light angle -45deg，Light 80%。Refraction 80。Depth 2。Dispersion 40。Frost 6。Splay 0。
• 厚胶囊：Light angle -50deg，Light 60%。Refraction 64。Depth 44。Dispersion 67。Frost 2。Splay 20。

各项控件的含义：Light angle／intensity 是镜面高光的方向和强度；Refraction 是背景穿过玻璃时弯曲的程度；Depth 是视觉厚度（2 像一张薄片，44 像一块厚板）；Dispersion 是色差，即边缘淡淡的彩虹分裂；Frost 是模糊；Splay 是折射扩散到形状以外的距离。

CSS 原生不支持折射或色散，因此可以这样近似：用 backdrop-filter: blur()（Frost）加 saturate()／contrast() 模拟透镜感；用白色 inset box-shadow 制造顶部高光；通过分层 border 或 box-shadow 实现两条低透明度描边；加一层紧凑、颜色匹配的投影；再用边缘处 1px 青色／品红偏移或细薄的锥形／边缘渐变伪造色散。始终把它放在真实内容上方，保证确实有内容可以折射。（如果成本值得，带 feDisplacementMap 的 SVG 滤镜可以实现真正的折射。）

高级字体通常意味着有授权的字体

最没有 AI 垃圾感的参考网站，不会用免费的 Google 默认字体来承载标志性文字。它们会购买授权或自托管真正的字体（Pangram Pangram 的 Perfectly Nineties、Displaay 的 Matter，以及 Soehne、GT America、Tiempos、Klim 各系列等同类字体），再配一款中性主力字体（Inter）和一款等宽字体（Fragment Mono、IBM Plex Mono）。模板感网站（Droppable）才只使用现成的 Google 字体家族。你未必总能使用付费字体，但原则不变：标志性字体必须作为明确的品牌决策来选择，通常是用于展示的编辑感衬线体或富有性格的 Grotesque，再配一款干净中性的无衬线体；不能是什么正在 Google Fonts 流行就用什么。要从来源中获取准确的字体家族，绝不要凭记忆报名字。

全页、大尺度构图

最高级的屏幕是作为完整页面进行构图，而不是一摞默认区块。尺度大胆自信：超大标题、从边缘出血的巨型品牌字标水印、充裕负空间、远超畏缩默认值的字体和形状尺寸。把整个视口当作一帧画面进行美术指导。

真实 Logo 墙（赢得的社会证明）

可辨识的公司 Logo（“已在这些产品的生产环境使用”、一排单色品牌标志）能让网站显得可信且高级。呈现要有品味：单色、尺寸均匀、低调。注意：只有在你可以诚实声称这些真实品牌时，这招才成立。发明 Logo 或伪造客户，本身就是 AI 垃圾。

蓝图／画布背景

一种淡淡的工程美学：细模块网格、沿边标尺刻度、角落定位标或裁切标、虚线参考线，整体像一张设计画布。只要保持含蓄、单色，它就能唤起工艺与过程感，显得昂贵。可用 CSS／SVG 构建：repeating-linear-gradient 网格、角落的小 SVG 刻度和括号标记、低透明度 1px 虚线参考线。（如果一个网站的背景艺术完全是定制插画，那属于另一个更高难度的层级。）

内嵌“岛屿”区块

一种弹出式技巧。不要把全出血色带焊死在页面上，而是让区块作为圆角面板悬浮，四周保持一致边距，坐落在不同的表面上（通常是略有差异的颜色加颗粒）。每条边周围的空隙，让它读起来像一个独立、经过思考的物体，而不是滚动内容的一部分。常见于页脚和功能区块。四面呼吸空间就是整个视觉提示。

好的做法：精心制作的定制 SVG 渲染

用 SVG 手工打造产品或插画，认真处理正确比例、分层细节、经过选择的颜色与光线，确实会显得高级，投入也看得见。这与粗糙 CSS 插画套路正好相反，区别就在工艺。当定制 SVG 物体成为页面最强的一部分时，你就做对了。

好的做法：光泽才是玻璃效果里真正好的部分

在玻璃表面上，干净的镜面光泽（横掠顶部的明亮高光）是高级的部分，通常也是最容易成功的部分。失败的是模糊和阴影。所以保留光泽，修好周围的一切：融合模糊、杀掉漏光、移除静止光环、消除跳变。

专业不等于没有生命

克制不等于什么都没有。最好的作品既干净，又有少量具备作者性的创意时刻。一个正确、稀疏、字体优秀，却毫无创造的页面，仍会显得只完成了一半。请加入经过思考的创意：干净、完美对齐的悬停状态；一排轻轻上下漂移的 Logo 或标签盒；使用超大、精确对齐的字体并带独特纹理的页脚；滚动驱动的显示；动感细节。标准是有心跳的专业，而不是睡着了的专业。

再说得尖锐一些，因为问题一直发生：一个页面可以通过这份清单的每条规则，没有交付任何被禁止的东西，却仍然失败，因为它什么都没做。正确的间距、一张雅致图像、安静字体和零个有作者性的创意时刻，并非“高级极简主义”，只是拿克制当借口的未完成作品。如果没有让人惊叹之处，没有只可能属于这个品牌的标志性设计，没有响应任何事物的动效，没有一个用真正信念执行的想法，那么克制只是在为没有观点找借口。干净只是底线，从来不是成就。平静可以是一种有意选择的风格，也可以非常美；空洞则是失败。先确定标志性设计，再真正围绕它做出点东西。

好网格：细密、有纹理的微网格

只有当网格是一张偷懒、淡薄、铺满全页的方格纸时，它才是 AI 垃圾。一套精确、细小、有意设置的模块网格，保持紧密并赋予纹理（颗粒、淡噪点渐变、经过思考的边缘），可以成为高级表面，尤其适合页脚或功能面板背后。区别在于工艺与克制：设计过的纹理，而非默认底图。如果看起来像方格纸，它就失败了；如果像印刷基材，它就成功了。

颗粒渐变，绝不要有色带的渐变

平滑渐变如果分层成可见条带，就是 AI 垃圾。高级版本是在渐变中抖动混入细颗粒或噪点，让过渡无缝，同时让表面具有物理感。任何大面积颜色过渡都应带颗粒。“噪点渐变”显得昂贵；干净却带条带的渐变显得廉价。

滚动编排的动效

一种高级创意层：内容进入视口时显示、落位或位移，以及各层之间安静的视差。保持细微、快速，并与滚动位置绑定；始终用 prefers-reduced-motion 做条件控制。现代 CSS 滚动驱动动画（animation-timeline: view()）无需 JavaScript 就能完成大部分效果。响应用户滚动的动效，是最能证明页面经过人为设计的信号之一。

放置正确的超大页脚字标

页面底部的巨型品牌文字是好设计，但前提是位置正确。有两条规则。第一，它位于背景纹理或网格上方的图层，不能埋在后面。第二，它紧贴最底边，下面不留任何空隙，通常还会稍微从底部出血；链接和编校信息位于它上方。巨型字标下面留有空白，或者被网格盖住，都是失败版本。把它锚定到底部、裁到边缘，并放到最上层。

标志性设计：独特性究竟如何形成

页面可以正确、稀疏、字体优秀，却依然无聊，因为它没有标志性设计。“干净”是底线，不是目标。参考网站（Craft、Paper、Podqi、Droppable、Portal）彼此看起来完全不同，但制造独特性的方式相同。下面是用设计语言写成的公式。平坦背景、几个盒子、一款中性 Grotesque，在以下每一项上的得分都是零；这正是它看起来无聊的原因。

1. 一个标志性主体

每个令人难忘的首屏都有一个定制、高投入的焦点物体，无法被粘贴到其他网站。Craft：一幅撕纸拼贴风格的云山天空。Portal：黄昏绘画风景，一台小机器人站在岩石上。Podqi：流动的绿色丝绸渲染。Droppable：星空与醒目的绿色字标。Paper：分层的设计工具画布，上方叠着终端窗口。先决定这一件东西，其他一切都为它服务。离线时，标志性主体可以是精心制作的 SVG 场景或对象、细节丰富的 CSS／SVG 产品模型，或者预先生成的图像资源，绝不能是纯色填充。

2. 氛围，而非平坦填充

背景是有深度、有情绪的完整环境（插画、渲染、纹理、场景），不是单一纯色。即使深色参考案例也有星空或粒子；即使明亮案例也是绘制的渐变天空。在盒子背后铺平坦深色或平坦奶油色，就是无聊的失败模式。

3. Z 轴上的分层深度

要能读出三个层次：前景文案、中景焦点物体（产品窗口、角色）、背景场景。至少有一个元素跨过图层边界（Paper 的终端叠在画布上，产品 UI 有一半从底边出血）。重叠和出血制造深度；单一平面看起来像模板。

4. 产品作为真实、填充完整的主体

展示产品时，它应当是细节丰富、内容完整的 UI（Craft 的文档卡片、Droppable 的传输列表、Portal 的发票、Paper 的画布），带深度地悬浮和倾斜，通常在底边处裁切。空白占位盒恰恰相反；“无聊”正是由这些东西构成的。

5. 展示字体要有性格

标题字体要有个性，而且要排得很大：Craft 和 Portal 使用独特衬线体，Droppable 使用怪趣复古衬线体，Podqi 使用粗体窄版展示字体。品牌身份绝不能落在中性 Grotesque 上。正文可以中性；标志性语句不行。

6. 一个定制轮廓

用一个特别裁切的形状为页面签名：Droppable 的定价卡片像收据，底部是撕纸锯齿边；也可以是封闭式胶囊导航或一个缺口。一种一眼就能认出的几何轮廓，胜过十个默认矩形。

7. 导航要经过处理，不能沿用默认

菜单栏是一项设计决策，不是一排贴边链接。Craft 和 Portal 把它悬浮在一个封闭胶囊里；其他案例则将其居中，或赋予真正的存在感。把它收在容器里、居中、放大，或把真实品牌／公司标志编入其中——总之要有明确处理。

8. 真实的具体性

Logo 墙里放真实可辨的标志（Podqi），产品内部使用真实姓名和数据，文案也真实。具体细节显得可信且经过考虑；通用占位符则像库存模板。

公式

独特性 = 一个标志性主体 + 氛围 + 分层深度 + 一款有性格的展示字体 + 一个定制轮廓 + 经过处理的导航 + 真实细节。

缺少标志性主体，再干净的间距也救不了页面。即使最极简的高级网站，也至少拥有标志性主体和一款有性格的字体。“平坦背景＋盒子＋中性 Grotesque”是必须停止交付的无聊失败：先决定标志性设计，然后围绕它构建其他一切。

一套具体的高级设计手法

下面是可复用的技巧，每一种都可以成为标志性设计的具体选项。

免责声明： 它适用于整个文件，而不只本节。这些是用于合适语境的工具，绝不是从上到下逐项执行的清单。存在两种同等而相反的失败：

• 什么都用。 同时堆叠衬线标题、ASCII 字符场、玻璃、渐变图标和全出血场景，只会制造噪声，不会成为设计。你不需要使用所有东西。只挑符合这个品牌和页面的少数手法。
• 该用的一个不用。 页面明显需要标志性设计，却仍然平坦而通用，就是无聊的失败。一种手法真正必要时，你就应该使用。

贯穿二者之上的规则是统一性：永远不要使用无法与其他元素互补的东西。每项选择都必须属于同一个系统。与页面其他部分打架的技巧，比完全不用更糟。先考虑匹配与克制，然后在确实需要的地方准确使用正确手法。

标志性衬线标题

推动高级感最强的单一因素。选择一款优雅、粗细反差略高且真正有性格的衬线体，排得非常大；通常只把一个词设成斜体和／或单一强调色，其余保持墨色。拿不准标题怎么做时，它胜过任何 Grotesque。这是“有性格的展示字体”的实用版本：独特衬线体、双色或斜体强调、大尺度。

双色／强调标题

在标题内部，把一个词或第二行区分出来：使用斜体，或单一强调色（紫罗兰、靛青、品牌色），其余保持中性。无需任何装饰，就能获得节奏和强调点。每个标题只强调一次，绝不能把词染成彩虹。

全出血氛围首屏

用单一摄影、渲染或绘画场景填满整个首屏，四边出血（自然景观、天空、地平线、柔和 3D 世界）；标题居中叠在上面，导航悬浮于顶部。背景本身就是艺术：这是标志性主体与氛围的最大化形态。目标气质是宁静、沉浸，在场景上叠优雅、居中的衬线字体。离线时可用精心制作的 SVG 场景、带颗粒的分层渐变或预先生成的图像资源近似；绝不能用纯色填充。

动态字符场背景

在柔和的虹彩渐变上散布等宽字形（数字、标点、符号、ASCII），做淡淡动画，让字符以缓慢、无缝循环闪烁或漂移。无需具象插画，就能形成数据或代码氛围；运动让它有生命。保持低对比、放在内容背后，并用 reduced-motion 做条件控制。非常适合数据、开发者工具、AI 和安全产品。可离线用 CSS／SVG／canvas 构建。

渐变填充图标（标记内部的宝石）

图标或 Logo 标记的内部填充使用多色标渐变（闪电、花形、带彩色渐变内部的形状），而非平坦单色。它少见、独特，像一颗小小珐琅宝石。这与 AI 垃圾式蓝紫背景渐变正好相反：渐变被收在一个微小、克制、精心制作的定制 SVG 细节中。只用于品牌标记或单个眉题图标，务必节制。

箭头是破绽，所以要下足功夫

CTA 上默认的水平右箭头到处都是，看起来像库存组件。向上或向外斜指（右上方）的箭头，是一种小而独特的高级选择，说明有人真正上了心。画一枚具体的箭头，让描边和转角匹配整套系统。每个字形都同理：图标体系是品牌身份的一部分，不是填充物。

一种统一的视觉语言（“同步版本”）

最强的页面像同一个系统：导航、按钮、箭头、圆角半径、边框和背景说着同一种语言。可以处处使用尖角，也可以复用一种具体箭头，或让同一种渐变贯穿图标、按钮与背景。统一性本身就是高级信号；由互不匹配的默认组件拼成的页面，即使每一部分单看没问题，整体也显得廉价。尤其是导航，必须属于这个系统，不能把一条默认栏硬装在顶部。

配得上场景时使用高级玻璃 CTA

在丰富背景上放一个有光泽、柔和模糊的玻璃按钮，并干净地执行（光泽高光、无缝融合的模糊、没有漏光、没有跳变），确实是一种高级行动号召。它只有叠在值得折射的氛围背景上才成立；放在纯色填充上毫无意义。真正让它成立的是光泽。（参见液态玻璃配方。）

使用真正的组件库，不要手搓通用 UI

在真正的框架中（这里指 Next.js／React），你可以、也应该使用成熟的 UI 组件库和设计系统，而不是从零手写每个按钮、开关、导航和卡片。手工重新发明基础组件，往往只会复现 AI 垃圾默认样式：太阳月亮开关、“填充＋描边”按钮组合、下划线悬停。考虑周全、制作优秀的组件库或真实设计系统，是合理而且通常更好的基础。利用其中可访问、能正常工作的原语，再在上面针对品牌进行强力美术指导，不要交付一份更差的手搓版通用组件。已有真正经过测试的组件时，就不要手搓通用 UI；手工控件更绝不能带着故障发布。

常备工具箱（优先选用这些）

以下均经过挑选，全部免费使用。构建基础、完整区块和动效时，默认优先使用它们，而不是从零开始。

• Motion（motion.dev，即原 Framer Motion 库）。运行 npm i motion，从 motion/react 导入。它是其他工具共同依赖的动画引擎，也是唯一不需要 Tailwind 的一款，因此能在任何项目中使用，包括这个采用 CSS Modules 的项目。用于弹簧、手势、滚动联动变换（useScroll、useTransform）、数字动画、文字效果、跑马灯、布局动画。（motion.dev/docs/ai-kit 的“Motion AI Kit”是面向编辑器的付费 Motion+ MCP，不是免费组件；除非已经有 Motion+ token，否则跳过。）
• shadcn/ui（ui.shadcn.com）。React＋Radix＋Tailwind 的复制粘贴式原语（按钮、对话框、标签页、手风琴、表单、表格、命令面板）。这是可访问性的基础层。通过其 CLI 添加。
• tailark（tailark.com）。基于 Tailwind＋shadcn 的营销区块和完整页面：首屏、功能、定价、证言、FAQ、CTA、Bento 网格、页脚。
• motion-primitives（motion-primitives.com）。基于 Motion＋Tailwind 的动画组件：文字效果、无限滑块／跑马灯、动态标签页、手风琴、光标、过渡、形变对话框。
• kokonut UI（kokonutui.com）。Tailwind v4＋Motion，包含 100 多个组件，包括真正实用的 AI 组件（AI 输入搜索、AI 加载／文字状态、语音），以及文字效果、粒子／磁吸按钮、翻转／液态玻璃／Bento 卡片、形变导航栏。可借助 kokonut 注册表，通过 shadcn CLI 添加。

实际使用方式：shadcn、tailark、motion-primitives 和 kokonut 都以 Tailwind 为基础。在 Tailwind 项目中，可以直接安装使用。在没有 Tailwind 的项目中（比如当前这个），安装 Motion 来制作动效，并把其他工具的结构和模式改写成项目自己的样式，不要直接扔进无法生效的 Tailwind class。绝不要只为使用一个区块，就给大型现有非 Tailwind 代码库添加全局 Tailwind；这可能导致其他所有页面回归。

预制组件一律去掉 AI 垃圾感

免费的预制区块只是起点，不是免检通行证。这些库的默认样式里仍有大量 AI 垃圾：蓝紫渐变、发光胶囊按钮、“填充＋描边”双按钮、太阳月亮开关、到处使用的大写宽字距、默认首屏堆叠。只要在引入的组件中发现 AI 垃圾元素，你完全有权替换、删除或重写。保留可访问行为和结构，扔掉通用样式，并针对品牌进行美术指导。绝不能因为它来自预制组件，就接受 AI 垃圾。发布前，要像检查自己的作品一样，让预制区块完整通过本文件的每一条规则。

实战笔记：真正奏效的做法

以下内容提炼自那些在早期版本被否决、后来才获接受的构建。它们位于上文所有规则之上；拿不准时，以这里为准。

统一性决定一切

最刺眼的失败并不是触犯了某项 AI 垃圾特征，而是不统一：页面上每个部分单独看都不错（一款字体、一种颜色、一张好图），彼此却不属于同一个世界。“百米外看每个小部件都很好，合起来却成了最丑的东西。”每次真正奏效的修复都一样：选择一个世界，让每个元素都为它服务。

• 严守一套配色。单色或彼此紧密相关的一组颜色，胜过混搭。“蓝色加绿色再加暖强调色”即使每一种单看都不错，组合起来仍然难看。
• 只保留一种字体语气。绝不要让两款展示字体彼此争吵。可以让同一家族跨字重／字号使用（带 optical size 最理想），或使用“一款展示字体＋一款安静中性字体”，不要再加别的。
• 先决定一个标志性主体，然后围绕它构建整页。
• 先确定世界，再从中编排区块。重新上色的一摞区块仍然不统一。

“有创意”不等于“写实”

如果需求要求创意或极繁，字面意义上的图库式写实（逼真的湖、真实的水）反而显得与创意相反。应选择一种有作者性、艺术化的处理方式，并始终坚持一种媒介（蓝晒印刷、单一插画风格、像素艺术、Riso 孔版印刷感、明亮绘制天空）。限色媒介还会让每张图像自动统一、无缝融入页面（蓝晒自身的蓝就成了页面的蓝：零接缝）。

不在 Google AI 垃圾货架上选字体

Fontshare（General Sans、Clash Display、Cabinet Grotesk、Satoshi、Switzer……）免费、具备授权级质量，而且不属于 Google 默认轮换列表。下载 woff2，通过 next/font/local 自托管。这是无需付费授权，又能获得本法则要求的“有授权感、独特”标志性字体的实用方法。

产品作为主体是标志性设计，不是垃圾假窗口

假应用窗口只有在空洞、通用时才是 AI 垃圾特征。一个细节丰富、内容完整、感觉真实的产品 UI（真实编辑器、真实 diff、真实文案、可用控件），带深度地悬浮并在边缘裁切，反而是最强的标志性设计之一。把它构建成真正的交互 UI，不要做成一张图片。但是：只有在产品确实存在 UI 时才展示产品 UI。如果产品本身只是一个文件，假仪表盘／应用窗口就毫无道理，看起来像抄来的模板。要从事物真实是什么出发设计（展示文件），而不是从参考网站出发。

只从参考中提取设计语言，绝不要提取内容

当用户给出示例网站来说明“想要这种气质”时，提取其中的语言（配色情绪、字体能量、运动方式、首屏／页脚类型），然后为当前产品设计原创文案、布局和主体。逐字复刻参考网站的标题及产品窗口就是抄袭，而且看得出来。参考 = 方向，不是模板尺。

“独特字体”的标准不断移动：就连好看的免费 Grotesque 也会显得普通

Clash Display／General Sans（Fontshare）如今也成了创业公司默认外观——提出需求的人已经称它们为通用 AI 垃圾。要继续向更有性格的方向寻找（Fontshare 的 Pally、Gambarino、Sentient、Tanker；Velvetyne 的字体），再给标志性展示字体搭一款真正中性的正文字体（system-ui 确实中性而安全；它不是一款“经过选择的时髦字体”）。决定前，先实际渲染候选字体进行查看。

死气沉沉本身就是失败

“无聊／静止／菜单没有动画”即使没有任何 AI 垃圾特征，也是真正会导致否决的理由。给页面加入有作者性、有目的的动效：进入并作出响应的导航、漂移／浮动的标志性主体、滚动联动视差、精心制作的悬停。允许平静，不允许死气沉沉。（但仍然要遵守：绝不要用显示动画把内容锁起来——动画可以改变 y，不能从 opacity 0 开始。）