Communitygithub.com

KilimiaoSix/design-doc-to-ui-skill

Codex-Skill zur Umwandlung von Design-Dokumenten in geprüfte UI-Prototypen

Was ist design-doc-to-ui-skill?

Dieser Skill für KI-Entwicklerassistenten wie Codex automatisiert die Übersetzung von Design-Dokumenten (z. B. Markdown-Spezifikationen, Notizen oder bestehende Wireframes) in interaktive UI-Prototypen. Er unterstützt gängige Frontend-Frameworks wie React, Vue oder einfaches HTML/CSS/JS und erstellt direkt ausführbare Komponenten. Der Skill analysiert das eingegebene Design-Dokument, identifiziert Schlüsselelemente wie Layout, Komponentenstruktur und Benutzerinteraktionen und generiert daraufhin eine konsistente, modulare Codebasis. Besonders nützlich ist er für schnelle Iterationen: Entwickler und Designer können Designänderungen im Textdokument vornehmen und erhalten sofort einen aktualisierten Prototyp. Der Skill legt Wert auf Code-Qualität, Barrierefreiheit und responsives Design, sodass die Ausgabe nicht nur als Demo, sondern auch als Grundlage für die Produktion dienen kann.

Funktioniert mit~Claude Code✓Codex CLI~Cursor
Part ofDesign & UI
npx skills add KilimiaoSix/design-doc-to-ui-skill
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-doc-to-ui-skill?

Codex-Skill zur Umwandlung von Design-Dokumenten in geprüfte UI-Prototypen

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