CommunityImagemgithub.com

plugin87/imagem-para-codigo

Transforme uma imagem de referência, screenshot ou mockup em código acessível orientado por tokens — deduza o sistema de design a partir da referência (paleta, escala tipográfica, espaçamento, raio, arquétipo de layout), mapeie-o para os tokens de três níveis, reconstrua-o e verifique com os controles do kit. Use quando o usuário fornecer um design/screenshot e desejar código de UI correspondente.

O que é imagem-para-codigo?

Esta skill permite que um agente de IA reconstrua um design a partir de uma referência visual como um sistema de design genuíno, não como uma cópia avulsa. Ela orienta o agente a inferir o sistema subjacente — paleta de cores, família tipográfica, escala, espaçamento, raios e arquétipo de layout — e então mapear esses valores para tokens de design DTCG de três níveis, gerando um único arquivo `theme.css`. A skill suporta plataformas como Claude Code, Cursor e Codex, e inclui verificações de contraste AA (claro e escuro), linting de hardcodes e auditoria de gosto para garantir que o resultado não seja genérico. É particularmente útil para desenvolvedores que desejam transformar rapidamente screenshots ou mockups em código de UI consistente e acessível, respeitando o sistema de design original sem copiar assets protegidos por direitos autorais.

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

Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Skill: Imagem para Código

Reconstrua um design a partir de uma referência visual como um sistema de design real, não uma cópia avulsa. Combine o sistema (linguagem de cor/tipografia/espaçamento), nunca copie imagens ou ativos de marca protegidos por direitos autorais.

Passos

  1. Leia a referência como um designer. Infira e anote:
    • Paleta — 1 família de superfície dominante, cores de texto, 1 ação primária + no máximo 1 destaque (amostre os matizes; não chute hex aleatórios).
    • Tipografia — sensação da família (geométrica/grotesca/serifada), os saltos de escala, contraste entre display e corpo, pesos.
    • Espaçamento e densidade — unidade base, ritmo de seção, padding de cartões; arejado vs. compacto.
    • Raio e profundidade — linguagem de raio (sharp/soft/pill), separação por sombra vs. traço fino.
    • Arquétipo de layout + sequência — hero de largura total / divisão assimétrica / bento / pilha editorial (taste/design-taste.md → Mandato de Variância).
  2. Âncore em um sistema conhecido se estiver próximo — consulte taste/aesthetic-systems.md / python3 scripts/design_systems.py search <termo> e adote essa receita para estabilizar decisões.
  3. Construa o tema de tokens a partir dos valores inferidos → DTCG de três níveis (skill design-tokens); gere um único theme.css. Verifique cada par de cores com scripts/contrast.py / scripts/validate_contrast.py (claro + escuro) — uma cor de marca amostrada que falhe AA é ajustada; o gosto nunca sobressai POUR.
  4. Reconstrua layout + componentes orientados por tokens via frameworks/adapter-protocol.md + components/*: uma camada primitiva compartilhada, todos os 8 estados, acessibilidade ativada, sem emoji (lucide), tema único. Aplique gosto (design-taste.md) para que não regrida ao genérico.
  5. Verifique contra a referência — renderize e tire um screenshot, compare lado a lado com a referência; execute node scripts/measure_render.mjs, lint_hardcodes.py, taste_audit.mjs e npm run verify.

Verificação (definição de pronto)

  • npm run verify está 100% (tokens resolvem, contraste AA claro+escuro, sem hardcodes/emoji, render real WCAG).
  • A UI reconstruída usa UM tema de tokens inferido — sem paletas por seção.
  • Um screenshot do resultado corresponde visivelmente à linguagem de design da referência.

Limite honesto: isso combina o sistema de design, não uma cópia pixel-perfeita. Não reproduza fotografias, logotipos ou texto protegido por direitos autorais da referência — substitua pelos seus próprios ou por placeholders 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.

Habilidades Relacionadas

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 Imagem skills