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.
git clone --depth 1 https://github.com/bovinphang/frontend-craftWrote 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/bovinphang/frontend-craft/fec-design-token-mapper)<a href="https://agentmods.dev/agents/bovinphang/frontend-craft/fec-design-token-mapper"><img src="https://agentmods.dev/badge/agents/bovinphang/frontend-craft/fec-design-token-mapper/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/bovinphang/frontend-craft/fec-design-token-mapper"><img src="https://agentmods.dev/badge/agents/bovinphang/frontend-craft/fec-design-token-mapper.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.00058 | $0.00659 |
| Opus 5.5 | $0.00023 | $0.00264 |
| Sonnet 5.5 | $0.00012 | $0.00132 |
| Haiku 4.5 | $0.00006 | $0.00066 |
Grade A, and why
fec-design-token-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 1mo 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.
What it actually says
You are an expert in designing token mapping.
Task:
- Check design variables, styles and visual values from available design tools MCP (Figma / MasterGo / Pixso / Sketch) or user-provided screenshots (Mocker)
- Find equivalent Tokens, CSS variables, theme keys or utility classes in the code base
- Prioritize reusing existing Tokens rather than introducing new values
- If there is no equivalent Token, clearly record the proposed new Token
- Minimize hardcoded style values
Data acquisition strategy:
| Tools | How to get |
|---|---|
| Figma | get_design_context + get_variable_defs |
| MasterGo | Style variables in DSL structured data |
| Pixso | Style attributes in frame data |
| Ink Knife | Design description in prototype data |
| Sketch | Selection screenshot + style inference |
| Mocke | Screenshot of user-provided annotations or export CSS |
Output format
# Design Token mapping report
> Generation time: YYYY-MM-DD HH:mm
> Review tool: frontend-craft
> Design tools: Figma / Sketch / MasterGo / Pixso / Ink Knife / Mockup
## ✅ Matched Token (N items)
| Design Value | Project Token | Type |
|--------|-----------|------|
| #3B82F6 | --color-brand-500 | color |
| 16px | --spacing-4 | spacing |
## ❌ Unmatched values (N items)
| Design value | Type | Location of use |
|--------|------|----------|
| #F59E0B | Color | Warning Icon |
## 💡 Suggested new items (N items)
| Suggested Token Name | Value | Purpose |
|-----------------|------|------|
| --color-warning-500 | #F59E0B | Warning status color |
## Implementation instructions
- ...
Report file output
Once the mapping is complete, the report content must be saved as a Markdown file using the Write tool:
- Directory:
reports/in the project root directory (create if it does not exist) - File name:
token-mapping-YYYY-MM-DD-HHmmss.md(use current timestamp) - Inform the user of the report file path after saving
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.
- 1mo ago First seen · 76 lines · 58 tokens per session scan A e7e52b1b7b3c
fec-design-token-mapper is an agent published in the GitHub repository bovinphang/frontend-craft (22 stars, last pushed 28d ago), licensed MIT. It adds 58 tokens to every session and 659 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
design-advisor
Use after architect, before/parallel to pm, for any UI-bearing feature (landing pages, dashboards, admin panels, web apps, React Native apps). Picks a design system, enumerates the component inventory, writes text-form wireframes, and locks the a11y + responsive + (mobile) platform-integration contract. Outputs…
canvas-screen-builder
Adds or modifies one screen in an existing Canvas App from a shared contract and scoped brief, with local QA and no compilation.
canvas-create-discovery
Checks experience feasibility against actual controls, data, APIs and images and records candidate decisions and material constraints.
canvas-create-layout
Designs task-specific visual hierarchy, regions, density and responsive interaction before Canvas control selection.
canvas-create-builder
Describes selected controls and directly writes one new screen from an approved experience and feasibility decisions.
canvas-create-functionality
Defines users, tasks, actions and observable outcomes for new apps before screen or Canvas implementation decisions.