# Open Design：用本地Agent替代Figma的开源设计工具

- 来源：向阳乔木 (@vista8)
- 发布时间：2026-06-06 23:02
- AIHOT 分数：70
- AIHOT 链接：https://aihot.virxact.com/items/cmq2ia5hf00tuslbvkwtz3swr
- 原文链接：https://x.com/vista8/status/2063275297341051086

## AI 摘要

Open Design 是一个用本地 Agent 驱动的开源设计工具。一个月内获得近 60K GitHub Star（20 天达 50k+），全球 30 多国用户，340 名贡献者。它识别本地的 Claude Code、Codex 等 Code Agent 作为设计引擎，生成 HTML 单文件而非

## 正文

http://x.com/i/article/2063275048157458432

# 设计师花90%时间在对齐像素？这个开源工具想终结这件事

一个月，接近 60K GitHub Star，全球30多个国家用户，340名贡献者，这个项目叫Open Design。

> https://github.com/nexu-io/open-design

这个数字放在Github开源历史上，20 天达到 50k Star + 的项目中，能排进全球前十。

但更有意思的不是这个数字，而是它背后的逻辑：Open Design 的创始人 Tom，自己就是这个工具的重度用户。

他们团队已经完全抛弃了 Figma 和 PRD，从想法到产品上线，最快两个小时。

这是"未来硅世界"第17期直播的核心内容。

Tom 是 Open Design 的创始人，此前做过 Refly（画布+工作流产品），在字节飞书做过产品设计和研发。

这次直播聊了产品本身、技术路线、开源哲学，以及一些很少被公开讨论的实践细节。

## Open Design 到底是什么

一句话：用本地 Agent 驱动的设计工具，目标是替代 Figma 和 Claude Artifacts。

它是一个本地客户端，免费开源，下载即用。

核心逻辑是：把你本地已有的 Code Agent（Claude Code、Codex、Hermes、PI 等）识别出来，直接作为设计引擎。

你不需要切换工具，你的本地 Agent 就是它的引擎。

对于没有本地 Agent 的用户（统计下来占85%），Open Design 提供了自己的付费 Agent，这是它目前主要的商业化入口。

它能做什么：

- 原型设计（替代 Figma 流程）

- 后台系统（Live Artifact，数据实时刷新）

- PPT（集成了歸藏老师等300+模板）

- 营销落地页和海报

- HTML 视频（基于 Hyperframes 框架，30秒短视频）

更关键的是，它打通了从设计到交付的全链路：做完设计，可以直接用 Cursor 把 HTML 转成 React 代码，交给下游工程师上线。

## 为什么选 HTML，而不是 React

这是整个产品最底层的技术判断，也是第一次听到有人把它说得这么清楚。

Open Design 生成的设计产物，核心是 HTML 单文件，而不是 React 或 Vue 这类工程框架。

原因不是技术能力的问题，而是模型注意力的分配问题。

让模型写一个 React 项目，它要花70%到80%的注意力在"怎么让这段代码能跑起来"：组件怎么连接、状态怎么管理、框架规范怎么遵守。

剩下20%的注意力，才能用来关注"这个东西好不好看"。

HTML 单文件完全不同。

没有框架负担，模型可以把80%到90%的注意力压在一件事上：让这个东西变得更美。

这就是为什么同样的模型，用 Open Design 做出来的设计，视觉质量会比直接用 Claude Code 或 Codex 生成的 React 代码好看。

不是因为 Open Design 更聪明，而是它让模型的注意力花在了正确的地方。

当然，HTML 不是终点。

做完设计之后，可以直接交给 Cursor，让它把 HTML 转成生产可用的 React 代码。

设计归设计，工程归工程，各自在最擅长的介质里工作。

## 设计系统抽取：品牌一致性的正确打开方式

Tom 在直播中演示了一个功能：把 WaytoAGI 官网的设计系统整体抽取出来，包括品牌色、阴影、圆角、暗黑模式表现等，然后基于这套设计系统，对官网做整体风格刷新。

