纲要

• 核心概念与工作流
  • Vibe Coding 与 Vibe Design 理念
  • PRD (产品需求文档) 驱动的开发流程
  • 原型设计工具 Stitch (by Google)
  • 迭代式 UI 生成与精细化调整
• 涉及的技术栈与平台
  • Cursor 编辑器与 Claude Code
  • Google Stitch (with Gemini 系列模型)
  • Figma (对比参照)
• 关键流程节点
  • 基于 PRD 的功能缺失识别与补充
  • 从代码生成到原型设计的范式转换
  • 自然语言驱动的 UI 修改与优化
  • 原型预览与多端适配策略

从代码生成到原型设计的范式演进

在基于 Vibe Coding 的敏捷开发流程中，直接利用 Claude Code 等工具从 PRD 生成可运行页面是一种高效的起点。然而，这种“裸写”方式生成的界面往往在视觉专业度、设计规范性和用户体验细节上存在明显短板。

一个更成熟、更可控的实践路径是引入“原型设计（Prototyping）”环节。这并非回归到传统的手动 Figma 拖拽设计，而是演变为一种 Vibe Design 模式：即使用自然语言和 PRD 文档作为输入，驱动新一代 AI 设计工具生成高保真、可交互的原型。这不仅为后续开发提供了精确的视觉蓝图，也利用 AI 的创造力探索了更多的设计可能性。

工具选型: Stitch (Google) vs. Figma

在当前的 AI 设计工具生态中，Figma 虽仍占有一席之地，但其在 AI 原生集成和自然语言交互方面正面临挑战。相比之下，Google Stitch 作为后来者，凭借其与 Gemini 模型的深度整合，提供了更流畅的中文自然语言交互体验和强大的上下文理解能力。

特性维度	Google Stitch	Figma
AI 集成深度	原生集成 Gemini 系列模型，支持从 PRD 直接生成设计。	主要通过第三方插件或 Figma AI 提供有限的生成能力。
自然语言交互	支持用中文自然语言进行全局或局部修改，理解上下文。	主要依赖图形界面操作，AI 交互能力相对较弱。
入门门槛	低，通过自然语言即可上手，无需设计基础。	中等，需要学习一定的设计工具操作规范。
中文支持	优秀，界面与交互均支持中文。	一般，界面主要为英文，社区资源以英文为主。
核心优势	AI 驱动的快速原型生成与迭代，适合 Vibe Coding 流程。	强大的矢量编辑和设计系统管理，适合精细化设计交付。

综上，对于 Vibe Coding 一人团队而言，Stitch 能够更好地融入以 PRD 为核心、自然语言驱动的开发流程，显著降低设计环节的阻力。

用户认证功能的缺失与补充

在项目迭代中，功能的完整性是首要目标。以一个财务管理应用为例，初期基于 PRD 生成的页面可能缺失“用户注册与登录”这一核心模块。

PRD 驱动的功能增强流程

我们通过向 Claude Code 发送自然语言指令来驱动 PRD 的更新和代码的迭代：

迭代指令示例：

创建版本 1.0.1。
当前版本缺失用户注册与登录功能，请新增此模块。
简化实现，使用“用户名 + 密码”方式注册与登录。无需集成邮箱或手机号验证等外部 API。

Claude Code 将自动执行以下任务：

1. 更新 PRD 文档：在需求文档中补充用户认证的流程和界面要求。
2. 修改代码：在现有 HTML 文件中新增登录/注册界面及相应的前端交互逻辑。
3. 功能验证：确保新增功能与现有模块集成无误。

技术实现要点

• 认证机制：采用简单的客户端模拟认证，用于原型演示阶段。生产环境需替换为基于 JWT 或 Session 的后端认证方案。
• 数据持久化：此阶段无需数据库，用户状态可暂存于 localStorage 或 sessionStorage。
• 界面集成：登录页作为应用入口，注册页提供新用户创建能力。

