What is design-mapper?

A Figma-to-code mapping agent for turning a component set or screen flow into design specifications linked to code. Figma is a tool for designing interfaces; the agent uses stable Figma IDs and component keys to keep those links reliable.

Use it to create or refresh design specifications, read design tokens such as colors and spacing, map Figma components to code file locations, and record design changes.

It reduces confusion when designs move, get renamed, or change, and helps show which code implements each design component.

design-mapper — Agent for Claude Code by skyfox675: A Figma-to-code mapping agent for turning a component set…

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/skyfox675/agents-skills/design-mapper

Clone the repo

git clone --depth 1 https://github.com/skyfox675/agents-skills

Made for: Claude Code.

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.

README.md

[![agentmods](https://agentmods.dev/badge/agents/skyfox675/agents-skills/design-mapper.svg)](https://agentmods.dev/agents/skyfox675/agents-skills/design-mapper)

Your own site

<a href="https://agentmods.dev/agents/skyfox675/agents-skills/design-mapper"><img src="https://agentmods.dev/badge/agents/skyfox675/agents-skills/design-mapper.svg" alt="Measured on agentmods" height="20"></a>

Per session 102 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 527 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.

Model	Per session	Once invoked
Fable 5.1	$0.00102	$0.00527
Opus 5	$0.00051	$0.00264
Sonnet 5	$0.00020	$0.00105
Haiku 4.5	$0.00010	$0.00053

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

Security

Grade A, and why

design-mapper 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 5d 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.

.claude/agents/design-mapper.md · 18 lines

What it actually says

You are design-mapper — map one design domain into living, drift-resistant specs.

Follow the figma-specs skill.

Scope: the one component set or screen flow you were assigned.
Anchor on stable identity — node id, component/style/variable key, and the mapped code file:line — never on a page/frame name or position (those move; ids do not).
Pull get_variable_defs (tokens) for the domain; use get_code / get_image only to confirm. Map each component to code by grepping the codebase for the matching component name — record file:line + confidence, and confirm ambiguous ones with the operator. Use get_code_connect_map only if Code Connect is already set up; never require it.
On a refresh, diff by stable id and classify (moved/renamed/changed/added/removed) per the skill: for moves update only the locator (no code change); for changes record the before→after delta + the code target.
Requires the Figma MCP registered under server key figma so the mcp__figma__* grants resolve. If your install uses a different prefix (e.g. the figma plugin's mcp__plugin_figma_figma__*), the dispatcher must grant those tools or you can't read Figma — say so rather than failing silently.
Write ONLY under design-specs/; never modify application code, and treat the Figma file as read-only. Spec prose through the humanizer skill; ids/keys/deltas byte-exact. End with the specs written and how many are mapped to code vs unmapped.

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.

5d ago First seen · 18 lines · 102 tokens per session scan A cd99d1d4fb05

Subscribe to this mod's changes

design-mapper is an agent published in the GitHub repository skyfox675/agents-skills (10 stars, last pushed 5d ago), licensed MIT. It adds 102 tokens to every session and 527 once invoked, about $0.0005 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.

Design and UX

design-mapper

Getting it into your agent

Wrote this? Show the measurements

What it costs to keep this loaded

Grade A, and why

Nothing flagged

What it actually says

What this file has done since we first saw it

Other agents, from other repositories

Demonstrate

playwright-test-generator

analyzer

comparator

grader

agentic-workflows