这套方法解决一个问题：用 AI 做前端，功能都对、页面也整齐，但视觉上总是"配色不同的同一套模板"，指定"做得高级些"也只会得到千篇一律的默认审美。
核心做法一句话：在写第一行前端代码之前，把一个"成体系"的风格词翻译成不超过五条 CSS 原语，配一份单一 token 词表和几条纪律——风格由此从"临场发挥"变成全站可继承的代码，AI 没有回退到默认模板的余地。
方法源于一个潮玩盲盒商城项目（糖果波普风格），一个月后在二手交易市场项目（中世纪现代风格）上完整复现成功，两次均整站交付。
一、问题出在哪：不是模型不会做样式，是决策发生得太晚
AI 前端的"模板脸"有一个稳定来源：样式决策发生在写代码的那一刻。没有任何前置约束时，模型在每个页面、每个组件上各自临场发挥，向训练数据里的高频审美收敛——奶油底 + 衬线 + 赤陶，或近黑底 + 荧光绿，就是那几套"AI 味"默认值。单页看尚可，跨页面看必然散装。
所以解法不是换模型、不是把提示词写得更用力，而是把决策前移：编码之前，先用一份设计文档把视觉方向、色板用途、形状语言、减法清单一次性钉死。决策从"执行时的十万次即兴"压缩为"执行前的几十次结构性决定"，剩下的执行环节没有自由度，也就没有跑偏的机会。
方法全貌（下文逐步展开）：
① 选一个"成体系"的风格词（锚点）
② 三层翻译，落成 ≤5 条 CSS 原语
③ 单一 token 文件，全站只从这里取词
④ 业务母题映射（风格的母题对位业务元素）
⑤ 配套纪律：减法清单 / 签名元素只花一处 / 真数据验收 / 截图验收
二、第一步：选一个"成体系"的风格词
方法是围绕锚点词运转的，词不合格后面全白费。四条判据，任何一条不过就换词：
- 物件测试——只凭这个词，能说出至少两三个形状层面的特征（描边、投影、构图母题）吗？糖果波普 → 贴纸描边 + 硬投影 + 波普点阵；中世纪现代 → 拱门 + 细描边 + 扁平硬影。"果蔬绿"只有一个颜色维度，任何形状特征都说不出来——它天生死在色板层。
- 谱系测试——在设计史里查得到出处吗（流派、代表作、年代）？有谱系，意味着形状语言、字体、构图规则已被前人沉淀过；现编词没有谱系，等于一个只有标签、没有内容的压缩包。
- 反面测试——体系词必有对立面：波普的反面是瑞士网格式的冷静极简，穆夏的反面是包豪斯几何。"果蔬绿"想象不出反面。没有对立面的词没有结构，只是某个维度上的一个取值。
- 五原语测试——翻不出 ≤5 条 CSS 原语的词，当场出局。
特别警惕一类高迷惑性坏词：现编颜色词（果蔬绿、天空蓝、晚霞粉）。它们比"高级简约"这类空形容词更危险，因为听感具体、似有画面；但合格锚点至少携带色相、形状、构图、字体、动效性格五个维度，颜色词只携带了五分之一。对 AI 尤其如此：成名风格在训练数据里有海量一致样本，模型接到词就能调用共识；现编词没有对应分布，只能按字面自行补全其余四维——补出来的就是默认模板。词的"可查证性"本身就是给 AI 的对齐信号。
三、第二步：三层翻译，落成不超过五条 CSS 原语
一个风格词可以被翻译到三层深度，多数项目死在第一层：
| 层 | 翻译产物 | 产出效果 |
|---|---|---|
| 第一层：色板层 | 一套配色 | "配色好看的普通页面"——大多数项目的终点 |
| 第二层：形状语言层 | 描边、投影、圆角、构图母题 | 开始有"风格" |
| 第三层：CSS 原语层 | 每条形状语言写成可直接复用的代码，如 box-shadow: 3px 3px 0 固化为一个类 | 风格成为 DNA，全站继承，不依赖写代码那一刻的审美 |
第三层是关键。同样写商品卡片，停在第一层的开发者会临场决定"圆角白卡片、阴影淡一点"；到达第三层的开发者只能从词表取词——贴纸描边、硬投影、品类色标（颜色即信息）。前者每页都在重新发明，后者天然一致。一致性本身就是"被设计过"的感觉；人对一致的感知，远强于对单点亮眼的感知。
四、第三、四步：单一 token 词表 + 业务母题映射
词表：所有颜色、描边、圆角、间距收进一个 :root 令牌文件，全站只从这里取词，禁止页面级私自造词。这是纪律得以执行的技术载体。
母题映射：风格词不管"贴切感"，贴切感全部来自业务。糖果波普四个字不会告诉你——价格该做成歪斜的贴纸（实体盲盒价格就在吊牌上，歪斜是刻意保留的"不齐"）、隐藏款该有金色流光（收集欲的钩子）、已发货订单的款式位该是 "???" 遮掩贴纸（开盒悬念，确认收货才揭示）、概率公示必须显著且不可折叠（监管合规）。中世纪现代配二手业务，则是——价格 = 中古店吊牌、"我发布的" = 旋转橡皮章、拱形龛 = 陈列位。
同一风格换一个业务，映射全部失效，风格就退化为装饰。风格是"势"，业务决定这个势往哪打。
五、配套纪律：乘法结构，一步都不能省
五条纪律，每条都在补一种真实失败模式：
- 单词表——所有页面从同一 token 文件取词（防逐页现写、风格漂移）；
- 大胆只花一处——选定一个签名元素（吊牌价签 / 价格贴纸 / 拱窗），其余全部纪律化（防每页都想抢戏）；
- 减法写进文档——明确"不做什么"：不做暗色模式、不做响应式、后台隔离风格（防范围蔓延稀释风格密度）；
- 真数据验收——不用占位灰块评审样式（同一套样式装真内容与装占位符，观感差一半）；
- 截图当镜子——布局问题在代码里看不出来，截图里一目了然。
这些因素为什么一步不能省？因为它们的效果不是相加，是相乘：
最终效果 = 风格词 × 翻译深度 × 纪律 × 映射 × 减法 × 验收
乘法意味着任何一项归零，整体归零。两个反事实：同样的词拿掉纪律系统，得到"局部好看、整体散装"；拿掉词只留纪律，纪律越好模板越工整——方向错了，越工整越廉价。风格词大约占三成功劳，是"势"；其余七成是"功"。但势是乘法式的首项，它不发力，后面七成功夫无从兑现。
六、套用到陌生风格：先评估，再实施
拿一个从未做过的词（现代穆夏风，新艺术运动）做推演，方法给出的第一个产出不是配色，而是三步评估：
- 可翻译性——拱形圣像视窗 → 异形
border-radius；放射光环 →repeating-conic-gradient；拜占庭马赛克 → 低饱和radial-gradient拼格。可翻译，签名元素现成。 - 执行成本——灵魂纹样藤蔓卷草纯 CSS 画不出，必须引入 SVG 资产；工作量从"一个令牌文件"膨胀为"一套装饰资产"。可接受，但须预算。
- 题材匹配——对珠宝、香氛、文创等"物件之美"类产品高度契合；对数据密集型后台是灾难，装饰会淹没信息。词没有高下，只有匹配。
推演还暴露一个本土化缺口：新艺术没有中文对应字体，硬凑书法体易失真；正解是民国月份牌——它本身就是"中式穆夏"（同样的拱窗、花边、人物与物件）。中文字体是外来风格本土化的第一道关卡，评估陌生风格词时应最先检查。
七、速查清单
流程四步：
- 选成体系风格词（物件 / 谱系 / 反面 / 五原语，四测全过）；
- 翻译成 ≤5 条 CSS 原语，写进设计文档；
- 建单一 token 文件，全站只从此取词；
- 业务母题做映射（什么业务元素对应风格什么母题）。
纪律五条： 单词表 / 大胆只花一处 / 减法写进文档 / 真数据验收 / 截图当镜子。
验收一条： 判断一个产出的视觉质量，先看它样式文件里有没有钉死 3–5 条原语——有，风格词的"势"被接住了；没有，再有名的风格词也只是调色盘上的一层漆。