第14章 Design mode：v0 可视化设计模式使用指南

Design mode 通过点选元素、调整样式并将结果写回代码，直观地编辑你的应用。Design mode 提供了一种直观的可视化方式来优化应用界面。它允许你在实时预览中点选任意元素，通过可视化面板（和/或自然语言指令）调整其样式，最后把这些修改应用到源代码里。

启用 design mode 在预览工具栏中选中 Design 标签即可打开 design mode。

Design mode 会出现在运行中应用的旁边，并提供图层、选中控制及编辑面板。 Design mode 仅在使用最新预览 runtime 的会话，且为最新版会话时可用。只读会话和移动端视口下不可用。 选中元素 开启 design mode 后，鼠标光标会变成选中工具。在预览中悬停应用时，元素会高亮显示。点击元素即可选中，v0 会显示选中句柄，并弹出该元素的设计面板。 要在“选中元素”和“正常交互应用”之间切换，使用设计面板里的 Inspect 控件，或按 Cmd + I / Ctrl + I。按 Esc 取消选中。

修改元素 选中元素后，你有两种方式来修改它——也可以在同一元素上结合两种方式，然后再应用。 设计面板（精细微调） 设计面板提供了一组控件，用于精确调整视觉。它非常适合把样式调到最理想的效果。面板包括： Typography：字体家族、字号、字重、行高、字间距、对齐方式、文字装饰。 Color：文字颜色。 Background：背景颜色。 Layout：各边 margin 和 padding。 Border：边框颜色、样式、宽度。 Appearance：透明度和圆角。 Shadow：添加或自定义 box shadow。 Content：直接编辑元素的文字内容。 面板里的修改会实时反映在预览中，你可以立即看到效果。这些修改会作为 pending edits 保留，直到你应用它们（见下文）。 Design mode 会检测应用是否使用了 Tailwind CSS，并在合适时展示兼容 Tailwind 的取值。class 和 token 的覆盖范围取决于项目里的定义。 Instructions（复杂改动） 对于结构性、或面板里不好表达的改动——比如“在这段文字旁边加个按钮”、“把这个改成三列 grid”、“和上面卡片的风格保持一致”——在设计面板的文本框里输入自然语言指令即可。v0 会自动附上选中元素的截图和你的指令。 撤销、重做、重置、预览 编辑过程中，面板提供了一些控件帮你迭代，再决定是否提交： Undo / Redo：在 pending 的微调之间前后步进。 Reset：清空当前元素上所有 pending 的 design mode 修改。 Before / after preview：临时关掉所有 pending 修改，方便对比改动和原始效果。 pending 修改会保留到你应用它们或离开会话。如果有未应用的修改却试图离开，v0 会提醒你。 应用你的修改 满意后，点击设计面板里的 Apply。v0 会序列化你的修改（包括指令和截图），发送到会话，并生成一个反映源代码变更的新项目版本。由于 Apply 会产生新的会话版本，你可以查看 diff、继续迭代或回滚，和 v0 里的其他编辑一样。

核心特性 作用于真实应用：Design mode 针对项目的实时预览运行，你看到的就是用户会看到的。 可视化编辑和提示词编辑结合：应用前可以在同一元素上结合面板的精细调整与自然语言指令。 修改会提交为新版本：Apply 会创建一个普通的 v0 会话版本，因此每次 design mode 修改都可 diff、可审查、可回滚。 Tailwind 感知：当应用使用 Tailwind CSS 时，design mode 会在可能时展示兼容 Tailwind 的取值。

在你自己的应用中使用 design mode 关于 API 集成，Design Mode API 指南涵盖了 headless 编辑和 browser SDK 工具。v0/browser 的 createDesignModeBridge 会把客户自有的前端连接到 v0 代理的预览里的编辑器 runtime。你的后端用 parseDesignModeMessage 校验 Apply 消息，并通过 API v2 保存，API key 保持在服务端。 bridge 不依赖框架；它接入的是现有编辑器，而不是导出单独的 React 编辑器组件。你的应用仍负责用户认证、授权其聊天访问，以及处理保存完成。 上一篇 Terminal commands 下一篇 Design Systems 2.0