尧图网页设计 
impeccableoverdrive命令实战指南把浏览器能力推到极限让界面体验超出预期【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本文以 impeccable 设计技能体系中的overdrive [target]命令为线索完整讲解它的启用方式、前置纪律、按体验目标分层的技术工具箱、渐进增强与性能红线以及结果验证方法。它适用于所有希望让某一部分界面真正令人惊叹extraordinary而非仅仅好看的 Web 界面场景从百万行数据表格、可变形对话框到粒子系统、滚动驱动的电影感转场。读完后你将掌握一套先定方向、再选技术、后验收效果的高阶动效与渲染工程方法。overdrive是 impeccable让你的 AI 前端协作更懂设计技能体系中的Enhance增强类命令。在.kiro/skills/impeccable/SKILL.md的 Commands 总表里它的定位一句话即可概括Push past conventional limits突破常规限制对应参考文档.kiro/skills/impeccable/reference/overdrive.md。在命令元数据 plugin/skills/impeccable/scripts/command-metadata.json 中它的可读描述是通过有野心的技术实现shader、弹簧物理、滚动驱动揭示、60fps 动画把界面推过常规边界。它不该被误解成堆特效。文档开篇就强调overdrive 的目标不是视觉奇观而是用浏览器的全部能力让界面的任何一部分都感觉非凡——例如一个能承载百万行数据的表格、一个从其触发按钮生长出来的对话框、一个带实时流式反馈校验的表单、一段有电影感的页面切换。一、进入 overdrive先声明模式再理解上下文作为 impeccable 的 Agent执行任何命令的第一步是以指定格式打开命令横幅这是该命令要求以特定输出开头的强制协议标识 Agent 已进入 overdrive 工作模式──────────── ⚡ OVERDRIVE ───────────── 》》》 Entering overdrive mode...注在该技能的多个发布副本之间正文措辞存在细微差异——skill/reference/overdrive.md与 plugin/skills/impeccable/reference/overdrive.md 在向用户确认方向处保留了{{ask_instruction}}运行时模板占位符而.kiro运行目录内的副本则直接写明了具体提问要求。阅读任一副本都不影响本命令逻辑的完整性。横幅之后进入 overdrive 的第一个也是最重要的判断上下文决定非凡的含义。文档给出了一个非常尖锐的对比例子——一个粒子系统出现在创意作品集页面上是令人印象深刻的同样的粒子系统出现在设置页面上则是尴尬的但一个带即时乐观保存 有动画的状态迁移的设置页面同样是非凡的。因此在执行任何技术选择之前必须先理解项目自身的个性personality与目标。这正是 impeccable 技能中 Setup 阶段node skill-base-dir/scripts/context.mjs加载 PRODUCT.md、DESIGN.md 等上下文的意义所在overdrive 的度必须由该具体界面来决定而不是由技术清单决定。二、先提案再动手overdrive 是 misfire 风险最高的命令该命令在 impeccable 的 Enhance 类命令中有着最高的打偏风险因此绝不可以在想清楚之前直接进入实现。文档给出三段式强制流程构思 2–3 个不同方向考虑不同的技术路线、野心等级与审美取向并对每个方向简要描述结果看起来、感觉起来会是什么样。在写任何代码之前先让用户拍板直接向用户提问澄清你无法自行推断的内容。每个方向都要把描述与其代价浏览器支持、性能成本、复杂度打包放进选项本身让用户在可阅读的选项之间做选择并使用**结构化问题structured question**阻塞所搭载的消息直到用户作答避免选项文本在用户选择时不可见。只推进用户确认的那个方向。跳过这一步的风险被文档直白地概括为building something embarrassing that needs to be thrown away做出一个尴尬到必须被扔掉的东西。这条纪律与该技能体系 reference/craft-floor.md质量底线、绝对禁令清单一脉相承先有质量底线与用户共识再谈技术野心。三、用浏览器自动化迭代靠视觉验证而非假设技术上有野心的效果几乎不可能一次成功。文档要求主动使用浏览器自动化工具预览工作成果、可视化验证结果并迭代不要假设效果看起来是对的要检查它预期需要多轮打磨从技术上能跑到看起来非凡之间的差距是靠视觉迭代关闭的仅靠代码做不到。这在 impeccable 的工程体系里有直接支撑live参考文档 skill/reference/live.md 在描述无头 / 变体模式时特别约定当 action 落在overdrive上时变体方向应按被打破的惯例来构思scale / structure / motion / input model / state transitions并且要跳过 overdrive 的 propose-and-ask 步骤——因为 live 是非交互模式。这说明 overdrive 的先提案与用浏览器自动迭代在不同执行形态下是被显式编排的交互执行时必须先征询方向自动化批量变体时则直接以多方向并行的方式产出。四、先界定非凡落在哪类表面技术的对味完全取决于你在做什么。文档要求在选择技术前先问这个具体界面的用户会在什么时刻由衷地觉得哇这个真不错它把表面分成四类每一类的wow落点完全不同视觉 / 营销类表面visual/marketing surfaces落地页、Hero 区、作品集、营销页这里的wow往往是感官性的——滚动驱动的揭示、shader 背景、有电影感的页面转场、跟随光标响应的生成式艺术。功能型 UIfunctional UI表格、表单、对话框、导航这里的wow在**手感FEEL**里——通过 View Transitions 从触发按钮生长出来的对话框通过虚拟滚动以 60fps 渲染 10 万行数据表格带流式校验、感觉瞬间完成的表单带弹簧物理的拖拽。性能敏感型 UIperformance-critical UI这里的wow是不可见但可被感知的——一次检索 5 万条数据不闪烁复杂表单从不阻塞主线程图像编辑器近乎实时处理。界面的直观感受就是从不迟疑。数据密集界面data-heavy interfaces图表与仪表盘这里的wow在流畅性——用 Canvas/WebGL 做 GPU 加速渲染以承载海量数据、数据状态间的动画过渡、自然落定的力导向图布局。贯穿始终的共同点是实现的某处超出了用户对 Web 界面的预期技术服务于体验而不是反过来。若某个表面本质上是 Read阅读型如文档站点或 Operate操作型如设置界面overdrive 的落地形态也应随之改变——这正是 SKILL.md 中 Persuade / Operate / Read / Experience 四种 visitor mode 划分的意义。五、工具箱按要达成什么而非按技术名组织文档刻意把技术按目标分类方便 Agent 先确定体验目标再挑选工具并逐条标注了浏览器支持范围。下面完整继承并展开让转场有电影感Make transitions feel cinematicView Transitions API同文档内same-document所有浏览器可用跨文档cross-documentFirefox 不支持。核心能力是共享元素shared element在状态间的变形——列表项展开成详情页、按钮变形为对话框。它是当前最接近原生 FLIP 动画的方案。starting-style所有浏览器可用。纯 CSS 即可让元素从display: none过渡到可见包含入场关键帧——解决了如何动画化一个此前不渲染的元素这一老难题。弹簧物理Spring physics用质量mass、张力tension、阻尼damping取代手调 cubic-bezier得到更自然的运动。可选类库motion原 Framer Motion、GSAP或自研 spring 求解器。把动画绑到滚动位置Tie animation to scroll position滚动驱动动画animation-timeline: scroll()纯 CSS、无需 JS即可实现视差、进度条、揭示序列。支持范围Chrome/Edge/SafariFirefox 仅 flag 开启。必须始终提供静态降级方案。渲染突破 CSSRender beyond CSSWebGL所有浏览器可用。用于 shader 效果、后期处理、粒子系统。类库参考Three.js、OGL轻量、regl。用途定位做 CSS 表达不了的效果。WebGPUChrome/EdgeSafari 26Firefox Windows/macOS 可用、Firefox Linux/Android 仅 flag。算力强于 WebGL 的下一代 GPU 方案必须始终回退到 WebGL2。Canvas 2D / OffscreenCanvas自定义渲染、像素操作或借助 Web Workers OffscreenCanvas 把重渲染整体移出主线程。SVG 滤镜链displacement maps、turbulence、morphology用于有机扭曲类效果且可被 CSS 动画化。让数据活起来Make data feel alive虚拟滚动表格 / 长列表只渲染可见行支撑数万级条目。简单场景无需库复杂场景用 TanStack Virtual。GPU 加速图表数据集大到 SVG/DOM 撑不住时改用 Canvas 或 WebGL 渲染的可视化。参考 deck.gl、基于 regl 的自研渲染器。数据状态动画在图表状态间做变形而非直接替换。DOM 图表用 D3 的transition()或干脆复用 View Transitions。动画化复杂属性Animate complex propertiesproperty所有浏览器可用。注册带类型的自定义 CSS 属性使渐变、颜色等 CSS 通常无法插值的复杂值也能被动画化。Web Animations API所有浏览器可用。以 CSS 同级的性能做 JS 驱动的动画可组合、可取消、可反向是复杂编排choreography的地基。推性能边界Push performance boundariesWeb Workers把重计算移出主线程——大数据处理、图像处理、搜索索引一切会引起 jank 的活。OffscreenCanvas在 Worker 线程内渲染主线程保持空闲复杂视觉在后台渲染。WASM计算密集特性接近原生性能——图像处理、物理模拟、编解码器。与设备交互Interact with the deviceWeb Audio API空间音频、音频响应可视化、声音反馈。必须由用户手势触发。设备 API方向传感器、环境光、地理定位。谨慎使用且必须获得用户许可。范围红线NOTE本命令只增强界面的感觉FEEL不改变产品做什么DOES。加入实时协作、离线能力或新的后端能力属于产品决策不属于 UI 增强。overdrive 的聚焦点始终是让既有功能感觉非凡。六、带着纪律实现渐进增强是硬性要求文档用两段可复制的代码展示了能力探测 优雅降级的标准写法此处完整保留supports (animation-timeline: scroll()) { .hero { animation-timeline: scroll(); } }if (gpu in navigator) { /* WebGPU */ } else if (canvas.getContext(webgl2)) { /* WebGL2 fallback */ } /* CSS-only fallback must still look good */要点是没有增强能力时的体验本身也必须是好的。CSS 层的supports探测、JS 层的特性分支WebGPU → WebGL2 → 纯 CSS 静态呈现缺一不可——这正是工具箱里多处标注Firefox 不支持flag only等支持边界的原因越靠前的激进 API越需要靠后的完整保底。性能铁律目标60fps一旦掉到 50 以下就简化。重资源WebGL context、WASM 模块只在接近视口时才懒加载初始化。暂停屏外渲染pause off-screen rendering杀掉看不见的东西。在真实的中端设备上测试而不仅仅是在开发机上。打磨才是差距所在酷与非凡之间的距离藏在最后 20% 的打磨里弹簧动画的缓动曲线、交错揭示的时序偏移、让转场显得有物理感的微妙次级运动。文档的结论值得原样引用Dont ship the first version that works; ship the version that feels inevitable.不要交付第一个能跑的版本要交付那个让人觉得理所当然的版本。NEVER 清单让中端设备产生 jank 的效果一律不上线使用无功能回退的冒进 API未经用户明确 opt-in 就加入声音用技术野心掩盖薄弱的设计基本功——那些问题应先用其他命令修复叠加多个相互竞争的非凡时刻——聚焦造就冲击力堆砌造就噪音。七、验收结果四道测试实现完成后文档要求用四个测试做最终把关The wow test惊叹测试给没看过的人看。他们会有反应吗The removal test移除测试把这个效果拿掉体验是否明显变差还是根本没人察觉The device test设备测试在手机、平板、Chromebook 上跑一遍还流畅吗The context test上下文测试它对当前这个品牌与受众真的成立吗八、overdrive 在 impeccable 体系中的正确打开方式结合上文所有源码级证据可以在 impeccable 中这样完整地执行一次 overdrive加载上下文运行 Setup 中的node skill-base-dir/scripts/context.mjs让基目录把命令解析到对应的.kiro/skills/impeccable/scripts/...加载 PRODUCT.md、DESIGN.md 与对应 surface brief确认该界面的 visitor mode 与个性。识别命令请求若含突破极限、让人惊叹、全情投入等含义即路由到overdrive [target]见 .kiro/skills/impeccable/SKILL.md 的 Commands 表语义描述见 plugin/skills/impeccable/scripts/command-metadata.json。按本文档纪律执行声明横幅 → 用 2–3 个打包好取舍的方向提案并征询用户 → 确认后进入实现 → 用浏览器自动化做多轮视觉验证 → 严守渐进增强与 60fps 红线 → 用四道测试收尾。若在 live 无头变体模式中触发按 skill/reference/live.md 的约定以被打破的惯例构思变体轴并跳过交互式提问。一句话收束全文技术上非凡不在于使用最新的 API而在于让界面做出用户原本不认为网站能做到的事。overdrive 给出的不是一份特效配方而是一套先定方向 → 按目标选技术 → 带纪律实现 → 靠视觉验证的完整工作流让 AI 与人在共建界面时能把浏览器推到极限却依然克制、稳健、对味。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 impeccable `overdrive` 命令实战指南：把浏览器能力推到极限，让界面体验“超出预期“
impeccableoverdrive命令实战指南把浏览器能力推到极限让界面体验超出预期【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本文以 impeccable 设计技能体系中的overdrive [target]命令为线索完整讲解它的启用方式、前置纪律、按体验目标分层的技术工具箱、渐进增强与性能红线以及结果验证方法。它适用于所有希望让某一部分界面真正令人惊叹extraordinary而非仅仅好看的 Web 界面场景从百万行数据表格、可变形对话框到粒子系统、滚动驱动的电影感转场。读完后你将掌握一套先定方向、再选技术、后验收效果的高阶动效与渲染工程方法。overdrive是 impeccable让你的 AI 前端协作更懂设计技能体系中的Enhance增强类命令。在.kiro/skills/impeccable/SKILL.md的 Commands 总表里它的定位一句话即可概括Push past conventional limits突破常规限制对应参考文档.kiro/skills/impeccable/reference/overdrive.md。在命令元数据 plugin/skills/impeccable/scripts/command-metadata.json 中它的可读描述是通过有野心的技术实现shader、弹簧物理、滚动驱动揭示、60fps 动画把界面推过常规边界。它不该被误解成堆特效。文档开篇就强调overdrive 的目标不是视觉奇观而是用浏览器的全部能力让界面的任何一部分都感觉非凡——例如一个能承载百万行数据的表格、一个从其触发按钮生长出来的对话框、一个带实时流式反馈校验的表单、一段有电影感的页面切换。一、进入 overdrive先声明模式再理解上下文作为 impeccable 的 Agent执行任何命令的第一步是以指定格式打开命令横幅这是该命令要求以特定输出开头的强制协议标识 Agent 已进入 overdrive 工作模式──────────── ⚡ OVERDRIVE ───────────── 》》》 Entering overdrive mode...注在该技能的多个发布副本之间正文措辞存在细微差异——skill/reference/overdrive.md与 plugin/skills/impeccable/reference/overdrive.md 在向用户确认方向处保留了{{ask_instruction}}运行时模板占位符而.kiro运行目录内的副本则直接写明了具体提问要求。阅读任一副本都不影响本命令逻辑的完整性。横幅之后进入 overdrive 的第一个也是最重要的判断上下文决定非凡的含义。文档给出了一个非常尖锐的对比例子——一个粒子系统出现在创意作品集页面上是令人印象深刻的同样的粒子系统出现在设置页面上则是尴尬的但一个带即时乐观保存 有动画的状态迁移的设置页面同样是非凡的。因此在执行任何技术选择之前必须先理解项目自身的个性personality与目标。这正是 impeccable 技能中 Setup 阶段node skill-base-dir/scripts/context.mjs加载 PRODUCT.md、DESIGN.md 等上下文的意义所在overdrive 的度必须由该具体界面来决定而不是由技术清单决定。二、先提案再动手overdrive 是 misfire 风险最高的命令该命令在 impeccable 的 Enhance 类命令中有着最高的打偏风险因此绝不可以在想清楚之前直接进入实现。文档给出三段式强制流程构思 2–3 个不同方向考虑不同的技术路线、野心等级与审美取向并对每个方向简要描述结果看起来、感觉起来会是什么样。在写任何代码之前先让用户拍板直接向用户提问澄清你无法自行推断的内容。每个方向都要把描述与其代价浏览器支持、性能成本、复杂度打包放进选项本身让用户在可阅读的选项之间做选择并使用**结构化问题structured question**阻塞所搭载的消息直到用户作答避免选项文本在用户选择时不可见。只推进用户确认的那个方向。跳过这一步的风险被文档直白地概括为building something embarrassing that needs to be thrown away做出一个尴尬到必须被扔掉的东西。这条纪律与该技能体系 reference/craft-floor.md质量底线、绝对禁令清单一脉相承先有质量底线与用户共识再谈技术野心。三、用浏览器自动化迭代靠视觉验证而非假设技术上有野心的效果几乎不可能一次成功。文档要求主动使用浏览器自动化工具预览工作成果、可视化验证结果并迭代不要假设效果看起来是对的要检查它预期需要多轮打磨从技术上能跑到看起来非凡之间的差距是靠视觉迭代关闭的仅靠代码做不到。这在 impeccable 的工程体系里有直接支撑live参考文档 skill/reference/live.md 在描述无头 / 变体模式时特别约定当 action 落在overdrive上时变体方向应按被打破的惯例来构思scale / structure / motion / input model / state transitions并且要跳过 overdrive 的 propose-and-ask 步骤——因为 live 是非交互模式。这说明 overdrive 的先提案与用浏览器自动迭代在不同执行形态下是被显式编排的交互执行时必须先征询方向自动化批量变体时则直接以多方向并行的方式产出。四、先界定非凡落在哪类表面技术的对味完全取决于你在做什么。文档要求在选择技术前先问这个具体界面的用户会在什么时刻由衷地觉得哇这个真不错它把表面分成四类每一类的wow落点完全不同视觉 / 营销类表面visual/marketing surfaces落地页、Hero 区、作品集、营销页这里的wow往往是感官性的——滚动驱动的揭示、shader 背景、有电影感的页面转场、跟随光标响应的生成式艺术。功能型 UIfunctional UI表格、表单、对话框、导航这里的wow在**手感FEEL**里——通过 View Transitions 从触发按钮生长出来的对话框通过虚拟滚动以 60fps 渲染 10 万行数据表格带流式校验、感觉瞬间完成的表单带弹簧物理的拖拽。性能敏感型 UIperformance-critical UI这里的wow是不可见但可被感知的——一次检索 5 万条数据不闪烁复杂表单从不阻塞主线程图像编辑器近乎实时处理。界面的直观感受就是从不迟疑。数据密集界面data-heavy interfaces图表与仪表盘这里的wow在流畅性——用 Canvas/WebGL 做 GPU 加速渲染以承载海量数据、数据状态间的动画过渡、自然落定的力导向图布局。贯穿始终的共同点是实现的某处超出了用户对 Web 界面的预期技术服务于体验而不是反过来。若某个表面本质上是 Read阅读型如文档站点或 Operate操作型如设置界面overdrive 的落地形态也应随之改变——这正是 SKILL.md 中 Persuade / Operate / Read / Experience 四种 visitor mode 划分的意义。五、工具箱按要达成什么而非按技术名组织文档刻意把技术按目标分类方便 Agent 先确定体验目标再挑选工具并逐条标注了浏览器支持范围。下面完整继承并展开让转场有电影感Make transitions feel cinematicView Transitions API同文档内same-document所有浏览器可用跨文档cross-documentFirefox 不支持。核心能力是共享元素shared element在状态间的变形——列表项展开成详情页、按钮变形为对话框。它是当前最接近原生 FLIP 动画的方案。starting-style所有浏览器可用。纯 CSS 即可让元素从display: none过渡到可见包含入场关键帧——解决了如何动画化一个此前不渲染的元素这一老难题。弹簧物理Spring physics用质量mass、张力tension、阻尼damping取代手调 cubic-bezier得到更自然的运动。可选类库motion原 Framer Motion、GSAP或自研 spring 求解器。把动画绑到滚动位置Tie animation to scroll position滚动驱动动画animation-timeline: scroll()纯 CSS、无需 JS即可实现视差、进度条、揭示序列。支持范围Chrome/Edge/SafariFirefox 仅 flag 开启。必须始终提供静态降级方案。渲染突破 CSSRender beyond CSSWebGL所有浏览器可用。用于 shader 效果、后期处理、粒子系统。类库参考Three.js、OGL轻量、regl。用途定位做 CSS 表达不了的效果。WebGPUChrome/EdgeSafari 26Firefox Windows/macOS 可用、Firefox Linux/Android 仅 flag。算力强于 WebGL 的下一代 GPU 方案必须始终回退到 WebGL2。Canvas 2D / OffscreenCanvas自定义渲染、像素操作或借助 Web Workers OffscreenCanvas 把重渲染整体移出主线程。SVG 滤镜链displacement maps、turbulence、morphology用于有机扭曲类效果且可被 CSS 动画化。让数据活起来Make data feel alive虚拟滚动表格 / 长列表只渲染可见行支撑数万级条目。简单场景无需库复杂场景用 TanStack Virtual。GPU 加速图表数据集大到 SVG/DOM 撑不住时改用 Canvas 或 WebGL 渲染的可视化。参考 deck.gl、基于 regl 的自研渲染器。数据状态动画在图表状态间做变形而非直接替换。DOM 图表用 D3 的transition()或干脆复用 View Transitions。动画化复杂属性Animate complex propertiesproperty所有浏览器可用。注册带类型的自定义 CSS 属性使渐变、颜色等 CSS 通常无法插值的复杂值也能被动画化。Web Animations API所有浏览器可用。以 CSS 同级的性能做 JS 驱动的动画可组合、可取消、可反向是复杂编排choreography的地基。推性能边界Push performance boundariesWeb Workers把重计算移出主线程——大数据处理、图像处理、搜索索引一切会引起 jank 的活。OffscreenCanvas在 Worker 线程内渲染主线程保持空闲复杂视觉在后台渲染。WASM计算密集特性接近原生性能——图像处理、物理模拟、编解码器。与设备交互Interact with the deviceWeb Audio API空间音频、音频响应可视化、声音反馈。必须由用户手势触发。设备 API方向传感器、环境光、地理定位。谨慎使用且必须获得用户许可。范围红线NOTE本命令只增强界面的感觉FEEL不改变产品做什么DOES。加入实时协作、离线能力或新的后端能力属于产品决策不属于 UI 增强。overdrive 的聚焦点始终是让既有功能感觉非凡。六、带着纪律实现渐进增强是硬性要求文档用两段可复制的代码展示了能力探测 优雅降级的标准写法此处完整保留supports (animation-timeline: scroll()) { .hero { animation-timeline: scroll(); } }if (gpu in navigator) { /* WebGPU */ } else if (canvas.getContext(webgl2)) { /* WebGL2 fallback */ } /* CSS-only fallback must still look good */要点是没有增强能力时的体验本身也必须是好的。CSS 层的supports探测、JS 层的特性分支WebGPU → WebGL2 → 纯 CSS 静态呈现缺一不可——这正是工具箱里多处标注Firefox 不支持flag only等支持边界的原因越靠前的激进 API越需要靠后的完整保底。性能铁律目标60fps一旦掉到 50 以下就简化。重资源WebGL context、WASM 模块只在接近视口时才懒加载初始化。暂停屏外渲染pause off-screen rendering杀掉看不见的东西。在真实的中端设备上测试而不仅仅是在开发机上。打磨才是差距所在酷与非凡之间的距离藏在最后 20% 的打磨里弹簧动画的缓动曲线、交错揭示的时序偏移、让转场显得有物理感的微妙次级运动。文档的结论值得原样引用Dont ship the first version that works; ship the version that feels inevitable.不要交付第一个能跑的版本要交付那个让人觉得理所当然的版本。NEVER 清单让中端设备产生 jank 的效果一律不上线使用无功能回退的冒进 API未经用户明确 opt-in 就加入声音用技术野心掩盖薄弱的设计基本功——那些问题应先用其他命令修复叠加多个相互竞争的非凡时刻——聚焦造就冲击力堆砌造就噪音。七、验收结果四道测试实现完成后文档要求用四个测试做最终把关The wow test惊叹测试给没看过的人看。他们会有反应吗The removal test移除测试把这个效果拿掉体验是否明显变差还是根本没人察觉The device test设备测试在手机、平板、Chromebook 上跑一遍还流畅吗The context test上下文测试它对当前这个品牌与受众真的成立吗八、overdrive 在 impeccable 体系中的正确打开方式结合上文所有源码级证据可以在 impeccable 中这样完整地执行一次 overdrive加载上下文运行 Setup 中的node skill-base-dir/scripts/context.mjs让基目录把命令解析到对应的.kiro/skills/impeccable/scripts/...加载 PRODUCT.md、DESIGN.md 与对应 surface brief确认该界面的 visitor mode 与个性。识别命令请求若含突破极限、让人惊叹、全情投入等含义即路由到overdrive [target]见 .kiro/skills/impeccable/SKILL.md 的 Commands 表语义描述见 plugin/skills/impeccable/scripts/command-metadata.json。按本文档纪律执行声明横幅 → 用 2–3 个打包好取舍的方向提案并征询用户 → 确认后进入实现 → 用浏览器自动化做多轮视觉验证 → 严守渐进增强与 60fps 红线 → 用四道测试收尾。若在 live 无头变体模式中触发按 skill/reference/live.md 的约定以被打破的惯例构思变体轴并跳过交互式提问。一句话收束全文技术上非凡不在于使用最新的 API而在于让界面做出用户原本不认为网站能做到的事。overdrive 给出的不是一份特效配方而是一套先定方向 → 按目标选技术 → 带纪律实现 → 靠视觉验证的完整工作流让 AI 与人在共建界面时能把浏览器推到极限却依然克制、稳健、对味。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考