一步搞定 Open Design 本地AI设计，让你秒生成页面、原型和 PPT

想把 AI 直接拎进本地电脑，省掉注册国外账号、付费抢资源的麻烦吗？这篇文章告诉你怎么在 20 分钟内装好 Open Design，用手头已有的 AI 编码助手（Claude Code、Codex、Cursor 等）秒生成网页、移动原型和演示稿。

核心思路：别再重复造轮子，用现成的 CLI 当发动机

很多人一听到“AI 设计”就想到 Figma、Canva 那套云服务，结果要学一堆 UI 操作，还得交费。其实 Open Design 只提供 框架 + 设计模板，真正的代码生成工作交给你电脑上已经装好的 AI 代理。把本地的 Claude Code、Codex、Cursor Agent 当发动机，项目里 31 种技能、72 套品牌系统直接调用，省时省力。

一步一步搞定本地部署

• 准备环境：Node.js 必须是 24 版（用 nvm/ fnm nvm install 24 && nvm use 24），再开启 Corepack 自动下载 pnpm 10.33.x。
• 克隆仓库并安装：
  

  git clone https://github.com/nexu-io/open-design.git
  cd open-design
  corepack enable
  pnpm install

• 启动服务：
  

  pnpm tools-dev run web

  
  浏览器会弹出两个地址，打开 Web 端即可。

让 AI 代理“上岗”

首次打开页面时，系统会扫描 PATH，把能找到的 16 种 CLI 列出来。如果你的机器上没有任何代理，点右上角切到 BYOK 模式，填入 OpenAI/Anthropic/Gemini 的 API Key，仍然可以跑通。

选技能、选系统、下指令——和平时写需求几乎一样

• 技能（Skill）是“做什么”。比如 web-prototype 生成单页落地页，mobile-app 生成移动原型，guizang-ppt 生成演示稿。
• 设计系统（Design System）是“长啥样”。默认的 Neutral Modern 通用，想要像 Stripe、Tesla、Notion 那么有品牌感，直接点相应套装。
• 在左下角输入需求，例如：
  帮我做一个健身 App 的 onboarding 流程，暗色主题。

点回车后会弹出几道小表单（平台、受众、色调、品牌参考），填完后 AI 开始生成：

1. 生成 TodoWrite 计划，实时推流。
2. 读取对应技能模板和设计系统。
3. 进行 5 维度自检（哲学、层级、执行、特异性、克制）。
4. 输出 ``` 包裹的代码块。
5. 在沙箱 iframe 里预览。

本地编辑、导出、继续对话

• 右侧文件工作区可以直接改 HTML/CSS，改完立即在预览里看到效果。
• 一键导出 HTML、PDF、PPTX、ZIP，或者把产物保存到 .od/artifacts/。
• 想改点细节，只要在聊天框说“把按钮圆角改大”，AI 会基于当前稿继续生成。

把已有项目拉进来改造

很多人担心只能生成新页面，其实只要把老项目复制到 .od/projects/，AI 能读取代码、CSS、Tailwind 配置，提取配色、间距 token，然后在此基础上生成新功能。

比如想在已有后台加个设置页，只需要一句：“在 ./src 下新增设置页，保持当前配色和排版”。AI 会自行读取 .css、tailwind.config.js，把新页面的代码写进去，省去手动搬砖。

配置 BYOK（Bring Your Own Key）快速上手

如果没有本地 CLI，最常见的做法是用 API 易（apiyi.com）提供的 Anthropic 中转。只要在终端里导出两个环境变量：

export ANTHROPIC_BASE_URL="https://api.apiyi.com/v1/"
export ANTHROPIC_API_KEY="sk-你的key"
pnpm tools-dev run web

这样 Open Design 会直接走中转，不再受海外卡限制，且不限并发，成本更友好。

常见坑及快速排查

• Node 版本不对：报错 Requested version v24.x.x is not currently installed，确认 node -v 为 24，使用 nvm/ fnm 切换。
• 代理未检测：检查 which claude 或对应命令是否在全局 PATH，重启服务 pnpm tools-dev stop && pnpm tools-dev run web。
• 端口冲突：默认 17456/17573 被占用时，用 pnpm tools-dev run web --daemon-port 17457 --web-port 17574。
• Design System 切换后样式不变：切系统后必须重新打开对话，旧对话会保留旧变量。

扩展玩儿法

• 自己写 DESIGN.md 定义品牌色、字体、间距，放进 design-systems/自定义，重启即可在 UI 里选。
• 在 skills/ 新建文件夹，写 SKILL.md + 资产，即可把自定义工作流加进工具箱。
• 用 Electron 打包成桌面 App，macOS 只要一键下载 .dmg，Windows 同理，兼顾本地离线和跨团队共享。

下一个值得尝试的方向

之前聊过怎么在 Vercel 部署前端，这次我们把焦点放在本地 AI 设计上。等你跑通 web-prototype，不妨再试试 dashboard 或 simple-deck，感受同一套系统生成交互式后台和演示稿的惊喜。

如果你对 API 易的中转服务感兴趣，或者想了解更细的 Agent 配置，建议阅读我们之前的《API 易快速接入指南》，帮助你一步到位。

以上就是完整的 Open Design 上手路线，快去你电脑上装一装，留个言告诉我你生成的第一个页面长啥样吧！