第7章 文本提示（Text Prompting）

用文本提示创建初始 UI，并用自然语言提问技术问题。从简单开始，规划项目，提供上下文，明确指定需求，必要时让 v0 澄清，然后不断迭代。

语音输入

你可以用语音代替打字来输入提示。点击提示栏中的麦克风图标开始录音，点击对勾即可将音频转成文字。语音会转换成文本并插入提示编辑器，你可以在发送前检查或修改。语音输入需要先登录。

基础示例

从简单、描述清晰的提示开始。例如：

"一个带登录页和用户资料页的仪表盘" "一个移动应用的落地页，包含 hero 区、功能网格和价格表" "一个管理客服工单的内部工具" "一个写入数据库的产品反馈表单"

开发工作流

简单项目（直接实现）

对于需求明确的应用，可以直接开始实现。这种方式适合单一用途的工具、落地页或简单的 CRUD 应用。

用 Next.js 14、App Router、TypeScript 和 Tailwind CSS 构建任务管理应用Open in v0 创建带验证和邮件集成的联系表单Open in v0

复杂项目（先规划）

对于多功能应用、企业工具或多用户角色的系统，建议先做规划。这有助于避免遗漏关键需求，并为后续开发提供路线图。

需求收集：明确要做什么、给谁用。 为餐厅预订系统创建 PRDOpen in v0 为健身追踪应用生成用户画像Open in v0

实现：基于需求构建核心功能。 "根据 PRD 构建 MVP，从核心功能开始。"

迭代：在初始实现基础上逐步添加功能和优化。 "给任务列表添加搜索和分页功能。" "用 WebSockets 实现实时更新。"

最佳实践

明确具体

提示越具体，效果越好。提供功能细节、设计偏好和技术要求。

不要说："做一个网站" 试试这样： 为一个自由职业设计师创建作品集网站，包含 hero 区、项目展示、联系表单和响应式设计Open in v0

拆解复杂任务

大型复杂应用更适合增量构建。这样可以减少错误、便于每阶段测试，调试也更容易。

太复杂： 创建一个完整的电商平台，包含认证、商品目录、购物车、支付、订单、管理后台和数据分析Open in v0

更好的做法： 先创建一个以网格布局展示商品的商品目录页Open in v0 然后跟进： 添加购物车并用 localStorage 持久化Open in v0

提供技术细节

指明你偏好的技术、框架和集成方式，这样 v0 生成的代码才能匹配你现有的技术栈。

构建一个实时聊天应用，使用：- Next.js 14 + App Router - Socket.io 处理消息 - MongoDB 存储数据 - NextAuth.js 做认证Open in v0

说明 UI/UX 偏好

提供设计偏好能让结果更符合你的预期，比如配色方案、布局偏好和用户体验要求。

设计一个极简的深色模式界面，采用移动端优先的响应式布局Open in v0

包含错误处理

健壮的应用需要完善的错误处理。说明如何处理常见的失败场景，以保证良好的用户体验。

为网络故障、无效输入和空状态添加全面的错误处理Open in v0 实现加载状态和用户友好的错误提示Open in v0

进阶技巧

让 v0 先做规划

当你不确定如何入手一个复杂项目时，可以让 v0 帮你拆解。这对涉及多方协作或复杂业务逻辑的项目尤其有用。

把一个社交媒体仪表盘的开发拆解成更小的步骤Open in v0

组件优先开发

从单个组件开始，逐块构建应用。这种方式让你对每个部分有更多控制，调试也更方便。

创建一个带导航和 logo 的 header 组件Open in v0 然后："在 header 下方添加 hero 区"

渐进式增强

先实现核心功能，再逐步添加特性。这能保证应用在每个阶段都可用，并帮你根据用户反馈排定功能优先级。

核心功能："创建一个基本的待办列表，支持添加/删除" 数据持久化："添加 localStorage 保存待办事项" 用户体验："添加完成勾选框和筛选功能"

提示模板

以下模板可作为常见开发场景的起点，请根据具体需求自行定制。

CRUD 操作 创建一个资源管理界面，包含列表视图、添加/编辑表单、删除确认和搜索/分页Open in v0

认证 使用 [认证方式] 实现登录/注册表单、密码重置、会话管理和路由保护Open in v0

仪表盘 构建一个仪表盘组件，展示 [指标] 的当前值、趋势指示、对比数据和交互式图表Open in v0

完整示例流程

以下是从零开始构建客服工单系统的完整过程，展示了从规划到功能完备应用的推进路径：

规划：为客服工单系统创建 PRD，包含客服工作台和客户门户Open in v0 核心实现：构建工单创建表单，支持优先级、分类和文件上传Open in v0 客服功能：添加客服工作台，包含工单列表、状态更新和回复界面Open in v0 增强功能：为工单更新实现实时通知和邮件提醒Open in v0

提示队列

在 v0 生成响应期间，你最多可以排队 10 条提示。当前生成完成后，排队的提示会按顺序自动执行，无需每步都等待。执行前你可以调整顺序、编辑或删除队列中的提示。这对规划多步骤工作流很有用——比如你可以一次性排队"添加认证"、"连接数据库"、"添加设置页"，让 v0 依次完成。

技术问题

v0 基于最新的 Vercel 生态文档训练，可以回答以下相关问题：

Next.js - 生产级 React 框架 Svelte - 赛博增强的 Web 应用 Turborepo - 高性能构建系统 AI SDK - AI 驱动的应用 Vercel - 面向前端开发者的云平台

示例提问

可以用 v0 获取关于实现细节、最佳实践和故障排查的具体解答：

"Next.js 14 中如何实现服务端渲染？" "SvelteKit 中处理认证的最佳方式是什么？" "如何优化 Turborepo 的构建性能？"

下一步

生成初始应用之后，你可以：

Design Mode - 打磨视觉设计和布局 Code viewer - 查看代码，添加行内注释作为下一次提示的上下文 Deployment - 将应用部署到 Vercel