Website entwerfen
Ziel
Generieren Sie eine polierte, einseitige HTML-Website-Mockup für das Unternehmen eines Interessenten. Die Website entspricht der buildinamsterdam.com-Ästhetik: kräftige Typografie, cremefarbene Hintergründe, editoriale Rasterlayouts, Terrakotta-Akzente. Wird genutzt, um Webdesign-Dienstleistungen zu pitchen.
Eingaben
- Google Sheet URL mit Interessentendaten
- Zeilennummer (1-indexiert, ohne Kopfzeile), um den Interessenten auszuwählen
- Optional: Arbeitsblattname (standardmäßig erstes Blatt)
Erwartete Spalten in der Tabelle
Das Skript ordnet diese Spalten zu (Groß-/Kleinschreibung egal, flexible Übereinstimmung):
| Spalte | Wird zugeordnet zu |
|---|---|
| company_name / company | Firmenname (Hero, Nav, Footer) |
| description / about | Über-Uns-Abschnitt + Hero-Untertitel |
| keywords / services | Dienstleistungsraster (durch Kommas getrennt) |
| phone / phone_number | Kontaktabschnitt |
| email / contact_email | Kontaktabschnitt |
| address / full_address | Kontaktabschnitt |
| city, state, country | Standortinfo |
| industry / category | Unsplash-Bildsuchanfragen |
| first_name, last_name | Inhaberangabe |
| title / role | Rolle des Inhabers |
Skripte
scripts/read_prospect.py– Liest eine einzelne Interessentenzeile aus Google Sheets → JSONscripts/generate_website.py– Generiert HTML-Website aus Interessenten-JSON
Ablauf
Schritt 1: Interessentendaten lesen
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" \
--row ZEILENNUMMER \
--worksheet "ARBEITSBLATTNAME" # optional
Gibt JSON auf der Standardausgabe aus.
Schritt 2: Website generieren
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" --row 1 | \
python3 .claude/skills/design-website/scripts/generate_website.py
Oder mit einer JSON-Datei:
python3 .claude/skills/design-website/scripts/generate_website.py < prospect.json
Schritt 3: Vorschau
Öffnen Sie die generierte Datei im Browser:
open .tmp/website_*.html
Ausgaben
.tmp/website_{firmen_slug}.html– In sich geschlossene HTML-Datei, in jedem Browser anzeigbar- Das gesamte CSS ist inline, Bilder sind externe URLs (Unsplash)
Umgebung
UNSPLASH_ACCESS_KEYin.env– Erforderlich für Stockfotos. Holen Sie sich einen kostenlosen Schlüssel unter https://unsplash.com/developers- Wenn kein Schlüssel gesetzt ist, wird auf kuratierte Platzhalterbilder von picsum.photos zurückgegriffen
- Google OAuth-Anmeldedaten (token.json / credentials.json) für den Sheets-Zugriff
Designsystem
- Schriftart: Inter (Google Fonts CDN)
- Farben: Cremeweiß
#F2EFE6, Schwarz#000, Weiß#FFF, Terrakotta#C38133 - Typografie: Fette Großbuchstaben-Darstellung (72–100px), Abschnittsüberschriften (36–48px), Fließtext (16–18px)
- Layout: Vollbild-Hero, 2-spaltig Über uns, 3-spaltiges Dienstleistungsraster, 2x2 Galerie
- Schaltflächen: Gerahmt, Großbuchstaben, mit Buchstabenabstand
Randfälle
- Fehlende Spalten: Skript verwendet sinnvolle Standardwerte (z. B. "Willkommen", wenn keine Beschreibung vorhanden)
- Kein Unsplash-Schlüssel: Fallback auf picsum.photos-Platzhalterbilder
- Lange Firmennamen: CSS sorgt mit responsiver Schriftgröße für Umbrüche
- Sonderzeichen: Werden in der Ausgabe HTML-escaped