漂亮 UI 不是一句“做高级点”

很多人用 AI 做页面，第一轮总会很兴奋：按钮有了、卡片有了、动效也有了。但一看成品，还是像“模板味很重的半成品”。问题通常不在 AI 不会写前端，而在你把“漂亮”当成感觉，让 AI 去猜。

Vibe Code 想出漂亮 UI，核心不是多夸模型，而是先把审美规则写成一份 style.md。它不是品牌手册，也不是设计师才懂的规范，而是一份给 AI 看的“审美说明书”。

style.md 要管三件事

第一，管气质。比如你做的是公考资料页、课程预约页、知识库工具页，气质就应该是清楚、可信、耐看，而不是到处渐变、玻璃拟态、巨大标题。你要直接告诉 AI：这个页面服务高频使用，不要做营销感太强的视觉。

第二，管组件。按钮几种状态？卡片圆角多大？表格密度如何？图标用什么风格？这些不写，AI 就会每次自由发挥，今天像 SaaS，明天像电商，后天像活动页。

第三，管禁区。比如不要一屏塞满阴影卡片，不要用大面积紫蓝渐变，不要让文字压在复杂背景上，不要为了“高级”牺牲可读性。禁区越清楚，返工越少。

工作流不是“生成一次”，而是“三轮收敛”

第一轮让 AI 出结构，不追求好看。你要问的是：信息顺序对不对？用户一眼能不能知道下一步干什么？教育、内容、服务类页面最怕先做皮肤，结果核心行动被装饰淹没。

第二轮再喂 style.md，让 AI 按规则重构视觉。这里要用具体话术：保留信息架构，统一间距、字号、按钮层级和组件状态，删除多余装饰，让页面更适合长期使用。

第三轮做挑刺清单。逐项检查手机端、长标题、空状态、加载态、错误提示、按钮文案、表单输入。真正能上线的 AI 页面，不是首屏截图好看，而是边角状态也不出戏。

给普通人的可操作清单

你可以直接准备一份自己的 style.md，至少写这 7 项：产品气质、目标用户、主色和辅助色、字体和字号层级、按钮规则、卡片和表格规则、明确不要出现的风格。

然后每次开工都按这个顺序提问：先让 AI 理解业务和用户，再生成页面结构，再套用 style.md，最后要求它自查可用性问题。不要一上来就说“做一个漂亮页面”，那等于把方向盘交给随机数。

运营上的启发

对内容和教育从业者来说，style.md 的价值不只在做网页。课程海报、资料封面、知识库页面、社群工具、招生落地页，都可以共享一套视觉判断。你不是每次从零开始“求好看”，而是在训练一套稳定的表达资产。

所以，Vibe Code 的关键不是放飞，而是把“感觉”沉淀成规则。AI 负责加速生成，人负责定义什么值得保留。漂亮 UI 的起点，不是灵感，是可复用的判断。