CommunityImagegithub.com

plugin87/image-to-code

Transformez une image de référence, une capture d'écran ou une maquette en code piloté par des tokens, accessible et respectueux du système de design — inférez le système à partir de la référence, reconstruisez-le avec des tokens à trois niveaux, puis vérifiez avec les contrôles du kit.

Qu'est-ce que image-to-code ?

Cette compétence vous permet de transformer une image de référence (capture d'écran, maquette) en code UI prêt à l'emploi, en inférant le système de design sous-jacent plutôt que de copier visuellement l'image. Elle analyse la palette de couleurs, la typographie, l'espacement, les rayons et l'architecture de mise en page, puis génère un thème tokenisé (3 niveaux DTCG) et reconstruit la mise en page et les composants de manière accessible et réutilisable. La vérification inclut des contrôles de contraste (AA), l'absence de code en dur, et une comparaison visuelle avec la référence, garantissant que le résultat respecte le langage de design et non une copie pixel parfaite. Compatible avec les agents de codage comme Claude Code, elle impose une limite éthique : ne pas reproduire les photographies, logos ou éléments protégés par le droit d'auteur.

Compatible avec~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, mattpocock/improve-codebase-architecture · View all 6 →

Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Compétence : Image en Code

Reconstruisez un design à partir d'une référence visuelle comme un véritable système de design, pas une copie unique. Faites correspondre le système (langage couleur/typo/espacement), ne reprenez jamais d'images ou d'actifs de marque protégés.

Étapes

  1. Lisez la référence comme un designer. Inférez et notez :
    • Palette — 1 famille de surface dominante, couleurs de texte, 1 action primaire + au plus 1 accent (échantillonnez les teintes ; ne devinez pas de hex aléatoires).
    • Typographie — famille (géométrique/grotesk/sérif), les sauts d'échelle, contraste affichage vs. corps, graisses.
    • Espacement et densité — unité de base, rythme des sections, espacement des cartes ; aéré vs. compact.
    • Rayons et profondeur — langage des rayons (net/doux/pilule), séparation par ombre vs. trait fin.
    • Archi. de mise en page + séquence — hero plein écran / split asymétrique / bento / pile éditoriale (taste/design-taste.md → Mandat de variance).
  2. Ancrez à un système connu si proche — parcourez taste/aesthetic-systems.md / python3 scripts/design_systems.py search <terme> et adoptez cette recette pour stabiliser les décisions.
  3. Construisez le thème de tokens à partir des valeurs inférées → DTCG 3 niveaux (compétence design-tokens) ; générez un seul theme.css. Vérifiez chaque paire de couleurs avec scripts/contrast.py / scripts/validate_contrast.py (clair + sombre) — une couleur de marque échantillonnée qui échoue AA est ajustée ; le goût ne l'emporte jamais sur le POUR.
  4. Reconstruisez la mise en page + les composants pilotés par tokens via frameworks/adapter-protocol.md + components/* : une couche primitive partagée, les 8 états, a11y câblé, pas d'emoji (lucide), thème unique. Appliquez le goût (design-taste.md) pour qu'il ne régresse pas vers du générique.
  5. Vérifiez par rapport à la référence — rendez-le et capturez-le, comparez côte à côte avec la référence ; exécutez node scripts/measure_render.mjs, lint_hardcodes.py, taste_audit.mjs, et npm run verify.

Vérification (définition de terminé)

  • npm run verify est à 100 % (les tokens se résolvent, contraste AA clair+sombre, pas de code en dur/emoji, rendu réel WCAG).
  • L'UI reconstruite utilise UN thème de tokens inféré — pas de palettes par section.
  • Une capture d'écran du résultat correspond visiblement au langage de design de la référence.

Limite honnête : cela correspond au système de design, pas à une copie pixel parfaite. Ne reproduisez pas les photographies, logos ou éléments protégés par le droit d'auteur de la référence — substituez les vôtres ou des espaces réservés génériques.

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 associés

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