正在加载页面内容，请稍候。
正在加载页面，请稍候。
AI-GJ / TOOL PROFILE
Onlook（onlook.dev / onlook.com）是全球开源社区享誉盛名的下一代浏览器端可视化 UI 编辑与代码双向同步工具。它被誉为‘专为 React 和 Tailwind CSS 量身定制的浏览器版 Figma’。Onlook 彻底打破了设计师与前端开发之间的沟通壁垒。开发者只需在本地启动项目，直接在运行中的真实 Web 页面上点击选中任何 UI 组件，像在设计软件中一样直观拖拽修改间距、文字、颜色与排版，Onlook 会毫秒级将修改反向写入本地 React / Next.js 源代码，实现真正的‘所见即所得，改动即代码’。 🎯 核心痛点与需求洞察 (Pain Points) 在平面设计、UI/UX 原型构建、商业营销物料排版与 3D 视觉渲染过程中，设计师与创作者普遍面临以下严峻挑战： 设计师在 Figma 中交付设计稿后：设计师在 Figma 中交付设计稿后，前端工程师手动微调 Tailwind CSS 类名与间距像素极其繁琐耗时。 在浏览器开发者工具（F12）中调试好的 CSS 样式：在浏览器开发者工具（F12）中调试好的 CSS 样式，刷新页面后全部丢失，需要手动一行行复制回代码中。 设计师无法直接在运行中的真实 Web 产品上直接上手调整视觉细节。：设计师无法直接在运行中的真实 Web 产品上直接上手调整视觉细节。 缺乏真正支持将可视化 UI 操作直接无损反写回本地 React / TypeScript 源码的现代化工具。：缺乏真正支持将可视化 UI 操作直接无损反写回本地 React / TypeScript 源码的现代化工具。 💡 核心功能与亮点剖析 (Core Features) 真实运行 Web 页面可视化无损点击编辑 (Visual Canvas) 无需查看代码，直接在浏览器中点击任何按钮、卡片或文本，在右侧属性面板中像用 Figma 一样直观修改样式。 Tailwind CSS 类名毫秒级全自动生成与本地代码反向同步 (Code Sync) 在界面上拖拽调整 padding 或颜色，Onlook 毫秒级将对应的 Tailwind 类名准确无误写入本地 .tsx 源码中。 深度支持 React / Next.js 组件树结构智能解析 精准识别多层嵌套的 React 组件与属性传递，支持在可视化界面中直接插入新组件或调整组件层级结构。 完全开源私有化运行与极轻量无侵入接入 代码遵循宽松开源协议，完全在开发者本地运行，零云端数据泄露隐患，接入极其简单轻巧。 🖥️ 核心架构与业务执行流程 (Architecture & Workflow) 架构与逻辑流程图 (Mermaid) SVG 矢量可视化 graph TD A["在本地启动 Next.js / React 项目并启动 Onlook 插件"] --> B["在浏览器中直接点击网页上的任何真实 UI 元素"] B --> C["在右侧属性面板中像用 Figma 一样可视化修改颜色/间距与文字"] C --> D["Onlook 编译引擎自动推导生成最优 Tailwind CSS 类名"] D --> E["毫秒级将样式改动反向写回本地的 .tsx / .jsx 源代码文件"] E --> F["保存代码，Git 自动追踪修改记录并直接提交上线"] 🛠️ 常用快捷键与高效使用指南 (Shortcuts & Usage) 快捷键 / 常用功能 功能名称 使用场景说明 点击选中元素 可视化样式调节 在网页上直接点击任何按钮或卡片调节 CSS Ctrl + S 同步回源代码 一键将可视化界面的修改直接写入本地 React 文件 切换代码视图 查看生成类名 实时查看 Onlook 自动生成的 Tailwind CSS 类名 ⚙️ 进阶使用技巧 (Pro Tips) [!TIP] 最佳实战与提效秘籍 在给产品做上线前的像素级走查（UI Polish）时，让设计师打开 Onlook 直接在跑起来的网站上调字号和间距，设计师改完直接按保存，前端工程师一行代码都不用改就搞定了 UI 还原！
Onlook 是一款专注于 AI设计工具 领域的智能 AI 工具。Onlook（onlook.dev / onlook.com）是全球开源社区享誉盛名的下一代浏览器端可视化 UI 编辑与代码双向同步工具。它被誉为‘专为 React 和 Tailwind CSS 量身定制的浏览器版 Figma’。Onlook 彻底打破了设计师与前端开发之间的沟通壁垒。开发者只需在本地启动项目，直接在运。可有效提升创作者、开发者与职场办公人员的任务处理效率与智能化水平。
绝对不会！Onlook 采用 AST（抽象语法树）精准修改对应的 Tailwind 类名与 JSX 节点，严格保留现有的代码格式与注释。
是的！Onlook 在 GitHub 上完全开源，允许全球开发者免费商用与本地运行。
深度原生支持 React, Next.js 以及 Tailwind CSS 样式体系。
来自实际使用者的体验反馈
成为第一个为「Onlook」留下真实体验评测的用户吧！
资讯概览 本篇资讯源自 The Verge AI，报道了关于 PC 游戏中最大的模组网站正在对人工智能采取立场（英文原文：The biggest modding site in PC gaming is taking a stance on AI）的最新国外
资讯概览 本篇资讯源自 The Verge AI，报道了关于 请不要再问我人工智能泡沫何时破灭（英文原文：Please stop asking me when the AI bubble will pop）的最新国外 AI 科技动态。 媒体来源：The Ve
资讯概览 本篇资讯源自 TechCrunch，报道了关于 Anthropic 正在开发一个系统来证明人工智能模型的身份（英文原文：Anthropic is working on a system to prove AI models’ identity）的最新
资讯概览 本篇资讯源自 TechCrunch，报道了关于 随着电力等待时间的增加，数据中心正在转向旧的喷气发动机（英文原文：Data centers are turning to old jet engines as the wait for power gr
GstarRender AI 是国内知名工业软件上市公司浩辰软件（GstarCAD）首发推出的新一代 AI 辅助设计与效果图智能渲染系统。系统深度打通浩辰 CAD 等专业工程制图环境，支持直接将二维平面线稿、建筑方案草图与三维白模，在数秒内智能渲染为具备专业级光影质感、真实材质肌理与丰富环境绿化的超
妙呀（Miaoya AI）是专为年轻父母、幼教老师与少儿出版创作者量身打造的新一代 AI 儿童互动绘本与寓教启蒙故事生成平台。平台融合儿童心理学发展阶段特征，支持将日常亲子日常、益智科普命题或睡前一句话奇思妙想，一键转化为包含“童趣画风精美插画、温暖拟真儿童配音、角色面貌前后统一与互动探险选择”的精
Fabrie AI: 专为工业设计、硬件创作者与设计团队打造的无限白板协同与 AI 渲染工作台 Fabrie AI（fabrie.com）是由前知名工业设计与互联网先锋团队倾力打造的专为工业设计师、产品经理、空间设计师与硬件团队设计的无限协同白板与 AI 创意工作台。它在业内独创了将“全景无限
Pictographic: 专为现代 Web 开发、产品设计与品牌插画打造的 AI 矢量插画与图标生成平台 Pictographic（pictographic.io）是一款专注于“高质量矢量插画（Vector Illustrations）、3D 风格图标与现代数字产品视觉资产生成”的专业级 A
笔格设计 (Bige Design): 专为创意海报、电商美工与社交媒体爆款视觉打造的 AI 灵感排版平台 笔格设计（bigesj.com）是一款专注于“电商视觉美工、商业促销海报与社交媒体爆款图文极速设计”的现代化 AI 在线设计平台。它专为中小企业、电商运营人员、新媒体博主与自由设计师量身
Fable Prism (Fable): 专为现代 Web 动效、矢量动画与动态图形（Motion Design）打造的 AI 动画设计平台 Fable Prism（fable.app/prism）是由全球知名在线动效设计协同平台“Fable”官方倾力打造的专为 UI 动效设计师、品牌创作者与
Kittl: 全球领先的 AI 潮流图形设计平台、复杂矢量艺术字排版与 T 恤周边设计中枢 Kittl（kittl.com）是全球平面设计与潮流服饰界享誉盛名的 AI 矢量图形设计与复杂排版平台。它以极其震撼的“高级矢量文本形变（Text Effects）、复古复古插画引擎与潮流周边设计”著称
Onlook（onlook.dev / onlook.com）是全球开源社区享誉盛名的下一代浏览器端可视化 UI 编辑与代码双向同步工具。它被誉为‘专为 React 和 Tailwind CSS 量身定制的浏览器版 Figma’。Onlook 彻底打破了设计师与前端开发之间的沟通壁垒。开发者只需在本地启动项目，直接在运行中的真实 Web 页面上点击选中任何 UI 组件，像在设计软件中一样直观拖拽修改间距、文字、颜色与排版，Onlook 会毫秒级将修改反向写入本地 React / Next.js 源代码，实现真正的‘所见即所得，改动即代码’。
在平面设计、UI/UX 原型构建、商业营销物料排版与 3D 视觉渲染过程中，设计师与创作者普遍面临以下严峻挑战：
真实运行 Web 页面可视化无损点击编辑 (Visual Canvas) 无需查看代码，直接在浏览器中点击任何按钮、卡片或文本，在右侧属性面板中像用 Figma 一样直观修改样式。
Tailwind CSS 类名毫秒级全自动生成与本地代码反向同步 (Code Sync)
在界面上拖拽调整 padding 或颜色，Onlook 毫秒级将对应的 Tailwind 类名准确无误写入本地 .tsx 源码中。
深度支持 React / Next.js 组件树结构智能解析 精准识别多层嵌套的 React 组件与属性传递，支持在可视化界面中直接插入新组件或调整组件层级结构。
完全开源私有化运行与极轻量无侵入接入 代码遵循宽松开源协议，完全在开发者本地运行，零云端数据泄露隐患，接入极其简单轻巧。
| 快捷键 / 常用功能 | 功能名称 | 使用场景说明 |
|---|---|---|
点击选中元素 |
可视化样式调节 | 在网页上直接点击任何按钮或卡片调节 CSS |
Ctrl + S |
同步回源代码 | 一键将可视化界面的修改直接写入本地 React 文件 |
切换代码视图 |
查看生成类名 | 实时查看 Onlook 自动生成的 Tailwind CSS 类名 |
[!TIP] 最佳实战与提效秘籍 在给产品做上线前的像素级走查（UI Polish）时，让设计师打开 Onlook 直接在跑起来的网站上调字号和间距，设计师改完直接按保存，前端工程师一行代码都不用改就搞定了 UI 还原！
