分类： 电脑软件

在现代前端开发中，React + Tailwind 的组合已经成为许多开发者的首选。然而，传统的开发流程往往需要反复编写代码、编译、刷新浏览器才能看到效果，开发效率受到限制。今天为大家介绍一款能够改变这一现状的工具——Onlook。

工具介绍

Onlook 是一款专为 React + Tailwind 项目设计的视觉化前端开发工具。它允许开发者在浏览器中直接编辑运行中的 UI 界面，实时查看更改效果。Onlook 集成了多种实用功能，包括 AI 助手、代码版本控制、Figma 导入、模板生成等，旨在提升开发效率和用户体验。

无论是快速迭代开发、团队协作还是设计与开发的无缝衔接，Onlook 都能显著提升开发效率，是 React 开发者不可多得的利器。

产品特点

• 🖼️ 视觉化编辑：在浏览器中直接编辑运行中的 UI 界面，实时查看更改效果，减少传统开发中的反复编译和刷新步骤。
• 🤖 AI 助手集成：内置 AI 助手，提供智能代码补全、样式建议和最佳实践推荐，帮助开发者快速迭代和优化界面。
• 📜 代码版本控制：集成代码版本控制系统，方便团队协作和代码管理，确保开发过程可追溯。
• 🎨 Figma 导入：支持从 Figma 导入设计稿，实现设计与开发的无缝对接，提高设计稿到代码的转换效率。
• 📋 模板生成：提供多种预设的模板和组件库，帮助开发者快速搭建项目基础结构，减少重复工作。
• 🔒 本地优先运行：支持本地优先运行模式，无需上传代码到云端，保障隐私和数据安全，同时支持离线开发。

使用场景

安装和使用

用户可以访问 onlook.dev 下载应用，并按照指南在本地运行。

Onlook 可以运行在任何 React 项目上，用户可以自带 React 项目或使用 Onlook 创建一个新项目。

工具地址

🌐 网站：https://onlook.dev/

📦 GitHub：https://github.com/onlook-dev/onlook

工具介绍

Wiseflow 首席情报官是一款高效的 AI 信息挖掘工具，通过整合爬虫技术与轻量化 LLM（7B~9B）模型，能够从网站、微信公众号、社交平台等多种信息源中提炼有价值的讯息，自动进行标签分类并存储于 Pocketbase 数据库中，支持本地化与私有化部署。不同于传统爬虫工具、AI 搜索或知识库项目，Wiseflow 专注于持续性的信息采集与自动化关联追踪，适配大部分新闻页面，依托异步任务架构和 GNE 解析技术，实现低系统开销、高兼容性的应用场景，为用户节省时间、过滤冗余信息并整理关注重点，自 2024 年 V0.3.0 发布后在开源社区备受关注。

如何使用

1. 克隆代码仓库

git clone https://github.com/TeamWiseFlow/wiseflow.git
cd wiseflow

2. 推荐使用docker运行

中国区用户使用前请合理配置网络，或者指定docker hub镜像

docker compose up

注意：

• 在wiseflow代码仓根目录下运行上述命令；
• 运行前先创建并编辑.env文件放置在Dockerfile同级目录（wiseflow代码仓根目录），.env文件可以参考env_sample
• 第一次运行docker container时会遇到报错，这其实是正常现象，因为你尚未为pb仓库创建admin账号。

此时请保持container不关闭状态，浏览器打开http://127.0.0.1:8090/_/ ，按提示创建admin账号（一定要使用邮箱），然后将创建的admin邮箱（再次强调，一定要用邮箱）和密码填入.env文件，重启container即可。

如您想更改container的时区和语言，请仿照如下命令运行image

docker run -e LANG=zh_CN.UTF-8 -e LC_CTYPE=zh_CN.UTF-8 your_image

工具地址

GitHub：

https://github.com/TeamWiseFlow/wiseflow