/web-to-design-md

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: false

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

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