overdrive

overdrive skill 概览

overdrive skill 适合这样的场景：普通 UI 已经不够，你希望界面呈现出明显更精致、更有技术野心，或更让人记住的体验。按上游 skill 的定义，这意味着不再停留在常规组件实现，而是进一步推进到电影感转场、弹簧驱动的动态效果、类似 shader 的视觉处理、高性能渲染，或能让产品从“能用”升级为“出众”的交互模式。

overdrive 最适合解决什么问题

当你的目标是打造一个真正出彩的交互，而不只是完成常规 UI 开发时，就该用 overdrive skill。比较契合的场景包括：

• 高端感的落地页或作品集关键场景
• 发布演示页和 showcase 页面
• 打磨程度很高的产品导览
• 复杂表格、图表或 canvas 交互
• 能有意义地连接不同状态的转场
• 同时看重性能与愉悦感的 UX 时刻

这项 skill 真正要解决的问题，是判断“非同一般”的设计该出现在哪些地方，并且把它实现得既出彩，又不脱离整体界面。

谁适合安装 overdrive

这项 skill 特别适合：

• 正在做高视觉完成度 UI 的设计师和前端开发者
• 已经掌握项目上下文、能判断风格取舍的 agent
• 正在构建营销页面、旗舰流程或差异化产品体验的团队
• 想探索 overdrive for UI Design，而不是只做通用功能编码的用户

如果你的项目主要是朴素的 CRUD 页面、后台管理面板，或者受限于严格的无障碍/性能要求，那它的价值会小很多；除非你只打算把它用在一个精心挑选的高影响区域。

overdrive 和普通 prompt 最大的区别是什么

它最强的差异点不是“动画更多”。overdrive 的指导明确提醒：如果脱离上下文使用，这项 skill 很容易跑偏。它会先推动 agent 判断，什么样的“高完成度实现”才适合这个产品，然后才进入构建。

这让 overdrive usage 和单纯对模型说“做得更酷一点”有本质区别：

• 它先要求设计上下文
• 它要求先提方案，再做实现
• 它把品味判断和适配性视为任务的一部分
• 它把“非凡 UI”当成产品相关决策，而不是默认视觉风格

采用 overdrive 的主要注意点

上游 skill 对前置上下文有硬性依赖。它明确要求先调用 /frontend-design；如果当前没有设计上下文，就先运行 /teach-impeccable。如果你想找的是一个开箱即用、独立可用的动画配方，那它并不是这种类型。

实际来说，只有当你想要的是一个服务于高野心 UI 决策的辅助工具，而不只是一个效果库时，才值得安装 overdrive。

如何使用 overdrive skill

别指望装上就好用，先补齐上下文

一个真正有效的 overdrive install，不只是把 skill 加进 agent 环境里。你还需要准备它所要求的设计上下文。这个 skill 目录里只有一个文件：SKILL.md，其中明确写着必须先调用 /frontend-design。

如果你的项目还没有成形的设计方向，就按 skill 的说明先运行 /teach-impeccable，再使用 overdrive。否则模型根本没有依据去判断，在你的产品里“非同一般”应该长什么样。

先读这个文件

从这里开始：

• SKILL.md

这个 skill 文件夹里没有额外规则、参考资料或辅助脚本，所以几乎所有有效行为都编码在这一份文档里。做安装决策前先读它，因为它的核心价值不在文件多，而在工作流纪律。

先理解它要求的调用方式

这个 skill 被标记为 user-invocable: true，并暴露了参数提示 [target]。这意味着 overdrive usage 最适合针对一个明确的界面区域、组件或流程来调用，而不是提一个笼统的产品级要求。

更好的 target 例如：

• hero section
• pricing comparison table
• checkout confirmation flow
• search results transitions
• settings save interactions

较弱的 target 例如：

• make the app amazing
• improve the UI
• add cool effects everywhere

从一个范围小但杠杆高的目标开始

这个 skill 自己就提醒过：它很容易误用或跑偏。最稳妥的方式，是只选一个“高投入能明显见效”的关键时刻。

适合作为第一批目标的包括：

• 两个状态之间的一次转场
• 一个既要求速度又要求精致度的数据密集型界面
• 营销页中的一个 hero 交互
• 一个需要更丰富反馈机制的表单体验

这样做能减少无效工作，也更容易判断 overdrive 是否真的适合你的产品。

把模糊目标写成可用的 overdrive prompt

像“让 onboarding 更惊艳一点”这样的请求，信息远远不够。更强的 overdrive guide prompt 应该补上：