这个功能的价值在于一致性。

如果你要做十几个设计产物，每次都从零开始，风格必然散乱。

有了设计系统，你可以让 Agent 基于同一套品牌规范，生成落地页、海报、PPT，风格自然统一。

Tom 演示时，先用抽取的设计系统生成了一版官网，觉得不够好看，又调用了歸藏老师的瑞士风格模板刷新了一遍。

整个过程就是：@模板名 发送，等几分钟，完成。

## 反 AI 味：不是玄学，是规则

Open Design 在生成设计时，会做"反 AI 味"校验。

Tom 梳理了大概二三十条规则。

> https://github.com/nexu-io/open-design/blob/main/craft/anti-ai-slop.md

AI 味的本质，是风格用错了场景。

Claude 默认生成米黄色背景，因为 Anthropic 自己的品牌就是米黄色。

这个颜色在 Claude 的界面上是好看的，但你拿它做一个科技公司的落地页，就显得廉价。

大量训练语料来自 Shadcn/UI 这类组件库，所以模型默认在背景上加网格。

网格在后台管理系统里是合适的，在对外的营销落地页上就是 AI 味。

模型还喜欢在标题前加 emoji，用标准化的颜色搭配，用特定字体。

这些都是训练数据带来的偏好，本身没有对错，只是被用在了错误的语境里。

反 AI 的做法很直接：告诉模型"你现在在设计落地页，不能用后台管理系统的思路"，然后在最终输出时让模型做自检，有问题就改，改到没问题为止。

同场嘉宾也补充了另一层更有意思的视角：即使用 AI 生成好看的风格，用的人多了也会变成 AI 味。

就像流行色，一旦泛滥，就失去了吸引力。

真正对抗 AI 味的，是融入自己的审美和思考，而不是套用一个流行模板。

本质上，人讨厌的不只是 AI 味，还有"没有用心"、"没有个性"。

## Memory：把审美变成可迁移的数据

这是 Tom 认为最被低估的功能，也是整场直播里我觉得最有意思的地方。

你做一个设计，可能要调优30轮。

每一轮你告诉 Agent"这里字太小""这里去掉""这个颜色换一下"，这些反馈在隐性地定义你的审美偏好。Open Design 会把这30轮记录下来，提炼成你的设计 Memory。

下一次生成类似设计，这些偏好自动生效。

更激进的应用：Tom 提到，他们在用 DeepSeek V4 Flash（比 Claude 便宜近100倍）结合用户沉淀的审美 Memory，做出接近 Claude Opus 水平的设计效果。

这个逻辑值得停下来想一想。

模型的能力是有上限的，但"什么是好看"这件事，是可以被系统化定义的。

你把"好看的标准"用 Memory 的形式喂给一个便宜的模型，它就能在这个标准下发挥出远超其基础能力的表现。

审美，第一次变成了可以传输的数据资产。

因为是本地客户端，Memory 数据可以直接导出。

理论上，你可以把一个审美很好的设计师的 Memory 文件导入自己的工具，直接复用他的"审美脑子"。

## html-video：Hyperframes 的问题在哪里

Open Design 最近做了一个叫 html-video 的功能，用代码写视频。

很多人会问：这和 Hyperframes 有什么区别？

Hyperframes 是 HeyGen 团队做的开源框架，通过自然语言写代码生成视频，技术上很厉害。

Tom 和 HeyGen 团队也有交流。

问题在于两点。

第一，Hyperframes 用了大量 Three.js 等动效库，这些库在训练语料里覆盖很少，模型写起来容易出错。

第二，好案例不开源。

Tom 提到，Hermes Agent 团队的宣发视频就是用 Hyperframes 做的，效果很酷，但没有开源。

结果就是大家知道 Hyperframes 厉害，但不知道怎么用它做出好看的东西。

