mcpField
F
figma-context-reader

figma-context-reader

github.com/sergekostenchukDesign & UI3253 installsUpdated 18w ago
Repository

About figma-context-reader

figma-context-reader is a read-only skill for turning Figma inputs into evidence-backed design briefs. It supports design reviews and implementation handoffs while distinguishing Figma metadata from visual inference.

Key features

  1. 01Frame and page briefs
  2. 02Component and token summaries
  3. 03Evidence collection for audits
  4. 04Implementation handoff context
  5. 05Evidence labels and privacy checks

Use cases

  1. 01Summarizing a selected Figma frame
  2. 02Documenting component variants and constraints
  3. 03Preparing evidence for a UX audit
  4. 04Handing design context to implementation specialists

MCP support

It can use a connected MCP selection to obtain Figma context; if MCP access is unavailable, it requests an export, screenshot, node metadata, or manual details.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-context-reader

After installing, type/figma-context-readerin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
assets/
context-brief-template.md
evals/
evals.json

Details

From the project README

Figma Context Reader

Use this skill to turn Figma context into an evidence-backed design brief. This is a read-only skill; route mutations to figma-canvas-editor or figma-design-system-sync.

Modes

  • frame-brief: summarize a selected frame or page.
  • component-brief: summarize components, variants, props, and constraints.
  • token-brief: summarize variables, styles, color roles, spacing, radius, typography, and effects.
  • audit-input: collect enough Figma evidence for ux-audit-skill or design-critic-skill.
  • handoff: prepare context for implementation specialists.

Workflow

  1. Confirm the input type: Figma URL, selected node, file key, screenshot/export, or connected MCP selection.
  2. Apply ../../shared/privacy-policy.md.
  3. If a use_figma call is needed, first invoke the installed figma:figma-use skill.
  4. Read only the needed nodes, variables, components, styles, and assets. Avoid broad file scans unless the user asks for library/system work.
  5. Produce a structured context brief with evidence labels. Distinguish direct Figma metadata from visual inference.
  6. If MCP access is unavailable, ask for an export, screenshot, node metadata, or manual Figma details as fallback.

Output Shape

Use assets/context-brief-template.md.

Evidence Rules

  • Figma metadata: node names, type, layout fields, variables, styles, component names, asset references.
  • Visual inference: hierarchy, attention, density, likely intent, visual polish.
  • Missing: anything not available from the current Figma context.

Do not claim DOM, runtime behavior, accessibility scan, or implementation evidence from Figma context alone.

Validation And Eval

  • Check that the final brief names the evidence source and privacy mode.
  • Check that every implementation claim is traceable to Figma metadata, visual inference, or an explicit missing-context note.
  • Use evals/evals.json for forward tests that distinguish connected Figma context from screenshot-only input.

Resources

  • Read $CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md when tool availability is unclear.
  • Use assets/context-brief-template.md for reports.

Comments

Markdown supported