open-design：把你的 AI 编程助手变成设计师

Anthropic 年初演示了用 LLM 直接生成设计稿的工作流，火了一圈之后关了源码、锁死云端、只能用自家模型。几周后，这个开源替代品出现了——open-design，目前约 168 Stars，Apache-2.0 协议，本地优先，你带自己的 agent 来。

01

它解决的是什么问题

Claude Design 的核心思路是：LLM 不写散文，直接产出设计产物。open-design 想复刻这套循环，但不绑定任何一家云服务。它不自带 agent，而是扫描你电脑上已有的 CLI 工具——Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen Code 都支持——把它们接进一套以 Skill 驱动的设计工作流里。

02

跑起来只要三行命令

git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install && pnpm dev:all   # daemon(:7456) + Vite(:5173)
# 浏览器打开 http://localhost:5173

本地 daemon 负责拉起你选的 agent CLI，给它一个真实的磁盘目录、seed 模板、布局库和自检 checklist，然后把输出流回浏览器。不需要账号，不需要配置云端密钥。

03

输入 brief 之前先填表

输入需求后，agent 不会立刻动笔。界面先弹出一个问题表单，锁定设计面向的平台、受众、风格和品牌上下文。

如果你没有现成品牌，它还会给出5套视觉方向选项：Editorial Monocle、Modern Minimal、Tech Utility、Brutalist、Soft Warm，每套附带确定性的 OKLch 调色盘和字体搭配，选一个就锁定，不靠模型自由发挥颜色。

04

19个 Skill，71套设计系统

内置 19 个 Skill，覆盖单页原型、SaaS 落地页、移动端 onboarding、Dashboard、PPT 演示、营销邮件、OKR 文档、看板……每个 Skill 是一个文件夹，有固定的结构约束和 checklist，agent 执行前必须读完才能动工。

设计系统库有 71 套，除了两个自研起手式，剩下 69 套来自真实产品——Linear、Stripe、Notion、Figma、Supabase 等都在里面。选完之后 agent 拿到的是具体的颜色值和组件规范，而不是凭感觉写样式。

05

产物渲染与导出

生成结果在沙箱 iframe 里直接预览，支持导出为 HTML、PDF、PPTX、ZIP、Markdown 五种格式。设备框架内置了 iPhone 15 Pro、iPad Pro、MacBook、Pixel 等精确尺寸，移动端 Skill 用的是共享 /frames/ 资源，agent 不会每次重新画一个手机壳。

部署方式也比较灵活：本地 pnpm dev、单进程 npm start、或者前端部署到 Vercel 再把本地 daemon 用 cloudflared 隧道透出去。

06

上手门槛说清楚

有几个前提要明确：你得在本地装好并登录至少一个支持的 agent CLI（Claude Code、Codex 等），open-design 本身不带模型。TypeScript/Node 环境需要 pnpm。项目处于早期阶段，168 Stars，没有正式 release，文档尚在完善中——schemas/adapter.md 在文档里标注了 TODO。

适合人群：已经在用 Claude Code 或类似工具做开发、想把设计出图这一步也纳进 CLI 工作流的开发者。如果你只是想偶尔做个图，门槛可能有点高。

觉得这个思路有意思的话，去 GitHub 点个 Star 支持一下。你现在用的是哪个 coding agent？欢迎留言聊聊。关注本号，后续有更多开源工具实测。

# GitHub 项目地址
https://github.com/nexu-io/open-design