design

Plugin design from marketplace metapowers in bromso/metapowers. Commands read from the repo's manifest — 18 days ago.

Skills (8)

• a11y-audit

  Audit a Figma component or frame for accessibility in one pass — design lint, contrast, color-blindness simulation, focus order — with fixes. Use when the user points at a Figma design and wants a quick accessibility check before it goes to development. Not for a full WCAG-EM audit of a built site o

• define-component

  Define a component contract — typed props, variant matrix, every interaction state, design-token references, ARIA and keyboard behavior, i18n — as the single spec for building it. Use when the user knows which component they need and wants its spec pinned down before exploring visual options.

• design-review

  Create a Figma Slides deck summarizing a component's design journey — research, contract, options, prototype and test results — with title and summary slides. Use when the user needs to present a component's design work to stakeholders or walk a team through it. Not for feedback on a design; see /co

• empathize

  Research a UI component before designing it — user needs, related components in the Figma design system and applicable WCAG requirements — into a research brief. Use when the user wants to design a new component and has nothing yet beyond its name or idea.

• export-tokens

  Export the design tokens (variables) from a Figma file as CSS custom properties, Tailwind config or JSON, optionally saved to a file. Use when the user wants Figma colors, spacing and type values in code, or gives a Figma URL and asks for its tokens. Not for an inventory of the whole design system;

• ideate

  Explore at least three visual and layout approaches for a specified component, compare their trade-offs against its contract and recommend one. Use when the component's spec exists and the user wants options to choose from before building it in Figma. Not for solution concepts to a broader problem;

• prototype

  Build a component in Figma with every variant and state from its contract, using design-system tokens and the chosen approach. Use when a design direction has been picked and the user wants the component actually drawn on the Figma canvas.

• system-overview

  Summarize a Figma file's design system — components, styles, token collections and modes, and page structure — in one structured overview. Use when the user is new to a Figma design system or wants to know what it contains before working with it. Not for exporting tokens as code; see /design:export-

MCP servers (1)

• metapowers-figma

  runs: npx -y @metapowers/[email protected]

Hooks (2)

• PreToolUse

  "${CLAUDE_PLUGIN_ROOT}"/hooks/phase-gate.sh

• PreToolUse

  "${CLAUDE_PLUGIN_ROOT}"/hooks/check-define-exists.sh

Similar plugins