在当下的 Web 开发领域，设计与代码的融合正成为一股不可阻挡的潮流。Onlook 作为一款专为设计师打造的开源代码编辑器，凭借“视觉优先 + AI 驱动”的独特理念，为设计师们带来了前所未有的创作体验。它巧妙地将 Next.js 与 Tailwind CSS 技术栈相融合，让设计师能够在可视化界面中直接进行代码设计，实现了从创意构思到代码实现的无缝衔接。
核心功能：开启可视化开发新纪元
Onlook 之所以能在众多开发工具中脱颖而出，关键在于其强大的核心功能。在创建应用方面，它为设计师提供了多种便捷的启动方式。无论是从一段文本描述、一张图片开始，还是利用预制模板快速搭建框架，亦或是从 Figma 导入设计稿，甚至从 GitHub 仓库直接获取项目，Onlook 都能轻松应对，让项目启动不再繁琐。
可视化编辑功能更是 Onlook 的一大亮点。它采用类 Figma 的界面设计，让设计师倍感亲切。在这个界面中，设计师可以实时预览应用效果，轻松管理品牌资产和设计令牌。不仅如此，还能方便地创建和导航至不同页面，浏览图层结构，检测和使用组件，以及管理项目图片，这些功能极大地提升了设计效率。
在开发工具方面，Onlook 配备了实时代码编辑器，支持保存和恢复检查点，还能通过 CLI 运行命令，连接应用市场，实现本地编辑代码等操作，为开发过程提供了全方位的支持。
而秒速部署应用功能则让设计师能够快速将作品分享出去。生成可分享链接，绑定自定义域名，让设计成果的展示变得轻而易举。
团队协作方面，Onlook 支持实时协同编辑和添加评论，让团队成员之间的沟通与合作更加高效。
技术架构：强大支撑下的高效运行
Onlook 的出色表现离不开其先进的技术架构。在前端层面，它采用了 Next.js 全栈框架，搭配 Tailwind CSS 进行样式设计，通过 tRPC 构建服务接口，为前端开发提供了强大的技术支撑。
数据库方面，选用 Supabase 来处理认证、数据库和存储相关事务，结合 Drizzle 作为 ORM，确保了数据的高效管理和存储。
AI 模块是 Onlook 的智能核心，它集成了 AI SDK 作为大语言模型客户端，Anthropic 作为大语言模型提供商，同时还有 Morph Fast Apply 和 Relace 作为快速应用模型提供商，让 AI 能够更好地辅助设计师进行创作。
沙盒与托管部分，借助 CodeSandbox SDK 作为开发沙盒，Freestyle 提供托管服务，保证了应用在开发和部署过程中的稳定性和可靠性。
运行时则采用 Bun 作为单体仓库、运行时和打包工具，结合 Docker 进行容器管理，确保了整个系统的高效运行。
这种架构设计具有很强的可扩展性，理论上能够支持任何声明式显示 DOM 元素的语言或框架，目前 Onlook 主要专注于对 Next.js 和 Tailwind CSS 的优化实现。
实际应用：从构思到落地的完美呈现
让我们以创建一个旅游网站为例，来看看 Onlook 的实际应用过程。假设我们要为某个地区的旅游探险项目搭建网站，设计师可以先从一段简单的文本描述入手，告诉 Onlook 我们的需求。Onlook 会基于此，快速生成网站的基础框架和地图组件。
在可视化编辑界面中，设计师可以像在 Figma 中一样，对页面进行拖拽、调整样式等操作。通过 Onlook 的编辑器工具栏，能够轻松调整 Tailwind 样式，直接操作对象，实验不同的布局效果。比如为旅游景点添加图片背景，调整文字的字体、大小和颜色，设置按钮的样式和交互效果等。
在这个过程中，Onlook 的 AI 聊天功能发挥着重要作用。设计师可以随时与界面元素进行“对话”，详细描述自己的需求，AI 会根据这些描述智能地生成或修改代码。同时，设计师还可以右键点击元素，在代码中精确定位该元素，实现可视化编辑与代码编辑的无缝切换。
当设计完成后，利用 Onlook 的秒速部署功能，生成可分享链接或绑定自定义域名，一个精美的旅游网站就可以正式上线了。
开源生态：邀你共同打造卓越工具
目前，Onlook Web 版仍处于积极开发阶段，团队正在努力将其打造成更出色的“提示到构建”体验工具。如果你对前端开发、设计工具优化等方面充满热情，欢迎加入 Onlook 的开源生态贡献队伍。
你可以通过 GitHub 仓库获取代码，查看待解决问题列表，了解完整的功能提案。无论是发现并修复 bug，提出新的功能建议，还是优化现有代码和文档，每一份贡献都将推动 Onlook 不断进步。
参与贡献的方式非常简单，你可以 fork 仓库并提交 pull request，也可以直接提交问题。详细的贡献规范和操作指南可以在 CONTRIBUTING.md 中查阅。
Onlook 基于 Apache 2.0 许可证分发，这意味着你可以自由地使用、修改和分发它，同时也鼓励你为这个开源项目贡献自己的力量。
结语
Onlook 凭借其独特的设计理念和强大的功能，正在重新定义设计师与代码之间的关系。它打破了传统设计与开发之间的壁垒，让设计师能够更加直观地参与到代码创作过程中，极大地提升了工作效率和创作自由度。
如果你是一名设计师，渴望更高效地将创意转化为代码；如果你是一名开发者，希望探索更便捷的 Web 开发方式；或者你对开源项目充满热情，想要为优秀工具的发展贡献力量，那么 Onlook 绝对是一个值得你关注和尝试的项目。
如果你对AI应用、副业搞钱、技术交流、求职招聘、软件创意感兴趣，欢迎加入架构师部落群。
如需进群请备注加群，目前群聊人数过多，广告党勿入！