不想再忍受公共工具站的广告和数据泄露风险？这期分享4个纯前端工具AI提示词，教你一键生成SEO快照预览、代码长图生成和JSON互转工具，彻底私有化你的工作台！
SEO 搜索引擎快照可视化预览器
网站上线前排查 TDK (Title, Description, Keywords) 是站长的基本功。这个工具能让你一边写 Meta 标签，一边实时预览网页在谷歌或百度搜索结果中的长相。
复制下方提示词发给 AI (如 Claude/Cursor)：
请用纯 HTML+JS+CSS 编写一个“SEO Meta 标签可视化预览工具”。
核心要求：
1. 交互布局：左侧提供表单输入框（包括 URL、Title、Description、Keywords 和发布日期）。输入框需带有实时字数统计，并在超出搜索引擎建议长度时用红字警告。
2. 实时预览：右侧动态渲染出两个高仿真的搜索结果卡片：一个是 Google 桌面端/移动端搜索结果样式，另一个是百度搜索结果样式。
3. 代码生成：底部提供一个只读文本框，实时将填写的内容转化为标准 HTML标签代码，提供一键复制按钮。
4. UI 风格：现代极简风格，使用细边框和浅灰色背景，输入框需要有平滑的 focus 发光效果。
5. 交付：输出单文件 index.html，所有样式内联，确保纯离线可用。
代码高亮美化与长图生成器
经常在小红书或知乎分享技术干货？直接截图代码太丑了。这个工具能给你的代码加上漂亮的语法高亮和类似 macOS 窗口的高级外壳，并一键导出长图。
复制下方提示词发给 AI：
请开发一个“纯本地代码美化长图生成器”。
核心要求：
1. 核心技术：引入 highlight.js 处理代码语法高亮，引入 html2canvas 负责将 DOM 节点转化为高清图片 Blob。
2. 配置面板：提供语言切换下拉框（JS, Python, CSS等），支持调节背景渐变色、内边距大小、窗口圆角，以及是否显示 macOS 风格的“红黄绿”窗口控制按钮。
3. 交互逻辑：主区域为代码粘贴板，用户粘贴代码后实时渲染美化效果。点击“导出”时，将该 DOM 区域渲染为 2x 或 3x 分辨率的高清 PNG 图片并触发下载。
4. UI 规范：采用深色模式 (Dark Mode)，类似 Apple visionOS 的 Liquid Glass 毛玻璃悬浮面板设计，高级感拉满。
5. 交付：包含所有逻辑的 HTML 单文件交付。
纯本地 JSON 格式化与 CSV 互转工作台
日常处理 API 数据或者数据库导出的文件时，JSON 和 CSV 互转是高频痛点。这个工具完全在本地进行数据解析，再也不怕敏感数据泄露。
复制下方提示词发给 AI：
请编写一个“JSON 与 CSV 数据格式互转及格式化工具”。
核心要求：
1. 处理逻辑：完全依赖原生 JavaScript 实现 JSON 字符串的解析与 CSV 数组的转换，禁止任何网络请求。
2. 核心功能：提供左右双栏布局。支持一键格式化 JSON（支持展开/折叠树形结构）、一键去除换行压缩 JSON。
3. 互转功能：如果左侧粘贴 JSON 数组，一键提取 Keys 作为表头，生成标准的 CSV 表格字符串显示在右侧；反之亦然。支持导出为 .csv 或 .json 文件。
4. 容错处理：必须带有严格的 Try-Catch 错误捕获机制，如果用户粘贴了非法的 JSON，在错误行数附近给出明确的红色警告提示。
5. 交付：输出单文件 HTML 源码。
Markdown 沉浸式写作与公众号排版器
写文章的最佳格式是 Markdown，但直接粘贴到公众号后台格式全乱。这个工具能将 Markdown 实时渲染成带内联 CSS 样式的富文本，一键复制完美粘贴。
复制下方提示词发给 AI：
请开发一个“纯前端 Markdown 转微信公众号富文本排版器”。
核心要求：
1. 核心解析：引入 marked.js 将左侧编辑器的 Markdown 内容实时解析为 HTML，显示在右侧预览区。
2. 样式注入：精心编写一套适合阅读的 CSS 排版规则（如 H2 带有底部细线，加粗文字变色，代码块带有微圆角浅色背景），并在解析时将这些 CSS 强制转化为 inline-style 内联样式注入到 HTML 标签中。
3. 核心功能：提供一个“一键复制”按钮，利用 Clipboard API 将右侧预览区的富文本（带样式）直接写入系统剪贴板，确保粘贴到微信公众号后台时格式不丢失。
4. 界面设计：极简的写作专注模式，隐藏多余控件，色彩以护眼的阅读模式为主。
5. 交付：HTML 单文件交付。
核心总结：
开发这类极客向的小工具，提示词的灵魂在于点出具体的开源前端库（如 html2canvas、marked.js），以及强制要求完善的错误提示（如非法数据拦截）。这样生成的工具不仅好看，而且在极端情况下的健壮性也能媲美商业软件。
