# 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").

- Skill: `nexu-io/web-to-design-md` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nexu-io/web-to-design-md`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nexu-io/web-to-design-md/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: Nexu (https://skillmd.com/u/nexu-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nexu-io/web-to-design-md

---


# 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):
   ```bash
   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