不绑死任何模型的AI设计工具：Open Design用31个技能和129套设计系统生成网页原型与PPT

Claude Design 发布当天，Figma 股价跌了7%。作为一个闭源的 AI 设计工具，杀伤力太大了。11天后，一个类似的项目在 GitHub 开源。它叫 Open Design，目前已经有34000+ Star。

这是一个开源的 AI 设计工具，输入一句话，它能生成网页原型、PPT、落地页、移动端界面。值得说的是它不会被绑死在任何一个模型上，今天用 Claude，明天换 Gemini，后天切到本地模型看你喜欢。支持16种 Coding Agent CLI，像 Claude、Gemini、OpenAI、Local 等。

内置31个技能和129套设计系统

技能系统：每个技能对应一种设计场景。要做 SaaS 落地页有 saas-landing 技能；要做社交媒体轮播图有 social-carousel 技能；要做移动端引导流程有 mobile-onboarding 技能。每个技能都是一个文件夹，里面有模板、样式、检查清单。想新增一个技能，只要按照它的 SKILL.md 规范写好，放到 skills 目录下，重启服务就能用。

设计系统库：它内置了一些很有名的产品设计规范，像 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Anthropic。每套系统用 Markdown 定义了颜色、字体、间距、布局、组件、动效、品牌语调这些内容。切换设计系统之后会保存当前的样式，下次直接用。

Web、移动端、营销都能做

Web 端效果：杂志质感网页 PPT，经典杂志版面排布配上 WebGL 超大首屏视觉；约会匹配专属仪表盘，左侧导航搭配核心 KPI 与多维图表；双页数字电子指南，封面加课程页。

移动端效果：iPhone 15 Pro 精准机框复刻，多端原型连贯衔接；三帧移动端引导流程，splash、value-prop、sign-in 都做得很精致；三帧就能做游戏化 APP 原型。

营销场景：品牌产品发布的 HTML 邮件，里面带表格也不会乱；三张1080×1080社交媒体轮播图，发朋友圈、发小红书都够用；动态设计 Hero，支持 CSS 循环动画；8-bit 像素动画解释幻灯片。

另外它还支持媒体生成，包括图片、视频、音频。图片用 gpt-image-2，视频用 ByteDance 的 Seedance 2.0，动态图形用 HyperFrames。

如何上手

先装一个 Claude Code 或者其他支持的 Agent CLI，然后克隆仓库，运行 pnpm tools-dev，打开浏览器就能用了。如果不想装 Agent，也可以直接在设置里填 API Key，效果是一样的。

确保电脑上已经安装了 Node.js 18+ 和 pnpm：

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

没有报错，用浏览器打开 http://localhost:3000，就能开始使用了。

使用流程

打开 Open Design，直接输入"帮我做一个杂志风格的官网"，它先弹出个表单，让你确认目标平台、受众、调性这些信息，还会让你选视觉效果，有5种风格可选。

到这 Agent 就能真正干活了，计划实时显示在界面上，能看到它正在做什么、下一步要做什么。一旦发现方向不对，可以随时打断，不用等全部做完再重来。

生成出来的东西在沙箱 iframe 里预览，可以直接编辑，也能下载成 HTML、PDF、PPTX 或 ZIP 包。

注意事项

目前不支持多人实时协作，复杂项目 AI 生成的元素只是近似匹配，不是精确还原。像素级精确的生产级设计，推荐还是用 Figma。

AI 设计工具越来越多，不能说哪个最好，各有特点。大家根据自己的需求选合适的。如果你也在用 Claude Code 或其他 Coding Agent，想快速出个设计原型，不妨试试 Open Design。

项目基于 Apache-2.0 协议开放。

开源地址：https://github.com/nexu-io/open-design