Agent Skills › nexu-io/motion-anything › web-to-design-md

web-to-design-md

GitHub

从指定网站抓取设计令牌（颜色、字体、CSS、动效）并生成结构化的design.md文件，用于构建AI运动生成的品牌一致性设计系统。

skills/web-to-design-md/SKILL.md nexu-io/motion-anything

Trigger Scenarios

扒这个网站的配色/字体 design.md from url

Install

npx skills add nexu-io/motion-anything --skill web-to-design-md -g -y

More Options

Use without installing

npx skills use nexu-io/motion-anything@web-to-design-md

指定 Agent (Claude Code)

npx skills add nexu-io/motion-anything --skill web-to-design-md -a claude-code -g -y

安装 repo 全部 skill

npx skills add nexu-io/motion-anything --all -g -y

预览 repo 内 skill

npx skills add nexu-io/motion-anything --list

SKILL.md

Frontmatter

{
    "od": {
        "mode": "prototype",
        "surface": "web",
        "category": "design-system",
        "platform": "desktop",
        "upstream": "https:\/\/github.com\/Paidax01\/web-to-design-md",
        "design_system": {
            "requires": false
        }
    },
    "name": "web-to-design-md",
    "triggers": [
        "extract design tokens from this site",
        "web to design md",
        "扒这个网站的配色和字体",
        "拿这个站的设计规范",
        "生成 design.md"
    ],
    "description": "Extract a real website's design tokens — colors, typography, spacing, CSS, and motion — into a\nstructured `design.md` an AI can consume. Use to seed motion-anything's design system from an\nexisting site so generated motion stays on-brand (\"扒这个网站的配色\/字体\", \"design.md from url\").\n"
}

web-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

If not installed (one-time, needs network):

npx skills add https://github.com/Paidax01/web-to-design-md

Run it against the target URL to produce design.md.
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