如何在开发项目中高效运用AI技术

“AI不会取代你的工作——但懂得使用AI的开发人员会。”这句话我随处可见，也是关于AI取代工作的唯一我完全同意的说法。软件开发已经改变，不再是过去的样子，这是件好事。

先说清楚：AI是来帮忙的，不是来取代的。你我的工作从来不只是写代码。写代码始终只是其中一部分。我们真正的工作是构建可用的软件解决方案。既然AI经过数百万开发者的集体知识训练，可能比你写出更好、更简洁的样板代码，那你就应该让它写。你的专业知识最好用在其他地方。

在本文中，我将确切展示我如何使用AI更快完成工作。我们将逐步构建一个租车网站，你会看到我如何使用AI进行：

初始规划和研究
设计甚至UI文案
编写所有无聊的样板代码
改进代码并使其更好

这是我们正在构建的网站的样子：（在线演示）（Github仓库）

那么，关键收获是什么？

常见问题解答

步骤1：规划和研究（头脑风暴）

假设有个客户找我。他们经营租车业务，想要一个简单的网站。人们需要看到车辆并有简单的方式打电话租车。很简单。

那我做什么？我不打开VS Code。我直接把信息带给ChatGPT，问它有什么想法。

提示：

你是一个网站设计师，有一个客户拥有租车网站。他们想要一个简单的网站，显示他们可供租赁的车辆，并提供人们租车的选项。你会如何构建这个网站？

输出：

你可以看到这有多简单。那么它输出了什么？基本上是一个完整的项目简介。它给了我一个路线图，建议关键页面如首页、车辆列表和联系页面。它还概述了基本功能如搜索栏和筛选选项，并推荐了现代技术栈如React，这正是我计划使用的。

有了这些，我想看看它可能长什么样，所以我让它生成一些快速线框图。

提示：

根据以上内容，生成整个网站及其页面的线框图。

输出：

现在我有了蓝图。整个发现阶段，原本可能需要数小时或数天的来回沟通，在几分钟内完成。

步骤2：设计和UI文案

好的，我对布局有了粗略想法。是时候把这些丑陋的线框图变成真实设计了。为此，我使用AI驱动的UI生成工具（你可以找到一些，如https://stitch.withgoogle.com，甚至使用v0.dev获取想法）。

我只是上传了ChatGPT的线框图，并告诉它我想要什么。

提示：

将这些线框图转化为租车网站的干净、现代设计。让它看起来可信。

输出：

现在，我喜欢这些工具的一点是，它们不只是输出一张漂亮的图片。它们还给你实际的代码。

这是它为一个车辆卡片给出的干净HTML示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<div class="bg-white rounded-lg shadow-md p-4 flex flex-col">
  <img src="/path-to-your-car-image.png" alt="Toyota Camry" class="rounded-md mb-4">
  <h3 class="text-xl font-bold text-gray-800">Toyota Camry</h3>
  <p class="text-lg font-semibold text-blue-600 mt-2">$50/day</p>
  <ul class="mt-4 space-y-2 text-sm text-gray-600">
    <li class="flex items-center">
      <span>4 Seats</span>
    </li>
    <li class="flex items-center">
      <span>Automatic</span>
    </li>
  </ul>
  <button class="mt-auto bg-blue-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300">
    Rent Now
  </button>
</div>

你可以随时在这里玩转完整代码。

就这样，我有了网站的设计和起始代码。没有Figma，没有切割资源，直接从想法到代码。

步骤3：编写样板代码

我之前说过AI能写出比你更好的代码，我坚持这一点。它是在所有公共仓库、每个教程、每个开发者的代码上训练的。假设集体大脑比你自己更好，AI就有严重优势——如果你能引导它。

对于我的租车网站，我想使用React。所以我只是从设计工具复制了HTML代码，并粘贴到Gemini中，附上一些非常清晰的说明。

提示：

你是一名高级React开发者。将以下HTML和Tailwind CSS代码转换为功能完整的React应用程序。要求：

使用Vite作为构建工具

项目必须使用TypeScript

使用shadcn/ui实现UI组件（例如按钮、卡片）

使用lucide-react作为图标

将代码结构化为逻辑组件（例如Navbar、CarCard、Footer）

创建一个根App.tsx文件来组装这些组件

输出：

注意到我对想要的工具有多具体吗？如果你想得到最佳输出，你必须确切告诉AI你想要什么。不要含糊。引导它。这意味着你需要熟悉并理解创建这类项目所需的工具。

