8套“能验收”的在线工具生成 Prompts：每条都带明确功能清单、工程化输出与不少于10条QA测试点，覆盖Web Vitals、打包体积分析、HAR解析与性能报告等。
在线 Web Vitals Logger
在本地或线上页面注入脚本，采集LCP/INP/CLS并导出报告（不含图片生成）。
英文 Prompt:
Build "Web Vitals Logger" online tool. Provide a snippet generator that users paste into their site to collect LCP/INP/CLS/FCP/TTFB and send to a local dashboard page (no backend). Dashboard shows charts, percentile, exports JSON/CSV. Tech: React+TS+Vite. Output full project code, run/build, deploy guide, and QA checklist with 12 scenarios.
中文释义: 生成Web Vitals采集与仪表盘工具：脚本生成+本地展示+导出报告，并给足测试场景。
在线 Bundle Size Analyzer
输入stats.json或粘贴摘要，解析依赖体积并输出可视化表格与优化建议。
英文 Prompt:
Build "Bundle Size Analyzer". Input: webpack/rollup/vite stats JSON file upload or paste. Parse modules/chunks, render sortable table, detect duplicates, suggest code-splitting. Export report Markdown/JSON. Tech: Svelte+TS+Vite. Output full code + QA checklist with 8 stats fixtures.
中文释义: 生成打包体积分析工具：解析多格式stats，表格可筛选排序，报告可导出。
在线 HAR Viewer + Performance Insights
上传HAR文件，提取关键瀑布信息与慢请求Top列表，并导出结论。
英文 Prompt:
Build "HAR Viewer". Input: HAR file. Render waterfall timeline, compute slowest requests, cache status, content-type breakdown, export insights report. Tech: React+TS+Vite. Output full code + QA checklist with 6 HAR fixtures.
中文释义: 生成HAR分析工具：瀑布图+统计+洞察报告导出，并有样例夹具。
在线 Image Loading Checklist Builder（不生成图片）
输入页面图片清单与尺寸，生成懒加载/预加载/格式建议与验证步骤。
英文 Prompt:
Build "Image Loading Checklist Builder". Inputs: image list with sizes and usage. Output: recommendations (lazy, preload, sizes/srcset), and validation steps. Export Markdown/JSON. Tech: Vanilla JS. Output full code + QA checklist for generator.
中文释义: 生成图片加载策略清单工具：只输出建议与验证步骤，不做任何出图生成。
在线 Performance Budget Config Generator
根据站点目标生成性能预算配置（如Lighthouse/CI阈值），并输出示例配置文件。
英文 Prompt:
Build "Performance Budget Generator". Inputs: targets (TTI, LCP, bundle size). Output: config files for Lighthouse CI / Webpack performance hints, plus docs and QA checklist. Tech: Next.js+TS static export. Output full code + sample configs + tests.
中文释义: 生成性能预算配置生成器：输出可直接使用的配置文件与阈值说明。
在线 Third-party Impact Estimator
输入第三方脚本列表与加载策略，估算阻塞风险并输出优化方案清单。
英文 Prompt:
Build "3rd-party Impact Estimator". Inputs: s with size, async/defer, timing. Output: risk score, suggestions, export report. Tech: SolidJS+TS. Output full code + QA checklist with 12 sets.
中文释义: 生成第三方脚本影响评估器：给风险评分与优化清单，并支持导出。
在线 CSS Coverage Helper
输入CSS与页面关键选择器清单，估算未使用比例并输出拆分建议。
英文 Prompt:
Build "CSS Coverage Helper". Inputs: CSS text + list of used selectors. Output: estimated coverage, unused blocks list, export cleaned CSS. Tech: React+TS. Output full code + QA checklist with 10 cases.
中文释义: 生成CSS覆盖率辅助工具：输出未使用块与清理建议，并可导出结果。
在线 Perf Report Builder
汇总上述分析结果为可分享报告，支持导入JSON并导出Markdown。
英文 Prompt:
Build "Performance Report Builder". Input: metrics JSON. Output: report sections, severity, action items, export Markdown/JSON. Tech: Vanilla JS. Output full code + QA checklist with 8 datasets.
中文释义: 生成性能报告构建器：可导入指标并导出Markdown，便于团队协作。
