我给 AI 下了「瑞士风」需求，它差点杂交成粗野主义-平芜编程栈

我给 AI 下了「瑞士风」需求，它差点杂交成粗野主义

用 tri-frontend-design 给财务数据看板定风格，最值钱的一步不是配色，是锁死锚点。我实测交付瑞士风页面，混进一条box-shadow: 8px 8px 0 #000的硬阴影就被判「锚点没守住」；同一轮还编了个GRID.FREQ 59.998 Hz的假遥测数据，被内容纪律当场点名。这套技能的真正门槛，是别让 AI 自己「发挥」。

先说说我为什么需要它

前端设计这事，我过去让 AI 干过不少次，次次收不了场。今天说「简洁大气」，它给你白底蓝字；明天换句描述，它就变黑底霓虹。风格像抽签，每次交付都像换了个设计师。直到翻到 tri-frontend-design 的 SKILL.md，开头一句话点醒我：八个风格锚点，每个都是一片独特的美学疆域，锁定到具体的 CSS 令牌。锚点这个词，本质是给「方向感」装了个坐标系。

它把方向感拆成五步：情境、锚点、差异化点、系统、实现。先想清楚给谁看、看什么；再从八个锚点里选一个，明确「偏向出人意料」；接着在锚点内部定义一个有记忆点的动作；然后才去匹配令牌；最后动手写代码。顺序反了，就容易变成「先写代码再想风格」。

八个锚点，每个都把风格钉死在令牌上

锚点不是抽象形容词，它在references/anchors.md里锁死了一堆具体值。瑞士风就是纯白#FFFFFF加无衬线加瑞士红#E4002B，连点缀色都规定只能从红、橙、克莱因蓝里三选一。我把它抄成一张速查表贴在手边：

锚点	一句话令牌	崩坏条件（Breaks if）
瑞士风格	纯白 #FFFFFF + 无衬线（Akzidenz/Helvetica/Söhne）+ 瑞士红/国际橙/克莱因蓝三选一 + 可见网格	暖色纸张、衬线展示体、颗粒、居中排版
工业风	纯黑 #000000 + 全等宽体 + 一种信号色 + 扁平无阴影	衬线、比例字体、暖纸、阴影、圆角
粗野主义	纯原色 2-3 种等量竞争 + 系统字体 +`8px 8px 0 #000`硬阴影 + 原生控件	网络字体、柔和阴影、圆角、居中
极光极繁	暗色高饱和渐变（#5D34D0→#FF006E→#00F0FF）+ 超大字 + 霓虹辉光	纯色背景、克制感、发丝线主导
混沌极繁	粉彩与霓虹冲突色板 + 3 种以上字族混排 + 满屏图案	协调色板、单一字族、60/30/10 占比
复古未来	纯黑 + 年代字体（VT323/Orbitron）+ CRT 扫描线/色差	扁平感、现代无衬线、纸质表面
有机风	大地色系 + 人文衬线 + 圆角 16-32px + feTurbulence 颗粒	奶油色背景、冷灰、硬边矩形
低保真	纸黄 #E8E0C0 + 系统字体混排 + 旋转 2-8° + 半调网点	精确感、单字族、对齐网格矩形

这张表最狠的是最后一列「崩坏条件」。它把「什么算跑偏」也定义死了：瑞士风出现暖色纸张就算崩，工业风出现圆角就算崩。锚点不是「建议」，是「契约」。

第一个坑：令牌漂移

给看板选锚点时，我一开始选的就是瑞士风，理由是数据看板讲究信息密度，瑞士风的网格和数字排印合适。但写 CSS 时我「手痒」，加了点暖色背景#F5F0E6，觉得纯白太刺眼；标题用了 Fraunces，觉得衬线更高级。结果跑自检，references/anchors.md的崩坏条件第一条就是「暖色纸张、衬线展示体」，我两样全占。

这就是令牌漂移：色值、字体、结构，任何一个不在锚点允许范围内，锚点就没守住。技能的态度是 MUST 回炉修正，不是「差不多行了」。我改回#FFFFFF、换回 Helvetica，页面立刻「瑞士」起来。那一刻我明白了它为什么把令牌写死而不是给个方向感：AI 一旦有自由裁量权，就会往「更高级」的方向滑，而「更高级」往往就是跑偏。

