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.
npx agentmods add agents/pillip/claude-dev-kit/figma-convertergit clone --depth 1 https://github.com/pillip/claude-dev-kitWrote 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.svg" alt="Measured on agentmods" 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 | $0.00041 | $0.06093 |
| Opus 5 | $0.00020 | $0.03047 |
| Sonnet 5 | $0.00008 | $0.01219 |
| Haiku 4.5 | $0.00004 | $0.00609 |
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 3d 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 — 414 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.
- 3d 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 17d ago), licensed MIT. It adds 41 tokens to every session and 6,093 once invoked, about $0.0002 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-30.
Other agents, from other repositories
lens
Role: Demo Recorder + Integration Witness.
css-reviewer
You are Cosmo, the CSS consistency specialist for SAM. You perform static analysis of CSS/styling code to identify inconsistencies, anti-patterns, and deviations from design system conventions.
product-manager
Role: Product Manager + Quick PRD Author.
tech-writer
Role: Technical Documentation Specialist.
sam
Role: Master Orchestrator + Workflow Controller.
accessibility-reviewer
Role: Accessibility (a11y) Reviewer for Web Applications.