agentmods.dev

image-to-code

image-to-code is a skill for Claude Code from plugin87/ux-ui-agent-skills. It costs 77 tokens per session (886 once invoked), scanned A, original, MIT.

A process for rebuilding a screenshot, mockup, or other reference image as accessible code with matching colors, typography, spacing, shapes, and layout.

In plain words
What is it for?
Use it when you have an image of a design and need a coded component, page, or screen based on it.
Why use it?
It gives developers a structured way to turn a visual reference into maintainable interface code.

Skill for Claude Code

Written for Claude Code: disable-model-invocation in frontmatter. Also seen: mentions Claude Code.

Part of the ux-ui-agent-skills plugin — 26 skills, 1 command, 1 agent, 3 hooks, 2 MCP servers shipped together

not rated 2.7krepo +802 changed 13d ago A scan Socket: passSnyk: pass 77 tokens original MIT

Good fit Use it when you have an image of a design and need a coded component, page, or screen based on it.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/plugin87/ux-ui-agent-skills/image-to-code
View source ↗ plugin87/ux-ui-agent-skills plugin87.github.io
About the project

UX/UI Agent Skills is a set of instructions, design tokens, reusable components, accessibility rules, and design-system references that guide Claude in producing interface designs and code. It is intended for developers and designers who want framework-independent, token-based UI work with accessibility checks. The catalogue entries package these UX, UI, component, and validation workflows as Claude Code skills and related add-ons.

plugin87/ux-ui-agent-skills · 2,729 stars · on GitHub · plugin87.github.io

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.

Any agent
npx skills add plugin87/ux-ui-agent-skills --skill image-to-code
Clone the repo
git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills

Made for: Claude Code.

Or install ux-ui-agent-skills, the plugin that ships this one along with the rest of its 26 skills, 1 command, 1 agent, 3 hooks, 2 MCP servers.

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.

agentmods badge for image-to-code

README.md
[![agentmods](https://agentmods.dev/badge/skills/plugin87/ux-ui-agent-skills/image-to-code/github.svg)](https://agentmods.dev/skills/plugin87/ux-ui-agent-skills/image-to-code)
Your own site
<a href="https://agentmods.dev/skills/plugin87/ux-ui-agent-skills/image-to-code"><img src="https://agentmods.dev/badge/skills/plugin87/ux-ui-agent-skills/image-to-code/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.

agentmods 80×15 button for image-to-code

Your own site · 80×15
<a href="https://agentmods.dev/skills/plugin87/ux-ui-agent-skills/image-to-code"><img src="https://agentmods.dev/badge/skills/plugin87/ux-ui-agent-skills/image-to-code.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 77 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 886 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • Socket pass 8 Oct 2026
  • Snyk pass 8 Oct 2026
How audits are shown
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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00077 $0.00886
Opus 5.5 $0.00031 $0.00354
Sonnet 5.5 $0.00015 $0.00177
Haiku 4.5 $0.00008 $0.00089

Measured 13d ago against content hash f755a7034b6d, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

image-to-code 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 13d 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/skills/image-to-code/SKILL.md · 39 lines

How it starts

The opening of the file, as written. The whole thing — 39 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Skill: Image to Code

Step 0 — is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

Reconstruct a design from a visual reference as a real design system, not a one-off copy. Match the system (color/type/spacing language), never lift copyrighted imagery or brand assets.

Steps

  1. Read the reference like a designer. Infer and write down:
    • Palette — 1 dominant surface family, text colors, 1 primary action + at most 1 accent (sample the hues; don't guess random hex).
    • Type — family feel (geometric/grotesk/serif), the scale jumps, display vs. body contrast, weights.
    • Spacing & density — base unit, section rhythm, card padding; airy vs. compact.
    • Radius & depth — radius language (sharp/soft/pill), shadow vs. hairline separation.
    • Layout archetype + sequence — bounded hero / asymmetric split / dense bento / editorial stack (${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md → Variance Mandate).
  2. Anchor to a known system if it's close — browse ${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md / python3 ${CLAUDE_SKILL_DIR}/../../../scripts/design_systems.py search <term> and adopt that recipe to stabilize decisions.
  3. Build the token theme from the inferred values → 3-tier DTCG (design-tokens skill); generate a single theme.css. Verify every color pair with ${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py / ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py (light + dark) — a sampled brand color that fails AA gets adjusted; taste never overrides POUR.
  4. Rebuild layout + components token-driven via ${CLAUDE_SKILL_DIR}/../../../frameworks/adapter-protocol.md + ${CLAUDE_SKILL_DIR}/../../../components/*: one shared primitive layer, all 8 states, a11y wired, no emoji (lucide), single theme. Apply taste (design-taste.md) so it doesn't regress to generic.
  5. Verify against the reference — render and screenshot it, compare side-by-side to the reference; run node ${CLAUDE_SKILL_DIR}/../../../scripts/measure_render.mjs, lint_hardcodes.py, taste_audit.mjs, and npm run verify.

Read the full file on GitHub · 39 lines

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.

  1. 13d ago Changed f755a7034b6d
  2. 15d ago Changed · +10 lines 1814312b2455
  3. 1mo ago First seen · 29 lines · 77 tokens per session scan A db744adaecc8

Subscribe to this mod's changes

image-to-code is a skill published in the GitHub repository plugin87/ux-ui-agent-skills (2,729 stars, last pushed yesterday), licensed MIT. It adds 77 tokens to every session and 886 once invoked, about $0.0003 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.

CSS and stylingClaude CodeDesign and UXFrontendaccessibilityai-agentsclaudeclaude-skillscomponent-library
Related

Other skills, from other repositories

brand-visual-language

Shape language across type, radius and icons carries brand personality. Use when starting a design system, picking icons or radius tokens, or reviewing visual consistency.

dembrandt/dembrandt-skills · 35 tokens

loading-states-and-perceived-performance

Spinners, skeletons and staggered reveals that manage wait times. Use when designing loading states, async data or the feel of a slow interface.

dembrandt/dembrandt-skills · 38 tokens

micro-interactions

Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.

dembrandt/dembrandt-skills · 28 tokens

motion-and-storytelling

Disney's animation principles and cinematic technique applied to UI motion. Use when designing transitions, scroll animations or onboarding motion.

dembrandt/dembrandt-skills · 28 tokens

responsive-paradigms

Mobile, tablet and desktop are different paradigms, not one layout scaled. Use when designing responsive layouts or deciding what each breakpoint shows.

dembrandt/dembrandt-skills · 33 tokens

color-mode-and-theme

Light, dark or both, and when a theme selector is worth it. Use when defining a base palette or deciding on dark mode support.

dembrandt/dembrandt-skills · 33 tokens