尧图网站建设 
Onlook 可视化编辑器上手实战3 步本地跑起来点着页面改 React 代码【免费下载链接】onlookThe Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI项目地址: https://gitcode.com/GitHub_Trending/on/onlook改个圆角要翻三层组件找 classNameOnlook 是开源的可视化 React 编辑器在真实运行的页面里点元素、拖布局、调 Tailwind 样式代码实时同步还能用 AI 对话直接生成组件。它面向 Next.js TailwindCSS 项目。下面先本地跑起来再拆三个最实用的功能。Onlook 本地部署装依赖、起后端、配 key先备齐三样Bun、Docker跑 Supabase 后端用、Node v20.16.0 以上避开 v20.11.0。第一步克隆仓库装依赖git clone https://gitcode.com/GitHub_Trending/on/onlook cd onlook bun install第二步启动本地 Supabase 后端Docker 要先开着bun backend:start输出里的 anon key 和 service role key 记一下下一步要用。第三步配 key、建表、启动。OpenRouter key 管 AI 对话CodeSandbox key 管预览容器Morph 或 Relace 二选一用来加速 AI 改代码。变量清单对着模板填.env.example。bun run setup:env bun db:push bun db:seed bun dev打开 http://localhost:3000 就进编辑器了 ✅。不想本地跑也可以直接上容器配好 .env 后在根目录跑docker compose up -d容器用 host 网络连本地 Supabase对外映射 3000 端口。用 code connect 从界面元素一键跳到源码Onlook 的核心是所见即所得代码在 Web 容器里真实运行编辑器用 iFrame 显示预览并给页面打标把每个 DOM 元素映射回代码位置。实操就一个动作在预览里右键任意元素代码面板直接定位到那一行。改样式、换文案预览里先生效代码里同步更新。这比大多数设计稿转代码工具都直接因为它操作的就是你正在维护的代码本身。用工具栏可视化调 Tailwind 样式选中元素后顶部工具栏就是 Tailwind 控制面板颜色、间距、字体、布局直接点选。还能在父容器里画出新的 div拖拽重排兄弟元素在图层面板里浏览和跳转结构开分支试不同设计不满意直接丢掉这套交互很像 Figma区别是产物不是切图是能跑的 Next.js 代码。用 AI 对话生成组件、用分支试错设计从文字描述、图片或模板起步AI 聊天框支持一次排多条消息。生成的组件同样支持右键跳代码、可视化微调。改坏了也不怕分支相当于设计稿的 git来回切换、对比、回退。Onlook 新手最常踩的 3 个坑预览卡住时的确认页长这样现象原因一行解法预览卡在确认页出不来CodeSandbox 预览默认要手动确认切到 Preview 模式点 Yes, proceed to preview再切回编辑刷新后掉登录态Node 版本太旧或正好是 v20.11.0升到 v20.16.0重装依赖重启界面报 Column not found数据库和 schema 不同步跑bun db:push冲突就bun db:reset重来 ⚠️提醒一句db:reset会清空全部数据本地玩无所谓有存档先备份。更多问题对着仓库排错文档查troubleshooting.mdx。接下来看哪里部署选项单机、Docker Compose、云部署见docs/content/docs/self-hosting/以仓库最新文档为准跑通后拿一个 Next.js Tailwind 项目练手导入项目、右键改样式、让 AI 加个组件半天就能建立手感【免费下载链接】onlookThe Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI项目地址: https://gitcode.com/GitHub_Trending/on/onlook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Onlook 可视化编辑器上手实战：3 步本地跑起来，点着页面改 React 代码
Onlook 可视化编辑器上手实战3 步本地跑起来点着页面改 React 代码【免费下载链接】onlookThe Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI项目地址: https://gitcode.com/GitHub_Trending/on/onlook改个圆角要翻三层组件找 classNameOnlook 是开源的可视化 React 编辑器在真实运行的页面里点元素、拖布局、调 Tailwind 样式代码实时同步还能用 AI 对话直接生成组件。它面向 Next.js TailwindCSS 项目。下面先本地跑起来再拆三个最实用的功能。Onlook 本地部署装依赖、起后端、配 key先备齐三样Bun、Docker跑 Supabase 后端用、Node v20.16.0 以上避开 v20.11.0。第一步克隆仓库装依赖git clone https://gitcode.com/GitHub_Trending/on/onlook cd onlook bun install第二步启动本地 Supabase 后端Docker 要先开着bun backend:start输出里的 anon key 和 service role key 记一下下一步要用。第三步配 key、建表、启动。OpenRouter key 管 AI 对话CodeSandbox key 管预览容器Morph 或 Relace 二选一用来加速 AI 改代码。变量清单对着模板填.env.example。bun run setup:env bun db:push bun db:seed bun dev打开 http://localhost:3000 就进编辑器了 ✅。不想本地跑也可以直接上容器配好 .env 后在根目录跑docker compose up -d容器用 host 网络连本地 Supabase对外映射 3000 端口。用 code connect 从界面元素一键跳到源码Onlook 的核心是所见即所得代码在 Web 容器里真实运行编辑器用 iFrame 显示预览并给页面打标把每个 DOM 元素映射回代码位置。实操就一个动作在预览里右键任意元素代码面板直接定位到那一行。改样式、换文案预览里先生效代码里同步更新。这比大多数设计稿转代码工具都直接因为它操作的就是你正在维护的代码本身。用工具栏可视化调 Tailwind 样式选中元素后顶部工具栏就是 Tailwind 控制面板颜色、间距、字体、布局直接点选。还能在父容器里画出新的 div拖拽重排兄弟元素在图层面板里浏览和跳转结构开分支试不同设计不满意直接丢掉这套交互很像 Figma区别是产物不是切图是能跑的 Next.js 代码。用 AI 对话生成组件、用分支试错设计从文字描述、图片或模板起步AI 聊天框支持一次排多条消息。生成的组件同样支持右键跳代码、可视化微调。改坏了也不怕分支相当于设计稿的 git来回切换、对比、回退。Onlook 新手最常踩的 3 个坑预览卡住时的确认页长这样现象原因一行解法预览卡在确认页出不来CodeSandbox 预览默认要手动确认切到 Preview 模式点 Yes, proceed to preview再切回编辑刷新后掉登录态Node 版本太旧或正好是 v20.11.0升到 v20.16.0重装依赖重启界面报 Column not found数据库和 schema 不同步跑bun db:push冲突就bun db:reset重来 ⚠️提醒一句db:reset会清空全部数据本地玩无所谓有存档先备份。更多问题对着仓库排错文档查troubleshooting.mdx。接下来看哪里部署选项单机、Docker Compose、云部署见docs/content/docs/self-hosting/以仓库最新文档为准跑通后拿一个 Next.js Tailwind 项目练手导入项目、右键改样式、让 AI 加个组件半天就能建立手感【免费下载链接】onlookThe Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI项目地址: https://gitcode.com/GitHub_Trending/on/onlook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考