Open Design：用本地Agent替代Figma的开源设计工具 · AI HOT
向阳乔木@vista870
2026-06-06 23:02·9天前
AI 摘要Open Design 是一个用本地 Agent 驱动的开源设计工具。一个月内获得近 60K GitHub Star（20 天达 50k+），全球 30 多国用户，340 名贡献者。它识别本地的 Claude Code、Codex 等 Code Agent 作为设计引擎，生成 HTML 单文件而非
智能体开源/仓库开源生态教程/实践
向阳乔木@vista8 · X 70
2026-06-06 23:02·9天前
AI 摘要Open Design 是一个用本地 Agent 驱动的开源设计工具。一个月内获得近 60K GitHub Star（20 天达 50k+），全球 30 多国用户，340 名贡献者。它识别本地的 Claude Code、Codex 等 Code Agent 作为设计引擎，生成 HTML 单文件而非
做完设计之后，可以直接交给 Cursor，让它把 HTML 转成生产可用的 React 代码。
设计归设计，工程归工程，各自在最擅长的介质里工作。
Tom 在直播中演示了一个功能：把 WaytoAGI 官网的设计系统整体抽取出来，包括品牌色、阴影、圆角、暗黑模式表现等，然后基于这套设计系统，对官网做整体风格刷新。
如果你要做十几个设计产物，每次都从零开始，风格必然散乱。
有了设计系统，你可以让 Agent 基于同一套品牌规范，生成落地页、海报、PPT，风格自然统一。
Tom 演示时，先用抽取的设计系统生成了一版官网，觉得不够好看，又调用了歸藏老师的瑞士风格模板刷新了一遍。
Open Design 在生成设计时，会做"反 AI 味"校验。
> https：//github.com/nexu-io/open-design/blob/main/craft/anti-ai-slop.md
Claude 默认生成米黄色背景，因为 Anthropic 自己的品牌就是米黄色。
这个颜色在 Claude 的界面上是好看的，但你拿它做一个科技公司的落地页，就显得廉价。
大量训练语料来自 Shadcn/UI 这类组件库，所以模型默认在背景上加网格。
网格在后台管理系统里是合适的，在对外的营销落地页上就是 AI 味。
模型还喜欢在标题前加 emoji，用标准化的颜色搭配，用特定字体。
这些都是训练数据带来的偏好，本身没有对错，只是被用在了错误的语境里。
反 AI 的做法很直接：告诉模型"你现在在设计落地页，不能用后台管理系统的思路"，然后在最终输出时让模型做自检，有问题就改，改到没问题为止。
同场嘉宾也补充了另一层更有意思的视角：即使用 AI 生成好看的风格，用的人多了也会变成 AI 味。
真正对抗 AI 味的，是融入自己的审美和思考，而不是套用一个流行模板。
本质上，人讨厌的不只是 AI 味，还有"没有用心"、"没有个性"。
这是 Tom 认为最被低估的功能，也是整场直播里我觉得最有意思的地方。
每一轮你告诉 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 团队做的开源框架，通过自然语言写代码生成视频，技术上很厉害。
第一，Hyperframes 用了大量 Three.js 等动效库，这些库在训练语料里覆盖很少，模型写起来容易出错。
Tom 提到，Hermes Agent 团队的宣发视频就是用 Hyperframes 做的，效果很酷，但没有开源。
结果就是大家知道 Hyperframes 厉害，但不知道怎么用它做出好看的东西。
Open Design 的 html-video 做的事情是：底层继续用 Hyperframes 框架，上层加一套产品化的模板库和工作流。
你只需要输入简单的文字描述，它帮你套用模板，默认就能出一个高级感的视频。
这是一个很典型的"在开源项目上盖产品层"的思路：不重复造轮子，解决"最后一公里"的易用性问题。
## 为什么不直接用 Claude Code 或 Codex
用 Codex 直接改一个设计元素，它需要通过截图识别、搜索代码、定位元素，经历多轮工具调用，Token 消耗很大。
Open Design 可以让你直接框选一个元素，然后说"帮我删掉"，Agent 已经拿到了这个元素的上下文，直接改，消耗更小、速度更快。
Tom 的判断是：Codex 要兼容更通用的场景，未来可能支持 iOS、安卓界面，有些界面没有可以直接选取的 DOM 元素，只能通过截图。
垂类工具的优势就在这里，专注一个场景，可以做更多针对性优化。
你今天告诉它"不要在顶部加小字"，下次它还是会加。
Open Design 会把这些偏好记下来，下次默认就不会出现同样的问题。
Tom 的团队十几个人，完全不写 PRD，完全不用 Figma。
改一个文案，以前的流程：写 PRD 说明语境，丢给设计评审，拉会讨论，研发排期，可能要三天。
现在的流程：产品同学直接把代码库丢给 Codex，说"帮我把这个词改成对应语言的翻译"，推代码，上线，可能要三分钟。
做一个浏览器内嵌功能（支持灵感抓取、颜色提取、动效参考），传统大厂可能是两个月的工作量，他们三天上线。
这不是说他们的工程师特别厉害，而是整个协作模式变了。
产品、设计、研发之间的沟通成本几乎归零，因为所有人都直接对着代码说话。
Tom 说了一句话让人印象深刻："反而不在于写代码本身，而是在于你能不能让审代码这件事变得更加自动化和准确。"
他们为此专门建了一套 AI 审代码的流程：自动截图对比 UI 变化，跑自动化测试，识别是否改动了主框架。
这套能力，让340个贡献者的代码能被有效管理，而不是变成一团乱麻。
现在在 GitHub 上分享项目，门槛是会用 Codex 写代码，而这件事已经变得和发一条小红书一样简单。
分享经验的媒介变了，但逻辑没变：有价值的内容，会被自动传播。
GitHub 上的好项目，会有媒体、自媒体、YouTuber 主动盯着，发现了就录视频介绍。
X（Twitter）是 GitHub 的冷启动最佳平台。
Tom 的方法论是：做完一个有价值的东西，录一个好看的演示视频，发到 X 上。即使你没有很多粉丝，也很容易达到几万甚至几十万的阅读量。
他还给了一个具体的冷启动建议：每天 GitHub Trending 上都有新项目，选一个你觉得有价值的，让 AI 帮你写一段"为什么它有价值"，写段文字或录个视频发到 X 上，这种内容天然有受众，也很容易积累关注。
X 的算法，Tom 的描述是：它在反哺一种类似乔布斯时代的荣光，让真正有价值的想法被推给需要它的人。
你只要做出来的东西是真实有价值的，它会帮你推给西班牙的人、北美的人、日本的人。
"如果你这个项目只有二十几个贡献者，它本质上应该是个闭源产品。"
Refly 做了一年，7.3K Star，37个贡献者。
Open Design 一个月，接近 60K Star，340个贡献者。
Star 可以被买，可以被刷，可以被复制，但贡献者网络不能。
逻辑是这样的：假设你的开源项目代码全公开，另一家公司把你的代码 fork 过去，重新开源，能不能超过你？
贡献者是在 Google 搜索权重上留下印记的，是在开发者心智中建立位置的，是在各自的国家和文化背景下持续产生真实需求的。
花钱可以雇400个人提 PR，但他们不会持续贡献，因为他们没有真实的使用场景。
Open Design 的北极星指标，不是 DAU，不是 Token 调用量，而是贡献者数量。
这个指标背后的逻辑是：一旦你成为某个领域的"事实标准"，商业化是后来的事，生命力是先决条件。
有用户把公司文化、规章制度等大段文字，直接用 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 大概在同一水平，甚至略强。
直播间彭超、元子等朋友也做了讨论，最终大家列了一个非常主观的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