27a - AI辅助前端开发概览

┌─────────────────────────────────────────────────────────────────┐
│                AI 辅助前端开发工作流全景                           │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ① 设计到代码（Design-to-Code）                                  │
│     Figma/截图 → AI 转换 → React 组件 → 人工调整                  │
│                                                                 │
│  ② 对话式组件生成（Conversational Component Generation）          │
│     自然语言描述 → AI 生成组件 → 预览 → 迭代优化                   │
│                                                                 │
│  ③ Spec 驱动前端开发（Spec-Driven Frontend Development）          │
│     需求文档 → AI 生成 Spec → 任务分解 → 逐任务执行 → 人工审查     │
│                                                                 │
│  ④ AI 辅助重构（AI-Assisted Refactoring）                        │
│     现有代码 → AI 分析 → 重构方案 → 逐步执行 → 测试验证            │
│                                                                 │
│  ⑤ 全栈应用生成（Full-Stack App Generation）                     │
│     产品描述 → AI 构建器 → 完整应用 → 部署 → 迭代                  │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

你的场景是什么？
│
├─ 有 Figma 设计稿 → ① 设计到代码
│   ├─ 高保真还原 → Figma Make / Locofy.ai
│   └─ 快速原型 → v0.dev / screenshot-to-code
│
├─ 从零开始构建 UI → ② 对话式组件生成
│   ├─ 单个组件/页面 → v0.dev / Cursor
│   └─ 完整应用 → ⑤ 全栈应用生成
│       ├─ 需要完全控制代码 → Cursor / Claude Code
│       └─ 快速 MVP → Bolt.new / Lovable
│
├─ 已有项目需要新功能 → ③ Spec 驱动前端开发
│   ├─ 结构化团队 → Kiro Spec 工作流
│   └─ 个人开发者 → Claude Code + CLAUDE.md
│
└─ 已有项目需要优化 → ④ AI 辅助重构
    ├─ 性能优化 → Claude Code / Cursor + Lighthouse
    └─ 架构重构 → Claude Code（全项目理解）

# 使用 v0.dev 的典型 prompt
根据以下设计规范生成一个 [组件名称] 组件：
- 布局：[描述布局结构]
- 颜色方案：使用 CSS 变量 --primary: [色值], --secondary: [色值]
- 响应式：移动端单列，桌面端 [描述桌面布局]
- 交互：[描述悬停、点击等交互效果]
- 使用 shadcn/ui 组件库
- 使用 Tailwind CSS
- 确保 WCAG 2.1 AA 级无障碍合规

## 组件需求：[组件名称]

### 功能描述
[用 2-3 句话描述组件的用途和核心功能]

### Props 接口
- `[propName]`: [类型] - [描述]
- `[propName]`: [类型] - [描述]（可选，默认值：[值]）

### 视觉规范
- 尺寸：[描述尺寸变体]
- 颜色：[描述颜色方案]
- 间距：[描述内外边距]

### 交互行为
- [描述用户交互和状态变化]

### 无障碍要求
- ARIA 角色：[角色]
- 键盘导航：[描述键盘交互]

### 技术约束
- 框架：[React/Vue/Svelte]
- 样式方案：[Tailwind/CSS Modules/styled-components]
- 状态管理：[描述状态需求]

# 迭代 prompt 示例
1. "把卡片的圆角改为 12px，添加悬停时的阴影效果"
2. "添加加载状态的骨架屏"
3. "优化移动端布局，小屏幕下改为垂直排列"
4. "添加暗色模式支持"
5. "提取可复用的样式变量"

## 功能：[功能名称]

### 需求
- 用户故事：作为 [角色]，我希望 [功能]，以便 [价值]
- 验收标准：
  1. [标准 1]
  2. [标准 2]

### 设计
- 组件树：[描述组件层次结构]
- 数据流：[描述 props/state/context 流向]
- API 接口：[描述需要调用的 API]

### 任务分解
1. 创建 [组件名] 基础结构
2. 实现 [功能] 逻辑
3. 添加样式和响应式布局
4. 编写单元测试
5. 集成测试和无障碍验证

分析以下 React 组件的性能问题并提供优化方案：

## 当前问题
[描述观察到的性能问题，如：列表滚动卡顿、频繁重渲染]

## 组件代码
[粘贴或引用组件代码]

## 优化要求
1. 识别不必要的重渲染原因
2. 建议 React.memo / useMemo / useCallback 的使用位置
3. 评估是否需要虚拟化（如 react-window）
4. 检查是否有内存泄漏风险
5. 提供优化后的代码和性能对比预期

## 约束
- 保持现有 API 接口不变
- 不引入新的依赖（除非必要）
- 确保无障碍功能不受影响

你的需求是什么？
│
├─ UI 组件/落地页 → v0.dev
│   优势：shadcn/ui 生态，代码质量高
│   限制：不含后端，需要自行集成
│
├─ 全栈 Web 应用 → Bolt.new
│   优势：浏览器内完整开发环境，快速部署
│   限制：复杂项目可能需要导出到本地 IDE
│
├─ 设计优先的 MVP → Lovable
│   优势：UI 质量高，Supabase 深度集成
│   限制：credits 消耗快，复杂逻辑需要手动调整
│
└─ 需要完全控制 → Cursor / Claude Code
    优势：完全控制代码，适合生产项目
    限制：需要开发经验，速度相对较慢