总体而言，从收到客户消息到在我机器上运行一个可工作的React应用，可能只花了十分钟。一个在十分钟或更短时间内构建的网站。这在不久前是不可能的，但在AI的帮助下，你可以移动得极快。

步骤4：让代码真正变好

看，我知道这远未完成。AI给了我一个很好的开始，但它不是成品。我仍然需要插入CMS或数据库，设置真正的逻辑——你懂的。这是真正开发开始的地方，而AI仍然是我的副驾驶。

AI做对（和做错）的地方

AI在第一次尝试中做得惊人地好。它正确搭建了Vite + React + TS项目，创建了一个组件文件夹，甚至在我要求的地方使用了shadcn/ui组件。这至少节省了我30-45分钟的繁琐设置。

但它并不完美。例如，车辆的初始数据是硬编码在组件内部的。这对于需要扩展或从数据库拉取的真实应用来说是个大忌。此外，组件也不如我希望的那样可重用。

这就是你作为开发者的工作所在——审查、重构和正确架构。

实际重构操作

我不断回到AI来优化代码。我把它当作结对编程伙伴。这里有个例子。AI最初给我的CarCard组件看起来像这样：

重构前（AI的初稿）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// components/CarCard.tsx
import { Button } from "./ui/button";

export const CarCard = () => {
  const carName = "Tesla Model S"; // 数据是硬编码的
  const price = 95;

  const handleRentNow = () => {
    console.log("Renting Tesla Model S");
  };

  return (
    <div>
      <h2>{carName}</h2>
      <p>${price}/day</p>
      <Button onClick={handleRentNow}>Rent Now</Button>
    </div>
  );
};

这对于演示来说没问题，但对真实应用无用。所以，我引导AI重构它。我会问它类似：“重构这个CarCard组件，使其接受车辆数据的props（名称、价格、图像）和一个用于租车按钮点击的函数。”

重构后（我的引导版本）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


// components/CarCard.tsx
import { Button } from "./ui/button";

// 为车辆数据定义类型
export interface CarProps {
  name: string;
  price: number;
  imageUrl: string;
}

interface CarCardProps {
  car: CarProps;
  onRentNow: (carName: string) => void;
}

export const CarCard = ({ car, onRentNow }: CarCardProps) => {
  return (
    <div>
      <img src={car.imageUrl} alt={car.name} />
      <h2>{car.name}</h2>
      <p>${car.price}/day</p>
      <Button onClick={() => onRentNow(car.name)}>Rent Now</Button>
    </div>
  );
};

看到区别了吗？现在它是一个可重用、类型安全的组件，从外部获取数据。这是一个来回的对话。我写一些代码，AI清理它。AI写一些代码，我修复逻辑。这是强化版的结对编程。

那么，关键收获是什么？

游戏已经改变。AI是一个工具，可能是我们被给予的最强大的工具。它自动化了无聊的东西，所以我们可以专注于困难的问题——架构、性能和用户体验。

忽视这一点的开发者将被拥抱它的开发者超越。这是关于更聪明地工作，而不是更努力。

常见问题解答

问：使用什么AI模型最好？ChatGPT还是Gemini或其他？

答：老实说，它们都很擅长写代码，这完全是“垃圾进，垃圾出”的问题。你得到的结果只和你的提示一样好。但如果我现在必须选择一个专门用于编写和重构代码的，我可能会选Gemini。你的体验可能不同。

问：如果我依赖AI，会忘记如何编码吗？

答：这取决于你。如果你只是复制粘贴而不理解发生了什么，那么是的，你的技能会变钝。但如果你用它来学习，看不同的解决问题方式，并检查自己的工作，它实际上会让你成为一个更好的开发者，更快。

问：将AI用于客户工作是否道德？

答：当然。你的客户付钱给你是为了一个可工作的网站，而不是为了你的血汗和泪水键入每个括号。使用像React这样的框架或从npm拉取包是否不道德？不。这是一回事。它是一个工具。只要确保最终产品是坚实的，因为你是最终负责的人。

问：那bug呢？AI写出完美代码吗？

答：当然不。它会给你有bug的代码。它会编造东西。不要盲目信任它。我的规则是，对待来自AI的代码就像它来自一个有才华但非常古怪的初级开发者。你必须检查他们的工作。运行它，测试它，如果它坏了，你甚至可以把有bug的代码粘贴回AI，说“嘿，修复这个。”它出人意料地擅长清理自己的烂摊子。

如果你有任何问题，随时在Twitter上找我@sprucekhalifa，别忘了关注我获取更多提示和更新。编码快乐！