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

适合人群想快速做一个好看的网页界面个人作品集、活动介绍页、小工具但前端基础薄弱的同学。需要说明v0 由 Vercel 推出发布功能依托 Vercel套餐与额度以官方定价页为准界面按钮名称以写作时 v0 官方文档为准可能随版本调整。和其他“一句话做应用”的工具相比v0 的特点是界面生成能力强并且有一个可视化的 Design Mode可以像修图一样点选页面元素直接调样式。本文用一个例子演示给一位插画师朋友做个人作品集页面。一、开始一个新对话在浏览器中打开 v0 并登录新建对话或先创建一个项目项目会把对话和部署、环境变量、域名关联在一起用你习惯的语言描述想法中文也可以。输入框里有麦克风图标登录后可以用语音口述提示词。二、把提示词写具体官方的建议是先从简单开始提供上下文写具体然后迭代。不要只写“做个网站”而是写清页面区块、风格和用途为一位自由插画师做一个作品集网站顶部是名字和一句简介中间是作品网格点击作品可以放大查看并显示标题下面是“合作流程”三步说明和联系表单。整体风格简洁明亮适配手机。复杂项目建议拆开做先只要“作品网格页面”满意后再追加“联系表单”。如果需求比较多比如有多种用户角色、多个功能模块官方推荐先让 v0 做规划再动手先让它写需求说明例如“为插画约稿平台写一份需求文档PRD”再让它“按需求文档先实现最核心的功能”最后逐步追加搜索、分页等功能。这样不容易漏掉关键需求每一步也方便测试。三、看预览用对话迭代生成后右侧会显示可运行的预览。觉得哪里不合适就在对话里继续说作品网格改成每行三列手机上每行一列给每张作品卡片加上创作年份。想对照代码提意见时切换到 Code 标签在代码行号旁选中几行添加批注再连同下一条提示词一起发送。四、用 Design Mode 微调样式在预览工具栏中打开 Design Mode鼠标移到页面上会高亮元素点击选中在右侧面板调整字体、字号、颜色、背景、内外边距、圆角、阴影或直接改文字内容结构性的改动比如“在这段文字旁边加一个按钮”可以在面板的输入框里用自然语言描述确认后点击 Apply改动会写回源代码生成一个新版本。在点击 Apply 之前面板里的修改只是“待应用”状态可以撤销、重做或重置。按 Esc 取消选中当前元素想在“选元素”和“正常操作页面”之间切换可以用面板里的 Inspect 控制。注意Design Mode 只能在对话的最新版本中使用只读对话和手机尺寸视图下不可用。五、发布上线点击对话顶部的 Publish首次发布时如需新建 Vercel 项目确认项目名称选择部署的可见范围和域名再次点击 Publish等待部署完成。之后有新的修改打开 Publish 选择 Publish Changes会更新到同一个线上地址。六、常见问题 FAQQ1一定要连接 GitHub 吗不需要Git 集成是可选的。连接后 v0 会自动建分支、提交并通过拉取请求合并不会直接推送到主分支。Q2能做带数据库的应用吗可以在项目菜单的设置里安装数据库等集成或直接在对话中提出需求。新手建议先做纯展示页面。Q3免费能用多少额度与套餐以官方定价页为准。建议先把页面结构和风格想清楚再写提示词减少无效的来回修改。Q4生成的是什么技术栈官方 FAQ 说明 v0 使用 Next.js、React、TypeScript、Tailwind CSS 和 shadcn/ui也可以导出代码到其他地方部署。七、小贴士先定页面结构再调颜色字体效率更高。每次只提一到两个修改点方便判断效果。作品图片、联系方式等真实信息上线前再替换进去。发布前把预览窗口拉窄检查手机上的显示效果和按钮是否好点。对生成的联系表单确认提交后的数据去向再决定是否公开使用。参考资料v0 DocsQuickstartText PromptingDesign modeFAQshttps://v0.app/docs/quickstart