Open Design 的 html-video 做的事情是：底层继续用 Hyperframes 框架，上层加一套产品化的模板库和工作流。

你只需要输入简单的文字描述，它帮你套用模板，默认就能出一个高级感的视频。

这是一个很典型的"在开源项目上盖产品层"的思路：不重复造轮子，解决"最后一公里"的易用性问题。

## 为什么不直接用 Claude Code 或 Codex

这个问题很关键，Tom 给出了两个核心理由。

第一，精准定位元素，节省 Token。

用 Codex 直接改一个设计元素，它需要通过截图识别、搜索代码、定位元素，经历多轮工具调用，Token 消耗很大。

Open Design 可以让你直接框选一个元素，然后说"帮我删掉"，Agent 已经拿到了这个元素的上下文，直接改，消耗更小、速度更快。

为什么 Codex 不做这个优化？

Tom 的判断是：Codex 要兼容更通用的场景，未来可能支持 iOS、安卓界面，有些界面没有可以直接选取的 DOM 元素，只能通过截图。

为了长期通用性，它选择了更保守的方案。

垂类工具的优势就在这里，专注一个场景，可以做更多针对性优化。

第二，越用越顺，Memory 积累。

通用工具不会记住你的设计偏好。

你今天告诉它"不要在顶部加小字"，下次它还是会加。

Open Design 会把这些偏好记下来，下次默认就不会出现同样的问题。

## Agent Native 团队是什么感觉

Tom 的团队十几个人，完全不写 PRD，完全不用 Figma。

具体是什么样的工作方式？

改一个文案，以前的流程：写 PRD 说明语境，丢给设计评审，拉会讨论，研发排期，可能要三天。

现在的流程：产品同学直接把代码库丢给 Codex，说"帮我把这个词改成对应语言的翻译"，推代码，上线，可能要三分钟。

做一个浏览器内嵌功能（支持灵感抓取、颜色提取、动效参考），传统大厂可能是两个月的工作量，他们三天上线。

这不是说他们的工程师特别厉害，而是整个协作模式变了。

产品、设计、研发之间的沟通成本几乎归零，因为所有人都直接对着代码说话。

Tom 说了一句话让人印象深刻："反而不在于写代码本身，而是在于你能不能让审代码这件事变得更加自动化和准确。"

他们为此专门建了一套 AI 审代码的流程：自动截图对比 UI 变化，跑自动化测试，识别是否改动了主框架。

平均不到3小时可以合入一个外部贡献者的 PR。

这套能力，让340个贡献者的代码能被有效管理，而不是变成一团乱麻。

## GitHub 是 AI 时代的小红书

这个类比是 Tom 提出来的，说得很准。

以前在小红书上分享内容，门槛是会拍照、会写文案。

现在在 GitHub 上分享项目，门槛是会用 Codex 写代码，而这件事已经变得和发一条小红书一样简单。

分享经验的媒介变了，但逻辑没变：有价值的内容，会被自动传播。

GitHub 上的好项目，会有媒体、自媒体、YouTuber 主动盯着，发现了就录视频介绍。

你不需要主动推广，只需要把东西做好放上去。

X（Twitter）是 GitHub 的冷启动最佳平台。

Tom 的方法论是：做完一个有价值的东西，录一个好看的演示视频，发到 X 上。即使你没有很多粉丝，也很容易达到几万甚至几十万的阅读量。

他还给了一个具体的冷启动建议：每天 GitHub Trending 上都有新项目，选一个你觉得有价值的，让 AI 帮你写一段"为什么它有价值"，写段文字或录个视频发到 X 上，这种内容天然有受众，也很容易积累关注。

X 的算法，Tom 的描述是：它在反哺一种类似乔布斯时代的荣光，让真正有价值的想法被推给需要它的人。

你只要做出来的东西是真实有价值的，它会帮你推给西班牙的人、北美的人、日本的人。

## 开源的护城河：贡献者，不是 Star

