gaznil/web-skills

Firecrawl Website Design Klonen

Verwende dies, wenn der Benutzer eine einzelne URL in ein praktisches Design-System-Dokument umwandeln möchte, das Agenten sofort verwenden können.

Standard-Ergebnis: Extrahiere das Design-System einer beliebigen Website in einer Zeile und formatiere es als DESIGN.md.

Der Skill soll sich wie ein schlanker Workflow um Firecrawl Scrape anfühlen: Sammle den sichtbaren Inhalt der Seite, ihre Struktur, Metadaten, Links und verfügbare visuelle Signale und synthetisiere diese Erkenntnisse in eine saubere Design-System-Markdown-Datei.

Onboarding-Interview

Leite die Quell-URL, den Ziel-Stack und ob eine Implementierung gewünscht wird aus dem Kontext ab. Wenn der Benutzer eine URL angibt und nach einem Design-System fragt, fahre sofort fort.

Stelle höchstens 1–3 präzise Fragen, nur wenn nicht weitermachbar, z. B. nach der Website-URL, ob nur DESIGN.md oder auch eine Implementierung ausgegeben werden soll, oder nach einem erforderlichen Ziel-Stack.

Nutze die normale Eingabeaufforderung oder modale UI des Host-Agenten. Benenne keine harnischspezifische Fragefunktion.

Firecrawl-Sammelplan

Verwende Firecrawl über die CLI oder eine gleichwertige Werkzeugoberfläche. Beginne immer mit zwei parallelen Scrapes der angegebenen URL:

1. Die Formate branding und images zusammen für strukturierte Design-Tokens und den vollständigen Satz an Seitenbildern.
2. Ein ganzseitiger Screenshot für visuellen Kontext.

Beispiel:

firecrawl scrape "https://example.com" --format branding,images -o ".firecrawl/example-branding.json" --pretty &
firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" &
wait

Die Kombination von branding und images in einem Aufruf kostet immer noch ein einzelnes Guthaben und ist erforderlich: Der branding-Block liefert nur kuratierte Marken-Assets (logo, favicon, ogImage, logoHref), daher werden ohne images die tatsächlichen Inhaltsbilder der Seite verpasst (Heldenbilder, Produktfotos, Karussell-Slides, Funktionsgrafiken, Illustrationen, Accessoire-Fotos, Endseiten-Kunstwerke und Ähnliches). Auf einer Produktseite wie tesla.com/cybertruck enthält der branding-Block kein Heldenbild – nur images liefert den Haupt-Cybertruck-Helden (z.B. Cybertruck-Hero-Desktop-NA-SA-APAC.png) und den Rest der Seitenfotografie.

Falls der Screenshot-Scrape eine entfernte Bild-URL (z.B. einen signierten Speicherlink) anstelle einer lokalen Datei zurückgibt, lade sie in denselben .firecrawl/-Pfad herunter, damit DESIGN.md auf ein stabiles lokales Asset verweisen kann.

Verwende die strukturierte branding-Ausgabe als primäre Quelle für Farben, Typografie, Komponenten, Marken-Assets (Logo, Favicon, ogImage), Persönlichkeit und Vertrauenshinweise. Verwende die images-Liste als Quelle der Wahrheit für die Inhaltsbilder der Seite – Heldenfotografie, Produktfotos, Karussells, Funktionsgrafiken, Illustrationen und dekorative Grafiken. Verwende den Screenshot als primäre visuelle Referenz für Layout, Hierarchie und Gesamteindruck. Füge ergänzende Formate nur hinzu, wenn diese für das endgültige Artefakt nicht ausreichen.

Sammle:

• Markendaten für Farben, Typografie, Abstände, Schaltflächen, Logos, Markenbilder, Persönlichkeit und Vertrauen
• die vollständige images-Liste für Helden-, Produkt-, Funktions- und Abschnittsbilder über die kuratierten Marken-Assets hinaus
• einen ganzseitigen Screenshot, lokal in .firecrawl/ gespeichert, damit er in DESIGN.md eingebettet werden kann
• Seiten-Markdown für Überschriften, Kopienhierarchie, CTAs, Navigation und Abschnittsreihenfolge bei Bedarf
• Metadaten und Links für Marken-, Produkt- und Seitenzweck-Hinweise bei Bedarf
• HTML nur, wenn die Markenausgabe, die Bildliste und der Screenshot nicht ausreichen, um Klassen, Schriftnamen, CSS-Variablen oder Komponentenstruktur abzuleiten
• verwandte Seiten nur, wenn der Benutzer nach einem breiteren Site-System fragt

Scrape nicht standardmäßig zu viel. Die erste Version sollte von einer einzigen repräsentativen Seite nützlich sein.

Was zu extrahieren ist

