CommunityBildgithub.com

plugin87/image-to-code

Verwandle eine Referenzgrafik, einen Screenshot oder einen Mockup in token-gesteuerten, zugänglichen Code – leite das Designsystem aus der Vorlage ab (Palette, Schriftmaßstab, Abstände, Radien, Layout-Archetyp), bilde es auf das 3-Ebenen-Token-System ab, baue es nach und verifiziere es mit den Prüfmechanismen des Kits. Verwende dies, wenn der Nutzer ein Design/einen Screenshot bereitstellt und passenden UI-Code wünscht.

Was ist image-to-code?

Diese Fähigkeit (Skill) ermöglicht es, ein visuelles Design (Screenshot, Mockup oder Referenzgrafik) als ein vollständiges, token-basiertes Designsystem zu rekonstruieren – nicht als einmalige Kopie. Der Prozess folgt einer systematischen Designer-Perspektive: Zuerst werden Paletten, Schriftart, Abstände, Radien und Layout-Archetypen analysiert und dokumentiert. Danach wird das Design, falls möglich, an ein bekanntes ästhetisches System angebunden, um fundierte Entscheidungen zu treffen. Anschließend wird ein 3-stufiges DTCG-Token-Theme erstellt (z. B. als theme.css) und jede Farbkombination auf Barrierefreiheit (AA-Kontrast) geprüft. Schließlich werden Layout und Komponenten token-gesteuert (über das Frameworks-Adapter-Protokoll) neu aufgebaut, wobei alle acht Zustände, Barrierefreiheit und konsistente Gestaltung sichergestellt werden. Die Verifikation umfasst automatisierte Tests (npm run verify, Kontrastprüfungen, Linting der Hardcodes und Designaudit) sowie einen visuellen Seitenvergleich. Die Fähigkeit ist als Skill für KI-Agenten wie Claude Code, Cursor oder Codex konzipiert und wird über markdownbasierte Anleitungen sowie Python- und Node.js-Skripte in der entsprechenden Codebasis gesteuert.

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

Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Skill: Bild zu Code

Rekonstruiere ein Design aus einer visuellen Referenz als echtes Designsystem, nicht als einmalige Kopie. Stimme das System ab (Farb-/Schrift-/Abstands-Sprache), übernehme niemals urheberrechtlich geschützte Bilder oder Marken-Assets.

Schritte

  1. Lies die Referenz wie ein Designer. Erschließe und dokumentiere:
    • Palette — 1 dominante Oberflächenfamilie, Textfarben, 1 primäre Aktion + höchstens 1 Akzent (mustere die Farbtöne; rate keine zufälligen Hex-Werte).
    • Schrift — Familiengefühl (geometrisch/grotesk/serifenbetont), die Maßsprünge, Display- vs. Text-Kontrast, Strichstärken.
    • Abstände & Dichte — Basiseinheit, Abschnitts-Rhythmus, Karten-Padding; luftig vs. kompakt.
    • Radius & Tiefe — Radius-Sprache (scharf/weich/Pille), Schatten vs. dünne Linien-Trennung.
    • Layout-Archetyp + Reihenfolge — Vollflächiger Hero / asymmetrischer Split / Bento / redaktioneller Stapel (taste/design-taste.md → Variance Mandate).
  2. Verankere in einem bekannten System, sofern naheliegend — durchsuche taste/aesthetic-systems.md / python3 scripts/design_systems.py search <term> und übernimm das Rezept, um Entscheidungen zu stabilisieren.
  3. Baue das Token-Theme aus den abgeleiteten Werten → 3-stufiges DTCG (design-tokens Skill); generiere eine einzelne theme.css. Überprüfe jedes Farbpaar mit scripts/contrast.py / scripts/validate_contrast.py (hell + dunkel) — eine abgetastete Markenfarbe, die AA nicht besteht, wird angepasst; Geschmack überschreibt niemals POUR.
  4. Baue Layout + Komponenten token-gesteuert neu auf via frameworks/adapter-protocol.md + components/*: eine gemeinsame primitive Schicht, alle 8 Zustände, Barrierefreiheit verkabelt, kein Emoji (lucide), ein einzelnes Theme. Wende Geschmack an (design-taste.md), damit es nicht zu generisch wird.
  5. Verifiziere gegen die Referenz — rendere und erstelle einen Screenshot, vergleiche Seite an Seite mit der Referenz; führe aus: node scripts/measure_render.mjs, lint_hardcodes.py, taste_audit.mjs, und npm run verify.

Verifikation (Definition of Done)

  • npm run verify ist 100% (Token lösen auf, Kontrast AA hell+dunkel, keine Hardcodes/Emojis, echtes Rendering WCAG).
  • Die neu erstellte UI verwendet EIN abgeleitetes Token-Theme — keine abschnittsbezogenen Paletten.
  • Ein Screenshot des Ergebnisses stimmt sichtbar mit der Designsprache der Referenz überein.

Ehrliche Grenze: Dies gleicht das Designsystem an, nicht eine pixelgenaue Kopie. Reproduziere keine Fotos, Logos oder urheberrechtlich geschützten Texte der Referenz – ersetze sie durch eigene oder generische Platzhalter.

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.

Verwandte Skills

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