# AI 应用构建器 prompt 模板

## 应用概述
构建一个 [应用类型]，用于 [核心用途]。

## 核心功能
1. [功能 1]：[详细描述]
2. [功能 2]：[详细描述]
3. [功能 3]：[详细描述]

## 技术要求
- 框架：[React/Next.js/Vue/Nuxt]
- 样式：[Tailwind CSS/CSS Modules]
- 状态管理：[描述需求]
- 数据持久化：[Supabase/Firebase/本地存储]

## UI 风格
- 整体风格：[现代简约/企业级/创意活泼]
- 配色方案：[描述或提供色值]
- 参考网站：[提供参考 URL]

## 响应式要求
- 移动端优先 / 桌面端优先
- 断点：[sm/md/lg/xl]

# Steering 规则示例（.cursorrules 或 Kiro Steering）

## Vue 3 项目规范
- 使用 <script setup> + TypeScript
- 使用 Composition API，不使用 Options API
- 组件 props 使用 defineProps<T>() 泛型语法
- 事件使用 defineEmits<T>() 泛型语法
- 状态管理使用 Pinia
- 路由使用 Vue Router 4
- 样式使用 <style scoped> + CSS 变量
- 组件命名使用 PascalCase

# Steering 规则示例

## Svelte 项目规范
- 使用 Svelte 5 runes 语法（$state, $derived, $effect）
- 不使用旧版 $: 响应式声明
- 组件 props 使用 $props() rune
- 样式使用 <style> 标签内的 scoped CSS
- 路由使用 SvelteKit 文件系统路由
- 表单处理使用 SvelteKit form actions

# Steering 规则示例

## Angular 项目规范
- 使用 Angular 18+ standalone 组件
- 使用 Signals 进行状态管理
- 使用 inject() 函数而非构造函数注入
- 模板使用 @if/@for 新控制流语法
- 样式使用组件级 CSS
- 路由使用 functional guards 和 resolvers

# 前端项目 Steering 规则
 
## 技术栈
- 框架：Next.js 15（App Router）
- 语言：TypeScript 5.x（strict mode）
- 样式：Tailwind CSS 4.x
- UI 组件库：shadcn/ui
- 状态管理：Zustand（全局状态）/ React useState（局部状态）
- 数据获取：TanStack Query v5
- 表单：React Hook Form + Zod 验证
- 测试：Vitest + Testing Library
 
## 组件规范
- 所有组件使用函数组件 + TypeScript
- Props 接口使用 `interface [ComponentName]Props` 命名
- 组件文件使用 PascalCase 命名（如 UserCard.tsx）
- 每个组件目录包含：index.tsx, [Component].test.tsx
- 导出使用 named export，不使用 default export
 
## Server Component vs Client Component
- 默认所有组件为 Server Component
- 仅在需要以下功能时添加 'use client'：
  - useState, useEffect, useRef 等 React hooks
  - 浏览器 API（window, document, localStorage）
  - 事件处理器（onClick, onChange 等）
  - 第三方客户端库
- 'use client' 边界应尽可能下推到叶子组件
 
## 样式规范
- 使用 Tailwind CSS 原子类，不写自定义 CSS（除非必要）
- 颜色使用 CSS 变量：--primary, --secondary, --accent, --background, --foreground
- 间距使用 Tailwind 默认 scale（4px 基准）
- 响应式使用 mobile-first：sm → md → lg → xl → 2xl
- 暗色模式使用 Tailwind dark: 前缀
 
## 无障碍要求
- 所有交互元素必须可键盘访问
- 图片必须有 alt 属性
- 表单输入必须有关联的 label
- 颜色对比度至少满足 WCAG 2.1 AA 级（4.5:1）
- 使用语义化 HTML 标签（nav, main, article, section）
- 模态框和下拉菜单必须管理焦点陷阱
 
## 性能要求
- 图片使用 next/image 组件
- 大列表使用虚拟化（react-window 或 @tanstack/virtual）
- 避免在渲染路径中创建新对象/数组
- 使用 React.memo 包裹纯展示组件
- 动态导入非首屏组件：const Component = dynamic(() => import('./Component'))
 
## 禁止事项
- 禁止使用 any 类型
- 禁止使用 class 组件
- 禁止使用 inline style（使用 Tailwind 替代）
- 禁止在 Server Component 中使用客户端 hooks
- 禁止完整导入大型库（如 import _ from 'lodash'，应使用 import debounce from 'lodash/debounce'）

创建一个 [项目类型] 的 Next.js 15 项目，要求：

## 技术栈
- Next.js 15 App Router + TypeScript
- Tailwind CSS 4 + shadcn/ui
- [状态管理方案]
- [数据获取方案]

## 项目结构
- src/app/ — 路由和页面
- src/components/ — 可复用组件
- src/components/ui/ — shadcn/ui 基础组件
- src/lib/ — 工具函数和配置
- src/hooks/ — 自定义 hooks
- src/types/ — TypeScript 类型定义

