Web Vitals

🌟 一个“看似简单”的Prompt，差点让我在客户面前当场社死 那是上周五下午3:17，钉钉消息弹窗还没消，客户微信就甩来一句： “帮我们分析下竞品首页的 LCP 和 CLS？最好能对比三家——XX优选、YY严选、ZZ快购。急，投资人下周要看性能基线。” 我秒回：“好的！让 Claude Code 跑一下 👌”，顺手复制粘贴进 Claude 的代码沙盒，敲下这行“自信满满”的 Prompt： 请分析三个竞品网站的LCP和CLS指标，并给出优化建议。 30分钟后，我点开输出——满屏是教科书式回答： “LCP（最大内容绘制）衡量页面主内容加载速度，建议使用 Chrome DevTools 的 Performance 面板录制……” “CLS（累积布局偏移）反映视觉稳定性，可通过 Web Vitals 扩展实时监控……” “优化方向包括预加载关键资源、设置图片宽高属性、避免动态插入内容……” 我盯着屏幕，手心发潮。客户团队5个人全在等报告——而他们连 Chrome DevTools 都没打开过（团队共4人：CEO、运营、产品、后端，没有前端工程师）。更扎心的是，就在前一天，我还用 Claude Code 成功调试了自家后台的 CSS 动画卡顿问题，顺手发了条朋友圈：“AI 前端助理已上线 ✅”。 那一刻我意识到：我把“人话需求”当成了“可执行指令”。 不是 Claude 不行，是我没给它上岗前的工牌、工位和任务单。 🔍 Claude Code不是翻译器，它是需要“喂数据”的实习生 复盘时我翻出原始对话记录，发现失败根源根本不在模型能力——而在我的输入像一份空简历： ❌ 没写“公司名”（竞品具体是哪三家？） ❌ 没贴“工位地址”（URL？带协议吗？有登录跳转吗？） ❌ 没说明“办公环境”（手机还是PC？4G还是3G？） ❌ 没定义“交付物长啥样”（要数字？要截图？要DOM路径？） 于是我把两版 Prompt 拉出来做了对比： 原始 Prompt（失败版） 优化后 Prompt（生产可用版） 请分析三个竞品网站的LCP和CLS指标，并给出优化建议。 请基于以下三组Lighthouse JSON报告（已附），分析各站首页在“iPhone SE + 3G慢网”条件下的LCP与CLS：<br>• XX优选：https://xx-youxuan.com/ （公开可访问）<br>• YY严选：https://yy-yanxuan.com/ （需绕过登录页，已提供无认证直链）<br>• ZZ快购：https://zz-kuai.com/ （注意：该站首页含动态广告位，CLS易受其影响）<br>输出要求：<br>① 表格列出LCP数值（ms）、CLS值、LCP元素类型（img/text/video）及DOM路径；<br>② 对CLS > 0.05的站点，定位导致偏移的具体元素（如：.ad-banner插入时机）；<br>③ 每条建议必须绑定到具体HTML/CSS/JS行（示例：“第82行 缺少 width/height 属性”） 标红的关键缺失项： ① 可访问的竞品URL（必须公开可抓取！曾因 URL 是 https://admin.xx.com/login?next=/home，Claude 循环重定向12次后报错 Failed to fetch） ② 明确的设备与网络模拟参数（Lighthouse 默认是“桌面+宽带”，但电商80%流量来自低端安卓机，不指定等于白测） ③ 期望输出格式（Claude 不会猜你要一页PPT还是JSON字段——它只认结构化指令） ...