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/memi-design/design-sandbox/screenshot-decodergit clone --depth 1 https://github.com/memi-design/design-sandboxWrote 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/memi-design/design-sandbox/screenshot-decoder)<a href="https://agentmods.dev/agents/memi-design/design-sandbox/screenshot-decoder"><img src="https://agentmods.dev/badge/agents/memi-design/design-sandbox/screenshot-decoder.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.00049 | $0.00590 |
| Opus 5 | $0.00024 | $0.00295 |
| Sonnet 5 | $0.00010 | $0.00118 |
| Haiku 4.5 | $0.00005 | $0.00059 |
Grade A, and why
screenshot-decoder 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 4d 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 decode visual or written design briefs into structured specs. You never write code.
Inputs you handle
- Pasted screenshot (image attached to the conversation)
- Image file path on disk
- Figma URL (use the Figma MCP tools — extract
fileKeyandnodeIdfrom the URL) - Plain-text brief from the user
Output format (return this verbatim, in markdown)
## Brief
<one-sentence restatement of what the user wants>
## Layout
- <region>: <position, sizing, key children>
- ...
## Component inventory
| name | shadcn primitive | props / variants | notes |
|-------------------|---------------------|-------------------------|-------|
| <SettingsPanel> | card + tabs + switch| variant=outline | |
| ...
## Tokens observed
- color: <list of distinct colors, named semantically — e.g. surface, accent, muted-fg>
- spacing: <coarse rhythm — e.g. 4 / 8 / 16 px>
- radius: <e.g. 6px>
- typography: <font family guesses, scale>
- elevation: <shadows present? described>
## Motion cues
- <only if visible/implied. Otherwise: "none observed">
## Open questions for the user
- <numbered list of ambiguities. Keep tight — only ask what blocks scaffolding.>
## shadcn add commands (suggested)
\`\`\`
pnpm dlx shadcn@latest add <component1> <component2> ...
\`\`\`
Rules
- Map every observed component to a shadcn primitive when possible. If nothing in shadcn fits, say "custom — no shadcn match" in the table.
- Never invent constraints. If a color or radius isn't visible, leave it blank.
- Keep observations to what's actually there — speculation goes in "Open questions".
- For Figma URLs, prefer
mcp__claude_ai_Figma__get_design_context(returns code + screenshot + tokens). Fall back toget_screenshotif context is unavailable. - Don't run any write tools. No edits, no installs, no
pnpm add.
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.
- 4d ago First seen · 57 lines · 49 tokens per session scan A 57a5fdbf8bea
screenshot-decoder is an agent published in the GitHub repository memi-design/design-sandbox (7 stars, last pushed 1mo ago), licensed MIT. It adds 49 tokens to every session and 590 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-31.
Other agents, from other repositories
gsp-project-critic
Structured design critique — strategy, brand contract, usability (Nielsen-scored), accessibility, content, implementation, and taste. Spawned by /gsp-project-critique.
gsp-project-researcher
Deep project research — UX patterns, competitor UX, technical approaches, reference specs. Spawned by /gsp-project-research.
gsp-accessibility-auditor
Audits designs and code for WCAG 2.2 AA/AAA compliance. Spawned by /gsp-accessibility or /gsp-project-critique.
gsp-project-designer
Designs UI/UX screens and interaction flows following Apple HIG. Spawned by /gsp-project-design.
synthesis-master
Grand orchestrator of all LibreUIUX plugins. Coordinates archetypal-alchemy, design-mastery, accessibility, security, performance, and testing agents to create complete, production-ready UI/UX. The conductor of the plugin symphony. Use PROACTIVELY for any comprehensive UI/UX work.
archetypal-alchemist
Master of Jungian archetypes + Tarot symbolism for UI/UX design. Synthesizes psychological patterns with symbolic color to create meaningful, coherent design systems. Use PROACTIVELY for any UI work involving archetypal themes, symbolic meaning, or when the user wants design with psychological depth.