开发示例

✨ AI 辅助开发实战

通过真实场景展示如何最大化利用 Trae 的 AI 能力，让开发效率翻倍。

场景一：从需求到代码

用 Builder 模式，一句话描述需求，AI 自动完成整个功能。

实战：构建图片压缩工具

Builder 模式

Builder 提示词

创建一个网页版图片压缩工具：
- 支持拖拽上传图片（JPG/PNG/WebP）
- 显示压缩前后的文件大小对比
- 可调节压缩质量（滑块 1-100）
- 压缩后可预览并下载
- 纯前端实现，使用 Canvas API
- 深色主题，现代 UI 风格

Builder 会自动生成以下文件：

生成的项目结构

image-compressor/
├── index.html       # 主页面
├── style.css        # 样式
└── compressor.js    # 压缩逻辑（Canvas API）

compressor.js — AI 生成的核心逻辑

async function compressImage(file, quality = 0.8) {
  return new Promise((resolve) => {
    const img = new Image()
    const url = URL.createObjectURL(file)

    img.onload = () => {
      const canvas = document.createElement('canvas')
      canvas.width = img.naturalWidth
      canvas.height = img.naturalHeight

      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0)
      URL.revokeObjectURL(url)

      canvas.toBlob(
        (blob) => resolve(blob),
        file.type,
        quality
      )
    }
    img.src = url
  })
}

function formatSize(bytes) {
  if (bytes < 1024) return bytes + ' B'
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
  return (bytes / 1024 / 1024).toFixed(2) + ' MB'
}

场景二：AI 代码审查

让 AI 审查你的代码

Chat 模式

Chat 提示词

# 审查整个 PR 改动
@Git Diff 请帮我做 code review，重点关注：
1. 潜在的 Bug 和边界情况
2. 性能问题
3. 安全漏洞（SQL 注入、XSS 等）
4. 代码可读性和命名规范

# 审查特定文件
@src/auth/jwt.js 这个 JWT 实现有没有安全问题？

AI 会给出类似这样的审查结果：

AI 审查结果示例

🔴 安全问题（高优先级）
第 23 行：JWT secret 硬编码在代码中
建议：使用环境变量 process.env.JWT_SECRET

🟡 潜在 Bug（中优先级）
第 45 行：未处理 token 过期的情况
当 jwt.verify() 抛出 TokenExpiredError 时会导致 500 错误

🟢 改进建议（低优先级）
第 67 行：函数名 checkToken 不够语义化
建议改为 verifyAccessToken

场景三：AI 生成测试

Chat 提示词 → 生成测试

# 提示词
@src/utils/validator.js 用 Vitest 为这个文件生成完整的单元测试，
覆盖正常情况、边界情况和异常情况

# AI 生成的测试文件
import { describe, it, expect } from 'vitest'
import { validateEmail, validatePhone, validatePassword } from './validator'

describe('validateEmail', () => {
  it.each([
    ['user@example.com', true],
    ['user+tag@sub.domain.com', true],
    ['invalid', false],
    ['@no-user.com', false],
    ['', false],
    [null, false],
  ])('validateEmail(%s) → %s', (input, expected) => {
    expect(validateEmail(input)).toBe(expected)
  })
})

场景四：AI 辅助重构

重构前 → 重构后

// ❌ 重构前：嵌套回调地狱
getUser(id, function(user) {
  getOrders(user.id, function(orders) {
    getProducts(orders[0].id, function(products) {
      console.log(products)
    })
  })
})

// ✅ 重构后：AI 自动转换为 async/await
async function getUserProducts(id) {
  const user = await getUser(id)
  const orders = await getOrders(user.id)
  const products = await getProducts(orders[0].id)
  return products
}

// Chat 提示词：
// "将这段回调代码重构为 async/await，添加错误处理"

🚀

最高效的工作流：用 Builder 生成初始代码 → 用 Chat 审查和优化 → 用内联补全完善细节。三种 AI 模式配合使用，效率最大化。