optimize

optimize 技能概览

optimize 能做什么

optimize 技能用于诊断和修复 UI 性能问题：首屏加载慢、bundle 过大、交互卡顿、图片交付不佳、布局偏移，以及动画抖动。当你需要的是用于 Performance Optimization 的 optimize 技能，而不是泛泛的“把它变快一点”的建议时，它尤其合适。

适合谁使用

如果你确实遇到了性能投诉、可测量的变慢，或者用户能明显感知到的 UX 问题，就应该用 optimize。它特别适合前端工程师、全栈开发者，以及在 web app、设计系统或营销站点上工作的 AI 辅助编码者。

它为什么有用

optimize 指南的核心价值在于：它会先让你测量，再去优先处理真正的瓶颈。这样可以避免在根因其实是渲染阻塞、昂贵的 JS，或者糟糕的加载策略时，还一味地去削 bundle、调图片。

如何使用 optimize 技能

安装 optimize 技能

先走项目本身的技能安装流程，然后把技能指向你想改进的目标 app、页面、路由或组件。对于 optimize install，要明确写出那个“感觉慢”的产品部分，以及它慢发生在哪种环境里。

给 optimize 一个性能目标

最好的 optimize usage 从具体目标开始，而不是模糊需求。好的输入包括：

• “优化首页 Hero，让移动端 LCP 更快”
• “找出这个 dashboard 表格最主要的卡顿来源”
• “在不改变可见行为的前提下减小 bundle 体积”
• “提升面板切换时的动画流畅度”

先读对的部分

先看 SKILL.md，再检查控制慢路径的应用代码：页面入口、数据获取、图片使用、重组件、route loaders，以及构建输出。如果仓库里有性能脚本、Lighthouse 说明或 bundle 报告，先读这些，再改代码。

用“先测量，再修复”的循环工作

一套高质量的 optimize guide 通常遵循这个顺序：先定位瓶颈，再选择能直接解决它的最小改动，接着验证修改，最后对比前后结果。只要能拿到指标或 trace，就应该去问清楚，因为那种“感觉更快了”但并没有改善已知瓶颈的改动，通常不是正确收益。

optimize 技能 FAQ

optimize 比普通 prompt 更好吗？

如果任务明确是 Performance Optimization，那答案是肯定的。普通 prompt 往往只会给你一些通用最佳实践；而 optimize 技能更适合用来做结构化诊断、定向修复，以及区分加载问题和渲染问题的决策过程。

optimize 需要什么输入？

它最适合有明确目标表面和明确症状的输入。例如：哪个 route、哪类设备、哪个浏览器或哪个交互变慢了；用户具体感受到什么；以及有哪些已知约束，比如不能升级依赖、不能改视觉、不能改 API contract。

optimize 适合新手吗？

可以，只要你能把问题说清楚。你不需要一上来就具备很深的 profiling 专业能力，但描述越具体，输出就越有用。如果你只说“让它更快”，技能就只能去猜真正的瓶颈在哪里。

什么时候不该用 optimize？

如果目标是功能设计、文案写作，或者一般性的重构，就不要用它，除非性能本身才是目标。若问题是业务逻辑正确性、仅限无障碍，或者没有变慢的视觉改版，换别的技能或 prompt 会更合适。

如何改进 optimize 技能

提供症状、范围和约束

最好的 optimize 结果来自同时说明三件事的输入：哪里慢、在哪里发生、哪些不能改。比如：“移动端 product grid 的 INP 很差；保持当前布局，不要新增依赖。” 这样就给 Performance Optimization 设下了真正的边界。

有证据就一起提供

如果你有 Lighthouse 分数、Web Vitals、bundle analyzer 输出、long-task trace，或者慢交互的截图，都一起带上。证据能帮助技能区分主观感受和实际影响，并选择真正推动指标变化的修复，而不是只优化代码风格。

先修一个瓶颈，再要求看下一个

优化是迭代式的。第一次处理完后，继续让 optimize 重新评估剩余瓶颈，而不是把彼此无关的改动一股脑堆上去。这样可以让 optimize skill 始终聚焦于高杠杆工作，也能减少“解决一个慢点，却制造另一个慢点”的风险。