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 每轮重新猜一套视觉风格。
新野兽派
大胆的黑色粗边框、硬边缘阴影、无圆角、高对比度配色。源于建筑野兽派，强调功能与原始美学。包含经典、柔和、俏皮三种变体。
编辑杂志风
优雅的杂志排版风格，衬线标题、无衬线正文、精致的留白和网格系统。灵感来自高端时尚杂志和报纸排版。
新拟物派
柔和的内凹外凸立体效果，通过双重阴影模拟光源，浅色背景配同色系元素，营造精致的立体感。
便当盒布局
灵感源于日式便当盒的不规则网格布局，通过大小不一的卡片组合创造视觉层次，常用于作品集和产品展示。
企业简洁风
专业简洁的企业风格，强调可读性、一致性和信任感。适合B2B SaaS、企业官网、后台管理系统。
极简扁平风
极致简约的扁平设计，无阴影无渐变，通过颜色和留白创造层次。适合作品集、创意机构、艺术网站。
下一步从这里开始
FAQ
为什么 AI 生成的网站总是很像？
因为需求通常只有行业、页面类型和几个形容词，没有规定具体视觉 tokens、内容层级、组件状态和禁止项。模型自然会回到常见的 SaaS 模板。
应该重新生成整个网站吗？
通常不应该。先保留信息架构和真实内容，按页面结构、视觉 tokens、组件状态和响应式问题分阶段修复，结果更容易控制。
StyleKit 能修复已有的 AI 网页吗？
可以。选择一个风格后，把它的 Hard Prompt、tokens 和禁止项放进改版上下文，让 AI 针对已有代码做可检查的修改。