メニュー
Generate a polished marketing/web section as a reusable React component, on-system.
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 | web-section |
| description | Generate a polished marketing/web section as a reusable React component, on-system. |
| trigger | ["section","hero","pricing","features","CTA","testimonial"] |
| mode | component |
| scenario | marketing |
| platform | web |
| example_prompt | a pricing section with three tiers, highlight the middle one |
Produce a single, reusable React + Tailwind section component that composes the active design system's primitives. It must look designed (per the DESIGN.md) and pass the consistency lint.
get_design_context with the user's instruction and a PascalCase componentName. Read the
DESIGN.md Anti-patterns and Components sections carefully.@ds (e.g. Button, Card, Heading, Badge,
Stack). Reference token roles only (bg-surface, text-accent) — never raw hex.create_component with the .tsx source and a CSF story (title: "Generated/<Name>",
Default export). Read the returned lint report.edit_component and re-check until the lint passes.run_visual_test. If a baseline exists and the diff is unexpected, reconcile.