메뉴
Master skill for emdesign — the design-engineering engine. Use at the START of any design, build, review, or system task. Routes to the right playbook based on what you need to do. All MCP tools are available at http://localhost:4321/mcp.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
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 | emdesign |
| description | Master skill for emdesign — the design-engineering engine. Use at the START of any design, build, review, or system task. Routes to the right playbook based on what you need to do. All MCP tools are available at http://localhost:4321/mcp. |
emdesign is a design-engineering engine: AI builds production UI against a design system contract. This skill routes you to the right playbook.
# The MCP tools are already connected. Verify:
# http://localhost:4321/mcp has 13 tools
Always start by understanding the system before building. Run discover_components or get_design_context first.
| When you want to... | Playbook | MCP tools you'll use |
|---|---|---|
| Explore the codebase — discover components, stories, design systems | explore | discover_components, get_component_documentation, get_design_context |
| Build a new component from an intent | build-component | get_design_context, generate_component, test_component, lint_component |
| Update an existing component — fix bugs, apply changes, improve | update-component | generate_component (edit), lint_component, test_component, query_knowledge_graph |
| Evaluate & review — run the quality gate before shipping | evaluate-review | lint_component, evaluate_component, vision_review, test_component |
| Debug & test — fix visual diffs, lint errors, test failures | debug-test | test_component, lint_component, vision_review, query_knowledge_graph |
| Manage design system — create, switch, validate, grade | manage-ds | manage_design_system, rebuild_graph, discover_components |
| Ship — capture a component as reusable, git-tracked | ship | evaluate_component, capture_component |
manage_design_system.get_design_context or discover_components first. Never free-hand.bg-surface, text-accent), never raw hex or hardcoded values. The lint gate blocks violations.lint_component and test_component after every change. "Looks fine" is not evidence.query_knowledge_graph (mode: where_to_fix) to trace lint findings to the exact token/file, not the symptom.evaluate_component first. Ship only when composite ≥ threshold && mustFix === 0.See tools.md for the complete MCP tool reference with parameters and examples.