坏例子（漂移）：

body{background:#F5F0E6;/* 暖纸，违反瑞士风 */font-family:'Fraunces';/* 衬线展示体，违反瑞士风 */text-align:center;/* 居中，违反瑞士风 */}

守锚点（瑞士风）：

:root{--surface:#FFFFFF;--accent:#E4002B;/* 瑞士红，三选一 */}body{background:var(--surface);font-family:'Helvetica Neue',Helvetica,sans-serif;color:#111;}.stat-grid{border-top:1px solid #E4002B;}/* 发丝线网格 */.stat-num{font-variant-numeric:tabular-nums;}

第二个坑：杂交锚点

比令牌漂移更隐蔽的是杂交。瑞士风做完我觉得「太素」，想给卡片加一条粗野主义的硬阴影增强层次感，脑子里是「瑞士风带一点粗野边缘，应该很高级」。SKILL.md 里原话：杂交是范畴错误，「带粗野主义边缘的瑞士风」，每种风格在构造上本就相互排斥。

我试了，效果确实怪：白底无衬线的瑞士网格，配一条8px 8px 0 #000的卡通硬阴影，像把杂志排版和街头海报叠在一起。最后删掉那条阴影，把差异化点改成「表格数字用 tabular-nums 排齐加行间 1px 瑞士红发丝线」，层次感反而出来了。单锚点铁律这条，我服。

比跑题更烦人的：内容纪律

视觉跑偏一眼能看出，内容造假就隐蔽多了。技能里有一节「内容不是设计」，列了五项禁止：编造数据、填充标签、主题化替换、Unicode 字形当图标、AI 腔套话。

我一开始在表格右上角放了行GRID.FREQ 59.998 Hz，想显得有科技感，结果这就是它说的「冒充真实数据的捏造」。登录区那句SECURE OPERATOR AUTHENTICATION是纯填充标签，删掉毫无信息损失。还有用▣ Dashboard这种 Unicode 符号当图标，它说 ASCII 字符画不是图标。这些我全干过，全被点名。规则其实很朴素：屏幕上的每个字符串，要么是真实信息，要么是「清楚自己是什么」的创作内容，按钮写「下一步」，别写「Authenticate Session」。

禁止项	我的反面例子	正确做法
编造数据	`GRID.FREQ 59.998 Hz`	没有真实数据就留空
填充标签	`SECURE OPERATOR AUTHENTICATION`	删掉，信息无损失
主题化替换	「Authenticate Session」代替「下一步」	标准动作用标准文案
字形图标	`▣ Dashboard`	用真图标集或不用
AI 腔套话	登录框下「Ask the grid.」	砍掉矫情副文案

发布前自检：五项都要过

交付前还有一道五连问：出人意料的搭配、令牌保真、内容节制、差异化点可见、抗杂交。我按清单过了一遍，卡在差异化点那栏。我写的差异化点是「表格数字 tabtlar-nums 排齐」，实现里根本没写那行 CSS。技能要求差异化点「在渲染输出中可见」，只描述不落地等于没有。补上font-variant-numeric: tabular-nums才算过关。这套自检的本质是外部化判定：不靠模型自我感觉良好，靠清单逐项打勾。

版本门：四态判定，D 态也放行

还有个必须提的机制。每次执行前它会跑python scripts/check_update.py --slug tri-frontend-design --json，输出四态：A 校验通过、B 离线降级、C 通道降级、D 升级降级，只有 BLOCK 才禁止执行。我这次跑出来是 D 态，自动升级命令退出码 0 但版本没变，它判成「升级降级」而不是阻断，还给了手动升级指引。这个设计很实用：版本门是用来提醒的，不是用来卡死的。

顺带一提，这套「四态放行」的思路我后来也用到了雷达鸭上，一个收录一人公司真实赚钱案例的小程序，鸿蒙版在华为应用市场能下到，配发布流程时我就照搬了这套不卡死、只提醒的判定。