做产品的人都知道一个尴尬现状：文字稿写完，配图靠截图，图标靠素材站，界面靠程序员一句句改代码。海外这一波新工具，把“视觉”这件事从生成变成了可编辑、可带走、可上线。这三件货中文圈几乎没人写过，但每一个都能直接塞进你的工作流。

一、Onlook：在真界面上拖拽，改动写回代码

官网：https://onlook.com ｜ 开源仓库：https://github.com/onlook-dev/onlook

Onlook 的官方定位是 "The Cursor for Designers"。它做的事情听起来有点反直觉：把你的 React/Next.js 项目跑起来，设计师直接在真实运行的界面上点选元素、拖拽布局、调颜色和间距，而 Onlook 把这些操作翻译成 Tailwind 样式代码，写回你的代码库。

操作路径很短：

1. 桌面端打开 Onlook，指向你本地的 React 项目（Vite、Next.js 都支持）；
2. 项目在 Onlook 里实时渲染，点击任何元素就能看到对应的组件和样式；
3. 直接拖拽调整，改动以代码 diff 形式同步回源文件；
4. 程序员 review 后正常提交，流程完全不变。

价格：核心开源免费，桌面端自助使用，个别云能力收费（以官网为准）。

为什么值得关注：国内设计师和前端的日常是“设计稿标注→前端还原→来回改”，MasterGo、Figma 解决的是设计稿协作，但设计稿和代码永远是两个世界。Onlook 把“画布”直接换成了运行中的应用，改完就是真代码，没有还原度问题。对独立开发者更狠：不会写 CSS 也能把自己的项目界面调出高级感。

适用人群：需要和设计师协作的前端工程师、想自己动手改 UI 的独立开发者、做外包交付的小团队。

二、Napkin AI：一段文字，直出可编辑信息图

官网：https://www.napkin.ai

写方案、写公众号的人都有这个痛点：逻辑想清楚了，图不会画。Napkin 的玩法是把一段文字粘进去，它自动理解内容结构，生成对应的流程图、对比图、步骤图、数据示意图——关键是生成的每一个元素都可以编辑：换图标、改配色、调布局、改字体，改完导出 PNG 或 SVG 直接进文档。

操作就三步：

1. 把你的段落（比如“我们的产品分三步解决库存问题……”）粘贴进编辑器；
2. Napkin 给出多个视觉方案，点选一个；
3. 在画布上微调细节，导出用进 PPT、文档或网页。

价格：免费档对个人日常量基本够用，Pro 订阅解锁更多生成额度（具体价格以官网为准）。

为什么值得关注：国内做配图的主流路径还是 PPT 模板站、截图加箭头，或者让文生图模型抽卡——抽出来的图好看但信息不对，改不了字。Napkin 走的是完全另一条路：它不生成“像素”，它生成“结构”。中文用户对这类“文字到示意图”工具的认知还停留在 mermaid 代码层面，Napkin 把这个体验做成了所见即所得。

适用人群：技术方案撰写者、公众号作者、做融资 BP 的创业者、要给老板汇报的任何人。

三、Recraft：出矢量图、认品牌色的生图工具

官网：https://www.recraft.ai

大部分人生图只认识 Midjourney，但 Midjourney 有个致命短板：出不了矢量，也认不住品牌风格。Recraft 补的就是这两刀——它能直接生成 SVG 矢量图（图标、插画、logo 草案），放大不改形；还支持你设定品牌色板和风格参考，让整套素材（图标、插画、海报）风格一致。

据 Hugging Face 文生图竞技场 2025 年初的榜单，Recraft 的模型曾登顶该榜，力压一众通用大厂的模型——它在“设计感”这个维度是公认能打的，不只是个功能噱头。

操作路径：

1. 在风格区设定品牌色板，或上传参考图锁定风格；
2. 用文字描述生成图标或插画，选择输出位图或矢量；
3. 生成结果进入内置编辑器，矢量节点可继续手动微调；
4. 整套素材按同一风格批量产出，导出 SVG/PNG 进项目。

价格：免费档每日有限额度，Pro 订阅制解锁更多额度与高级能力（具体价格以官网为准）。

为什么值得关注：国内的即梦、可灵强在照片感写实和视频，但“能放大、能改色、风格统一”的矢量素材这个细分场景，海外工具仍然是独一档。做网站、做 App、做品牌的小团队，一套风格一致的素材能省下真金白银的外包费。

适用人群：需要成套图标的开发者、没有专职设计师的创业团队、做出海产品的运营。

三件货串起来，是一条完整的视觉流水线

flowchart TD
    W["一段产品文字稿"] --> N["Napkin 转信息图"]
    W --> R["Recraft 出品牌素材"]
    N --> E["导出SVG与PNG"]
    R --> F["图标插画成套"]
    E --> L["Onlook 改真界面"]
    F --> L
    L --> S["写回代码上线"]

注意这条流水线的共同点：每一环的产物都是你的资产——矢量文件、可编辑画布、你仓库里的代码。没有任何一环把你锁在平台里。

信息差总结

行动指南

周末半天就能跑通：

1. 第一步（10分钟）：打开 napkin.ai，把你最近写的一段方案粘贴进去，体验一次“文字变图”，导出一张 SVG；
2. 第二步（30分钟）：注册 recraft.ai，设定你的品牌主色，生成一套 5 个风格统一的图标，用在你的项目里；
3. 第三步（2小时）：clone Onlook 仓库或下载桌面端，指向你自己的 React 项目，试着把首页 hero 区拖成你想要的样子，看代码 diff；
4. 进阶：把三件货按上面的流水线串起来，给下一个项目做一套“从文案到上线”的完整视觉交付。

参考来源

1. Onlook 官网：https://onlook.com
2. Onlook 开源仓库：https://github.com/onlook-dev/onlook
3. Napkin AI 官网：https://www.napkin.ai
4. Recraft 官网：https://www.recraft.ai

注：文中价格与免费额度随厂商政策变动较快，动手前以各官网当前页面为准。

本文由「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 等场景全覆盖。