8套前端开发“在线工具生成型”Prompts：每条输出完整项目代码、文件结构、运行命令与测试清单，覆盖JSON/正则/API请求/URL参数/Markdown转换等。
1. 在线 JSON Formatter + Diff 工具
用于在浏览器里格式化、校验与对比两段 JSON，适合接口联调与排障。
英文 Prompt:
Act as a senior frontend engineer. Build a production-ready online tool: "JSON Formatter + JSON Diff". Requirements: SPA, no backend. Features: JSON A/B, validate, pretty print, diff view, copy/minify, JSONPath query, localStorage autosave, dark/light theme, errors with line/column. Tech: React+TS+Vite+Tailwind. Output: full file tree + all source files + package.json + run/build commands + static deploy guide + QA checklist + 8 test cases.
中文释义: 生成可部署的前端工具项目，包含格式化/对比/查询/主题/本地保存与测试清单。
2. 在线 API Request Builder（生成 curl / fetch / axios）
输入 URL、headers、query、JSON body，一键生成多种请求代码。
英文 Prompt:
Build an online "API Request Builder". Inputs: URL, method, headers editor, query table, JSON body with validation. Outputs: curl, JS fetch, axios, Node undici. Features: preset import/export JSON, shareable URL hash (no server), final URL preview, copy buttons. Tech: SvelteKit+TS. Output: full file tree + all source files + run/build + 6 presets + QA checklist.
中文释义: 生成静态可部署的请求构造器，支持预设与 URL hash 分享。
3. 在线 Regex Tester + Replace 预览工具
支持高亮命中、分组展示、替换预览与常用预设，适合日常文本处理。
英文 Prompt:
Build "Regex Tester & Replace Preview". Must handle large text smoothly (debounce + virtualization). Features: regex+flags, highlight matches, capture groups, replace preview, preset library (email/url/uuid/ipv4). Tech: Vanilla JS + Web Components. Output: complete code + keyboard shortcuts + 10 test strings.
中文释义: 生成轻量高性能的正则工具站，强调不卡顿与可复测用例。
4. 在线 URL 编解码 + Query 参数编辑器
解析 URL 并表格化编辑参数，支持对比两条 URL 的差异。
英文 Prompt:
Create "URL Encoder/Decoder + Query Builder". Features: encode/decode, parse parts, edit query params table (multi-values), auto-generate final URL, diff two URLs highlighting param changes, copy buttons. Tech: React+TS+Vite. Output full file tree + all source files + run/build + 10 sample URLs + QA checklist.
中文释义: 生成 URL 工具站：编码/解析/参数编辑/差异对比一体化。
5. 在线 Storage 调试面板（localStorage/sessionStorage）
用于查看/搜索/编辑本地存储，并支持导入导出与命名空间安全模式。
英文 Prompt:
Build "Browser Storage Manager" (local only). Features: list/search/edit/delete localStorage & sessionStorage, export/import JSON, namespace mode, privacy note. Tech: Next.js+TS, static export. Output: full file tree + all source files + run/build + 8 manual tests.
中文释义: 生成本地运行的存储管理工具，避免误删无关 key，并可导入导出。
6. 在线 CSS Token 生成器（间距/排版/圆角/阴影）
输入基础尺度，输出 CSS 变量与 Tailwind 配置片段，并提供预览与导出。
英文 Prompt:
Build "CSS Token Generator". Inputs: spacing unit, typography scale, radius scale, shadow presets. Outputs: CSS variables + Tailwind config snippet + preview. Provide copy buttons and export .css/.json downloads. Tech: React+TS+Vite+Tailwind. Output: full file tree + all source files + QA checklist + 6 example configs.
中文释义: 生成 token 工具：可复制、可下载、可预览，直接用于项目统一样式。
7. 在线 SVG 清理与优化报告工具（只处理文本）
粘贴 SVG 源码后清理冗余、规范化并输出优化报告；不生成图片。
英文 Prompt:
Build "SVG Cleaner". Input: SVG markup text. Output: cleaned SVG + optimization report. Options: remove metadata, keep viewBox, preserve accessibility attrs. Tech: Vanilla JS. Output full code + explain transformations + 6 test SVG snippets.
中文释义: 生成 SVG 文本清理器：输出清理后的 SVG 与变更说明，便于直接复制使用。
8. 在线 Markdown 清理与 HTML 转换器（可配置规则）
把 Markdown 转成统一 HTML 结构（例如统一为 <h3> 分段），带预览与导出。
英文 Prompt:
Build "Markdown Cleaner & HTML Converter". Features: markdown input, sanitize unsafe HTML, configurable heading mapping (e.g., titles -> <h3>), link normalization, live preview, export HTML. Provide a rules panel. Tech: Next.js+TS static export. Output full code + run/build + troubleshooting + 8 test cases.
中文释义: 生成可配置的 Markdown 转 HTML 工具，支持安全清理、规则映射、预览与导出。
