用 Vibe Design 在 Figma 中设计外卖 App

我用 Vibe Design Figma 插件，把一段简短的外卖 App 需求变成了四个界面：首页、餐厅详情、结账和订单追踪。完成后的 QuickBite 流程放在同一个 Figma 页面上。

这个流程的关键是为整个 App 保留同一个 Vibe Design 项目。每做一个新界面，就在该项目中开启一段新对话；想把生成结果绘制到 Figma 画布上时，使用结果上的 Re-render（重新渲染）。已有界面也可以继续迭代，不必每次都重新建项目。

1. 打开插件，设置画布尺寸

打开一个 Figma 设计文件，启动 Vibe Design；如果出现登录提示，先完成登录。在 AI Design 标签页中为这个 App 创建项目。尺寸选择 App / Mini Program (375)，让生成的界面从 375 px 的手机宽度开始。我把示例 App 命名为 QuickBite，并用暖橙色、圆角卡片和食物照片作为贯穿各界面的视觉方向。

第一段对话尽量把风格说清楚。下面这段首页需求可以直接复制使用：

为外卖 App QuickBite 设计一个精致的 375 px 手机首页。使用暖橙色点缀、米白色背景、圆角卡片、清晰易读的字体，以及让人有食欲的食物照片。页面包含配送地址、搜索框、食物分类、促销活动、附近餐厅列表（展示评分和配送时间），以及底部导航栏。界面应像真实产品，文案清晰，内容自然。

发送提示词，等待插件生成设计。结果会显示在插件中，随后可以渲染到 Figma。

2. 检查首次渲染，再继续完善

第一次生成的首页结构已经成形，但部分餐厅图片区域还是灰色占位块。这提醒我们：除了插件预览，也要检查 Figma 画布上的实际效果。

我接着要求补上可见的食物图片，并重新渲染更新后的结果。在插件改进并再次渲染之后，首页的餐厅卡片里显示出了食物照片。修改过生成结果后，可以点击它的 Re-render 按钮，把最新版重新绘制到画布上。

此时可以检查几个基础细节：图片是否出现？文字在手机尺寸下是否易读？底部导航是否完整落在画框内？预览看起来不错只是第一步，最终交付和编辑的是渲染后的 Figma 图层。

3. 在同一项目中制作餐厅详情页

继续在 QuickBite 项目内开启另一段对话。明确告诉插件，新页面属于同一个 App，并沿用之前的风格和内容：

为 QuickBite 设计一个 375 px 宽的餐厅详情页。沿用首页的暖橙色、圆角卡片、字体和底部导航。重点展示 Patty & Bun Co.：使用一张醒目的汉堡照片，标出 4.8 分、20–30 分钟送达和免配送费。加入“配送”和“自取”选项。菜单卡片包含 Classic Smash Burger（$8.90）、Truffle Bacon Melt（$11.50）、Sweet Potato Fries（$4.20）和 Vanilla Bean Shake（$4.50）。页面底部放一个醒目的“查看购物车”按钮。

检查生成结果；需要更新画布时，点击 Re-render，再把餐厅页放到首页旁边。

4. 补上结账页和订单追踪页

仍然在同一个项目里，分别为剩下的两个界面开启新对话。每段提示词都带上 App 名称、视觉方向、餐厅和商品价格。具体的内容有助于保持一致，但最后仍需人工核对。

结账页的提示词：

为 QuickBite 设计一个 375 px 宽的购物车和结账页，风格与之前的界面一致。购物车中有一份 Classic Smash Burger（$8.90）、一份 Truffle Bacon Melt（$11.50）和一份 Sweet Potato Fries（$4.20）。小计与总计都是 $24.60，配送费为零。页面包含配送地址 12 Market Street、尾号 4242 的 Visa 卡、优惠码输入框，以及清晰醒目的“下单”按钮。

订单追踪页的提示词：

为 QuickBite 设计一个 375 px 宽的订单追踪页，风格与之前的界面一致。展示订单号 #QB-2048、状态“正在准备你的订单”和预计 18–25 分钟送达。加入标有餐厅及送达地点的简洁地图、从“已下单”到“已送达”的五步进度、配送员 Alex、“帮助”入口和订单摘要。订单总额保持与结账页一致，为 $24.60。

插件中的生成结果会带有 Re-render 控件。准备好重新绘制时直接使用它，无需为每张页面单独创建项目。

5. 排列并检查 Figma 中的成品

按照用户的使用顺序，把四个界面并排放好：首页 → 餐厅详情 → 结账 → 订单追踪。先缩小视图检查完整流程，再放大逐页查看。本文开头的总览图就是四个界面放在同一页面上的效果。

导入后的设计包含可编辑的 Figma 图层。例如，选中底部导航中的一段文字后，可以在 Figma 右侧面板看到它的文本和字体设置。渲染完成后，仍然可以直接修改文案与布局。

分享设计前，再检查几个生成过程中容易遗漏的细节：

• 内容一致性。 本例的结账页和追踪页都显示 $24.60，但追踪页列出的商品与价格和购物车不一致。应让订单摘要与购物车完全对应。
• 小屏文字。 结账页优惠码按钮里的“Apply”换了行。可以加宽按钮，或缩短文字。
• 导航名称。 有些界面对同一个目的地用了不同的名称。选定一套导航文案，并在所有界面统一使用。
• 图片与间距。 确认每张食物照片都已显示，卡片、按钮和安全区域在 375 px 宽度下依然布局合理。

Vibe Design 很快把四个界面的基本结构放上了画布。清楚描述每张页面、为下一张页面另开对话、修改后使用 Re-render，再仔细检查可编辑的 Figma 文件，才能得到更完整的结果。