메뉴
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.
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).
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.
Master skill for design taste — embeds deliberate, opinionated design decisions into every agent interaction. Use at the START of any task to replace generic AI output with intentional design. Adapted from taste-skill (Leonxlnx) for emdesign's design system pipeline.
| name | design-review |
| description | 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. |
Adapted from open-design's design-review (Garry Tan / gstack) — but instead of editing shipped HTML, it
audits a emdesign component through the four feedback sources and fixes it on-system.
/mds:review <Name>: rule (lint_consistency + graph_where_to_fix), visual
(run_visual_test), vision (vision-critic on the screenshot), LLM (design-reviewer). Collect a
P0-first finding list with file:line.edit_component per atomic change. After each, re-run the relevant gate (emdesign lint,
visual-test) — keep a before/after screenshot pair from __screenshots__/.critique_score must pass (composite ≥ threshold && mustFix === 0) before "done".record_evidence with the final scores + screenshot.Tightened means: zero P0s, visual baseline stable (or intentionally re-baselined), vision score ≥ threshold, and the LLM review finds no composition/semantics/intent gaps. Beautiful, consistent, testable.