01
只有形容词，没有规则
modern、premium、科技感不能直接指导代码。AI 需要颜色、字体、间距、边框、阴影和圆角等可执行的值。
FIX AI-GENERATED UI
AI 生成网页难看的 4 个常见原因
02
首屏没有内容层级
标题、说明、主动作和辅助信息没有优先级，页面就会变成卡片和按钮的堆叠。
03
组件没有状态
只描述默认状态，没有 hover、focus、loading、empty、error 和 disabled 状态，界面会显得像静态截图。
04
没有禁止项
不告诉 AI 不要使用蓝紫渐变、过度圆角、无意义图标或重复卡片，它通常会回到训练数据里的平均答案。
一套可复用的 AI 网页修复流程
- 1
先截图或描述最明显的三个问题：视觉方向、信息层级和组件细节，不要笼统地说‘不好看’。
- 2
从 StyleKit 选择一个风格，复制颜色、排版、间距、边框、阴影和禁止项，作为修改约束。
- 3
让 AI 先改页面结构和内容层级，再改视觉 tokens，最后补齐交互状态和移动端布局。
- 4
用真实内容、不同屏幕尺寸、键盘操作和空数据状态验收，确认修改不是只优化了首屏截图。
Prompt skeleton
Build a AI generated website fix interface using one StyleKit visual direction. Include: - explicit colors, typography, spacing, radii, and shadows - reusable components with hover, focus, loading, and empty states - responsive behavior and keyboard-accessible controls - a short list of visual choices that must not drift
用 StyleKit 把‘不好看’变成可执行的修复规则
StyleKit 的风格页提供设计 tokens、组件配方和 AI 规则。你可以把它们作为现有页面的改版约束，而不是让 AI 每轮重新猜一套视觉风格。
新野兽派
大胆的黑色粗边框、硬边缘阴影、无圆角、高对比度配色。源于建筑野兽派，强调功能与原始美学。包含经典、柔和、俏皮三种变体。
编辑杂志风
优雅的杂志排版风格，衬线标题、无衬线正文、精致的留白和网格系统。灵感来自高端时尚杂志和报纸排版。
新拟物派
柔和的内凹外凸立体效果，通过双重阴影模拟光源，浅色背景配同色系元素，营造精致的立体感。
玻璃拟态
半透明毛玻璃效果，通过 backdrop-blur 模糊背景、柔和边框和微妙阴影，创造现代感十足的层叠界面。
便当盒布局
灵感源于日式便当盒的不规则网格布局，通过大小不一的卡片组合创造视觉层次，常用于作品集和产品展示。
企业简洁风
专业简洁的企业风格，强调可读性、一致性和信任感。适合B2B SaaS、企业官网、后台管理系统。
下一步从这里开始
FAQ
为什么 AI 生成的网站总是很像？
因为需求通常只有行业、页面类型和几个形容词，没有规定具体视觉 tokens、内容层级、组件状态和禁止项。模型自然会回到常见的 SaaS 模板。
应该重新生成整个网站吗？
通常不应该。先保留信息架构和真实内容，按页面结构、视觉 tokens、组件状态和响应式问题分阶段修复，结果更容易控制。
StyleKit 能修复已有的 AI 网页吗？
可以。选择一个风格后，把它的 Hard Prompt、tokens 和禁止项放进改版上下文，让 AI 针对已有代码做可检查的修改。