01
页面目标
说明用户是谁、页面要完成什么任务，以及首屏需要传达的核心信息。
AI WEB DESIGN WORKFLOW
一份好的 AI 网页设计 brief 应该包含什么？
02
视觉系统
明确色板、字体层级、间距、边框、圆角、阴影和动效强度，避免只说‘高级’或‘现代’。
03
实现约束
补上组件结构、响应式规则、加载与空状态、键盘操作和可访问性验收条件。
从想法到 AI 前端的 4 个步骤
- 1
先写清页面目标、目标用户和内容层级，再决定使用落地页、仪表盘、作品集还是应用界面结构。
- 2
从 StyleKit 选择一个视觉方向，把颜色、字体、间距、组件和禁止项加入 brief。
- 3
让 AI 先输出页面结构和组件清单，再分区实现，不要一开始就要求生成一整个复杂网站。
Prompt skeleton
Build a AI web design 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
用具体视觉语言控制 AI 输出
AI 网页设计的质量取决于输入是否可执行。StyleKit 的风格页提供设计 tokens、组件配方和前端提示词，让视觉判断变成 AI 可以遵循的规则。
新野兽派
大胆的黑色粗边框、硬边缘阴影、无圆角、高对比度配色。源于建筑野兽派，强调功能与原始美学。包含经典、柔和、俏皮三种变体。
编辑杂志风
优雅的杂志排版风格，衬线标题、无衬线正文、精致的留白和网格系统。灵感来自高端时尚杂志和报纸排版。
新拟物派
柔和的内凹外凸立体效果，通过双重阴影模拟光源，浅色背景配同色系元素，营造精致的立体感。
玻璃拟态
半透明毛玻璃效果，通过 backdrop-blur 模糊背景、柔和边框和微妙阴影，创造现代感十足的层叠界面。
便当盒布局
灵感源于日式便当盒的不规则网格布局，通过大小不一的卡片组合创造视觉层次，常用于作品集和产品展示。
企业简洁风
专业简洁的企业风格，强调可读性、一致性和信任感。适合B2B SaaS、企业官网、后台管理系统。
继续使用 StyleKit
FAQ
AI 网页设计和 AI 网站生成有什么区别？
AI 网站生成通常强调快速产出完整页面；AI 网页设计更关注页面目标、视觉系统、组件一致性和后续可维护性。StyleKit 主要解决后者。
为什么 AI 生成的网页经常看起来很像？
因为提示词通常只描述行业和页面类型，没有规定视觉方向、内容层级、组件状态和禁止项。明确的设计约束能减少默认模板感。
StyleKit 能配合哪些 AI 编码工具？
StyleKit 的输出是通用的设计 tokens、组件规则和前端提示词，可以作为 ChatGPT、Claude Code、Codex 等工具的上下文。