使用 Google Stitch 生成高保真原型

当代码生成的原型在视觉上不达预期时，即可引入 Google Stitch 来承担专业的“美工”工作，将 PRD 直接转化为高保真设计稿。

基本工作流

1. 创建新项目：在 Stitch 中选择 “Web Application” 类型。
2. 导入 PRD：将详细的 PRD 文档（.md 或 .txt 格式）直接拖拽至 Stitch 的画布或文件上传区域。Stitch 能够解析文档中的配色方案、功能模块描述和布局要求。
3. 执行生成：在聊天输入框中下达指令：

根据上传的产品 PRD 文档生成网站应用。

4. 模型选择：在设置中选择 Gemini 3.0 Flash 模型，以获得生成速度与设计质量的最佳平衡。

生成过程的实时预览与迭代

Stitch 的生成过程是可视化的。它会首先解析并展示从 PRD 中提取的 配色方案 (Color Palette)，随后逐步生成多个核心页面，如：登录页、仪表盘 (Dashboard)、记账页、统计分析页等。

多语言问题的修正

当生成的界面出现中英文混杂的情况时，可直接通过自然语言指令进行修正：

当前的界面中，部分文字为英文。请根据上下文，将其全部翻译为合理、自然的中文表述。

Stitch 会基于这一指令，在保留原有布局和设计风格的前提下，重新生成所有页面的文本内容。

精细化调整与组件级控制

Stitch 的强大之处在于其支持对单个页面或组件进行精准的 “微调 (Fine-tuning)”：

1. 进入编辑模式：点击目标页面，进入单个页面编辑视图。
2. 自然语言修改：选中页面上的特定元素（如输入框、按钮、图标），在 AI 对话框中描述修改意图。

示例指令：

文本框中的文字与前置图标距离过近，请拉开至合适的间距。

登录界面上的“本月存储”统计信息在登录前不应显示，请将其删除。

3. 变更应用：Stitch 理解这些指令后，会应用修改，并智能地同步更新所有关联页面，确保设计系统的一致性。

原型预览与变体探索

• 即时原型 (Instant Prototype)：点击预览按钮，即可生成可点击的交互式原型，模拟页面间的跳转流程。
• 设计变体 (Variants)：对于任何页面，可以要求 Stitch 生成多个设计变体（例如，不同的布局或配色方案），以便进行 A/B 测试或风格探索。

为此登录界面生成两份设计变体，优化其布局与视觉层次。

• 热图预测 (Heatmap)：Stitch 能够基于界面元素预测用户可能的点击热区，为信息架构优化提供数据参考。

原型到生产的演进路径

Stitch 生成的原型图是视觉设计的最终输出，也是后续 Vibe Coding 开发的“金标准”。开发人员可以将 Stitch 导出的设计规范（如 CSS 变量、布局尺寸）或截图作为 Claude Code 的上下文，指导其生成与设计稿高度一致的最终代码。

这一流程整合了 AI 在需求理解、视觉创造和代码生成三个环节的优势，构成了一个完整的、一人可操作的现代 Web 应用开发闭环。

参考文档

官方文档

• Google Stitch Official Website
• Gemini API Documentation
• Claude AI Documentation

参考链接

• Figma Official Website
• Cursor IDE Official Website

总结

本次实践完整展示了 Vibe Coding 一人团队从 PRD 驱动代码生成，到引入 Google Stitch 进行专业原型设计的演进路径。核心技术栈包括 Cursor、Claude Code 与 Google Stitch，并通过 Gemini 系列模型实现自然语言驱动的设计迭代。

流程上，先以 Claude Code 补齐功能缺口，再以 Stitch 将 PRD 转化为高保真、可交互的原型，最后利用其精细化调整能力确保设计产出符合产品预期。

该方法论有效弥合了代码生成与专业设计之间的鸿沟，为一人团队或小团队提供了完整的、可落地的全栈开发解决方案。