用途：这是一个设计工程（Design Engineering）技能，适用于构建、评审、重构或改进任何 UI 组件、页面与交互时，自动应用精细的视觉与动效工艺准则，无需等到被要求。
主要能力：核心哲学强调对齐视觉而非网格、用物理弹簧而非数学曲线做动画、关注无人注意却被无意识感知的细节、克制优先、所有数值共享同一物理隐喻。构建 UI 时覆盖：用三层透明阴影替代边框（不透明度 4-8%，悬停每层 +0.02）；嵌套圆角外径=内径+内边距；光学对齐包括图标侧内边距、在 SVG viewBox 内修正对齐、flex 容器中 svg 设 flex-shrink: 0；OKLCH 感知均匀配色，明度 0.25-0.92、约 0.10 步进且无色调漂移，并提供 hex 回退；默认 oklab 渐变色插值。动效方面：标准 UI 时长小于 300ms、默认 ease-out、弹簧 duration 0.3-0.55 且 bounce: 0、只动画 transform/opacity/filter/clip-path、按下 scale(0.97) 125ms、不从 scale(0)、尊重 prefers-reduced-motion；按用户意图紧迫度设时长层级（焦点 0.3s、点按 0.5s、拖拽 0.5s、进入视口 0.6s、悬停 0.8s）；图标过渡同时动画 opacity、scale 与 blur；设置相对触发元素的 transform-origin；保证动画可中断。
使用方式：作为技能在相关任务中自动触发应用；评审 UI 时按顺序检查阴影、圆角、光学对齐、动效、transform-origin、颜色、性能、will-change、无障碍与出现频率。
限制：相关完整代码模式与深度技巧记录在 references/motion.md 与 references/visual-craft.md；原则源自 Jakub Krehel 与 Emil Kowalski。Framer Motion 使用 requestAnimationFrame 在主线程运行，需理解其权衡；不提供收费、价格或平台信息。