前端开发里，AI 最容易出问题的地方通常不是写代码本身，而是误解界面意图、状态变化和交互细节。把这些说清楚，AI 才能真正成为前端协作搭子，而不是返工制造机。
核心输入先讲清 UI 和状态
组件长什么样、怎么变化、如何响应用户操作，都要明确表达。
典型任务组件、页面、交互开发
前端很适合用 AI 辅助生成初版、迭代细节和做质量检查。
协作重点先可见，再可改
让 AI 的输出尽快进入可预览、可验证的状态，比一次写完更重要。
如何让 AI 理解 UI 需求？
前端开发的关键，是让 AI 准确理解设计意图和交互逻辑，而不是只根据一个模糊描述去拼凑页面。
- 提供清晰的设计稿、线框图或参考页面。
- 描述组件状态变化（hover、active、disabled 等）。
- 说明响应式布局和断点要求。
- 明确交互行为（点击、滚动、动画、异步反馈等）。
用 AI 生成组件代码
步骤 1：准备组件 Spec
把功能、props、状态、样式和交互规则写清楚，先约束输出范围。
步骤 2：让 AI 生成初版代码
基于 Spec 生成组件骨架，优先得到可运行、可预览的初版。
步骤 3：迭代优化
根据实际效果持续调整，让 AI 处理结构、样式和细节修订。
用 AI 做代码审查
除了写代码，AI 也很适合帮你做前端质量检查：
- 检查组件是否符合设计规范。
- 发现潜在的性能问题。
- 检查可访问性（a11y）。
- 提出结构和可维护性优化建议。
推荐工具：OpenSpec
前端迭代通常关注变化快、反馈快、影响面容易扩散。用 OpenSpec 限定改动范围，会更适合实际协作节奏。
- 变更隔离：每次只改一个组件或一个局部交互。
- 快速验证：尽早进入可视化预览和验收阶段。
- 安全迭代：减少对其他功能的连带影响。