ARTICLE · 1082421
我如何用一份文档让AI稳定输出企业级后台风格——skill构建全记录
我如何用一份文档让AI稳定输出企业级后台风格——skill构建全记录最近部门在梳理各业务之间的共性，抽出来一套通用能力做重构。重构的方向定了：视觉风格和交互规范，全部对齐现有系统。 方向定了、任务也到手，这就开始让AI画原型demo。 结果第一版出来，我人傻了。按钮圆角三倍差异，卡片阴影浓得像戴了墨镜，表格间距忽大忽小，仿佛每个组件都很有自己的想法。我把截图甩给它，它客气地回一句“收到，已理解”，然后交出一版连颜色值都不对的“改良款”。 第二个任务画完，我以为顶多再调一版就能收工。结果第三个任务排进来，还是同样的流程——贴图、报错、等它“抱歉，我再优化一次”——一模一样的循环接着走。token烧得比想象中快，产出却没有任何累积性的改善。那一刻我才意识到，我每次都在用一次性对话的成本，去做一件本该一次性投资的事。 后来我停下来想了想：问题不在AI不聪明，是我压根没告诉它“统一”到底是什么。 我做的第一件事，不是打开编辑器写prompt，而是打开公司后台系统，截了几张不同页面的图。 订单列表、用户详情、数据看板、设置页、登录页。每张图代表一种典型页面形态。截完我盯着看了一会儿，发现这些页面的共性比我以为的多——同一种灰、同一种蓝、同一种圆角。 这些视觉上的“约定俗成”，平时人眼扫过就自动忽略了。但要让AI稳定复现，每一个数值都必须变成可检索的表达。 这里有个取舍：截图不是为了给AI"看图学习"——目前模型从图像像素逆向推导设计规范的能力还不够稳定——而是给我自己用的参考锚点，让后续写规则时不靠感觉编造。 同时，我AI先跑了几个同类型任务，把生成的视觉规范和交互规范存下来，作为补充素材。这样正式构建skill时，素材既有真实系统的截图依据，也有AI视角的归纳输出。 打开文档工具，我新建了一个页面，起名叫"后台风格skill说明书"。 第一栏只填能数出来的数字： - 主色：品牌蓝#2B5FC3（页面中占比约70%） - 辅助色：中性灰#F5F7FA（背景）、#E4E7ED（分割线） - 间距体系：基准4px，常用8/12/16/20/24 - 圆角：小圆角4px（按钮/标签）、中圆角8px（卡片）、大圆角12px（弹窗） - 阴影：仅卡片使用，透明度0.08，模糊半径12px，偏移Y=2px 这一栏我写了很久。每一条我都回到截图上对比了一遍，确认数据是"从系统里量出来的"而不是"我觉得好看的"。 写完这栏，我意识到为什么之前AI的输出总差口气——我一直在描述"感觉"，比如"更精致一点""商务感强一些"，这种词AI根本无法换算成像素。 后来我把这栏的标题从"视觉特征"改成了"可量化参数"。名字不重要，重要的是提醒自己：凡是写进规则里的东西，都得能变成具体的、可验证的数字。 有了参数，AI的输出稳定了不少。但很快我发现另一个问题：它能造出符合单个参数的组件，可一旦页面元素多了，整体感就散了。 同一个页面里，两个卡片的阴影强度可以不同，三个地方的文字色号可以是"相似但不一样"的灰。我猜它觉得"差不多"就行，但企业级后台恰恰受不了"差不多"。 于是我在文档里加了第二部分，标题写的是："如何判定此页面是否符合规范"。 这一部分不是给AI的设计指令，而是一份自查清单： 我把这份清单放在文档的"检查流程"一栏，并在skill说明里要求AI在每次输出前，先逐项过一遍自查清单，把没通过的项目单独列出来说明。 最开始的AI很抗拒这套流程，输出速度明显变慢了。但结果是，我收到的初稿从"看起来差不多"变成了"能直接拿去跟开发对齐"。 规则已经比初版清晰太多，可我还是想再补一块。 我翻出之前AI生成的那些"翻车作品"，挑了三张最有代表性的：一张是按钮圆角忽大忽小，一张是卡片阴影浓得像加了描边，一张是表格行距忽紧忽松。 我把这三张截图粘贴到同一个文档页，下面用加粗字体写了三个字："反面教材。" 接着我逐张标注： - 图1的问题：同排按钮圆角不一致（最大12px，最小2px），导致视觉节奏混乱。 - 图2的问题：阴影浓度过高，透明度约0.2，超出规范参数2.5倍，卡片像浮在空中。 - 图3的问题：行距随意，没有遵循4的倍数，页面整体显得松散不专业。 这部分内容我放在了规则文档的最底部，标题是"不应出现的样子"。 后来我翻skill相关社区时看到有人管这个叫"负样本"，有人叫"反例提示"，名字不重要。重要的是效果：AI踩坑的概率肉眼可见地降了下来。 之前它在边界模糊时容易随意发挥，有了明确的"不该长什么样"，它收敛多了。 写到这里，回头看看整个过程——没有写一行代码，没有用什么高级框架，只靠一份结构清晰的说明文档。 这份文档现在长这样： 说句实话，最开始把截图放进文件夹的时候，我从没想过这会变成一种工作方法。当时只是觉得"AI总记不住我要什么"。 现在新项目的后台初稿，AI跑一遍差不多15分钟，风格基本和现有系统一致，我只需要做微调。偶尔它还会出点小偏差，但几乎不会再有那种"完全没法用"的推倒重来。 这个流程的收益不只是省了时间，最重要的是它让我把"这个后台应该长什么样"这件事从我的脑子里完整地"搬"了出来——变成了白纸黑字的、可复用的、能被讨论的文档。 如果你也在被"AI输出不稳定"折磨，我的建议很简单：别急着写更多话，先把你能量出来的东西都写下来。 风格统一这件事，与其靠AI"意会"，不如帮它把"统一"变成一道数学题。
## 起点：先收集信息，而不是写提示词
## 核心步骤一：把视觉特征拆成可数变量
## 核心步骤二：定义"统一"的判定标准——让AI自己检查自己
所有卡片阴影是否一致？透明度、模糊半径、偏移是否与说明书参数完全匹配？ 所有按钮圆角是否在4-6px之间？同页面内差异是否不超过2px？ 所有间距是否落在4的倍数上？相邻元素间距与设计稿中对应间距是否一致？ 文字用色是否仅使用下列五种：主文字 所有图标是否使用线性风格？粗细是否保持2px？
## 核心步骤三：负面约束——把失败案例变成教材
## 收尾：现在新项目的后台初稿，从1天缩短到15分钟
项目背景与风格锚点截图 可量化参数（色号、间距、圆角、阴影的具体数值） 自查判定标准（AI输出前逐项自检） 反面教材（之前翻车的截图与错误原因标注）