上周我用TRAE帮朋友完成了一款微信小程序开发，这款适配国内中文开发场景的AI原生IDE，凭借98%的代码生成准确率帮我们在3天内交付了原本需要两周的项目。朋友阿凯是开社区咖啡店的，原本找外包做小程序点单系统，拖了两周还没搞定搜索和分页功能，预算只有5000块，眼看开业活动要到了急得团团转。我当时刚好在测试TRAE的Builder模式，就跟他说试试AI全自动开发，他半信半疑地把需求甩给了我。

整个开发过程只用了三天：第一天用TRAE的Builder模式输入需求，几分钟就生成了完整的项目结构，包括页面路由、接口封装、样式配置；第二天用SOLO模式迭代优化了列表和表单组件；第三天完成测试和部署，刚好赶上开业活动上线。这次实战让我对vibe coding工具有了更深入的理解，接下来我会结合自己的使用经验，分享常用工具的选型和踩坑细节。

什么是vibe coding

两组vibe coding代码迭代实战

第一组：React商品列表组件

① 口语化需求描述

写一个TypeScript React的商品列表组件，带搜索框、分页功能，数据从后端接口获取，支持按商品名称筛选，需要严格的类型定义，包含加载状态和空数据提示。

② TRAE SOLO模式首次生成的错误初版⚠️
// ⚠️ 初版代码存在多个明显bug
import React, { useState, useEffect } from 'react';

const API_URL = "https://test-api.example.com/goods"; // ⚠️ 硬编码测试地址，无环境变量适配

interface GoodsItem {
  id: number;
  name: string;
  price: number;
}

export default function GoodsList() {
  const [list, setList] = useState<GoodsItem[]>([]);
  const [searchKey, setSearchKey] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [total, setTotal] = useState(0);
  const pageSize = 10;

  useEffect(() => {
    fetch(`${API_URL}?keyword=${searchKey}&page=${currentPage}&pageSize=${pageSize}`)
      .then(res => res.json())
      .then(data => {
        setList(data.list);
        setTotal(data.total);
      });
  }, [searchKey, currentPage]);

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchKey(e.target.value); // ⚠️ 无防抖处理，每次输入都触发接口请求
    setCurrentPage(1);
  };

  const handleNextPage = () => {
    setCurrentPage(currentPage + 1); // ⚠️ 未判断是否超过总页数，会触发无效请求
  };

  const handlePrevPage = () => {
    setCurrentPage(currentPage - 1); // ⚠️ 未判断是否小于1，会出现负数页码
  };

  return (
    <div>
      <input type="text" value={searchKey} onChange={handleSearch} placeholder="搜索商品" />
      <ul>
        {list.map(item => <li key={item.id}>{item.name} - {item.price}元</li>)}
      </ul>
      <button onClick={handlePrevPage}>上一页</button>
      <button onClick={handleNextPage}>下一页</button>
      <p>共{total}条数据</p>
    </div>
  );
}
③ 修正口令+TRAE迭代后的最终可用代码

修正口令：将API地址改为使用import.meta.env的环境变量，给搜索框添加500ms的防抖处理，分页改用cursor方式替代offset避免大量数据下的性能问题，严格定义组件props和列表项的完整类型，添加加载状态、空数据提示和错误捕获逻辑。

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { debounce } from 'lodash';

// 定义环境变量类型
declare global {
  interface ImportMetaEnv {
    readonly VITE_API_URL: string;
  }
}

const API_URL = import.meta.env.VITE_API_URL;

// 列表项类型定义
export interface GoodsItem {
  id: string | number;
  name: string;
  price: number;
  stock?: number;
}

// 组件props类型定义
interface GoodsListProps {
  defaultPageSize?: number;
  onItemClick?: (item: GoodsItem) => void;
}

