Onlook 是什么？
Onlook 是一款面向现代前端工作流的开源可视化协作平台，专为 React 技术栈深度定制。它打破了传统设计与开发之间的壁垒，让设计师能在真实运行的 React 应用界面中直接拖拽、调整样式、修改组件属性，并即时预览效果；所有交互式变更会智能解析为符合工程规范的 JSX 与 Tailwind CSS 代码，自动生成可审查、可合并的代码补丁，无缝同步至 Git 仓库。Unlike cloud-based design tools, Onlook runs entirely in your local development environment—no data leaves your machine, no sign-up required,零配置即插即用。它不是替代 Figma 的画布工具，而是连接设计意图与生产代码的“实时翻译引擎”，尤其适配已采用组件化架构与原子化 CSS（如 Tailwind）的团队。
核心能力亮点
- 所见即所得的运行时编辑：在真实浏览器环境中操作正在运行的 React 页面，支持动态 props 修改、状态模拟与响应式断点调试。
- 双向代码映射：每一次视觉调整都对应可追溯的代码变更，支持 Diff 预览、手动校验与一键提交，保障代码质量与可维护性。
- 隐私优先的本地执行：全部逻辑在本地 Node.js 进程中完成，不依赖远程服务，敏感 UI 和业务逻辑始终受控于团队自身。
- 渐进式框架兼容：首发深度支持 React 18+ 与 Tailwind CSS v3/v4，内置智能类名推导与主题变量识别；Next.js、Vite 等主流构建工具开箱即用。
- 设计系统友好架构：自动识别项目中的 Design Token、Component Library（如 Radix UI、shadcn/ui）及自定义 Hook，确保视觉修改严格遵循现有设计约束。
- 轻量集成体验：仅需一条 CLI 命令即可注入开发服务器，无需修改源码或引入 SDK，热重载全程无感，开发流程零中断。
典型落地场景
从初创团队快速验证 UI 方案，到大型组织统一设计语言治理，Onlook 覆盖全生命周期协作需求：高效产出高保真可交互原型；实现设计稿→组件代码的秒级转化；集中管理跨项目共享组件库；支撑 Design Ops 流程自动化——让每一次像素级优化，都成为可版本化、可复用、可审计的工程资产。
官网：onlook.com｜GitHub：github.com/onlook-dev/onlook
