Communitygithub.com

whmc76/design-first-frontend

Codex-Skill-Plugin für bildgenerierungsgesteuerte Frontend-Design-to-Code-Implementierung

Was ist design-first-frontend?

Dieses Skill-Plugin ist für die Verwendung mit Codex (z. B. OpenAI Codex oder ähnliche KI-Entwicklungsumgebungen) konzipiert und ermöglicht einen designorientierten Arbeitsablauf für die Frontend-Entwicklung. Der Kern des Skills besteht darin, Bilder oder Bildbeschreibungen als visuelle Vorlage zu verwenden und daraus automatisch lauffähigen Frontend-Code (HTML, CSS, JavaScript) zu generieren. Entwickler können so schnell Prototypen oder Komponenten aus einem visuellen Konzept erstellen, ohne das Design manuell umsetzen zu müssen. Nützlich für Rapid Prototyping, Design-Übergaben und iteratives UI-Design. Das Plugin ist als reiner Codex-Skill (kein Standalone-Tool) implementiert und setzt auf die integrierte Bildanalysefähigkeit von Codex, um Designs zu interpretieren und in Code zu übersetzen.

Funktioniert mit~Claude Code✓Codex CLI~Cursor
npx skills add whmc76/design-first-frontend
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht design-first-frontend?

Codex-Skill-Plugin für bildgenerierungsgesteuerte Frontend-Design-to-Code-Implementierung

Beschreibung

Dieses Skill-Plugin ermöglicht es, Frontend-Code direkt aus Bildern oder Bildbeschreibungen zu generieren. Es nutzt die integrierte Bildanalyse von Codex, um visuelle Designs zu interpretieren und in HTML, CSS und JavaScript umzusetzen.

Verwendung

  • Stelle Codex ein Bild oder eine detaillierte Bildbeschreibung zur Verfügung.
  • Codex generiert automatisch den entsprechenden Frontend-Code.
  • Kann für einzelne Komponenten oder ganze Seiten verwendet werden.

Voraussetzungen

  • Zugang zu Codex (z. B. über GitHub Copilot oder OpenAI Codex Playground).
  • Keine zusätzlichen Tools oder Abhängigkeiten erforderlich.

Plattformen

Codex (GitHub Copilot, OpenAI Codex Playground)

Hinweise

  • Die Qualität des generierten Codes hängt von der Klarheit des bereitgestellten Bildes ab.
  • Für komplexe Designs empfiehlt sich eine iterative Vorgehensweise.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community