Menü
Discover, import, and customize design systems from remote sources — awesome-design-md (74 brands), vendor bases (13 systems), and git repositories.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
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.