Leite die Designsprache der Website ab und dokumentiere sie:

• Farben: Primär, Sekundär, Akzente, Hintergründe, Rahmen, Text, Zustände
• Typografie: Schriftfamilien falls erkennbar, Schriftgrößenskala, Schriftgewichte, Zeilenhöhen, Überschriften-/Textbehandlung
• Abstände: Containerbreiten, Abschnittsrhythmus, Rasterabstände, Abstandsskala, Dichte
• Layout: Seitenstruktur, Heldenmuster, Karten, Raster, Navigation, Fußzeile, responsive Annahmen
• Komponenten: Schaltflächen, Eingabefelder, Karten, Badges, Navigationselemente, Preistabellen, Testimonials, Feature-Reihen, Formulare
• Bilder und Symbole: Stil, Formsprache, Illustrations-/Fotobehandlung, Logo-Einschränkungen; ziehe repräsentative Helden-, Produkt-, Funktions- und Abschnittsbilder aus der vollständigen images-Liste, anstatt dich auf branding.images zu verlassen, die nur logo, favicon, ogImage und logoHref enthält
• Bewegung und Interaktion: Hover-Zustände, Übergänge, Animationsstil, wenn beobachtbar oder ableitbar
• Stimme und Inhaltsmuster: CTA-Formulierung, Überschriftenstil, Produkttext-Rhythmus

Wenn ein Wert nicht genau aus der Scrape-Ausgabe gemessen werden kann, kennzeichne ihn als abgeleitet und gib eine praktische Näherung an.

Paralleles Arbeiten

Verwende bei Bedarf Unter-Agenten oder gleichwertige parallele Aufgabenläufer. Natürliche Aufteilungen umfassen eine Seite pro Forscher für mehrseitige Websites oder je einen Prüfer für Farben, Typografie, Abstände und Komponenten.

Jeder parallele Forscher sollte Quell-URLs, extrahierte Beweise, abgeleitete Design-Tokens und Vertrauenshinweise zurückgeben.

Endgültiges Arbeitsergebnis

Erstelle oder gib eine DESIGN.md mit dieser Struktur zurück. Bette den ganzseitigen Screenshot oben ein, damit ein Codierungs-Agent visuellen Kontext zusammen mit den Tokens erhält.

# DESIGN.md: [Quellseite]

## Quelle
- URL: [Quell-URL]
- Erfassungsdatum: [Datum]
- Evidenz: [Scrape/Screenshot/HTML/Links verwendet]

## Referenz-Screenshot
![Ganzseitiger Screenshot von [Quellseite]](./.firecrawl/[quelle]-screenshot.png)

Verwende diesen Screenshot als visuelle Quelle der Wahrheit für Layout, Hierarchie, Dichte und Gesamteindruck. Die Tokens unten beschreiben dieselbe Seite in maschinenlesbarer Form.

## Design-Zusammenfassung
[Kurze Beschreibung der visuellen Sprache und was ein Agent nachbilden soll]

## Design-Tokens

### Farben
[Benannte Farbrollen mit Hex-Werten, wenn bekannt; abgeleitete Werte deutlich kennzeichnen]

### Typografie
[Schriften, Fallback-Empfehlungen, Skala, Gewichte, Überschriften-/Textregeln]

### Abstände und Layout
[Abstandsskala, Container, Raster, Radius, Schatten, Rahmen]

## Komponenten
[Schaltflächen, Karten, Navigation, Formulare, Heldenbereich, Funktionsabschnitte, Preise, Fußzeile, usw.]

## Seitenmuster
[Abschnittsreihenfolge, gängige Layouts, responsives Verhalten]

## Inhaltsstil
[Stimme, CTA-Stil, Überschriftenmuster, Kopiendichte]

## Agent-Bauanleitung
[Konkrete Anweisungen, die ein KI-Codierungs-Agent befolgen kann, um eine neue Website in diesem Stil zu erstellen]

## Wiedereingabe-Inputs
workflow: firecrawl-website-design-clone
source_url: [url]
target_stack: [stack]
output: DESIGN.md

Wenn der Benutzer eine Implementierung wünscht, erstelle oder aktualisiere zuerst DESIGN.md und verwende sie dann als Quelle der Wahrheit für den Bau.

Qualitätsanspruch

• Gib nicht vor, dass der Benutzer Rechte an Logos, Bildern, Marken oder Kopien Dritter hat.
• Bevorzuge wiederverwendbare Design-Tokens gegenüber einmaligen Beobachtungen.
• Unterscheide beobachtete Fakten von abgeleiteten Näherungen.
• Halte die Ausgabe kompakt genug, dass ein anderer Agent sie in seinen Kontext einfügen und daraus bauen kann.
• Bewahre Quell-URLs und Scrape-Artefakte zur Überprüfung auf.