v0 入门：用对话和 Design Mode 做出一个作品集网页

适合人群：想快速做一个好看的网页界面（个人作品集、活动介绍页、小工具），但前端基础薄弱的同学。需要说明：v0 由 Vercel 推出，发布功能依托 Vercel；套餐与额度以官方定价页为准；界面按钮名称以写作时 v0 官方文档为准，可能随版本调整。

和其他“一句话做应用”的工具相比，v0 的特点是界面生成能力强，并且有一个可视化的 Design Mode，可以像修图一样点选页面元素直接调样式。本文用一个例子演示：给一位插画师朋友做个人作品集页面。

一、开始一个新对话

1. 在浏览器中打开 v0 并登录；
2. 新建对话，或先创建一个项目（项目会把对话和部署、环境变量、域名关联在一起）；
3. 用你习惯的语言描述想法，中文也可以。输入框里有麦克风图标，登录后可以用语音口述提示词。

二、把提示词写具体

官方的建议是：先从简单开始，提供上下文，写具体，然后迭代。不要只写“做个网站”，而是写清页面区块、风格和用途：

为一位自由插画师做一个作品集网站：顶部是名字和一句简介；中间是作品网格，点击作品可以放大查看并显示标题；下面是“合作流程”三步说明和联系表单。整体风格简洁明亮，适配手机。

复杂项目建议拆开做：先只要“作品网格页面”，满意后再追加“联系表单”。

如果需求比较多，比如有多种用户角色、多个功能模块，官方推荐先让 v0 做规划，再动手：

1. 先让它写需求说明，例如“为插画约稿平台写一份需求文档（PRD）”；
2. 再让它“按需求文档先实现最核心的功能”；
3. 最后逐步追加搜索、分页等功能。

这样不容易漏掉关键需求，每一步也方便测试。

三、看预览，用对话迭代

生成后右侧会显示可运行的预览。觉得哪里不合适，就在对话里继续说：

作品网格改成每行三列，手机上每行一列；给每张作品卡片加上创作年份。

想对照代码提意见时，切换到 Code 标签，在代码行号旁选中几行添加批注，再连同下一条提示词一起发送。

四、用 Design Mode 微调样式

1. 在预览工具栏中打开 Design Mode；
2. 鼠标移到页面上会高亮元素，点击选中；
3. 在右侧面板调整字体、字号、颜色、背景、内外边距、圆角、阴影，或直接改文字内容；
4. 结构性的改动（比如“在这段文字旁边加一个按钮”）可以在面板的输入框里用自然语言描述；
5. 确认后点击 Apply，改动会写回源代码，生成一个新版本。

在点击 Apply 之前，面板里的修改只是“待应用”状态，可以撤销、重做或重置。按 Esc 取消选中当前元素；想在“选元素”和“正常操作页面”之间切换，可以用面板里的 Inspect 控制。

注意：Design Mode 只能在对话的最新版本中使用，只读对话和手机尺寸视图下不可用。

五、发布上线

1. 点击对话顶部的 Publish；
2. 首次发布时，如需新建 Vercel 项目，确认项目名称；
3. 选择部署的可见范围和域名；
4. 再次点击 Publish，等待部署完成。

之后有新的修改，打开 Publish 选择 Publish Changes，会更新到同一个线上地址。

六、常见问题 FAQ

Q1：一定要连接 GitHub 吗？
不需要，Git 集成是可选的。连接后 v0 会自动建分支、提交，并通过拉取请求合并，不会直接推送到主分支。

Q2：能做带数据库的应用吗？
可以在项目菜单的设置里安装数据库等集成，或直接在对话中提出需求。新手建议先做纯展示页面。

Q3：免费能用多少？
额度与套餐以官方定价页为准。建议先把页面结构和风格想清楚再写提示词，减少无效的来回修改。

Q4：生成的是什么技术栈？
官方 FAQ 说明 v0 使用 Next.js、React、TypeScript、Tailwind CSS 和 shadcn/ui，也可以导出代码到其他地方部署。

七、小贴士

• 先定页面结构，再调颜色字体，效率更高。
• 每次只提一到两个修改点，方便判断效果。
• 作品图片、联系方式等真实信息，上线前再替换进去。
• 发布前把预览窗口拉窄，检查手机上的显示效果和按钮是否好点。
• 对生成的联系表单，确认提交后的数据去向，再决定是否公开使用。

参考资料

• v0 Docs：Quickstart；Text Prompting；Design mode；FAQs
  https://v0.app/docs/quickstart