输入关键词搜索 AI 工具、分类,或直接跳转页面
WindChat是一款配合ChatGPT使用的Chrome浏览器扩展工具,核心定位是帮助开发者在ChatGPT对话界面直接预览AI生成的Tailwind CSS HTML代码效果,无需切换到本地编辑器或在线预览平台。核心功能包括HTML代码实时预览、Tailwind样式即时渲染、代码一键导出、本地代码编辑修改、多标签预览管理。目标用户为前端开发从业者、Tailwind CSS学习者、AI开发爱好者,适合在借助ChatGPT生成前端代码片段、快速验证样式效果、调试简单页面布局的场景下使用。
首先打开Chrome浏览器,进入Chrome应用商店搜索WindChat扩展,点击添加到浏览器,完成扩展的安装,安装后确认扩展图标出现在浏览器工具栏。
打开ChatGPT网页版,登录自己的ChatGPT账号,进入对话页面,向ChatGPT发送需求,请求生成包含Tailwind CSS的HTML页面代码。
等待ChatGPT生成代码后,找到对话中的HTML代码块,代码块右上角会出现WindChat的预览按钮,点击按钮即可唤起侧边预览窗口。
在预览窗口查看渲染效果,如果需要调整,可直接在预览窗口的编辑区域修改代码,修改后点击刷新按钮重新渲染查看新效果。
确认效果符合需求后,点击预览窗口的导出按钮,可将代码保存到本地,或点击复制按钮复制完整代码,粘贴到自己的项目中使用。
看完教程,直接上手试试
访问 WindChat 官网