开源发现

Open Design是 nexu-io推出的开源 AI设计工作台，核心目标不是绑定某一个模型或某一个设计软件，而是把开发者常用的本地 coding agent变成设计引擎。它可以接入 Claude Code、Codex CLI、Cursor、Gemini CLI、OpenCode、Qwen、Kimi、Trae、Cline等工具，让用户用自然语言生成 UI原型、落地页、Dashboard、演示文稿、图片素材、网页文件和 HTML视频等内容。

这也是它和传统 Figma、Sketch、即时设计这类手动画布工具最大的区别。Open Design更像一个“AI Agent + 设计系统 + 本地文件生成”的工作台：用户不一定从空白画布开始拖组件，而是把需求、品牌风格、页面目标和交付格式告诉 agent，由 agent调用 Open Design的 skills、插件和设计系统规则，生成可以继续编辑、导出和交付的真实文件。

因此，把 Open Design简单理解成“某个 Claude工具的替代品”并不准确。它更合适的定位是：面向多 Agent的本地 AI设计工作台。Claude Code可以用它，Codex、Cursor、Gemini CLI、OpenCode、Qwen等工具也可以用它。对于已经在用 AI写代码、改页面、做前端组件的人来说，Open Design的价值在于把“写代码的 agent”往“懂设计、能生成原型和设计文件的 agent”推进了一步。

Open Design的官方定位强调 local-first、open-source和 BYOK。local-first意味着它优先面向本地运行和本地文件工作流；open-source让用户可以查看、修改和扩展项目本身；BYOK则代表 Bring Your Own Key，也就是软件本身可以免费开源使用，但调用 Claude、OpenAI、Gemini、Qwen等模型时，API密钥和费用仍由用户自己承担。对于希望控制数据、工具链和模型选择的开发者来说，这种模式比完全依赖单一云端产品更灵活。

从功能上看，Open Design不只是一个提示词模板集合。它把设计任务拆成插件、skills、设计系统文件和可复用工作流。用户可以让 agent根据项目需求生成落地页、产品页、移动端界面、后台 Dashboard、营销素材、PPT Deck、文档页、社交媒体内容和 HTML视频。生成过程不是只给一张不可修改的效果图，而是尽量输出真实文件，让后续继续在 Cursor、Codex、Claude Code或其他开发环境里接着改。

它的另一个关键点是“可导出”。官方介绍中提到，Open Design可以把生成结果放进沙盒 iframe中预览，并支持导出 HTML、PDF、PPTX、MP4等格式。对于产品经理、独立开发者、前端工程师和内容团队来说，这一点很重要：AI生成的东西如果只能看，价值有限；如果能变成网页、演示文稿、PDF或视频，就可以进入 Demo、营销、汇报和交付流程。

如果想在本地体验 Open Design，最直接的方式是使用 Docker。先克隆项目仓库，进入 deploy目录，复制环境变量示例文件，生成一个 OD_API_TOKEN，然后启动服务。常见命令如下：

git clone https://github.com/nexu-io/open-design.git cd open-design/deploy cp .env.example .env echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env docker compose up -d

启动完成后，在浏览器中打开 http://localhost:7456就可以进入本地工作台。这个地址是默认本地访问入口，适合先快速查看界面、体验生成流程和管理项目文件。如果在 macOS上遇到页面提示需要 Authorization: Bearer OD_API_TOKEN，通常和 Docker Desktop的网络桥接有关，需要按官方说明调整 Docker Desktop相关配置。

除了 Docker，Open Design也支持从源码运行。适合想要调试项目、参与开发或修改插件的人。基本流程是进入仓库根目录，启用 corepack，安装 pnpm依赖，然后启动开发服务。官方文档中提到的运行方式大致如下：

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

源码方式对环境要求会更高一些。官方文档提到 Node版本约为24，pnpm版本为10.33.x；Windows用户如果遇到路径、依赖或脚本问题，需要参考项目里的 Windows troubleshooting文档。普通用户想先试用，Docker通常更省事；开发者想改插件、改前端或研究内部实现，再考虑源码运行会更合适。

Open Design更有意思的用法，是直接装进你正在使用的 coding agent。它提供 stdio MCP server和按 agent生成配置的安装方式。官方给出的通用安装命令是：

curl -fsSL https://open-design.ai/install.sh | sh -s

这里的 可以替换成 claude、codex、cursor、copilot、openclaw、antigravity、gemini、cline、kimi、trae、opencode等。也就是说，你不一定非要打开 Open Design的图形界面，也可以让它作为 MCP server、skill或插件，被 Claude Code、Codex、Cursor、Gemini CLI等工具直接调用。

如果已经安装了 Open Design CLI，也可以使用更直观的 MCP安装命令。例如接入 Claude Code，可以运行 od mcp install claude；接入 Codex CLI，可以运行 od mcp install codex；接入 Cursor，可以运行 od mcp install cursor；接入 GitHub Copilot或 VS Code相关环境，可以运行 od mcp install copilot。安装完成后，Open Design会把 MCP配置写入对应工具的配置位置，或给出可复制的 MCP配置片段。

接入 agent之后，典型工作流可以这样理解：用户先用自然语言描述需求，例如“为一个 AI笔记应用生成一版深色科技风落地页”“做一个 SaaS后台 Dashboard原型”“把这个产品说明整理成8页 PPT Deck”。agent会调用 Open Design的插件、设计系统和文件工具，生成 HTML、CSS、设计说明或演示文件，并把结果放入可预览的 artifact中。用户再继续提出修改意见，例如调整品牌色、重排首屏、增加价格表、改成移动端布局，agent可以基于已有文件继续迭代，而不是每次从零生成。

在项目协作中，Open Design的优势还体现在文件可传递。设计产物如果是 HTML、CSS、JSX、DESIGN.md或可导出的 PPTX、PDF、MP4，后续就可以进入工程链路、营销链路或内容链路。前端工程师可以把原型交给 Cursor或 Codex继续拆组件，产品经理可以把 PPT Deck用于汇报，运营团队可以把落地页或视频素材作为活动页面的起点。这种方式更接近真实生产流程，而不是只生成一张看起来不错但无法维护的截图。

当然，Open Design仍然需要理性看待。它不是成熟设计协作平台的直接替代品，也不意味着所有复杂页面都能一次生成到可上线水平。实际使用时，仍然要关注页面审美是否稳定、组件结构是否清晰、导出的 HTML/CSS是否易维护、复杂交互能否可靠实现、模型调用成本是否可控，以及团队是否愿意接受 agent驱动的设计流程。尤其是这类 AI工具项目容易因为 Star数和社交传播快速走红，但最终是否能留下来，还是要看真实项目里的可用性。

对 DGNewLive读者来说，Open Design最值得关注的地方不在于它像不像某个单一产品，而在于它代表了一种新方向：设计能力正在从独立画布工具，逐渐变成 coding agent可以调用的一种能力。未来的产品原型、营销页面、数据看板和演示文稿，可能不再完全由设计师从画布上手工搭建，也不只是由 AI生成一张图片，而是由 agent读取需求、理解设计系统、生成真实文件，并在本地工具链里持续迭代。Open Design正是在这个方向上，一个非常值得观察的开源项目。