GitHub 上狂揽 1.8 万 Star!开源平替的 Claude Design。

Claude Design 发布没多少天,GitHub 上就有人做了开源复刻版。

4 月 17 日 Anthropic 上线 Claude Design,基于 Opus 4.7。

输入一句话,直接出设计成品,不是草图,不是线框图,是能交付的 HTML 页面、PPT、移动端原型。

效果确实炸裂,瞬间出圈。

11 天后,nexu-io 团队把 Open Design 开源了。

现在已经快 2 万的星星了。

01、开源项目简介

Open Design 是 Claude Design 的开源替代品。

但它不自带 AI 模型,它做的事是把你电脑上已经装好的 Coding Agent 变成设计引擎。

你输入一句话需求,比如「帮我做一份杂志风的官网」,这个先弹出一个表单确认你的需求,比如目标平台、受众、调性、品牌啥的。

然后 Agent 从 5 套视觉方向里选一个,拉出一份实时 Todo 计划,在 你电脑上创建真实的项目目录。

读模板、写 CSS、生成 HTML,最后在沙盒 iframe 里渲染出来。整个过程你可以随时介入纠偏。

输出不是截图,不是草图,是完整的单文件 HTML,可以直接导出为 HTML、PDF、PPTX、ZIP。

Claude Code、Codex、Cursor、OpenCode 等等,哪个在就用哪个。

内置 19 个可组合 Skill + 71 套品牌级 Design System

可以看成是把你手上最强的 Coding Agent 接进设计工作流的中间层。

lua 复制代码
开源地址:github.com/nexu-io/open-design

02、什么原理

这个项目的架构分两层:浏览器里跑一个 Next.js Web 界面,你电脑本地跑一个 Node daemon 服务。

核心流程是这样的:

你输入需求后,daemon 把 SKILL.md 设计能力描述和 DESIGN.md 品牌风格规范 拼装进提示词栈,然后通过 stdio 调用你机器上的 coding agent CLI 去执行。

Agent 拿到的是真实文件系统权限,它真的在你的电脑上读模板文件、grep CSS 里的 hex 色值、写 brand-spec.md、生成 HTML 和图片。

不是虚拟沙盒,不是内存模拟。

agent 跑完一轮,daemon 把产出的 HTML 塞进沙盒 iframe 实时预览。你可以在界面上直接编辑文件,也可以一键导出 HTML、PDF、PPTX、 ZIP。

你有什么 Agent 它就用什么 Agent

Daemon 启动的时候自动扫 PATH,检测你装了哪些 CLI。

不绑定任何一家模型,每一层都是 BYOK。

Claude Design 只能用 Opus 4.7,Open Design 用你手上最强的那个 agent 就行。

反 AI 味的提示词工程

这个项目在提示词层面做了不少事来防止 AI 生成那种一眼假的设计。

开始生产之前,先弹一个初始化问题表单,让你选 surface、受众、调性、品牌上下文。

30 秒勾选完,比来回改需求高效得多。

输出之前还有一轮五维自评审,AI 自己给自己打分,低于 3 分的维度要重做。

另外还有一份 slop 黑名单,暴力紫渐变、通用 emoji 图标、手绘 SVG 真人脸、Inter 当 display 字体,全部明令禁止。

没有真数字就写破折号,不编数据。

71 套 Design System + 19 个 Skill 开箱即用

71 套品牌设计系统,Apple、Stripe、Vercel、Airbnb、Tesla、Notion、Cursor、Figma,直接从下拉框选,切换后下一次渲染就用新 token。

19 个 Skill 覆盖网页原型、杂志风 PPT、Dashboard、移动端原型、定价页、邮件营销、社媒轮播图等等。

03、怎么跑起来

三条命令:

bash 复制代码
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install && pnpm dev:all

最简单的办法是把开源项目丢给你的 Agent,让它自己装。

跑起来后打开 localhost:3000,选一个 Skill、选一套 Design System、写需求,回车就行。

它会先弹问题表单让你锁定需求,然后 agent 开始干活,

实时 todo 卡片流入 UI,最后在沙盒 iframe 里渲染成品。

支持导出 HTML、PDF、PPTX、ZIP。

相关推荐
峰向AI8 分钟前
还在手动配 SSL 证书?这个 75K Star 的 Web 服务器让 HTTPS 自动到起飞
github
Java陈序员1 小时前
轻量运维面板!一款现代化的服务器控制面板工具!
运维·服务器·python·react.js·github
u1301303 小时前
GitHub 热榜项目:日榜(2026-09-10)
github
用户2136863783524 小时前
给 DeepSeek Harness 写了个「技能熔炉」:任何来源的 SKILL.md 一条命令装上
github
七牛开发者5 小时前
告别反复调参,一个 Skill 让 AI 掌握论文图的视觉语法:以 DeepSeek V4.1 Flash 论文图为例
github·agent·deepseek
简创AIGC陶先生6 小时前
【直播切片工作台】第11章:剪辑项目模型 VideoProject
github
MicrosoftReactor6 小时前
技术速递|如何在不牺牲任务质量的前提下,让 AI 编码更具成本效益
人工智能·ai·github·copilot
中科三方6 小时前
DNS拨测到底在拨测什么?
开发语言·github·php·dns·云拨测
digital-Yun10 小时前
Harness 深度图解
github
码流怪侠12 小时前
Sunshine 深度拆解:当 NVIDIA GameStream 闭源后,如何用 4 万颗 Star 重建自托管云游戏
游戏·github·nvidia