首页 › new-tools › 别盯模型了:三件开源货重画AI界面

开写前的诚实声明:本轮海外信息采集通道(WebSearch/WebFetch/抓取脚本)全部受限,未能做实时交叉验证。以下三个项目均为海外开源社区已广泛存在、国内讨论极少的方向性工具,核心事实基于公开资料中反复出现的稳定信息;所有时效性数据(Star数、最新版本、具体价格)请以文末官方入口为准,本文不编造精确数字。


你有没有发现一个怪现象:过去半年,海外开源圈最聪明的脑子,突然不卷模型了。

模型层已经“趋同”——你追我赶,谁也甩不开谁。于是他们换了个战场:人和AI Agent到底该怎么打交道。模型再强,你还得通过一个“界面”用它,这个界面长什么样、数据走不走第三方服务器、Agent和编辑器怎么握手——这些看起来琐碎的问题,正在被三个开源项目重新定义。国内的技术圈还在比谁的提示词写得好,而海外已经把这层做成了协议和产品。

今天拆三件货:Zed 的 ACP 协议、Onlook 的设计直改代码、Dyad 的本地AI应用工坊。三件全开源、全免费,共同点是——它们都不做模型,只做“模型和你之间的那扇门”。

一、Zed + ACP:给Agent和编辑器定了门规矩

官网:zed.dev(开源协议见其官方仓库)

先说清楚问题:你现在用 Claude Code、Gemini CLI 这类终端 Agent,是不是觉得别扭?代码改动发生在终端里,你在编辑器里看着,两边像隔着一堵墙——Agent改了什么、为什么改、你想让它停,都得切窗口。

Zed 的解法不是自己再做一个Agent(他们做了,但重点不在这),而是发明了一个开放协议:Agent Client Protocol(ACP)。一句话解释:让任何外部Agent,能以标准化方式“住进”任何编辑器。Agent负责思考和改文件,编辑器负责展示diff、收你的确认、管权限。两边通过协议对话,谁也不绑架谁。

这意味着什么?你可以在 Zed 里跑 Claude Code,也可以跑 Gemini CLI,编辑器体验是统一的:改动以 diff 形式出现,你逐条审、逐条批。明天冒出来一个新的国产Agent,只要它实现 ACP,照样能插进来。

flowchart TD
    A["模型能力趋同"] --> B["交互层成新战场"]
    B --> C["Zed ACP:握手协议"]
    B --> D["Onlook:设计改代码"]
    B --> E["Dyad:本地造App"]
    C --> F["CLI Agent住进编辑器"]
    D --> G["拖界面即改真代码"]
    E --> H["自己的Key自己的数据"]

为什么国内没人讲:大家盯着 Claude Code 的技巧清单,没人注意“Agent怎么进编辑器”正在变成一个协议标准。这和当年 LSP(语言服务器协议)统一补全体验是同一个剧本——谁定了协议,谁就定义了生态的插口形状。当年 LSP 定规矩的是 VS Code 团队,这次 ACP 是 Zed 抢了先手。

怎么上手:装 Zed(官方站有各平台安装包)→ 设置里找到 Agent 面板 → 选择接入的外部Agent(已支持多种CLI)→ 之后你的审阅、批准、回滚都在编辑器里完成。

适用人群:每天用终端Agent写代码、但被“终端里看diff”折磨的人;想给团队统一Agent入口的工程负责人。

与国内对比:国内主流AI IDE基本是“绑定自家模型”的封闭路线,Agent和编辑器是焊接关系。ACP 是反着来的——编辑器不绑定Agent,Agent不绑定编辑器,插拔自由。对被迫用特定国内模型的团队,这几乎是唯一能“换模型不换工作流”的路径。

二、Onlook:设计师拖一下,代码真的变了

官网:onlook.com(若失效请直接搜索"Onlook"进官方仓库)

第二个项目解决的是另一个古老的痛:设计和代码是两个世界。

设计师在 Figma 里画完图,扔给程序员“还原一下”,还原走样了再打回——这个循环全世界的团队都在忍受。市面上AI生成界面的工具不少,但大多是“生成一次成品,之后改不了”,一旦产品要迭代,AI给的漂亮页面就成了死物。

Onlook 的思路完全不同:它直接打开你正在跑的 React 项目,让设计师在真实应用上拖拽、改样式——改的不是设计稿,是真实的前端代码(React + Tailwind 体系)。界面上每个元素背后就是组件代码,设计师调整布局、换颜色、改文案,保存即改代码,程序员接着在这个基础上继续开发。后来他们把AI能力加了进去:选中一块区域,用自然语言说“把这个卡片改成三列”,AI直接改代码。

关键区别:其他工具是“AI生成→你看→不满意→重新生成”的死循环;Onlook 是“人在真实产品上做修改,每一步都落在代码资产上”。前者是玩具,后者能进生产流程。

为什么值得关注:国内大量中小团队根本没有专职前端,产品经理用原型工具画图、开发凭感觉还原,沟通成本极高。Onlook 这类“可视化层直接编译成真代码”的路线,等于砍掉了“还原”这个环节——小团队里设计师和产品经理直接就能动生产代码,这对人手紧张的团队是实打实的生产力。

怎么上手:从官方仓库下载桌面版 → 用它打开你本地的 React + Tailwind 项目 → 在应用窗口里直接点选元素拖拽修改 → 满意后提交代码(改动就是标准的代码变更,走你现有的 git 流程)。

适用人群:没有专职前端的小团队、需要快速和客户对界面的外包团队、想摆脱“改个按钮颜色也要提需求”的产品经理。

