August 2025
Beginner to intermediate
254 pages
3h 1m
Chinese
Content preview from 超越Vibe编程
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
Start your free trial
第 6 章 人工智能驱动的原型开发：工具与技术
本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：translation-feedback@oreilly.com
本章探讨人工智能驱动的振动编码如何加速软件开发的原型阶段。 原型设计就是将想法快速转化为工作模型。有了人工智能助手，开发人员可以在数小时内完成通常需要数天才能完成的工作，快速迭代概念。我将讨论使用人工智能从概念到原型的技术，比较流行的人工智能原型工具（包括 Vercel v0 和截图到代码工具），并研究如何在人工智能的指导下迭代完善原型。我还会讨论将人工智能生成的粗糙原型转换为生产质量代码这一关键步骤。在本章中，我还将介绍人工智能驱动的原型设计取得成功的案例研究，并展示这种方法的潜力和缺陷。
使用人工智能助手快速创建原型
原型开发极大地受益于人工智能生成代码的速度。原型设计的目标不是经过打磨的、可投入生产的代码，而是一个可以评估和完善的概念验证。 在这方面，人工智能编码助手可以通过最少的输入快速生成正常运行的代码。 例如，开发人员可以用自然语言描述所需的界面，然后让人工智能生成 HTML/CSS 或 React 组件，而不是手动编码用户界面模型。这样就能实现从构思到实施的快速周期。
一位用户体验工程师描述了使用人工智能生成工具如何彻底改变了他的工作流程："使用生成式人工智能生成功能原型的速度令人惊叹。我在几个小时内就制作出了原型，而这通常需要几天的时间"。人工智能可以自动处理常规模板和重复模式，让他可以专注于更高层次的设计决策。在原型设计中，这意味着你可以在相同的时间内尝试更多的想法。另一个好处是，人工智能几乎可以立即完成原型中繁琐的部分（基本用户界面组件、表单处理、样本数据），让人类开发人员可以专注于测试的核心概念或独特功能。
不过，重要的是要记住，原型的代码往往是可有可无的代码。人工智能可能会快速生成一个可行的解决方案，但该代码的结构可能不适合可维护性或扩展性。这在原型中是可以接受的，因为在原型中，速度和实验比优雅更重要--只要你计划为生产重构或重写关键部分（我将在本章后面讨论这一过程）。正如第 3章和第 4章所探讨的，人工智能可以自信地处理原型中约 70% 的编码工作，而你则负责指导整体架构并纠正任何关键缺陷。
第 1 章中介绍的 "按意图编程 "概念在这里至关重要。您提供高级指令（您希望原型做什么或看起来像什么的意图），然后让人工智能来完成实现。 为了说明这一点，让我们用一个非常简单的原型设计例子来说明人工智能助手。假设你有一个关于新服务注册页面的想法。 您想快速构建前端原型，因此您从以下开发人员提示开始：
为注册表单创建一个简单的 HTML 页面，其中包含姓名、电子邮件和密码字段以及一个提交按钮。使用基本的样式设计使其看起来美观大方。
像 Cline 这样的现代代码助手可能会 提供一个完整的 HTML/CSS 示例：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Sign Up</title><style>body{font-family:Arial,sans-serif;max-width:400px;margin:2emauto;}form{display:flex;flex-direction ...