Menú
Discover, import, and customize design systems from remote sources — awesome-design-md (74 brands), vendor bases (13 systems), and git repositories.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Infer a design system's tokens + voice from a brand reference (screenshots or a URL) — vision-assisted. Use for /mds:system:create --mode extract, feeding the design-system-author skill.
Reason about color on-system — pick/adjust accent, surfaces, and status colors within a design system's palette, check contrast/accessibility, and propose token changes (not raw hex). Adapted from open-design's color-expert. Use for color decisions during build, review, or system edits.
Build a reusable, on-system React+Tailwind component from an intent. Use when creating or editing a component in emdesign. Composes design-system primitives from "@ds", references token roles only, emits a CSF story, and feeds the verify loop.
Author or maintain a design system's DESIGN.md + tokens.css (the contract). Use when fixing the SYSTEM rather than a component — adding tokens, tightening anti-patterns, or capturing visual rules. Adapted from open-design's design-md (Google Labs / Stitch).
Designer-who-codes visual audit + fix. Use to tighten a component before shipping — run the four-source critique, then make atomic, on-system fixes with before/after screenshots. Adapted from open-design's design-review (gstack) to emdesign's code-first loop.
Create or update a design system to the emdesign quality bar — author the 9-section DESIGN.md + tokens.css + base primitives. Use for the System flow (/mds:system:create | :update). Knows the four sources: brief, blank, import, extract.
| name | registry-import |
| description | Discover, import, and customize design systems from remote sources — awesome-design-md (74 brands), vendor bases (13 systems), and git repositories. |
| when | Starting a new project that needs a foundation design system, or exploring what's available before creating one from scratch. |
| workflow | system-setup |
| commands | ["ds search","ds info","ds import awesome","ds import git","ds import vendor","ds customize --brand"] |
The emdesign CLI has a design system registry — like npm for design systems. You can search across 74 awesome-design-md brands, 13 vendored bases, and any git repository, then import and customize with your brand's colors and fonts.
| Source | Count | Content | Fetch Method |
|---|---|---|---|
Vendor (_vendor/open-design/) | 13 | Full DS (DESIGN.md + tokens.css + code/) | Local filesystem |
| Awesome-design-md (GitHub) | 74 | DESIGN.md only (YAML frontmatter) | GitHub raw fetch |
| Git repositories | ∞ | DESIGN.md + tokens.css + manifest | Shallow clone |
Local (design-systems/) | varies | Full DS | Already installed |
1. Search → ds search <query> to find matching systems
2. Inspect → ds info <id> to see details
3. Import → ds import <source> <id> to bring it in
4. Validate → ds validate <id> to check contract completeness
5. Customize → ds customize <id> --primary --font --spacing to match brand
# List all available systems
emdesign ds search
# Search by keyword
emdesign ds search "fintech"
emdesign ds search "editorial"
emdesign ds search "modern dashboard"
# From a specific source
emdesign ds list --installed # local only
Results show: id, category, source path, and token count.
emdesign ds info <id>
Shows detailed information: version, category, description, token count, missing roles, primitives list, lint preset, and available blueprints.
# From awesome-design-md (74 brands)
emdesign ds import awesome linear --name "MyLinear"
emdesign ds import awesome stripe --name "MyFintech"
# From a vendored base
emdesign ds import vendor brutalist --name "MyBrutalist"
emdesign ds import vendor after-hours --name "MyEditorial"
# From a git repository
emdesign ds import git https://github.com/org/ds-repo --name "CustomDS"
emdesign ds import git https://github.com/org/ds-repo --path my-ds --ref develop
Each import produces a complete design system from the source material. For awesome imports, the CLI:
tokens.css from frontmatter valuesemdesign test validate <id> --json
After import, always validate. For awesome-design-md imports, some tokens may be missing if the frontmatter was sparse — fill them in manually.
# Quick customization
emdesign ds customize <id> --name "My Brand" --color "#6366f1" --font "Inter"
# Brand-aware customization (V3)
emdesign ds customize <id> --brand "MyApp" --primary "#7c3aed" --secondary "#0f172a"
emdesign ds customize <id> --body-font "Inter" --spacing 4
Customization clones the base system and applies token-level changes. The --brand flag exposes a richer set of customization parameters.
| Command | Purpose |
|---|---|
ds search <query> | Search across all registry sources |
ds info <id> | Show detailed system info |
ds import awesome <brand> | Import from awesome-design-md |
ds import git <url> [--path] | Import from git repository |
ds import vendor <id> | Import from vendored bases |
ds customize <id> --color --font | Quick re-skin |
ds customize <id> --brand <name> | Brand-aware customization |
ds validate <id> --strict | Post-import validation |
tokens.css or code/ directory. The CLI generates a tokens.css from YAML frontmatter, which may be incomplete. Always validate and fill gaps.ds customize creates a NEW design system (it clones the base). The original is untouched.ds list --installed instead.