一.AI slop：默认即平庸
先说slop这个词，它原本的含义是泔水，猪食，是食堂里吃剩的饭汤的混合物，引申义可以理解为是粗制滥造。而在AI大模型中，模型通常会倾向于输出训练数据集的平均值，而平均的东西往往避免不了平庸，是最不值钱的东西。
举个例子，在之前AI都倾向输出蓝紫色，因为之前tailwind团队给组件库tailwind UI写代码的时候，默认示例用了indigo-500靛蓝色，介于蓝色和紫色之间，结果就导致了后面全世界默认用AI生成的UI都是这个颜色。除此之外还有圆角卡片+左色条，以及深蓝底+霓虹glow(glow在设计中是指的发光效果)。
所以这些训练平均语料所得到的结果就可以作为反例来进行呈现。
二.huashu-design的默认设计哲学
在huashu-design中的SKILL.md中最核心的部分是一套有明确优先级的行为准则，即七条设计哲学，排在上面的优先级超过其它所有流程。
2.1 事实验证优于假设
如果涉及到具体的某个产品/版本/发布时间，第一步必须websearch，禁止通过训练语料来进行判断。并且给出了一个代价对比的例子：搜索10s <<错误返工2小时，并且这一条的优先级甚至还高于向用户提问的优先级。
2.2 从已有context出发
要做出一个好的高保真设计一定从design system/截图/品牌规范中长出来，凭空做hi-fi是最后手段—凭空=通用=generic 注：
保证这个词最早是出自于音响领域的，本意是对真实情况的还原程度，在设计领域中展示的是一个设计稿与真实产品的接近程度。
hi-fi：high fidelity，即高保真，与此对应的有Lo-fi(低保真)和Mid-fi(中保真)。
2.3 Junior Design模式
把自己定位成用户的初级设计师，写下假设和占位符，尽早展示，等确认了再深化。
比如让AI做一个网页，让它先交3个灰框和一句假设，比如[我猜主页面是日历视图]，你回「对，但打卡按钮要最大」，它再深化。如果方向错了，你损失的是一句话，不是一整页。
这里的底层逻辑是：理解错了，早改比晚改要便宜100倍。
2.4 给变体，不给最终答案
默认出3个跨维度的变体，从by-the-book(教科书安全版)到novel(实验版)，中间的版本没有定义，不过这是类似于一个光谱的过渡过程，从标准到创新打破边界。而中间就是一个平衡，有一个锚点，类似于二分法逼近，让你知道接下来设计往1还是往3靠近。
当然在3个变体里，往往2被选择的几率会偏高些，根据行为心理学中的折中效应。
2.5 诚实的占位符>烂实现
很多时候当AI写设计原型时会出现画不好图标就硬画一个烂SVG或者编造事实断言的数据的情况，这条规则就进行了限制。
如:留灰块写此处等 3 条真实用户 quote，而不是编三条这 App 改变了我的生活；同理，没有数据就别在特性区写10,000+ 大学生的选择。注意分界线：填假名字假帖子演示布局是 mock 的本职，编「事实断言」才是这条规则要禁的。
2.6 系统优先，不要填充
每个元素都必须赢得自己的位置，空白是构图问题，不靠编造内容填满。警惕数据 slop、图标 slop、渐变 slop。
比如设置页只有3个选项的话那就让剩下的大片空白待着，不要为了不空塞一张今日运势卡片进去。
2.7 反AI slop
这里在skills中不是一个清单的形式，而是一套四层体系
第一层：定义与逻辑连
先给AI slop下了层定义：「AI 训练语料里最常见的视觉最大公约数」——注意它的判断标准不是丑，而是「不携带品牌信息」。然后是一条四步逻辑链：你要设计=要品牌被认出来 → AI 默认产出=训练语料平均值=所有品牌的混合 → 所以默认产出=把你的品牌稀释成「又一个 AI 页面」 → 反 slop 不是审美洁癖，是替用户保护品牌识别度。每条禁令都挂在这条逻辑链上，这就是为什么规则要「带为什么」——模型在边缘情况下才不会放弃规则。
第二层：负面清单
| 元素 | 为什么是 slop | 什么情况可以用 |
|---|---|---|
| 激进紫色渐变 | AI 训练语料里”科技感”的万能公式，出现在 SaaS/AI/web3 每一个落地页 | 品牌本身用紫渐变（如 Linear 某些场景）、或任务就是讽刺/展示这类 slop |
| Emoji 作图标 | 训练语料里每个 bullet 都配 emoji，是”不够专业就用 emoji 凑”的病 | 品牌本身用（如 Notion），或产品受众是儿童/轻松场景 |
| 圆角卡片 + 左彩色 border accent | 2020-2024 Material/Tailwind 时期的烂大街组合，已成视觉噪音 | 用户明确要求、或这个组合在品牌 spec 里被保留 |
| SVG 画 imagery（人脸/场景/物品） | AI 画的 SVG 人物永远五官错位，比例诡异 | 几乎没有——有图就用真图（Wikimedia/Unsplash/AI 生成），没图就留诚实 placeholder |
| CSS 剪影/SVG 手画代替真实产品图 | 生成的就是「通用科技动画」——黑底+橙 accent+圆角长条，任何实体产品都长一样，品牌识别度归零（DJI Pocket 4 实测 2026-04-20） | 几乎没有——先走核心资产协议找真实产品图；真没有时用 nano-banana-pro 以官方参考图为基底生成；实在不行标诚实 placeholder 告诉用户”产品图待补” |
| Inter/Roboto/Arial/system fonts 作 display | 太常见，读者看不出这是”有设计的产品”还是”demo 页” | 品牌 spec 明确用这些字体（Stripe 用 Sohne/Inter 变体，但是经过微调的） |
GitHub-dark 偷懒解：均匀深蓝底 #0D1117 + 通用青/紫霓虹 glow | 这一种特定组合是 SaaS/AI 落地页的烂大街复制——注意不是「所有暗色都禁」 | 开发者工具产品且品牌本身走这方向 |
判断边界：「品牌本身用」是唯一能合法破例的理由。品牌 spec 里明写了用紫渐变，那就用——此时它不再是 slop，是品牌签名。
⚠️ 别把整片暗色大胆派一起误杀：要禁的只是「均匀深蓝底+通用霓虹 glow」这一种偷懒解。电影级戏剧光影、暖色赛博（Ash Thorp 的橙/青而非冷蓝）、运动诗学的暗场叙事（Locomotive）都是有作者意图的暗色，不在禁区内——它们携带强烈风格信息，恰恰是对抗「千篇一律极简」的解药。
第三层：正向清单
text-wrap: pretty+ CSS Grid + 高级 CSS：排版细节是 AI 分不清的”品味税”，会用这些的 agent 看起来像真设计师
2.用 oklch() 或 spec 里已有的色，不凭空发明新颜色：所有临场发明的色都会让品牌识别度下降 3.配图优先 AI 生成（Gemini / Flash / Lovart），HTML 截图仅在精确数据表格时用：AI 生成的图比 SVG 手画准确，比 HTML 截图有质感 4.文案用「」引号不用 ""：中文排印规范，也是”有审校过”的细节信号 5.一个细节做到 120%，其他做到 80%：品味 = 在合适的地方足够精致，不是均匀用力
注：
- text-wrap:pretty：用于解决排版中孤词的问题，在文字段落换行时，浏览器的默认算法是一行能塞就塞，塞不下的话就换行，从不回头优化，这就导致会出现一个问题，会出现一些行只有一个词或一个标点符号的，这个样式就是让浏览器去在换行时做一个全局的权衡，宁愿前面稍微松一点，也要把结尾收的稍微匀称一些。
- CSS Grid：是CSS的二维布局系统，在它之前，网页布局经历了用 table 硬凑、用 float 硬骗的黑暗年代；后来 Flexbox 出现，解决了”一维”的排列问题——一排东西怎么分空间、怎么对齐。但页面本质是二维的：有行有列，卡片要跨行，侧栏要固定，网格要对齐。Grid 就是为这个而生的：你先在容器上声明”我要几列几行、每列多宽”，如grid-template-columns:1fr 2fr 1fr，这里的fr是按比例瓜分剩余空间的单位，子元素自动落位，还能精确指定某个元素”占第 2 列到第 4 列、跨 2 行”。它和 Flexbox 是分工关系：Grid 管宏观骨架（页面结构、卡片矩阵），Flex 管微观排列（按钮组、导航条里的元素）。AI 在这上面的”露馅”方式是：训练语料里Flexbox 的占比远高于 Grid（老教程、老代码存量大），所以模型碰到明明该用 Grid 的九宫格式布局，也会给你套一堆嵌套 flex 加手动算宽度——能跑，但是绕远路的笨办法。
- oklch()：oklch()是 CSS 新一代的颜色写法（来自 CSS Color Level 4 规范），
oklch(亮度 彩度 色相)三个参数。它的革命性在于”感知均匀”四个字。对比一下老写法 HSL：HSL 里你把亮度从 50% 调到 60%，黄色会变得刺眼而蓝色几乎没变化——因为 HSL 的数字和人眼感受是脱节的。OKLCH 这个色彩空间是按人眼感知校准过的：数字变化多少，眼睛感受到的变化就是多少。这带来一个极其实用的能力——可预测的配色：想给成功/警告/错误做一组状态色？固定亮度和彩度，只旋转色相，得到的红黄绿保证看起来”一样亮、一样艳”，不会出现黄色亮得扎眼、蓝色暗得发闷的老问题；想做一套从浅到深的色阶？固定色相和彩度，等差调整亮度，出来的阶梯均匀顺滑。这就是引文里”用 spec 里已有的色”的现代做法：品牌主色确定后，整套衍生色都能用 oklch 参数化地推导出来，而不是每次拍脑袋编一个新十六进制。
三.huashu-design的路由层
huashu-design这个skills不是一条流水线，而是一个决策树，同一个命令，如帮我做一个xx页面，会根据你手里的上下文，进入3条完全不同的路径。
这里一个比较精妙的设计是Fallback，不让用户选择他看不到的东西，这就很友好了，当你什么参考都没有给的时候，不会问你想要什么风格，因为它认定了没有见过视觉的用户压根没法回答这个问题，有效选择只能发生在看到真实视觉之后。
四.huashu-design的刹车系统
大模型的倾向是一口气做完直接给你看，但huashu-design这个skills在流程里埋了一排的检查点，强制它在改错还便宜的时候停下来。
- 问题清单一次性发完，答完再动手：不边问边做，避免在错误前提上白跑
- 资产自检：实体产品要有真产品图，数字产品要有 logo + UI 截图。缺了停下补，不硬做
- 位置四问等用户点头：叙事角色/观众距离/视觉温度/容量估算，答完再谈设计系统
- Junior pass尽早展示，确认方向后才正式写组件
- 交付前自己先肉眼过一遍：Playwright截图+点击测试，AI写的代码经常有交互bug，不看就交付是一种赌博
五.huashu-design的物理结构
主文件SKILL.md是宪法，细节如24篇具体情况的手册全部按需外置。
huashu-design的秘密不在于提供了多少设计风格，而是把设计师的工作习惯变成了模型的强制行为，并且对抗AI slop，且每一个检查点都把错误拦在还便宜的时候
