CommunityImagegithub.com

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

What is image-to-code?

image-to-code is a Claude Code agent skill that turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/image-to-code

Installed? Explore more Image skills: steipete/songsee, affaan-m/frontend-design-direction, affaan-m/ios-icon-gen · View all 6 →

View original→Browse all skills

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Skill: Image to Code

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 — full-bleed hero / asymmetric split / bento / editorial stack (taste/design-taste.md → Variance Mandate).
  2. Anchor to a known system if it's close — browse taste/aesthetic-systems.md / python3 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 scripts/contrast.py / 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 frameworks/adapter-protocol.md + 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 scripts/measure_render.mjs, lint_hardcodes.py, taste_audit.mjs, and npm run verify.

Verification (definition of done)

  • npm run verify is 100% (tokens resolve, contrast AA light+dark, no hardcodes/emoji, real-render WCAG).
  • The rebuilt UI uses ONE inferred token theme — no per-section palettes.
  • A screenshot of the result visibly matches the reference's design language.

Honest limit: this matches the design system, not a pixel-perfect copy. Do not reproduce the reference's photographs, logos, or copyrighted copy — substitute your own or generic placeholders.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

Related Skills

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design-direction

Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.

community

affaan-m/ios-icon-gen

Generate iOS app icons as PNG imagesets for Xcode asset catalogs from SF Symbols (5000+ Apple-native) or Iconify API (275k+ open source icons from 200+ collections). Use when generating icons, creating icon assets, adding icons to asset catalog, or searching for icons for iOS projects.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

affaan-m/skill-comply

Visualize whether skills, rules, and agent definitions are actually followed — auto-generates scenarios at 3 prompt strictness levels, runs agents, classifies behavioral sequences, and reports compliance rates with full tool call timelines

community

affaan-m/design-system

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

community
← More Image skills