gsap-core
Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia()…
@nexu-ioInstall SkillDevelopment
Skill
/web-to-design-md
Extract a real website's design tokens — colors, typography, spacing, CSS, and motion — into a structured `design.md` an AI can consume. Use to seed motion-anything's design system from an existing site so generated motion stays on-brand ("扒这个网站的配色/字体", "design.md from url").
Claude Code
$ npx -y skills add nexu-io/motion-anything --skill web-to-design-md --agent claude-code
Codex
$ npx skills add nexu-io/motion-anything --skill web-to-design-md -a codex -y
Cursor
$ npx skills add nexu-io/motion-anything --skill web-to-design-md -a cursor -y
Gemini CLI
$ npx skills add nexu-io/motion-anything --skill web-to-design-md -a gemini-cli -y
GitHub Copilot
$ npx skills add nexu-io/motion-anything --skill web-to-design-md -a github-copilot -y
OpenCode
$ npx skills add nexu-io/motion-anything --skill web-to-design-md -a opencode -y
Windsurf
$ npx skills add nexu-io/motion-anything --skill web-to-design-md -a windsurf -y
SKILL.md
web-to-design-md.SKILL.mdname: web-to-design-md
description: |
Extract a real website's design tokens — colors, typography, spacing, CSS, and motion — into a
structured `design.md` an AI can consume. Use to seed motion-anything's design system from an
existing site so generated motion stays on-brand ("扒这个网站的配色/字体", "design.md from url").
triggers:
- "extract design tokens from this site"
- "web to design md"
- "扒这个网站的配色和字体"
- "拿这个站的设计规范"
- "生成 design.md"
od:
mode: prototype
surface: web
platform: desktop
category: design-system
upstream: "https://github.com/Paidax01/web-to-design-md"
design_system:
requires: falseweb-to-design-md (install-on-demand companion)
> **Thin wrapper.** Upstream has **no open license**, so we cannot redistribute its code — it is > fetched on demand. Text below is motion-anything's own description.
What it does
Given a URL, it scrapes the site's colors / fonts / CSS / motion and emits a `design.md`. That output feeds directly into motion-anything's **design system** (`app/design-systems/`), so generation (HTML and video lines) uses the site's real hex/typography and on-brand pacing.
How to invoke
1. If not installed (one-time, needs network):
npx skills add https://github.com/Paidax01/web-to-design-md
2. Run it against the target URL to produce `design.md`. 3. Import the result as a motion-anything design system; then generate on-brand motion.
Pipeline note
This is the "look/tokens" front half; motion-anything is the "motion" back half. Pair them: `web-to-design-md` → our design system → on-brand generation.
Note for maintainers
If Paidax01/web-to-design-md adds a permissive license, vendor it properly so it ships offline. Upstream: https://github.com/Paidax01/web-to-design-md
Read more
name: web-to-design-md
description: |
Extract a real website's design tokens — colors, typography, spacing, CSS, and motion — into a
structured `design.md` an AI can consume. Use to seed motion-anything's design system from an
existing site so generated motion stays on-brand ("扒这个网站的配色/字体", "design.md from url").
triggers:
- "extract design tokens from this site"
- "web to design md"
- "扒这个网站的配色和字体"
- "拿这个站的设计规范"
- "生成 design.md"
od:
mode: prototype
surface: web
platform: desktop
category: design-system
upstream: "https://github.com/Paidax01/web-to-design-md"
design_system:
requires: falseweb-to-design-md (install-on-demand companion)
> **Thin wrapper.** Upstream has **no open license**, so we cannot redistribute its code — it is > fetched on demand. Text below is motion-anything's own description.
What it does
Given a URL, it scrapes the site's colors / fonts / CSS / motion and emits a `design.md`. That output feeds directly into motion-anything's **design system** (`app/design-systems/`), so generation (HTML and video lines) uses the site's real hex/typography and on-brand pacing.
How to invoke
1. If not installed (one-time, needs network):
npx skills add https://github.com/Paidax01/web-to-design-md
2. Run it against the target URL to produce `design.md`. 3. Import the result as a motion-anything design system; then generate on-brand motion.
Pipeline note
This is the "look/tokens" front half; motion-anything is the "motion" back half. Pair them: `web-to-design-md` → our design system → on-brand generation.
Note for maintainers
If Paidax01/web-to-design-md adds a permissive license, vendor it properly so it ships offline. Upstream: https://github.com/Paidax01/web-to-design-md
Ships withmotion-anything
A project in the nexu.io · Open Design family — the same team's take on motion. If motion-anything clicks for you, Open Design is where the full agent-era design studio lives. Describe the feeling — your AI ships the animation.
1.1k12 skills
Stars on GitHub
Momentum
- stars in total
- 1.1k
Other skills on motion-anything.
@nexu-ioInstall Skillgsap-frameworks
Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when…
@nexu-ioInstall Skillgsap-performance
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP…
@nexu-ioInstall Skillgsap-plugins
Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer,…
@nexu-ioInstall Skillgsap-react
Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or…
@nexu-ioInstall Skillgsap-scrolltrigger
Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending…
@nexu-ioInstall SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about web-to-design-md.
- Which coding agents can use web-to-design-md?
- web-to-design-md installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.