前端开发¶

前端是 Vibe Coding 效果最显著的领域之一。组件生成、样式调整、状态管理——这些任务有清晰的输入输出，非常适合 AI 协作。

高效场景¶

组件生成¶

最佳实践：提供设计稿描述 + 现有同类组件作为风格参考。

背景：项目使用 React + Tailwind CSS + shadcn/ui，
      参考现有的 UserCard 组件（附代码）。

目标：创建 ProductCard 组件。
Props：
  - product: { id, name, price, imageUrl, inStock }
  - onAddToCart: (id: string) => void

行为：
  - 缺货时显示"已售罄"标签，禁用加入购物车按钮
  - 价格超过 1000 显示红色

范围：创建 src/components/ProductCard.tsx
约束：不引入新依赖，沿用现有 shadcn/ui 组件

验收：TypeScript 无错误，在 Storybook 中正常渲染

状态管理¶

最佳实践：提供现有 store 结构作为参考，明确 action 的副作用范围。

// 提供现有 store 结构
interface CartStore {
  items: CartItem[]
  addItem: (product: Product) => void
  removeItem: (id: string) => void
  total: number
}

// 任务：添加优惠码功能
// 约束：不改动现有 addItem/removeItem 逻辑
// 新增：applyCoupon(code: string) => Promise<void>

性能优化¶

最佳实践：提供 Lighthouse 报告或 React DevTools Profiler 截图，让 AI 基于数据优化。

问题：ProductList 组件在列表超过 100 项时渲染卡顿
性能数据：React Profiler 显示每次父组件更新都触发全量重渲染
相关代码：[附上 ProductList.tsx]

目标：消除不必要的重渲染
约束：不改变组件 Props 接口，不引入新依赖
验收：React Profiler 显示父组件更新时 ProductList 不重渲染

前端特有的上下文要素¶

要素	说明
设计系统	颜色、间距、字体的 token 定义
组件库版本	shadcn/ui、Ant Design 等的具体版本
路由结构	页面路径和参数格式
状态管理方案	Zustand、Redux、Jotai 等的使用约定
构建工具	Vite、Next.js、Webpack 的配置约定

验证清单¶

常见陷阱¶

陷阱：让 AI 选择样式方案

不要说"帮我美化这个组件"。AI 会引入与项目不一致的样式。始终提供现有组件作为风格参考。

陷阱：忽略无障碍要求

在约束中明确要求 WCAG 2.1 AA 合规，否则 AI 不会主动添加无障碍属性。

陷阱：一次性生成整个页面

把页面拆成独立组件，逐个生成和验证。整页生成的结果难以调试。