| name | figma-design-check |
| description | Use BEFORE building or editing any website UI — MUI 9 + Emotion components, layout, color/fill/border, spacing, typography, sizing, icons, or interaction states (default/hover/focus-visible/active/disabled/loading/error) — to verify the planned change matches its design reference. Compare against the repo theme tokens (UiColorTheme palette, UiTypography, UiBreakpoints) and the Playwright visual baselines via `make test-visual` / `make test-visual-update`. Run this design-fidelity gate before frontend-component-development and before any `src/features/*` or `src/components/*` UI edit. |
Figma Design Check
A lightweight design-fidelity gate: verify every UI change against its design reference
before implementing it, then re-verify the rendered result against the repo's Playwright
visual baselines. The design is the source of truth for visuals; the implementation must match
it (or the user must explicitly approve a deviation).
This is a review workflow, not a tool integration. The repo does not configure a Figma MCP
server, so a design reference can be a figma.com file/node URL, an exported screenshot, a
design-handoff spec, or the existing visual baseline. If a Figma MCP is available in the
session you may pull the node with it (see Reference), but the gate works without one.
When to use (mandatory before UI changes)
Run this before ANY change that affects what the user sees: a new or modified MUI 9 + Emotion
component under src/components/ui-* or src/features/<feature>/components/, layout, color,
fill, border, radius, spacing, typography, sizing, icons, or any interaction state the design
defines (default / hover / focus-visible / active / disabled / loading / error). It runs
before frontend-component-development and before any UI edit.
It does NOT apply to pure logic, data-layer (Apollo/GraphQL), i18n-only string, test-only, or
non-visual config changes.
Prerequisite: a design reference
You need a design reference for the affected surface. If none is available, — do not
silently guess the intended look. When the only reference is the current visual baseline under
, treat that baseline as the contract: a change that alters it
is a deliberate redesign that must be approved and the baseline regenerated, not a drift.