## 初始页面
1. 首页：[描述首页内容]
2. [其他页面]

## 设计规范
- 配色：[主色/辅色/强调色]
- 字体：[字体方案]
- 整体风格：[描述风格]

请生成项目骨架代码，包含基础布局、导航和主题配置。

生成一个 [组件名称] React 组件：

## 功能
[描述组件功能]

## Props
interface [ComponentName]Props {
  [prop]: [type]; // [描述]
}

## 变体
- 尺寸：sm | md | lg
- 样式变体：[描述变体]

## 状态
- 默认状态：[描述]
- 悬停状态：[描述]
- 禁用状态：[描述]
- 加载状态：[描述]

## 无障碍
- ARIA 角色：[角色]
- 键盘交互：[描述]

使用 TypeScript + Tailwind CSS + shadcn/ui 风格。
包含 Vitest + Testing Library 单元测试。

生成一个 [页面类型] 页面的响应式布局：

## 布局结构
- 头部：[描述导航栏]
- 侧边栏：[描述侧边栏，如果有]
- 主内容区：[描述主要内容]
- 底部：[描述页脚]

## 响应式行为
- 移动端（< 768px）：[描述移动端布局]
- 平板（768px - 1024px）：[描述平板布局]
- 桌面（> 1024px）：[描述桌面布局]

## 数据
- 页面数据来源：[Server Component fetch / API 调用 / 静态]
- 加载状态：[骨架屏 / Spinner / 渐进式加载]
- 错误状态：[错误边界 / 重试按钮]

使用 Next.js App Router Server Component（除非需要交互）。
使用 Tailwind CSS Grid/Flexbox 布局。

优化以下 React 组件的 [性能/可读性/无障碍/响应式]：

## 当前代码
[粘贴或引用当前代码]

## 优化目标
1. [具体优化目标 1]
2. [具体优化目标 2]
3. [具体优化目标 3]

## 约束
- 保持现有 Props 接口不变
- 保持现有功能行为不变
- [其他约束]

请提供优化后的代码，并解释每处修改的原因。

创建一个现代 SaaS 落地页，包含以下区域：

1. Hero 区域
   - 大标题："用 AI 自动化你的工作流"
   - 副标题："节省 80% 的重复工作时间，让团队专注于创造性任务"
   - 两个 CTA 按钮："免费试用" (primary) 和 "观看演示" (secondary/outline)
   - 右侧放一个产品截图占位区域

2. 功能展示（4 个卡片，2x2 网格）
   - 智能自动化：AI 驱动的工作流自动化
   - 团队协作：实时协作和任务分配
   - 数据分析：智能报告和洞察
   - 安全合规：企业级安全保障

3. 定价表（3 列）
   - 免费版：$0/月，基础功能
   - 专业版：$29/月，高级功能（推荐标记）
   - 企业版：联系销售，定制方案

4. 用户评价（3 条评价卡片）

5. FAQ（5 个常见问题，手风琴展开）

6. 页脚（产品链接、公司链接、社交媒体图标）

设计风格：现代简约，深色 Hero 背景渐变到浅色内容区。
使用 shadcn/ui 组件，Tailwind CSS，支持暗色模式。
响应式：移动端单列，桌面端多列。

# 迭代 1：优化 Hero 区域
把 Hero 背景改为从深蓝 (#0f172a) 到靛蓝 (#312e81) 的渐变。
添加一个微妙的网格背景图案。
CTA 按钮添加悬停动画效果。

# 迭代 2：优化定价表
给推荐方案添加 "最受欢迎" 标签和高亮边框。
添加功能对比列表，用 ✓ 和 ✗ 标记。
添加年付/月付切换开关（年付显示折扣价）。

# 迭代 3：添加动画
Hero 区域元素添加入场动画（从下方淡入）。
功能卡片添加滚动触发的渐入动画。
数字统计添加计数动画。

# 在 Cursor 中的精细调整 prompt

1. 将硬编码的文案提取到 constants 文件中，方便后续国际化
2. 将颜色值替换为 CSS 变量，与项目设计系统对齐
3. 添加 SEO 元数据（title, description, og:image）
4. 添加 Google Analytics 事件追踪
5. 优化图片加载（使用 next/image，添加 blur placeholder）
6. 添加无障碍属性（ARIA labels, 键盘导航, skip link）
7. 添加 Lighthouse 性能优化（字体预加载, 关键 CSS 内联）

# 运行无障碍检查
npx axe-core-cli http://localhost:3000
 
# 运行 Lighthouse 审计
npx lighthouse http://localhost:3000 --output html --output-path ./lighthouse-report.html
 
# 构建并检查包体积
npm run build
npx @next/bundle-analyzer

L1 → L2：学习编写有效的组件生成 prompt
         ↓
L2 → L3：掌握 Cursor Composer / Claude Code 的多文件编辑
         ↓
L3 → L4：建立 Steering 规则 + Spec 驱动工作流
         ↓
L4 → L5：集成 CI/CD + 自动化测试 + AgentOps 监控