01
产品与页面 brief
写清用户、任务、内容优先级和主要转化动作，先决定页面为什么存在。
AI FRONTEND WORKFLOW
AI 前端工作流：从想法到可维护代码
AI 前端开发的难点不是生成第一版代码，而是让页面在多轮修改后仍然保持结构清晰、视觉一致、响应式可用。把设计规则、组件边界和验收条件放进同一条工作流，结果会稳定很多。
AI 前端工作流的 4 个核心输入
02
视觉规则
用 StyleKit 固定色板、字体、间距、边框、阴影、圆角和动效，不让每轮生成重新猜风格。
03
组件与状态
定义组件边界、数据结构、响应式规则和 loading、empty、error、focus 等状态。
04
验收清单
用真实内容、移动端、键盘操作、可访问性和视觉一致性逐项检查输出。
推荐的 AI 前端开发顺序
- 1
先让 AI 总结页面目标、信息架构和组件树，确认它理解了需求。
- 2
再提供 StyleKit 风格规则和技术约束，要求先完成结构与可访问性。
- 3
按区块实现视觉细节，保持同一份 tokens 和组件状态规则，不要每轮推翻整个页面。
- 4
用浏览器和真实数据验收，把问题拆成具体任务交给 AI 修复并复查。
Prompt skeleton
Build a AI frontend workflow 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 编程工具需要设计上下文，而不只是代码上下文
代码工具能生成组件，但不一定知道页面应该保持什么视觉判断。StyleKit 将风格、tokens、组件配方和提示词组合成可复用的前端设计上下文。
新野兽派
大胆的黑色粗边框、硬边缘阴影、无圆角、高对比度配色。源于建筑野兽派，强调功能与原始美学。包含经典、柔和、俏皮三种变体。
编辑杂志风
优雅的杂志排版风格，衬线标题、无衬线正文、精致的留白和网格系统。灵感来自高端时尚杂志和报纸排版。
新拟物派
柔和的内凹外凸立体效果，通过双重阴影模拟光源，浅色背景配同色系元素，营造精致的立体感。
玻璃拟态
半透明毛玻璃效果，通过 backdrop-blur 模糊背景、柔和边框和微妙阴影，创造现代感十足的层叠界面。
便当盒布局
灵感源于日式便当盒的不规则网格布局，通过大小不一的卡片组合创造视觉层次，常用于作品集和产品展示。
企业简洁风
专业简洁的企业风格，强调可读性、一致性和信任感。适合B2B SaaS、企业官网、后台管理系统。
工作流入口
FAQ
AI 前端工作流和直接让 AI 写代码有什么区别？
工作流会先固定页面目标、视觉规则、组件边界和验收标准，再分阶段实现。直接让 AI 写代码速度快，但更容易出现结构混乱、样式漂移和重复重写。
应该一次让 AI 生成整个网站吗？
复杂网站不建议一次生成。先做信息架构和组件骨架，再按页面或区块实现，AI 更容易理解上下文，也更方便人工验收。
哪些技术栈适合这套工作流？
React、Next.js、Tailwind CSS 和 shadcn/ui 都适合。关键不是固定技术栈，而是让设计 tokens、组件状态和验收规则可复用。