Tom 在直播里说了一句暴论：

"如果你这个项目只有二十几个贡献者，它本质上应该是个闭源产品。"

Refly 做了一年，7.3K Star，37个贡献者。

Open Design 一个月，接近 60K Star，340个贡献者。

这个对比让 Tom 彻底想清楚了开源的意义。

Star 可以被买，可以被刷，可以被复制，但贡献者网络不能。

逻辑是这样的：假设你的开源项目代码全公开，另一家公司把你的代码 fork 过去，重新开源，能不能超过你？

不能，因为他没有你的贡献者。

贡献者是在 Google 搜索权重上留下印记的，是在开发者心智中建立位置的，是在各自的国家和文化背景下持续产生真实需求的。

花钱可以雇400个人提 PR，但他们不会持续贡献，因为他们没有真实的使用场景。

Open Design 的北极星指标，不是 DAU，不是 Token 调用量，而是贡献者数量。

今年目标1000人，明年2000人。

这个指标背后的逻辑是：一旦你成为某个领域的"事实标准"，商业化是后来的事，生命力是先决条件。

## 两个意外的用户场景

Tom 提到两个他完全没预料到的使用方式。

一个是企业内部宣讲。

有用户把公司文化、规章制度等大段文字，直接用 Open Design 做成可视化图片，下载后用于内部传播。

不是设计需求，是信息降噪需求。一张图比一页文字传递效率高得多，但以前做一张图要找设计师，现在自己做。

另一个更有意思：西班牙的牙医，用 Open Design 做诊所门口的告示，指导患者就诊流程。

他们完全不知道 Claude Code 是什么，通过 YouTube 或 Instagram 看到了这个工具，发现能做海报，就用了。

Open Design 正在从"设计师工具"变成"可视化信息传递工具"，用户边界比产品预设的宽得多。

视觉表达的门槛降低之后，第一批受益的不是设计师，而是那些一直有表达需求、但没有表达能力的人。

## 模型选择的实测排名

直播里讨论最热闹的部分，Tom 给出了他们实测的结果。

评估分两个维度：能不能完成任务，以及完成得好不好看。

完成任务维度：

Claude Opus 4.8 和 GPT-5.5 大约95分，Kimi 2.6 和 GLM 5.1 在85到90分之间，DeepSeek V4 Flash 大约85分，基本够用。

好看程度维度，差距就拉开了：

Claude Opus 4.8 断档领先，GPT-5.5 弱不少。

Kimi 2.6 因为有专门的前端美学训练数据，和 GPT-5.5 大概在同一水平，甚至略强。

GLM 和 DeepSeek 再往下。

直播间彭超、元子等朋友也做了讨论，最终大家列了一个非常主观的LLM前端审美排名，仅供参考

> Claude opus 4.8 > kimi2.6 > GPT 5.5 > Deepseek v4 pro > GLM 5.1> Deepseek v4 Flash

Tom 的建议：追求极致效果用 Claude Opus 4.8，追求性价比用 Kimi 2.6，追求极致省钱用 DeepSeek V4 Flash 加上大量审美约束，80分水平完全够用。

他们团队自己目前全员在用 Codex，局部修改效果不错，全局大改动还是上 Claude。

## 给你的行动建议

如果你有本地 Agent（Claude Code 或 Codex），Open Design 对你完全免费。

> https://open-design.ai/

下载客户端，让它识别你的 Agent，然后做一个你真实需要的设计，落地页、PPT、海报都行。

调优10到20轮，把你的偏好沉淀进 Memory。

下次做类似设计，起点就已经不一样了。

另外，Tom团队在招各种"工程师"，比如设计工程师、GTM工程师等，地点在上海张江。

感兴趣的话也可以投个简历，学习 AI Native 的团队是如何工作的。

> https://powerformer.feishu.cn/wiki/E3gYwEe6Aiv7ihkGQvLcCpyKnKh