메뉴
Methodology for building a large page by progressive decomposition — turn a page brief into a component tree, decide reuse-vs-author per leaf against the graph, build leaves first, and compose upward into an on-system page. Use for /mds:craft:view.
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 | page-architect |
| description | Methodology for building a large page by progressive decomposition — turn a page brief into a component tree, decide reuse-vs-author per leaf against the graph, build leaves first, and compose upward into an on-system page. Use for /mds:craft:view. |
Big pages are built bottom-up: decompose → build leaves → compose → verify the whole. This is the
methodology the view-loop workflow follows.
get_design_context (the design system's layout rhythm, container width, section spacing,
voice, anti-patterns). A page is a vertical stack of sections; each section is a component.Hero · FeatureGrid · PricingTiers · Testimonial · CTASection · SiteFooter.graph_query({label:'artifact'}) (captured components) + ({label:'primitive'}). If a
captured component already covers a leaf → reuse it (exists: true). Otherwise mark it to author./mds:craft:component / nested design-loop): compose
@ds primitives, token roles only, pass the four-source gate, then capture_reusable_component.critique_score gate;
fix via graph_where_to_fix; record evidence. A page ships only when the page-level gate passes AND a human approves./mds:system:update rather than going off-system.