figma-designer

figma-designer is an agent for Claude Code from addit-digital/addit-harness. It costs 141 tokens per session (2,772 once invoked), scanned A, original, MIT.

A Figma automation agent that turns a written user-experience specification into frames, components, layouts, variables, and design tokens in Figma. Figma is a collaborative tool for creating interface designs.

In plain words
What is it for?
Use it after a UX designer has prepared a specification to build or update the corresponding Figma screens and components through Figma's official integration.
Why use it?
It removes the manual work of translating a UX plan and existing design rules into an actual Figma file, while leaving new UX decisions to the designer.

Agent for Claude Code

Written for Claude Code: shipped in a Claude Code plugin. Also seen: model in frontmatter; mentions Claude Code.

Part of the addit-harness plugin — 6 skills, 6 commands, 14 agents, 1 hook shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add agents/addit-digital/addit-harness/figma-designer
Clone the repo
git clone --depth 1 https://github.com/addit-digital/addit-harness

Made for: Claude Code.

Or install addit-harness, the plugin that ships this one along with the rest of its 6 skills, 6 commands, 14 agents, 1 hook.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for figma-designer

README.md
[![agentmods](https://agentmods.dev/badge/agents/addit-digital/addit-harness/figma-designer.svg)](https://agentmods.dev/agents/addit-digital/addit-harness/figma-designer)
Your own site
<a href="https://agentmods.dev/agents/addit-digital/addit-harness/figma-designer"><img src="https://agentmods.dev/badge/agents/addit-digital/addit-harness/figma-designer.svg" alt="Measured on agentmods" height="20"></a>
Per session 141 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 2,772 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00141 $0.02772
Opus 5 $0.00071 $0.01386
Sonnet 5 $0.00028 $0.00554
Haiku 4.5 $0.00014 $0.00277

Measured 6d ago against content hash ef7d74047828, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

figma-designer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

agents/figma-designer.md · 218 lines

How it starts

The opening of the file, as written. The whole thing — 218 lines — stays where its author put it; the contents beside it link to each section on GitHub.

You are a Figma execution specialist. Your job is to materialize design specs and design-system conventions into Figma — creating, editing, and updating frames, components, auto-layout structures, variables, and tokens via the official Figma MCP server. You translate intent into pixels; you do not invent UX.

Purpose

Bridge the gap between a written UX spec (from @ux-designer) and an actual Figma file. Given a spec and the project's design system, use the Figma MCP tools to build the design in Figma accurately and verifiably. Surface design-system gaps you discover; escalate net-new UX decisions upstream.

Decision Model

This is the grounding ladder you follow on every task — highest authority first:

1. UX spec (from @ux-designer) — The source of truth for flows, state matrix, component selection, layout intent, copy, and interaction specs. If a docs/work/<slug>/solutions/ doc exists for the task, read it before opening Figma. Follow it precisely.

2. Design system conventions — Read .claude/design-conventions.md in the project root before placing any element. This gives you tokens (color, type, spacing, radius, motion), component primitives, breakpoints, and layout rhythm. Also inspect the existing Figma file's component library and local variable collections — they are authoritative; use instances, not detached copies.

3. Baseline UI/UX heuristics (gap-fill only) — When the spec or design-conventions leave a detail unspecified (e.g. exact padding between two new elements with no token precedent), apply standard heuristics (8px grid, 4px minor unit, Nielsen error-prevention). Mark these gap-fills in your report.

4. Escalate — do not invent — If the task requires a genuine UX decision (new flow, novel interaction model, IA change, new component pattern not in the design system), stop and escalate to @ux-designer with a clear question. Do not design the UX yourself.

What this agent owns vs. defers

Owns (UI translation / fidelity) Defers (net-new UX / token architecture)
Layout zones → auto-layout constraints New flows, decision trees, IA changes → @ux-designer
Spacing/type/color from existing tokens New token tiers, design system architecture → @frontend-architect
Selecting the correct existing component instance New component API or pattern design → @frontend-architect
Layer naming, structure, and organization in Figma Interaction model design (novel gestures, patterns) → @ux-designer
Touch-target sanity, basic contrast check against existing tokens WCAG token-level contrast architecture → @frontend-architect
Figma variable and mode application New variable collection schema → @frontend-architect
Surfacing design-system gaps as a list Designing the gap resolution → @frontend-architect

Read the full file on GitHub · 218 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 6d ago First seen · 218 lines · 141 tokens per session scan A ef7d74047828

Subscribe to this mod's changes

figma-designer is an agent published in the GitHub repository addit-digital/addit-harness (3 stars, last pushed 14d ago), licensed MIT. It adds 141 tokens to every session and 2,772 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other agents, from other repositories

design

UI/UX design agent. Use for visual design decisions, layout planning, component design, design system work, and accessibility audits. Integrates with design-for-ai skills when available.

randomittin/heimdall · 38 tokens

ijfw-accessibility-reviewer

Design-phase WCAG 2.1 AA review of UI artefacts: contrast, semantics, focus, ARIA. Trigger per design review pass.

FerroxLabs/ijfw · 37 tokens

ijfw-accessibility-eng

Audits frontend dashboard surfaces for WCAG AA conformance. Trigger after any dashboard UI change.

FerroxLabs/ijfw · 25 tokens

atomic-reviewer

Diff / branch / file reviewer with two modes. Code-mode (default): reviews a diff against a spec, verifies TDD signals were actually run. Spec-mode: reviews a draft spec for alignment with its design doc, coverage, voice, and over-prescription. One line per finding, severity-tagged, no praise, no scope creep. Output…

damusix/atomic-claude · 127 tokens

atomic-investigator

Read-only code locator. Answers "where is X defined", "what calls Y", "list all uses of Z", "map this directory". Returns file:line table, no prose. Refuses to suggest fixes or speculate about design. Use to save main-context tokens on exploration.

damusix/atomic-claude · 61 tokens

ux-researcher

UX research, usability testing, user interviews, wireframing, and information architecture specialist. Use when planning user research, designing interfaces, conducting heuristic evaluations, or creating wireframes. Trigger phrases: UX research, user research, usability, wireframe, user interview, persona, journey…

travisjneuman/.claude · 69 tokens