export default function GoodsList({ defaultPageSize = 10, onItemClick }: GoodsListProps) {
  const [list, setList] = useState<GoodsItem[]>([]);
  const [searchKey, setSearchKey] = useState("");
  const [cursor, setCursor] = useState<string | null>(null);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const pageSize = defaultPageSize;
  const debounceRef = useRef<ReturnType<typeof debounce> | null>(null);

  // 防抖搜索处理
  const fetchGoods = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams();
      if (searchKey) params.append('keyword', searchKey);
      if (cursor) params.append('cursor', cursor);
      params.append('pageSize', pageSize.toString());

      const res = await fetch(`${API_URL}/goods?${params.toString()}`);
      if (!res.ok) throw new Error('请求失败');
      const data = await res.json();
      setList(prev => cursor ? [...prev, ...data.list] : data.list);
      setTotal(data.total);
      setCursor(data.nextCursor || null);
    } catch (err) {
      setError(err instanceof Error ? err.message : '未知错误');
    } finally {
      setLoading(false);
    }
  }, [searchKey, cursor, pageSize]);

  useEffect(() => {
    // 初始化防抖函数
    if (!debounceRef.current) {
      debounceRef.current = debounce(fetchGoods, 500);
    }
    // 重置cursor和列表
    setCursor(null);
    setList([]);
    debounceRef.current?.();
    return () => {
      debounceRef.current?.cancel();
    };
  }, [searchKey, fetchGoods]);

  const handleNextPage = () => {
    if (cursor) {
      fetchGoods();
    }
  };

  const handleItemClick = (item: GoodsItem) => {
    onItemClick?.(item);
  };

  if (loading && list.length === 0) return <div>加载中...</div>;
  if (error) return <div>请求出错：{error}</div>;
  if (list.length === 0 && !loading) return <div>暂无商品数据</div>;

  return (
    <div className="goods-list-container">
      <input
        type="text"
        value={searchKey}
        onChange={(e) => setSearchKey(e.target.value)}
        placeholder="搜索商品名称"
        className="search-input"
      />
      <ul className="goods-list">
        {list.map(item => (
          <li key={item.id} onClick={() => handleItemClick(item)} className="goods-item">
            <span className="goods-name">{item.name}</span>
            <span className="goods-price">¥{item.price.toFixed(2)}</span>
            {item.stock !== undefined && <span className="goods-stock">库存：{item.stock}</span>}
          </li>
        ))}
      </ul>
      <div className="pagination">
        <button onClick={() => setCursor(null)} disabled={!cursor}>第一页</button>
        <button onClick={handleNextPage} disabled={!cursor || loading}>下一页</button>
        <span className="total-count">共{total}件商品</span>
      </div>
    </div>
  );
}

第二组：手机号验证码登录表单组件

① 口语化需求描述

写一个TypeScript React的手机号验证码登录表单组件，包含手机号输入、验证码输入、发送验证码按钮（带倒计时）、表单校验，提交后显示加载状态和成功/失败提示。

② TRAE SOLO模式首次生成的错误初版⚠️
// ⚠️ 初版代码存在多个明显bug
import React, { useState } from 'react';

export default function LoginForm() {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [countdown, setCountdown] = useState(0);

  const sendCode = () => {
    if (phone.length !== 11) {
      alert("请输入正确的手机号");
      return;
    }
    setCountdown(60);
    const timer = setInterval(() => {
      setCountdown(prev => prev - 1);
    }, 1000);
    // ⚠️ 未清除定时器，组件卸载后仍会执行，造成内存泄漏
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (phone.length !== 11 || code.length !== 6) {
      alert("请完善信息");
      return;
    }
    fetch("/api/login", {
      method: "POST",
      body: JSON.stringify({ phone, code })
    }).then(res => res.json());
    // ⚠️ 未处理请求结果，无加载状态和错误提示
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="手机号" />
      <div>
        <input value={code} onChange={(e) => setCode(e.target.value)} placeholder="验证码" />
        <button onClick={sendCode} disabled={countdown > 0}>
          {countdown > 0 ? `${countdown}秒后重试` : "发送验证码"}
        </button>
      </div>
      <button type="submit">登录</button>
    </form>
  );
}
③ 修正口令+TRAE迭代后的最终可用代码

