animated-landing-workflow

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: animated-landing-workflow
description: Applied workflow skill for producing Awwwards-caliber animated landing pages using Claude Design as the orchestrator, with motionsites.ai (animated backgrounds), higgsfield.io or Kling 3 (AI animation generation), Dribbble (component inspiration), shots.so (animation showcase/video edit), and land-book (landing page templates) as the accelerator toolchain. Use when the user asks to design, prototype, animate, or ship a landing page with motion — from bare idea to code-ready handoff. Orchestrates on top of the three design-system skills in this stack (extract-design-system, design-system-patterns, awesome-design-systems) and hands off to existing animation-code skills (awwwards-animations, modern-web-design) for implementation.
---

# Animated Landing Workflow

## Purpose

This skill encodes a **reproducible pipeline for producing top-tier animated landing pages**, sourced from a tutorial by [Viktor Oddy (@viktoroddy on X)](https://x.com/viktoroddy/status/2045492112054165813), published shortly after Anthropic launched [Claude Design](https://claude.ai/design) on 2026-04-17. Claude Design is the orchestrator; five accelerator tools feed it inspiration, animated backgrounds, AI-generated animation previews, component references, showcase assets, and full-page templates.

It is **not** a code-pattern skill. For GSAP / Framer Motion / Anime.js / Lenis code, defer to the `awwwards-animations` skill. This skill owns the **pre-code orchestration layer**: how to move from a blank brief to a vetted visual prototype ready for Claude Code to implement.

## Where it fits in the stack

This is the fourth skill in the `design-system-stack` repo. The stack's four tiers:

1. **PRIMARY — how to extract:** `extract-design-system` (tokens + primitives from an existing site)
2. **PRIMARY — how to build:** `design-system-patterns` (token hierarchy, theming, variants, pipelines)
3. **COMPLEMENTARY — catalog:** `awesome-design-systems` (185 shipped systems indexed by feature flag)
4. **APPLIED WORKFLOW — this skill:** pre-code orchestration for animated landings

This skill **uses** the other three. During the workflow, it calls on `awesome-design-systems` for precedent lookups, `design-system-patterns` for token-and-variant decisions, and `extract-design-system` if the landing needs to inherit an existing brand's primitives.

## The toolchain — at a glance

| Tool | Role | When to use |
|---|---|---|
| **[Claude Design](https://claude.ai/design)** | Orchestrator. Generates prototypes, wireframes, code-powered previews; exports Canva/PDF/PPTX/standalone HTML; reads your codebase + design files; bundles a handoff for Claude Code. Powered by Claude Opus 4.7. Available on Pro/Max/Team/Enterprise. | Always — this is the central surface. Everything else feeds it or ships from it. |
| **[motionsites.ai](https://motionsites.ai)** | Animated background library — ready-made animated backgrounds you export and hand to an LLM to generate the equivalent code for your own site. | Hero sections, full-bleed backgrounds, section dividers — anywhere you want motion behind content. |
| **[higgsfield.io](https://higgsfield.io)** | AI-driven animation generation. Quickly previews how animations will feel on the page. Alternative: **Kling 3** (see `references/tool-inventory.md`). Similar in spirit to wavespeed-style preview tools. | Exploring animation style options before committing to a GSAP/Motion implementation. |
| **[Dribbble](https://dribbble.com)** | Component-level design inspiration — buttons, stat cards, data widgets, micro-interactions. | Mining specific component patterns (a button treatment, a stats tile) rather than whole pages. |
| **[shots.so](https://shots.so)** | Browser-based video editor with high-end "liquid-crystal" showcase templates. Wraps animations in polished frames/backgrounds for portfolio shots and client deliverables. | Presenting completed animations — demo videos, pitch decks, Twitter/X p