Skip to content
Design
Skill

/figma

Implement an already chosen Figma target faithfully while verifying unrepresented behavior, states and responsive gaps.

BOOST
From plugin
oh-my-design
20120 skills24 agents1 MCP
Install
$ npx -y skills add 3x-haust/oh-my-design --skill figma --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/figma

Context preview

The summary Claude sees to decide when to auto-load this skill.

Implement an already chosen Figma target faithfully while verifying unrepresented behavior, states and responsive gaps.

SKILL.md

figma.SKILL.md
name: figma
description: Implement an already chosen Figma target faithfully while verifying unrepresented behavior, states and responsive gaps.

Figma

The supplied frames already choose their represented visual properties. Do not invent another concept tournament or silently correct the user's design. Frame the full requested surfaces, behavior/accessibility and missing responsive/state coverage; absence in Figma is a gap, not approval.

Run omd doctor. Check only whether FIGMA_TOKEN is configured, never print it or read a secret into output. If missing, request private local configuration of a read-only File content token; do not invent a workaround. Use `omd figma pull <figma-url>` and `omd figma system`, inspect the actual snapshot, component variants and responsive pairing. Reuse only needed components, not a speculative library.

Hand implements within the current route. For each supplied frame/view run `omd figma diff <frame-id> <rendered-page> --json`; repair observed mismatch and re-diff. Missing paired viewports require truthful interpolation and real render checks, not a claimed Figma match. Finite attempts or a fidelity exception do not turn a failed diff into PASS. The same unresolved defect after three failed repairs needs escalation.

Keep snapshot/attribution separate from external reference assembly. If independent research was requested, use its own current browse/analysis contract. Report original-design advisories without silently changing target properties; implementation defects remain repairs. Task/access/safety obligations still apply.

Finish with current native measured/rendered evidence, independent review and guard completion under the applicable host contract. Report per-frame/view fidelity, responsive gaps, attribution and exact limitations. Design-only requests end at their handoff and make no implemented-behavior claim.

Read more
Ships withoh-my-design

AI that designs like a human. Give OMD one request. It researches, compares real material, chooses a direction, builds, renders, and repairs internally.

Get the whole plugin

Other skills on oh-my-design.