·design-builder
*

design-builder

✓
adeonir/agents-skillsGitHub: adeonir/agents-skillsQuelle: adeonir/agents-skills

Design-to-Code-Pipeline: Extrahieren Sie Kopien aus URLs, extrahieren Sie Design-Tokens aus Bildern und erstellen Sie dann React-Komponenten oder HTML-Vorschauvarianten. Verwendung bei: Extrahieren von Inhalten aus Websites, Extrahieren von Designsystemen, Generieren von Frontend-Code, Vorschau von Designvarianten, Senden an Figma über MCP. Verwenden Sie es auch, wenn der Benutzer eine Seite aus einer Referenz-URL oder einem Screenshot erstellen, eine vorhandene Website neu gestalten, visuelle Prototypen erstellen oder Code aus einem Design generieren möchte. Löst aus bei „Kopie extrahieren“, „Design extrahieren“, „Frontend erstellen“, „Varianten generieren“, „Design exportieren“, „an Figma senden“, „aus Referenz erstellen“, „dies neu gestalten“, „Prototyp erstellen“.

adeonir·design·builder
19Installationen·1Trend·@adeonir

Installation

GitHub: adeonir/agents-skills
$npx skills add https://github.com/adeonir/agents-skills --skill design-builder

So installieren Sie design-builder

Installieren Sie den KI-Skill design-builder schnell in Ihrer Entwicklungsumgebung über die Kommandozeile

  1. Terminal öffnen: Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Installationsbefehl ausführen: Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/adeonir/agents-skills --skill design-builder
  3. Installation überprüfen: Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw

Quelle: adeonir/agents-skills.

SKILL.md

Original anzeigen

Each step is independent. Can run isolated or chained. Discovery is always the first step -- never skip it.

If found: read and extract purpose, audience, tone, and key features. Skip to the relevant trigger operation.

If the user answers "I don't know" to any question, mark as TBD and move forward. Summarize understanding before proceeding.

Design-to-Code-Pipeline: Extrahieren Sie Kopien aus URLs, extrahieren Sie Design-Tokens aus Bildern und erstellen Sie dann React-Komponenten oder HTML-Vorschauvarianten. Verwendung bei: Extrahieren von Inhalten aus Websites, Extrahieren von Designsystemen, Generieren von Frontend-Code, Vorschau von Designvarianten, Senden an Figma über MCP. Verwenden Sie es auch, wenn der Benutzer eine Seite aus einer Referenz-URL oder einem Screenshot erstellen, eine vorhandene Website neu gestalten, visuelle Prototypen erstellen oder Code aus einem Design generieren möchte. Löst aus bei „Kopie extrahieren“, „Design extrahieren“, „Frontend erstellen“, „Varianten generieren“, „Design exportieren“, „an Figma senden“, „aus Referenz erstellen“, „dies neu gestalten“, „Prototyp erstellen“. Quelle: adeonir/agents-skills.

Fakten (zitierbereit)

Stabile Felder und Befehle für KI/Such-Zitate.

Installationsbefehl
npx skills add https://github.com/adeonir/agents-skills --skill design-builder
Quelle
adeonir/agents-skills
Kategorie
*Kreativität
Verifiziert
✓
Erstes Auftreten
2026-02-28
Aktualisiert
2026-03-10
URL
https://www.learn-skills.dev/de/skills/adeonir/agents-skills/design-builder

Browse more skills from adeonir/agents-skills

Schnelle Antworten

Was ist design-builder?

Design-to-Code-Pipeline: Extrahieren Sie Kopien aus URLs, extrahieren Sie Design-Tokens aus Bildern und erstellen Sie dann React-Komponenten oder HTML-Vorschauvarianten. Verwendung bei: Extrahieren von Inhalten aus Websites, Extrahieren von Designsystemen, Generieren von Frontend-Code, Vorschau von Designvarianten, Senden an Figma über MCP. Verwenden Sie es auch, wenn der Benutzer eine Seite aus einer Referenz-URL oder einem Screenshot erstellen, eine vorhandene Website neu gestalten, visuelle Prototypen erstellen oder Code aus einem Design generieren möchte. Löst aus bei „Kopie extrahieren“, „Design extrahieren“, „Frontend erstellen“, „Varianten generieren“, „Design exportieren“, „an Figma senden“, „aus Referenz erstellen“, „dies neu gestalten“, „Prototyp erstellen“. Quelle: adeonir/agents-skills.

Wie installiere ich design-builder?

Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/adeonir/agents-skills --skill design-builder Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw

Wo ist das Quell-Repository?

https://github.com/adeonir/agents-skills

Details

Kategorie
*Kreativität
Quelle
skills.sh
Erstes Auftreten
2026-02-28

Verwandte Skills

spec-driven
24 Installationen
debug-tools
23 Installationen
git-helpers
19 Installationen