与国内对比:国内的低代码平台(各类表单/页面搭建器)大多是“平台内闭环”,导出的代码难维护、进不了正常工程流。Onlook 反其道而行——它不创造平行世界,直接寄生在真实工程上。这是根本理念差异:低代码想替代开发,Onlook 想增强开发。

三、Dyad:在你自己电脑上,开一家AI应用工坊

官网:dyad.sh(开源项目,官方仓库见 GitHub)

第三个项目最“逆势”。现在满世界都是 Lovable、Bolt、v0 这类“对话生成全栈应用”的云端服务,好用是真好用,但三个问题悬在头上:代码和数据库在别人服务器上、按月订阅、模型额度被平台卡着。

Dyad 的回答:把这一整套搬到本地。它是开源的桌面应用,你在自己电脑上用它对话生成 Web 应用,代码直接生成本地目录里,用你喜欢的编辑器接着改,用你自己的 git 提交,部署走你自己的路。模型也你自己选——填自己的 API Key,想用哪家用哪家,本地模型也行。

这个模式叫 BYOK(Bring Your Own Key),妙处算三笔账:

  1. 数据账:你的业务代码、客户数据不出本机,对合规敏感的团队这是硬需求;
  2. 成本账:没有平台月费,成本就是你自己API Key的消耗,重度使用时便宜得多,轻度使用时几乎免费;
  3. 自由账:生成的东西不是平台里的“资产”,就是普通代码,没有任何锁定。

为什么值得关注:国内用 Lovable 类服务的门槛本来就不低(支付、网络、账号),而 Dyad 把整个品类搬到了本地——网络障碍、订阅支付两大拦路虎一次解决,这是国内用户视角下被严重低估的一条路。

怎么上手:官方站下载桌面版(支持 macOS / Windows)→ 填一个你已有的模型 API Key(或配本地模型)→ 对话描述你要的应用 → 生成的项目落在你指定的本地文件夹 → 后续修改可以在 Dyad 里继续对话,也可以直接扔给 Zed/VS Code。

适用人群:想快速做内部工具和原型的后端工程师、不想为AI建站服务付月费的独立开发者、对代码隐私有要求的团队。

与国内对比:国内还没有成熟的对标开源项目,云端的类似服务则普遍按月收费且绑定自家模型。Dyad 的“本地+BYOK”组合,等于把选择权和成本都还给用户——这是典型的“海外已跑通、国内还没人抄”的窗口期机会,甚至有人可以基于它做国产化分发的生意。

三件货串起来看:同一盘棋

把三个项目放一起,你会发现它们在下同一盘棋:

维度 主流路线 这三件货
核心资产 模型本身 交互协议与工作流
商业模式 订阅月费、锁定额度 开源免费,成本还给用户
数据归属 云端服务器 本地优先
换模型 重新迁移 插拔(ACP换Agent、Dyad换Key)
和现有工程关系 另起炉灶 寄生在真实工程上

规律很清楚:当模型层无法差异化时,差异化就流向了交互层和数据主权。这三件货一个管“Agent怎么进编辑器”,一个管“设计怎么进代码”,一个管“应用怎么在本地生成”——正好覆盖了从创意到交付的三个接口。

信息差总结

你可能知道的 别人已经知道的
AI编程就是装个Copilot/Cursor Agent进编辑器已经有开放协议(ACP),可插拔
AI生成的界面只能看不能用 Onlook直接在真实React项目上可视化改代码
想AI建站只能订阅Lovable类服务 Dyad本地开源,自己的Key、自己的代码、零月费
换模型=重学一套工具 协议层解耦后,换模型不换工作流

行动指南

  1. 今晚就能做:装 Zed,把你正在用的终端 Agent 接进 Agent 面板,体验一次“在编辑器里审 Agent 的 diff”,回不去的;
  2. 本周末做:拿一个你搁置已久的“小工具想法”,用 Dyad 在本地生成第一版,代码落在自己硬盘上,没有任何心理负担;
  3. 本周内评估:如果你的团队有“设计还原”内耗,让设计师试 Onlook 打开真实项目改一次,测算能省几轮沟通;
  4. 进阶:关注 ACP 的协议文档,如果你在做国内模型或Agent产品,实现它意味着能插进整个开源编辑器生态——这是比刷榜便宜得多的获客通道。

参考来源

注:本轮实时检索通道受限,以下为各项目官方入口,具体版本、Star数、价格请以官方页面为准。

  1. Zed 编辑器官网(含 ACP 协议说明):https://zed.dev
  2. Zed 官方开源仓库:https://github.com/zed-industries/zed
  3. Dyad 官网:https://dyad.sh
  4. Onlook 官网:https://onlook.com
  5. 各项目开源仓库均可在 GitHub 搜索项目名直达

本文由「51学通信」技术团队出品。51学通信由通信行业18年老兵爱卫生(微信ID: gprshome201101)维护。 聚焦5G/6G核心网、3GPP标准、AI工具实战。知识星球「51学通信」提供深度技术答疑和行业洞察。

[!tip] 51学通信知识星球 星主:爱卫生(微信:gprshome201101)——公众号「51学通信」创办者,19 年通信行业运维与讲师经验,著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书(各大电商平台有售)。 星球定位:深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域,主打运维岗位与信令分析。 当前规模:5200 篇主题 / 990 个回答,198 元/年。 加入福利:加入星球后请加爱卫生微信,拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题,另有群内分享。 AI 加持:51学通信知识星球已作为 skill 接入 WorkBuddy,使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例,做总结、找文档和 PPT 等场景全覆盖。

51学通信知识星球海报-扫码加入