firecrawl/firecrawl-website-design-clone

Was macht firecrawl-website-design-clone?

Extrahiere das Designsystem jeder Website in eine agentenfertige DESIGN.md mithilfe von Firecrawl Scraping-Evidenz. Verwende dies, wenn der Benutzer Farben, Schriftarten, Abstände, Komponenten, Layoutmuster oder Marken/UI-Richtlinien von einer Website wünscht, sodass KI-Agenten neue Websites erstellen, ein Design klonen oder von diesem Design inspirierte Seiten bauen können.

Verwendung

Dieses Skill extrahiert automatisch Design-Tokens und visuelle Richtlinien von einer gegebenen URL. Es ist optimiert für KI-Agenten, die Design-Systeme für Entwicklungsaufgaben verstehen und anwenden müssen.

Unterstützte Plattformen: Claude Code, Cursor, Codex, generische LLM-Integratoren (z. B. LangChain, Vercel AI SDK)

Eingaben

• url: (Erforderlich) Die vollständige URL der zu analysierenden Website.

Ausgabe

Eine DESIGN.md-Datei im aktuellen Arbeitsverzeichnis mit folgendem Inhalt:

• Farbpalette – Hex-Codes, CSS-Variablen, Tailwind-Klassen, Verläufe
• Typografie – Schriftfamilien (Google Fonts, Websicher), Schriftgewichte, Zeilenhöhen
• Abstände & Raster – Abstandsskala, Rastereinheiten, Rand/Polsterung
• Komponenten – Buttons, Karten, Formulare, Navigationsleisten (mit Zustandsstilen)
• Layout – Hauptcontainerverhalten, Ausrichtung, Bruchpunkte
• Marken-Richtlinien – Verwendete Logos, Symbole, Bilder-Stile
• Schatten & Effekte – Box-Schatten, Fokussierungen, Überblendungen

Beispiel

# Direkter Befehl (unterstützt von Agenten-Shell)
firecrawl extract design-system von https://example.com --output DESIGN.md

Konfiguration

Dieses Skill erfordert einen gültigen Firecrawl-API-Schlüssel, der in der Umgebungsvariable FIRECRAWL_API_KEY gesetzt ist. Installiere das Paket firecrawl für Node.js/Python:

npm install firecrawl
# oder
pip install firecrawl

Beispiel-Agenten-Code

import FirecrawlApp from 'firecrawl';

const app = new FirecrawlApp({ apiKey: process.env.FIRECRAWL_API_KEY });

const designSystem = await app.extractDesignSystem('https://example.com');
// designSystem enthält: colors, fonts, spacing, components, layout, brands

Fehlerbehandlung

• Falls die URL nicht erreichbar ist, wird ein Fehler HTTP 403/404 zurückgegeben.
• Falls keine Design-Elemente gefunden werden, wird eine leere DESIGN.md erstellt.
• Bei fehlendem API-Schlüssel wird die Aktion mit einem Hinweis abgelehnt.

Einschränkungen

• Nur öffentliche Websites (keine Passwort- oder Authentifizierungssperren).
• JavaScript-gerenderte Inhalte werden unterstützt (Firecrawl nutzt Headless-Browser).
• Sehr große Websites können gekürzt werden (maximal 1000 Elemente pro Kategorie).