Open Design 全能力巡礼 —— 幻灯片、原型、图像、视频，还有一只桌面宠物

本指南是对 Open Design 的一次广度优先巡礼：不深挖某一个项目，而是横扫这个工作区能做的一切——幻灯片、海报、由草图生成的图像、由草图生成的应用原型、代码驱动的动态图形、视频，乃至一只桌面宠物。它沿用了 硅基麻辣拌 在他们的实操演示中走过的能力巡礼，用英文重写并对齐到当前版本。可以观看上方视频看实时演示，或往下阅读文字版。

Open Design 工作区——原型、幻灯片、图像与视频，统一在一块从容而熟悉的画布里。

什么是 Open Design？

Open Design 是一个开源、本地优先的设计平台，构建在你已经在用的编码 agent 之上。整个项目是一个本地部署的 Web 应用，配有一层模型层，完全支持你自己的编码 agent——无论你是通过 API key、OAuth 订阅，还是直接用你现有的 CLI 接入。

硅基麻辣拌 把其中一点单独点出来作为真正的亮点：你永远不必暴露 API key 或鉴权 token。把 Open Design 指向你本地的 Codex 或 Claude Code 的 CLI，意味着生成过程走的是从不离开你机器的凭证——这是一项他们希望更多开源 agent 项目能效仿的安全特性。视频里他们用一个跑在 GPT-5.5 上的 OpenAI Codex 订阅驱动了一切。

第 1 步 —— 安装并连接你的 agent

最快的路径是从 open-design.ai/download 下载桌面应用——零配置，而且会自动检测你已安装的 agent CLI。若要从源码运行：

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

打开它打印出的本地 URL（端口是动态的——别写死）。正如 硅基麻辣拌 所说，你甚至可以完全跳过看文档：把仓库链接交给你的 agent，让它按 dev 模式的步骤安装 Open Design。首次启动时，把它指向你本地的 CLI——Codex、Claude Code、Cursor 或 OpenCode——就可以开干了。

你究竟能做出什么

首页布满了示例——网页、海报、应用图标、动态图形、文章封面图、像素风动画、幻灯片、财报、杂志风海报。每一个示例都是 Open Design 内置的提示词与技能可以直接产出的，而且每个都展示了背后的提示词与设计系统。

设计系统库：每一条都把一个真实品牌拆解成可复用的配色、字体、组件与视觉氛围。

让我们逐项走一遍这些能力。

幻灯片（PPT）

点击 Slideshow，命名，再选一个设计系统（硅基麻辣拌 用的是一个 Anthropic/Claude 风格的系统）。接着 Open Design 做了一件让它区别于单纯找 agent 要幻灯片的事：它会基于你的提示词生成一份动态发现表单——画布比例、目标受众、页数、调研定位、视觉方向——并在动手构建之前确认你想要什么。这份表单不是写死的；它由你的提示词生成，并针对其中的缺口量身定制。最终成果是一份采用你所选品牌风格的整洁横版演示。

由手绘草图生成图像

Open Design 支持手绘输入。随手画点粗略的东西——视频里是一条刻意抽象的“龙”——然后让它根据这张草图生成一张真正的图像。它会询问朝向和背景的问题，生成图像，再把它放回你的设计文件里。这一点很到位：你不需要会画画，只需要一个想法。

由草图生成应用原型

同样的手法，不同的产出。画一个粗糙的线框图——这里一个圆、那里一个方块——保存草图文件，然后引用它并要一个移动应用界面。Open Design 用同样的“表单—确认—生成”循环，把抽象草图变成一个看上去相当成熟的界面。

用代码做动态图形

借助内置的动效技能，硅基麻辣拌 生成了一段两台拟人化 iPhone 相遇并聊天的动画。它完全用 SVG 和 CSS 动画实现——每一个视觉元素都是代码——所以当你需要一点动起来的东西时，它能干净利落地嵌进一份演示或一个页面。

模板库：原型、幻灯片、图像与视频的起点，可按类型筛选并 fork 来起步。

图像与视频生成

图像库覆盖了像 GPT Image 这样的常见场景，提示词都预先打包好了——选一个就能生成。视频也受支持，包括模型生成的片段，以及产品/动态演示效果。动效密集的视频工作是与 hyperframes 项目协作完成的，后者用代码驱动产品原型和数据可视化动画。

一只桌面宠物

最讨喜的功能：养一只宠物。挑一个——包含社区贡献的角色——点保存，它就出现在你的桌面上供你互动。这是件小事，但它透露出这是一个在意工具情感质感、而不只在意产出的项目。

客观评价

硅基麻辣拌 对取舍说得很公道。在底层，Open Design 附带了一组可组合的技能（既能在 Open Design 内部使用，也能抽取到你自己的 Codex/Claude Code 里），以及一个覆盖知名品牌的庞大设计系统库——而整个 Claude Design 风格的框架在仓库里都是开源的，所以你可以自己添加新的设计类型。

当前的不足：一些打磨性的功能仍然缺位——尤其是用于标注和修正已渲染页面的像素级批注模式。但与之对冲的强项很实在：广泛的 agent 支持（Codex、Claude Code、Cursor、OpenCode）且不暴露 API key，外加一个迭代飞快的项目。如果你想要一个可扩展、可规模化、还能反哺贡献的平台，它是一个很强的入口。

小贴士

• 用你本地的 CLI 来驱动它——没有 API key 离开你的机器，生成过程跑在你本就在付费的订阅上。
• 让发现表单发挥作用——先把它的问题答好，正是让幻灯片和原型一次到位的关键。
• 当形状很重要时，画出来，别去描述——手绘输入对图像和应用原型都管用。
• 当一份演示或页面需要点动效时，用动效技能；它是代码，所以可以随身带走。
• 当你想在 GUI 之外用某项能力时，把技能抽取到你自己的 agent 里。

常见问题

我必须暴露 API key 吗？ 不用——这正是被重点强调的一项强项。通过 CLI 用你本地的 Codex、Claude Code、Cursor 或 OpenCode 来驱动 Open Design，凭证永远不会离开你的机器。

它真能做视频和动画，而不只是静态设计吗？ 能。它能做基于代码的动态图形（SVG + CSS）、图像与视频生成，以及与 hyperframes 项目协作的动效密集型工作。

目前还缺什么？ 在录制这次演示时，用于标注已渲染页面的像素级批注模式还没上线。这个项目推进很快，所以请查看当前版本。

它是免费的吗？ 这个应用在 Apache-2.0 许可下开源，可免费在本地运行。你只需为所连接的 agent 与服务商的模型和媒体用量付费。

---

这篇文字指南基于 硅基麻辣拌 的能力巡礼。请观看上方完整视频，并订阅 硅基麻辣拌，获取更多 AI 工具实操演示。