• 精确的目标界面
• 受众和产品调性
• 这里的“非凡”具体意味着什么
• 不可妥协的约束
• 技术栈
• 性能/无障碍边界

例如：

“Use overdrive for the onboarding completion screen in a B2B design tool. The brand is premium and precise, not playful. I want the transition from final setup step to live workspace to feel rewarding and fast, with motion that suggests competence rather than celebration overload. Stack is React plus Tailwind. Keep it keyboard-safe, avoid heavy GPU effects on low-end devices, and propose 2–3 concepts before building.”

这种写法比直接索要动画，更符合这项 skill 的真实工作方式。

一定先要方案，再让它实现

这是仓库里最关键的使用原则。这个 skill 明确写着：先提方案，再开始做。最好把这条当作强制要求。

一个合格的第一轮输出，应该先给出 2–3 个实现方向及其取舍，比如：

• 带节制动效的电影感转场
• 以高反馈 optimistic UI 为核心的微状态动画
• 以性能表现为优先、只加轻度修饰的数据界面方案

然后再从中选一个。这里正是 overdrive skill 相比普通 prompting 的价值所在：它能帮你避免上线一个虽然昂贵、但风格不对的效果。

先定义这个产品里的“非凡”到底指什么

源 skill 里有一个很重要的观点：一个粒子效果拉满的作品集页面，和一个高级感设置页，需要的“野心”完全不同。对 overdrive for UI Design 来说，真正的问题不是“我能把它做得多炫？”，而是“什么样的出众体验才匹配这个界面？”

有用的输入方式包括：

• “Extraordinary means zero-lag interaction on large datasets.”
• “Extraordinary means a dialog that visually connects to its trigger.”
• “Extraordinary means real-time validation feedback that feels alive.”
• “Extraordinary means scroll reveals with editorial pacing.”

这会明显提升输出质量，因为它直接缩小了实现空间。

一开始就写清技术栈和运行时约束

由于 overdrive 容易把 agent 引导到技术难度较高的实现方向，所以在开始编码前，你必须明确告诉它什么能用、什么不能用。

建议提前写清：

• framework：React、Vue、Svelte、plain JS
• 样式方案：CSS modules、Tailwind、styled-components
• 当前已在使用的动画工具
• SSR 或 SPA 约束
• 目标设备和浏览器
• 对 bundle size 的敏感度
• 性能预算
• 无障碍预期

否则，模型很可能会提出一个看上去很强、但和你的代码库或部署目标冲突的方案。

推荐的 overdrive usage 工作流

一个贴近上游 skill 设计的实用流程如下：

1. 用 /frontend-design 收集设计和产品上下文。
2. 如果上下文缺失，先运行 /teach-impeccable。
3. 用一个明确的 target 调用 overdrive。
4. 先要求 2–3 个方案和各自取舍。
5. 选出最符合调性、预算和 UX 风险的方案。
6. 先在一个小切片中实现。
7. 复查动效、响应性和无障碍。
8. 迭代时关注“手感”，而不只是“是否正确”。

相比一上来就要完整实现，这个顺序明显更稳。

第一轮输出要重点检查什么

不要只看第一版“够不够炫”。对于 overdrive usage，你更该检查的是：

• 方案是否符合产品调性
• 实现范围是否真的收敛在选定目标内
• 交互是否依然清晰、可用
• 性能成本是否值得
• 面向低性能设备或 reduced-motion 场景是否有 fallback

技术上再有野心的 UI，只有在它依旧显得有意图、可上线时，才算真正成功。

哪些情况下 overdrive 不是合适工具

以下情况建议跳过 overdrive：

• 你还没有设计方向
• 任务只是简单的表单接线或组件 CRUD
• 页面本身偏工具化，应该保持安静
• 无障碍和可预测性比表现力更重要
• 你要的是快速、通用的实现，而不是先做概念探索

这些情况下，更适合先用普通的前端指导，或先补上前置设计 skill。

overdrive skill 常见问题

overdrive 对新手友好吗？

只算部分友好。overdrive skill 很容易触发，但如果没有设计判断力，就很难用好。新手依然可以受益，只要范围控制得足够小，并且给出足够强的约束；但它默认你有能力评估方案，而不是接受任何看上去炫的输出。

使用 overdrive 之前需要其他 skill 吗？

需要，而且这是源说明里的明确要求。overdrive 依赖 /frontend-design 提供先前的设计上下文；如果这部分上下文还不存在，就应该先跑 /teach-impeccable。这个前置条件是核心要求，不是可选项。

