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

最新推荐文章于 2025-11-23 16:10:50 发布

原创最新推荐文章于 2025-11-23 16:10:50 发布 · 1k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#figma #ui

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 概念」。

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

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

• 目的:

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

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