用途：这是一套可复现的动画落地页制作流程，源自 Viktor Oddy（@viktoroddy）的教程。它不生成动画代码，而是负责编码前的编排层：从空白需求出发，产出经过验证的视觉原型，再交给 Claude Code 实现。GSAP、Framer Motion、Anime.js、Lenis 等代码模式应交给 awwwards-animations 技能。
主要能力与工具链：Claude Design 作为编排器，生成原型、线框图和代码预览，可导出 Canva/PDF/PPTX/独立 HTML，读取代码库与设计文件，并打包交接给 Claude Code。motionsites.ai 提供现成动画背景，导出后可交给 LLM 生成自托管实现。higgsfield.io 用于 AI 动画生成与风格预览（替代方案 Kling 3）。Dribbble 提供组件级灵感，land-book 提供整页模板骨架，shots.so 用于制作展示视频。
使用方式：流程分 6 个阶段——灵感与框架、资产生成、令牌与架构决策、在 Claude Design 中做视觉原型、交接给 Claude Code、展示与发布。动画时长与缓动也作为令牌，用 CSS 自定义属性（--duration-、--ease-）统一管理。
适用场景：构建动画落地页、设计带动态背景的 hero 区、把 Dribbble 稿变成页面、用代码复刻 motionsites.ai 背景、用 Claude Design 原型后交接给 Claude Code、制作成品动画展示片。
限制：工具信息以 2026-04-20 教程记录为准，URL 与界面可能变化。Claude Design 需 Pro/Max/Team/Enterprise，企业版默认关闭需管理员开启；免费用户需跳过第 4 阶段改用 v0 或 Figma。模型为 Opus 4.7（2026-04-17 发布），版本可能变动。本技能不生成动画代码，第 5 阶段应交给 awwwards-animations。使用时需注明流程原作者 Viktor Oddy。