用自然语言描述需求即可自动生成纯前端在线工具网站，支持Markdown预览、JSON校验、Base64编解码三大功能，单HTML文件本地运行，三步部署上线。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用自然语言描述一个在线工具网站的需求，就能自动生成可运行、可部署的完整网站，全程无需安装环境、不写代码、不配置服务器。
明确工具网站的核心功能与边界
打开任意浏览器，访问 Google AI Studio，点击左上角“Build”进入项目创建页。这一步不能跳过，否则AI会把计算器、单位换算、文本处理等不同类工具混在一起生成，最终页面逻辑混乱、按钮互相覆盖。
在输入框中写下结构化提示词，例如：“我要做一个纯前端的在线工具网站，只包含三个独立工具：① Markdown实时预览器（左侧输入，右侧渲染）；② JSON格式化与校验器（支持粘贴和拖入文件）；③ Base64编解码器（双向转换，带复制按钮）。所有工具之间用顶部导航栏切换，不联网、不存数据、不调用任何后端API。”
【必须写明‘纯前端’和‘不调用后端API’】——否则AI默认加入Supabase或Firebase连接代码，导致本地无法直接运行，部署时还会因缺少密钥报错。
生成并验证初始页面
点击“Generate”，等待30～90秒，AI会输出一个含HTML、CSS、JS的单文件网页。不要急着下载，先点右上角“Preview”按钮在浏览器中打开预览。
重点测试三项：导航栏能否点击切换、每个工具区域是否独立响应、JSON粘贴后是否立刻高亮错误。若某工具无反应，直接在预览页右下角对话框输入：“JSON校验器不解析内容，请检查script标签里是否有addEventListener监听textarea的input事件”——AI会立即定位并修复。
这一步操作起来很简单，直接把文件拖进去就行。
在克隆的 Git 仓库中驱动完整的规格驱动开发生命周期（init→需求→架构→流程设计→项目计划→编码→测试→缺陷修复→代码审查→发布）。阶段门控、产物强制输出、多语言支持，内置提交机制。
注入交互细节与容错逻辑
方法一：用自然语言精准标注修改位置
在AI Studio左侧编辑区，将光标放在Markdown预览器对应的代码块开头，输入：“在预览区下方加一行小字：‘支持GitHub Flavored Markdown，表格、代码块、任务列表均可用’，字号12px，颜色#666”。AI会仅修改该区域，不碰其他工具逻辑。
方法二：用画笔圈选+文字指令
点击预览页右下角“Annotate”图标，用方框圈住Base64解码结果的输出框，在弹出的输入框中写：“这个框需要加一个‘复制结果’按钮，点击后把内容写入剪贴板，并显示1秒‘已复制’提示”。AI会自动注入navigator.clipboard.writeText()调用及CSS动画。
注意：不要说“让所有按钮都变圆角”，AI会全局替换border-radius，可能破坏JSON格式化器的代码块边框样式。
导出与本地运行验证
第一步：点击左上角“Export”→选择“Download as HTML”→保存为toolhub.html。
第二步：双击该文件，用Chrome或Edge直接打开（Safari对Clipboard API支持不稳定）。
第三步：打开浏览器开发者工具（F12），切换到Console标签页，确认没有任何红色报错信息。
第四步：手动测试边界场景：向JSON输入框粘贴超长字符串、清空Base64输入框后点击编码、连续快速切换导航栏三次——全部应无卡顿、无空白页、无脚本中断。
如果Console出现“Failed to execute 'writeText' on 'Clipboard'”，说明当前页面非HTTPS且未通过用户手势触发（如点击），此时需忽略该警告，它不影响实际功能，因为AI已用click事件绑定确保了触发上下文。
一键部署上线
在AI Studio预览页中直接输入：“如何把这个单HTML文件部署成公开网址？给出三步内能完成的操作”。AI会返回Vercel部署指令：
① 访问 vercel.com/new → 点击“Import Git Repository” → 选择“Continue with GitHub”；
② 授权后，新建一个空仓库，将toolhub.html拖入上传；
③ 点击“Deploy”按钮，等待约20秒，页面顶部即显示类似https://toolhub-abc123.vercel.app的永久链接。
部署完成后，复制该链接发给他人，对方无需任何安装即可使用全部三个工具。
