人人皆可vibe coding一个figma？#banana黑客松项目解读

Mix了一张新中式极客插画 by shadow

你有想过自己做一个Figma出来吗？重新做一款AI原生的设计工具。

诞生于2012年，Figma已经有13年历史。其初衷是打破传统设计工具的局限，打造一款基于浏览器的实时协作设计平台，以解决设计师在协同工作中的痛点。

重新出发，释放更多人的创意 ⬇️

AI Mockup Pro

- 设计工具的革命性突破

这款工具是谷歌banana黑客松的参赛项目，实现了从创意到原型的无缝转换。

通过AI理解线框图的空间关系，将抽象布局转化为高保真模型，不仅大幅提升了设计效率，更重新定义了设计师的工作流程。

其核心价值在于让每个有想法的人都能快速将概念可视化，降低了设计门槛，释放了无限创意可能。

这不仅是Figma的替代品，更是设计思维普及的里程碑，为未来的创意工作流指明了方向。

借助 vibe coding，这款设计工具在48小时内诞生了：

（读者群开放，购买后可以联系litnmnm加入）

最核心的是Prompt的设计，值得我们参考⬇️

Prompt 核心设计

这是整个应用的“灵魂”，它没有采用简单的“一句话”指令，而是设计了一套精密的、分步骤的、多模态的 Prompt 策略，像一位经验丰富的产品经理一样，引导 AI 完成从线框图到高保真原型图，再到代码的复杂创作过程。

核心策略：任务分解 (Task Decomposition)

它将一个宏大而模糊的任务——“把这个线框图变成漂亮的设计”——分解为三个独立且清晰的子任务，让 AI 在每一步都专注于一个单一的目标，从而保证了最终输出的质量和可控性。

具体流程 (以“生成原型图”为例)

第一步：分析线框图的“骨架” - analyzeWireframe

• 模型: gemini-2.5-flash (用于快速文本分析)

• Prompt 核心思想:

• 输入: 「线框图图片」+ 用户输入的「App 概念」文本。

• 指令: “请分析这张线框图的布局结构和元素用途。不要关心它的美丑，只要告诉我它的结构。例如，‘顶部是一个用于展示头图的大矩形，下方是一个三列的商品卡片列表’。”

• 目的: 将视觉化的、低保真的线框图信息，提炼并转换成 AI 更容易理解的、结构化的文本描述 (Textual Blueprint)。这是整个流程的基石。

第二步：分析参考图的“灵魂” - analyzeStyleReference

• 模型: gemini-2.5-flash

• Prompt 核心思想:

• 输入: 用户上传的「风格参考图」（例如某个现有 App 的截图）。

• 指令: “请从这张参考图中提取出一套完整的设计系统 (Design System)，详细描述它的：

1. 色彩搭配；

2. 字体规范；

3. 组件样式（如按钮是圆角还是直角）；

4. 图标风格；

5. 整体美学（是极简风还是新拟态风？）。”

• 目的: 将另一张图片的视觉风格，同样提炼成一套结构化的设计规则文本。

第三步：融合“骨架”与“灵魂”，生成最终作品 - generateMockup

• 模型: gemini-2.5-flash-image-preview (强大的图文多模态模型)

• Prompt 核心思想 (这是最关键的一步):

• 角色扮演: “你现在是一位世界顶级的 UI/UX 设计专家。”

• 输入: 「第一步的结构文本」+「第二步的风格文本」+「风格参考图本身」+ 用户「App 概念」。

• 关键指令 (规避干扰):

1. ◦“结构上，你不许看参考图的布局，必须严格遵守我提供给你的‘线框图结构文本描述’来构建页面。”（确保了原型图的布局和用户的线框图一致)。
3. ◦“风格上，你要完全模仿我提供给你的‘风格参考图’，并应用我提供给你的‘设计系统文本’里的规则。”(这确保了原型图的美学风格达标)。
5. ◦“忽略参考图中的手机外壳、状态栏等一切与App
6. 屏幕内容无关的元素。”

• 目的:

通过这种精妙的“信息隔离”和“指令组合”，让 AI 将线框图的结构和参考图的风格完美地融合在一起，生成一个全新的、高质量的高保真原型图。

除了生成高保真的原型图之外，还能直接生成代码⬇️

代码生成 Prompt 设计 (generateCodeFromImageStream)

• 角色扮演: “你是一位世界级高级前端工程师。”

• 严格的输出格式要求: 这是代码生成成功的关键。

Prompt 明确规定：“你的唯一输出必须是 React 组件代码，不要包含任何解释、聊天、或 Markdown 标记 (如 \\jsx)。直接以 import React from 'react';` 开头。” 这确保了后端可以直接接收和展示纯净的代码。

• 质量要求: 指示 AI 使用 Tailwind CSS、语义化 HTML 标签，并用符合 App 概念的真实文本填充内容，而不是使用无意义的“Lorem Ipsum”。

———————

以上就是这个项目的最核心的Prompt，在10年前，是很难想象：软件开发最核心的代码竟然是一段段的Prompt。

10年后，设计工具会是什么样的？还存在吗？