用 Open Design 把参考图变成真实页面（通过 Gemini 免费实现）
Open Design 的参考图工作流——挑一个你喜欢的设计（一张 Dribbble 作品、任意网站截图），把它放进去，让 Open Design 用那种视觉语言搭出一个真实页面，整个过程在 Gemini CLI 的免费额度上零成本运行。基于 Compile Future 的实操讲解。
本指南讲的是 Open Design 一个具体却被低估的工作流：从参考图开始。找一个你喜欢的设计——一张 Dribbble 作品、任意网站的截图——把它放进去，Open Design 就会用那种视觉语言搭出一个真实页面。而且你可以在某个编程 agent 的免费额度上完全免费跑完整个过程。它沿用了 Compile Future 在他们的视频里给出的实操讲解，并按当前版本重写、更新。可以看上方视频，或继续阅读文字版。
Open Design 工作区：描述你想搭建什么、选一种模式，剩下的交给你的 agent。
什么是 Open Design？
Open Design 是一个开源、本地优先的设计平台——一款运行在你自己机器上的 Claude Design 替代品。最核心的区别在于：它不会被锁定到某一个模型，而是驱动你已经在用的那个编程 agent——Claude Code、Codex、Cursor、Gemini、OpenCode 等等。它内置了一个深厚的技能与品牌设计系统库（Airbnb、Apple、Cursor、Ferrari、Figma 等众多品牌），因此生成是从真实的美学出发，而不是从一个泛泛的提示词开始。
- 开源，Apache-2.0——克隆它、自托管它，或者直接下载应用。
- 本地运行——你的项目就存在你自己的机器上。
- 任意模型——包括免费额度；无需 GPU（模型通过你的 CLI 在云端运行，而非在你的硬件上）。
第 1 步——安装并连接一个免费模型
从 open-design.ai/download 下载安装包（macOS DMG 或 Windows .exe），或从源码运行。首次启动时，选择你的 agent。Compile Future 用的是 Gemini CLI，因为它的免费额度很慷慨（每天有大量免费请求次数）——所以整个工作流分文不花：
- 在设置里选 Gemini。如果没被检测到，就装好 Gemini CLI（在其官网上一条命令搞定）并用 Google 账号登录。
- 想用别的？任何被检测到的 CLI 都行，或者用你自己的 API key。
这就是“无需 GPU”的原因：模型通过你的 CLI 在云端运行，所以哪怕是一台配置一般的笔记本也没问题。
第 2 步——从文字提示词开始搭建（基线做法）
设定一个默认的设计系统（Compile Future 喜欢用大胆风格的），选择 Prototype，给它命名，并选 high fidelity 以获得最佳输出。发出你的需求说明。Open Design 会问几个探查性问题（单个工具／落地页／一体式？是否响应式？语气？品牌背景？）以及一个视觉方向（例如 Vercel 风格的极简外观），然后搭出一个干净的初版。你可以直接在页面上调整强调色。
在预览中渲染出的一个真实生成原型——一个暗色、电影感的代理公司落地页。
第 3 步——参考图工作流（精华所在）
这就是值回这段视频的那个技巧。与其用文字描述某种外观，不如把那种外观展示给 Open Design 看：
- 找一个你喜欢的设计——逛 Dribbble（比如搜“tools website”）或任意上线的网站找灵感。
- 把它截个图保存。
- 回到 Open Design，用 free-form 模式新建一个项目，附上那张截图，然后提示：“build my [site], use the design language from the image I shared.”
- 回答探查性问题，告诉它要匹配图片的 UI。
Open Design 会从这张参考图写出一份品牌规格说明（它会展示出来并请你确认），然后用那种视觉语言搭出页面——把和你参考图相同的布局质感、配色与字体应用到你的内容上。当你能看见自己想要什么却描述不出来时，这是拿到契合品牌结果的最快方式。
插件库：直接从 registry 安装技能——包括反 slop 的设计技能。
第 4 步——编辑并发布
用大白话来调整——“remove the sign-in button”“adjust the card radius”——看着它实时更新。通过 Source 查看代码，再用 Share 下载 ZIP、PDF 或 PowerPoint，导出独立 HTML，或者一键 deploy to Vercel（只需粘贴一个 Vercel token）拿到一个可分享链接。
小贴士
- 在 Gemini CLI 的免费额度上免费跑（或任何带免费额度的 CLI）——无需订阅，无需 GPU。
- 当你能在脑中想象出那种外观却描述不出来时，用一张参考图——Dribbble 或任意网站截图。
- free-form 模式 + “match the image”就是精准还原参考图的提示词套路。
- 在它开始搭建之前确认它生成的品牌规格说明，确保方向对。
- 追求精致输出就用 high fidelity；用大白话编辑来迭代。
FAQ
我需要 GPU 吗？ 不需要。模型通过你的 CLI（在云端）运行，而不是在你的机器上——一台普通笔记本就够了。
真的能免费跑吗？ 能——把它指向像 Gemini 这样带免费额度的 CLI，你就能零成本生成设计；只有当你选择付费模型／API 时才需要付费。
怎样从一张我喜欢的图来做设计？ 用 free-form 模式，附上截图，告诉它使用这张图的设计语言；它会提取一份品牌规格说明，并按那种风格来搭建。
它是免费且开源的吗？ 是——Apache-2.0。本地免费运行；你只需为所连接的那个模型／媒体用量付费。
这份文字指南基于 Compile Future 的实操讲解。观看上方完整视频，并订阅 Compile Future 获取更多免费 AI 工作流。