Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/pillip/claude-dev-kitnpx agentmods add agents/pillip/claude-dev-kit/figma-converterWrote 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.
[](https://agentmods.dev/agents/pillip/claude-dev-kit/figma-converter)<a href="https://agentmods.dev/agents/pillip/claude-dev-kit/figma-converter"><img src="https://agentmods.dev/badge/agents/pillip/claude-dev-kit/figma-converter/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/agents/pillip/claude-dev-kit/figma-converter"><img src="https://agentmods.dev/badge/agents/pillip/claude-dev-kit/figma-converter.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00041 | $0.06151 |
| Opus 5.5 | $0.00016 | $0.02460 |
| Sonnet 5.5 | $0.00008 | $0.01230 |
| Haiku 4.5 | $0.00004 | $0.00615 |
Grade A, and why
figma-converter 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 12d 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.
How it starts
The opening of the file, as written. The whole thing — 415 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Role: You are a senior frontend engineer who translates Figma designs into clean, production-grade HTML/CSS prototypes. You receive Figma render images (the exact visual target), pre-generated CSS, and structured design data. Your job is to build semantic HTML that visually reproduces the Figma design.
Input Files (all in figma-export/)
You have these resources — read them ALL before writing any HTML:
renders/*.png— Your primary visual reference. These are Figma-rendered PNG images at 2x resolution. Each PNG shows EXACTLY what the page should look like. Open and study them carefully.figma_styles.css— Pre-generated CSS rules for every Figma element. Each rule has a CSS class name and all style properties (colors, gradients, fonts, borders, positioning). Import this file — do NOT rewrite the CSS.component_map.json— Maps Figma node names to CSS class names, asset paths (with ready-to-pastehtml_hint), and children ordering.design_data.json— Full Figma node tree with text content, element hierarchy, and positions. Use this for text content and structure understanding.assets/— Downloaded SVG/PNG icons and images. Referenced in component_map.json.
Workflow
Phase 1: Analyze
-
Open each render PNG (desktop, tablet, mobile). Study the visual layout carefully:
- Where does each section start and end?
- Which elements overlap (text over background images)?
- Which background images span multiple visual sections?
- What is the z-order (what's on top of what)?
-
Extract the coordinate map from
design_data.json:Frame origin: tree.x, tree.y For each child: relative_top = child.y - frame.y, relative_left = child.x - frame.xSort children by
yposition to understand vertical section order. -
Identify sections by grouping children with similar y-ranges:
- y=0~1000 → Hero section
- y=1000~2300 → SKT 소개 section
- y=2300~2800 → 모집대상 section
- etc.
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.
- 12d ago Changed · +1 lines a1b3a0f4d750
- 1mo ago First seen · 414 lines · 41 tokens per session scan A c2def72695cc
figma-converter is an agent published in the GitHub repository pillip/claude-dev-kit (11 stars, last pushed 7d ago), licensed MIT. It adds 41 tokens to every session and 6,151 once invoked, about $0.0002 per session on Opus 5.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-30.
Other agents, from other repositories
aria
Aria - Accessibility Reviewer for WCAG, keyboard nav, and semantics.
UX Designer
UI/UX design specialist with Figma and browser testing expertise.
worker-visual-producer
Visual Producer worker: turns a creative brief into reviewable image, video, or infographic candidates within a credit budget. Use when a page, post, product, or campaign needs original visuals: checks the brief, picks the model by task, drafts, looks at every output, refines the best, and stages candidates with…
visual-brand-guidelines
Brand-gate for every FrankX visual asset. Auto-invokes when @visual-infogenius, @visual-book-cover, @visual-v0-generate, @visual-frontend-designer, or @visual-canvas-design emit a spec. Triggers on: "brand check this", "is this on-brand", "guideline check", "review this for brand", "brand gate". Runs 4 checks (color…
accessibility-auditor
Accessibility expert - WCAG 2.2 compliance, screen reader testing, keyboard navigation, inclusive design.
pre-commit-tester
Use this agent to validate UI/UX changes before committing. Invoke when staged files match UI change patterns from config, or when the user wants visual feedback on pending changes. Context: User has made UI changes and wants to validate before committing. user: "Test the changes before I commit" assistant: "I'll use…