做技术的都知道，海外工具圈每隔几周就冒出一批新面孔，但能穿透 HN 首页的喧嚣、真正落到日常工作流里的，十中无一。今天拆三件我在海外社区反复看到、中文圈却几乎没人写透的工具：一件让设计师直接改你的真实代码库（Onlook），一件把「TypeScript 写 Agent」这件事做出了 Vite 级体验（Mastra），一件专治 AI 生图乱码、把文字变成可编辑信息图（Napkin）。三个各堵一个信息差，看完就能上手。
是什么：开源桌面应用，自我定位是「给设计师的 Cursor」。它不生成新项目，而是打开你现有的 React + Tailwind 项目（尤其适配 shadcn/ui 这类组件库），让不懂代码的设计师在画布上点选任意元素、拖拽布局、用自然语言描述改动，然后——这是它和所有「AI 出页面」工具最本质的区别——把改动写回真实源码，产出的是可 review、可 commit 的 React 代码，不是一张漂亮的假图。
官网与仓库：onlook.com ｜ github.com/onlook-dev/onlook（开源免费，桌面端支持 Mac/Windows/Linux，云端托管能力以官网为准）
上手三步： 1. 官网下载桌面版，安装； 2. 指向你本地的前端项目目录，跑起 dev server； 3. 在画布上点选组件 → 输入「把这个卡片改成两列、圆角加大」→ 得到真实代码 diff，走正常 git review。
为什么值得关注：海外小团队的普遍痛点是「设计师改个 margin 都要提单排队」。国内也有人做「AI 设计工具」（Motiff、MasterGo 都加了 AI），但它们停在设计稿层面，产出的还是 Figma 式交付物；Lovable、v0 这类海外产品则是从零生成整站，接不了存量代码。Onlook 卡位的是中间那条缝：存量 React 项目、可视化改、代码落地。对甲乙方外包团队尤其致命——改 UI 这件事从此可以前端自审兜底，不用来回翻译。
适合谁：有 React + Tailwind 存量项目的前端团队、独立开发者（自己兼设计和码农）、想把 UI 微调权下放给产品/设计的负责人。注意边界：它目前聚焦 React 技术栈，Vue/Angular 项目不用试。
是什么：TypeScript 优先的开源 Agent 框架，出自 Gatsby 两位联创之手。核心积木五块：Agent（指令+工具）、Workflow（带挂起/恢复的持久化工作流，支持人工介入）、RAG（内置管道）、Memory（工作记忆+语义召回）、Evals（评测）。全兼容 Vercel AI SDK，OpenAI/Anthropic/Gemini/本地 Ollama 都能接，还内置 MCP 客户端与服务端能力。
官网与仓库：mastra.ai ｜ github.com/mastra-ai/mastra（开源免费）
上手三步：
npm create mastra@latest
cd my-agent && npm run dev
# 浏览器打开 localhost:4111 的 Playground
在 Playground 里可以直接和 Agent 对话、单步查看它调了哪些工具、每一步的输入输出——这是国内开发者最少见到的部分：Agent 的调试体验被做到了前端工程级，像 Vite 之于打包。
为什么值得关注：国内聊 Agent 框架基本默认 Python + LangChain/LlamaIndex，TS 工程师要么硬上 LangChain.js（体验粗糙），要么用低代码编排。而海外这条线已经跑通了另一条路：代码优先、嵌进现有 Next.js 应用。和 n8n 那类低代码「Agent 工厂」不冲突——前者适合产品化交付（工作流逻辑进版本库、可测试、可部署到 Vercel/Cloudflare/Node），后者适合内部自动化胶水。国内字节 Eino、Spring AI Alibaba 都在 Java/Go 侧发力，TS 生态这个位置基本空着。
适合谁：Next.js/全栈 TS 独立开发者；需要在现有业务系统里嵌 Agent（客服、工单、内部工具）的团队；被 Python 双语言栈折磨的后端。
是什么：一个「文本 → 可编辑信息图」的网页工具。粘贴一段描述，它自动拆解结构，生成流程图、时间线、对比图、层级图等多种草稿；每张图都是矢量元素，图标、配色、字体、布局全部可改，导出 PNG/SVG。关键卖点：图里的文字是真实文本对象，不存在 AI 生图的乱码问题。
官网：napkin.ai（免费档可用，Pro 订阅价格以官网现价为准）
上手三步： 1. 注册登录，新建画布，粘贴一段博客段落或会议纪要； 2. 右侧浮出多个草图方案，点选最接近的一个套用； 3. 微调文字与图标后导出 SVG，直接进文档、PPT 或公众号。
为什么值得关注：中文内容创作者的配图现状是两头堵——手画（draw.io/ProcessOn）慢，AI 生图（Midjourney 类）文字必乱、结构不可控。海外社区写技术博客、做产品发布的配图已经大规模换成了这个品类。它和「AI 修图流水线」「AI 生图」完全不是一个物种：产出的是结构化、可编辑、文字精确的示意图。这个品类国内目前几乎空白，属于典型的认知差。
适合谁：技术写作者、公众号运营、培训讲师、需要给老板画架构示意图但懒得开 draw.io 的工程师。
一个独立开发者的真实一天，三件工具各占一个卡位：
flowchart TD
A[一条新需求进门] --> C[写文档配图]
A --> D[改前端界面]
A --> E[加后端Agent]
C --> C1[Napkin 文本变图]
C1 --> C2[导SVG进文档]
D --> D1[Onlook 开本地库]
D1 --> D2[点选改样式]
D2 --> D3[回写真实代码]
E --> E1[Mastra建工程]
E1 --> E2[挂工具与记忆]
E2 --> E3[调试并部署]
| 你以为 | 实际上 |
|---|---|
| 改 UI 必须前端排期，设计师只能出标注稿 | Onlook 让设计直接改真实 React 代码，git review 兜底 |
| 写 Agent 等于 Python + LangChain 双栈硬啃 | TS 全栈用 Mastra，Playground 单步调试，Agent 进版本库 |
| 配图只能手画慢、AI 生图乱码 | Napkin 文本直出可编辑矢量信息图，文字零错误 |
| 新工具 = 又一个套壳产品 | 这三件分别卡进「存量代码、工程化、可视化」三个真场景 |
npm create mastra@latest 建一个带工具调用的 Agent，在 localhost:4111 的 Playground 里观察它的每一步决策；注：本文三件工具均以官方站点与开源仓库信息为准；受限于截稿条件，价格、版本与星标数请以官网实时数据为准。
本文由「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 等场景全覆盖。