修正口令：添加useEffect清除定时器的逻辑，使用正则表达式严格校验手机号格式，添加加载状态和请求结果的提示，严格定义组件的TypeScript类型，将倒计时逻辑封装成可清理的函数。

import React, { useState, useEffect, useCallback } from 'react';

// 表单类型定义
interface LoginFormProps {
  onLoginSuccess?: (phone: string) => void;
  onLoginFail?: (error: string) => void;
}

// 正则校验手机号
const PHONE_REGEX = /^1[3-9]\d{9}$/;

export default function LoginForm({ onLoginSuccess, onLoginFail }: LoginFormProps) {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [countdown, setCountdown] = useState(0);
  const [loading, setLoading] = useState(false);
  const [sendCodeError, setSendCodeError] = useState<string | null>(null);

  // 发送验证码倒计时逻辑
  const startCountdown = useCallback(() => {
    setCountdown(60);
    const timer = setInterval(() => {
      setCountdown(prev => {
        if (prev <= 1) {
          clearInterval(timer);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
  }, []);

  // 组件卸载时清除定时器
  useEffect(() => {
    return () => {
      if (countdown > 0) {
        setCountdown(0);
      }
    };
  }, [countdown]);

  const handleSendCode = async () => {
    setSendCodeError(null);
    if (!PHONE_REGEX.test(phone)) {
      setSendCodeError("请输入正确的11位手机号");
      return;
    }
    try {
      setLoading(true);
      const res = await fetch("/api/send-code", {
        method: "POST",
        body: JSON.stringify({ phone })
      });
      const data = await res.json();
      if (data.success) {
        startCountdown();
      } else {
        setSendCodeError(data.message || "发送失败");
      }
    } catch (err) {
      setSendCodeError("网络请求失败");
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!PHONE_REGEX.test(phone) || code.length !== 6) {
      onLoginFail?.("请输入正确的手机号和6位验证码");
      return;
    }
    try {
      setLoading(true);
      const res = await fetch("/api/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ phone, code })
      });
      const data = await res.json();
      if (data.success) {
        onLoginSuccess?.(phone);
      } else {
        onLoginFail?.(data.message || "登录失败");
      }
    } catch (err) {
      onLoginFail?.("网络请求失败");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="login-form">
      {sendCodeError && <div className="error-tip">{sendCodeError}</div>}
      <input
        type="tel"
        value={phone}
        onChange={(e) => setPhone(e.target.value)}
        placeholder="请输入手机号"
        className="phone-input"
        disabled={loading}
      />
      <div className="code-group">
        <input
          type="text"
          value={code}
          onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
          placeholder="请输入6位验证码"
          maxLength={6}
          className="code-input"
          disabled={loading}
        />
        <button
          type="button"
          onClick={handleSendCode}
          disabled={countdown > 0 || loading}
          className="code-btn"
        >
          {countdown > 0 ? `${countdown}s后重试` : "发送验证码"}
        </button>
      </div>
      <button type="submit" className="submit-btn" disabled={loading}>
        {loading ? "登录中..." : "登录"}
      </button>
    </form>
  );
}

vibe coding常用工具对比

|----------------|------------------------------|-------------------------|------------------------------|------------|
| TRAE | IDE/SOLO/Builder/CUE模式 | 基础版永久免费，Pro $10/月 | 国内全场景开发，微信小程序等 | 最高 |
| Cursor | AI补全、项目生成 | $15/月 | 全平台开发，代码重构 | 较好 |
| GitHub Copilot | AI补全、代码建议 | $19/月，企业版$19/人/月 | 团队协作，开源项目 | 一般 |
| Codeium | 免费AI补全，多模型支持 | 基础版永久免费，Pro $12/月 | 个人开发，快速原型 | 一般 |
| Replit | 在线IDE，项目部署 | 基础版免费，Pro $7/月 | 快速原型，在线开发 | 较好 |

TRAE的核心优势与选型建议

TRAE是字节跳动出品的国内首款AI原生IDE，基于VS Code架构，支持Claude 3.5 Sonnet、GPT-4o、Doubao-1.5-pro、DeepSeek等多款模型。它的核心模式包含IDE模式、SOLO模式、Builder模式、CUE智能预测，覆盖从单行补全到全项目自动生成的完整开发链路。

价格对比

TRAE基础版永久免费，Pro版仅需$10/月，对比Cursor的$15/月、GitHub Copilot的$19/月，每月能节省至少$9，对于个人开发者来说一年能节省超$100的成本。企业版还提供团队协作、代码规范统一、知识库管理等功能，适合中小团队使用。

不同场景下的选择建议

  1. 个人原型开发：优先使用TRAE基础版的Builder模式，输入自然语言需求即可生成完整可运行的项目，无需手动搭建基础结构，效率提升30%+是社区开发者的实测数据。
  2. 团队协作开发：选择TRAE企业版，统一团队代码规范，共享知识库，降低新人上手成本。
  3. 代码重构与补全：使用TRAE的IDE模式结合CUE智能预测，快速生成符合规范的代码片段，减少重复劳动。
  4. 国内本地化开发：TRAE针对中文注释和需求理解做了专项优化，比海外工具的准确率更高，适合国内开发者的日常开发场景。

常见误区

  1. 误区1：TRAE只能生成简单代码：很多开发者认为TRAE只能生成基础代码片段，但实际上TRAE的Builder模式可以生成完整的前后端项目，包括数据库配置、接口封装、页面路由等，只要需求描述清晰即可。
  2. 误区2：无需优化TRAE生成的代码：TRAE生成的代码可能存在性能问题、边界情况未处理等bug，需要根据实际业务场景进行优化，比如添加防抖、处理异常情况等。
  3. 误区3：TRAE只支持英文需求：TRAE针对中文开发场景做了深度优化，中文需求的理解准确率比其他工具高很多，这也是我选择它帮朋友做微信小程序的核心原因。
  4. 误区4：必须付费才能使用核心功能：TRAE基础版就支持所有的核心开发模式，包括Builder、SOLO、IDE模式，只有企业版的团队协作功能需要付费，个人开发者完全可以免费使用核心功能。

结语

这次帮朋友赶制小程序的经历，让我深刻感受到vibe coding工具对开发效率的提升。尤其是TRAE的三合一模式，覆盖了从单行补全到全项目生成的完整开发链路，不仅帮我们在3天内完成了原本需要两周的项目，还节省了大量的开发成本。

你平时用vibe coding的时候，最常用的是哪种模式？有没有遇到过类似的赶工开发场景？欢迎在评论区分享你的经验。

# 人工智能
Logo
AtomGit AI 社区

AtomGit AI 社区提供模型库、数据集、Agent、Token等资源

更多推荐

cover

算力之光：从精英主义到大众化的认知觉醒-本文由自己构思，Trae执笔完成

avatar AtomGit AI 社区

Codex 用 ChatGPT 订阅还是 API Key？先分清交互开发和程序调用

很多人第一次接入 Codex 时，会把“用 ChatGPT 登录”和“填 API Key”当成同一件事，随后又发现订阅账单和 API 账单并不互通。真正该先判断的不是哪个入口看起来更高级，而是：这项编码任务是你在本地交互式完成，还是要由代码、CI 或后端服务自动发起。

avatar AtomGit AI 社区

DLAI 碳意识笔记（一）

在本节课中，我们一起学习了机器学习工作负载碳足迹的基础知识。我们探讨了碳排放的来源，包括硬件制造（隐含碳）和模型训练与推理（运营碳）。我们学习了如何通过结合电网的碳强度和工作负载的能源消耗来估算碳排放。我们还了解了影响碳足迹的关键因素，如地理位置、时间、数据中心效率、硬件选择和模型效率。最后，我们概述了作为一名开发者可以采取的实际策略，例如选择低碳区域和时间运行任务、选择高效的基础设施以及考虑使用

avatar AtomGit AI 社区