CommunityImagengithub.com

plugin87/imagen-a-codigo

Convierte una imagen de referencia, captura de pantalla o maqueta en código accesible basado en tokens, infiriendo el sistema de diseño a partir de la referencia.

¿Qué es imagen-a-codigo?

Esta habilidad permite a un agente de IA (como Claude Code, Cursor o Codex) analizar una imagen de referencia (captura de pantalla, maqueta o diseño) y generar código UI correspondiente, utilizando un sistema de diseño tokenizado en tres niveles. En lugar de hacer una copia pixel-perfect, la habilidad infiere el sistema de diseño subyacente: paleta de colores, tipografía, espaciado, radios y layout. Luego construye un tema de tokens DTCG en un solo archivo `theme.css`, verifica el contraste AA en modo claro y oscuro, y reconstruye los componentes y layout usando tokens. Finalmente, verifica el resultado generando una captura, comparándola con la referencia y ejecutando pruebas automatizadas (contraste, tokens resueltos, sin hardcodes, sin emoji). Está diseñada para evitar la reproducción de imágenes protegidas, logos o marcas registradas, y se enfoca en capturar la esencia del sistema de diseño.

Compatible con~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 Imagen skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Habilidad: Imagen a Código

Reconstruye un diseño a partir de una referencia visual como un sistema de diseño real, no una copia única. Iguala el sistema (lenguaje de color/tipografía/espaciado), nunca copies imágenes protegidas por derechos de autor ni activos de marca.

Pasos

  1. Lee la referencia como un diseñador. Infiere y anota:
    • Paleta — 1 familia de superficie dominante, colores de texto, 1 acción primaria + máximo 1 acento (muestrea los matices; no adivines hex aleatorios).
    • Tipografía — sensación de familia (geométrica/grotesk/serif), los saltos de escala, contraste entre display y cuerpo, pesos.
    • Espaciado y densidad — unidad base, ritmo de secciones, padding de tarjetas; aireado vs. compacto.
    • Radio y profundidad — lenguaje de radio (afilado/suave/píldora), separación con sombra vs. línea fina.
    • Arquetipo de layout + secuencia — héroe a sangre completa / división asimétrica / bento / pila editorial (taste/design-taste.md → Mandato de Variación).
  2. Ancla a un sistema conocido si se aproxima — consulta taste/aesthetic-systems.md / python3 scripts/design_systems.py search <término> y adopta esa receta para estabilizar decisiones.
  3. Construye el tema de tokens a partir de los valores inferidos → DTCG de tres niveles (habilidad design-tokens); genera un único theme.css. Verifica cada par de colores con scripts/contrast.py / scripts/validate_contrast.py (claro + oscuro) — un color de marca muestreado que falle AA se ajusta; el gusto nunca anula POUR.
  4. Reconstruye layout + componentes basados en tokens mediante frameworks/adapter-protocol.md + components/*: una capa primitiva compartida, todos los 8 estados, accesibilidad integrada, sin emoji (lucide), tema único. Aplica gusto (design-taste.md) para que no regrese a genérico.
  5. Verifica contra la referencia — renderiza y captura la pantalla, compárala lado a lado con la referencia; ejecuta node scripts/measure_render.mjs, lint_hardcodes.py, taste_audit.mjs y npm run verify.

Verificación (definición de terminado)

  • npm run verify está al 100% (los tokens se resuelven, contraste AA claro+oscuro, sin hardcodes/emoji, render real WCAG).
  • La UI reconstruida usa UN tema de tokens inferido — sin paletas por sección.
  • Una captura de pantalla del resultado coincide visiblemente con el lenguaje de diseño de la referencia.

Límite honesto: esto iguala el sistema de diseño, no una copia pixel-perfect. No reproduzcas las fotografías, logotipos o contenido protegido por derechos de autor de la referencia — sustitúyelos por los tuyos o por marcadores de posición genéricos.

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.

Skills relacionados

steipete/songsee

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

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

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More Imagen skills