overdrive 主要就是做动画吗？

不是。动画只是其中一部分，这项 skill 的定位更广：利用浏览器的完整能力，让界面显得非同一般。它可以是 motion，也可以是 rendering、状态反馈、数据处理、转场设计，或者以性能为核心的交互质量提升。

overdrive 和直接要求“fancy UI”有什么区别？

区别在于工作流纪律。普通的 fancy-UI prompt 往往会直接跳到效果层面；而 overdrive guide 的行为重点是：先看上下文、先判断是否合适、先选概念，再开始实现。这样能显著降低“看起来惊艳，但并不适合产品”的风险。

overdrive 适合产品 UI，还是只适合营销页面？

适合产品 UI，前提是这种“野心”确实服务于任务。仓库中的例子并不只有电影感效果，也包括超大表格、实时表单反馈这类场景。对产品界面来说，overdrive for UI Design 最适合用在那些既能提升体验质感、又能提升实际可用性的地方。

什么情况下不该安装 overdrive？

如果你想要的是一个打包完善、附带参考资料、脚本或实现资产的大型工具包，就不建议做 overdrive install。这项 skill 很轻量，主要依赖说明和流程约束。它的价值在于决策指导，而不是附带资源。

如何改进 overdrive skill 的使用效果

给 overdrive 的不是功能需求，而是产品品味

想明显提升质量，最有效的方法是把你的审美判断标准告诉模型。你可以明确告诉 overdrive，这个界面应该是什么感觉：

• editorial
• premium
• playful
• technical
• invisible but fast
• dramatic but restrained

相比要求“更有 wow 感”，这些信息更能改变实现方向。

提供一个清晰的成功指标

高野心 UI 很容易优化错方向。想提升 overdrive usage 效果，可以直接写明这个目标最重要的成功指标是什么：

• perceived speed
• memorability
• polish
• clarity during state change
• confidence in data-heavy interaction
• delight during completion moments

只给一个核心指标，模型通常更容易做出正确取舍。

避开最常见的失败模式：过度设计

最常见的问题，是把一个本来普通的页面做得更吵，而不是做得更好。要避免这点，就明确告诉 skill 哪些部分应该保持克制。

例如：

“Use overdrive on the result transition only. Keep the rest of the search page quiet and utilitarian.”

这样可以保护整个产品的整体调性。

提供更强的输入示例

弱输入：

• “Make this dashboard stunning.”

更强的输入：

• “Use overdrive on the row expansion interaction in our analytics table. The product is serious and enterprise-focused. We want the expansion to feel instant and premium, not playful. Prioritize perception of performance and structural clarity over decorative motion.”

更强的版本同时给出了 target、调性和决策标准。

要求它比较不同实现方案的取舍

如果你想得到更高质量的输出，可以让 agent 从以下维度比较方案：

• complexity
• runtime cost
• maintainability
• accessibility risk
• brand fit
• responsiveness on low-end devices

这样 overdrive skill 才更适合真实可上线的决策，而不只是演示用途。

第一版做出来后，继续迭代“手感”

第一轮实现通常不会是最终版本。给 overdrive 的优质迭代提示，应该尽量具体：

• “Reduce theatrical motion by 30%.”
• “Keep the visual continuity but shorten total duration.”
• “Preserve the premium feel without scaling effects.”
• “Make the state change more legible for keyboard users.”
• “Replace decorative animation with stronger feedback timing.”

这类修订，比单纯说一句“调一下”有效得多。

提高仓库阅读效率

由于这个 skill 只公开了 SKILL.md，所以阅读路径很短。优先看“强制前置准备”和“先提方案再实现”这两部分。它们基本解释了 overdrive install 和日常使用中，大多数成败分界点在哪里。

把高野心效果和明确边界一起给出

想让结果更好，就明确写清模型“不允许做什么”：

• no full-screen particle systems
• no scroll hijacking
• no motion that blocks task completion
• no animation on every state change
• no dependence on a heavy new library unless justified

约束不会削弱野心，反而会让它更聚焦。

把 overdrive 用在“技术野心真正创造用户价值”的地方

最好的改进，往往发生在那些既让人印象深刻、又真正有用的实现里。优先选择这些目标：

• 让密集数据也显得流畅
• 让转场帮助用户保持方位感
• 让校验反馈更即时
• 让关键时刻呈现出高置信度和高级感

这是使用 overdrive 的最高价值方式，也是它是否适合你项目的最明确信号。