· 2 Min. Lesezeit
Folge 003: Erstes Outfit: Ubuntu, Dark Mode und ein Footer, der nicht nervt
Schrift rein, Farben festlegen, Breakpoints setzen. Plus die goldene Regel: committen ja, pushen nur, wenn du es wirklich willst.
Jetzt wird’s hübsch. Design heißt hier: Dateien und Regeln, die der Agent pflegt, und du siehst das mit npm run dev quasi live mit.
Das Video zu dieser Folge
Dieses Video ist mit Zugangscode geschützt. Nach der Freischaltung bleibst du in diesem Browser angemeldet (localStorage), bis der Zugang abläuft oder du ihn zurücksetzt.
Du hast noch keinen ZugangsCode? Dann melde dich bei mir!
CONTACT_EMAIL).Ubuntu einbinden (ohne Font-Drama)
- Auf fonts.google.com Ubuntu wählen, hier 300 (Light) für Text, 500 (Medium) für Überschriften (600 gab’s in der Familie nicht).
- ZIP laden, nur die
.ttf, die du brauchst. - transfonter.org → woff/woff2 fürs Web.
- Dem Agenten die Dateien geben: „Bitte einbinden und committen.“
In der Design-Doku siehst du die Palette: dunkler Hintergrund, heller Text (nicht Knallweiß), grüne Action-Farbe, gedämpfte Muted-Töne.
Terminal-Kniffe
npm run dev. Im Terminal steht die lokale Adresse, bei Astro meisthttp://localhost:4321(Port kann abweichen). Wenn Node oder npm noch fehlen: Folge 018.- Strg+C: stoppen (im Terminal ist Strg+C nicht Kopieren!).
- Pfeil hoch, letzter Befehl nochmal.
Baut der Agent während der Server läuft, kann die Vorschau hüpfen — kurz stoppen, warten, neu starten.
Regeln, die du wirklich willst
Schreib sie in Doku und .cursor/rules/ (siehe docs/cursor/README.md):
- Niemals von allein pushen. Commits lokal sind okay. Push nur auf Anweisung, sonst baut Cloudflare einen Zwischenstand live (Hosting-Setup: Folge 011).
- CSS nicht jedes Mal neu erfinden: bestehende Klassen und CSS-Variablen nutzen.
- Page Speed: Wichtiges CSS früh (critical: Menü, Kopf der Seite); Rest später (non-critical), sonst springt das Layout und Google schmunzelt nicht.
Seiten, Menü, Footer
Per Issue kamen Pages (Start, Über uns, Impressum …; Collections: Folge 004). Der Footer kriegt Copyright mit dynamischem Jahr (2026 oder 2026 bis 2027), Domain, Signatur.
Impressum und Datenschutz nicht ins Hauptmenü, unten rechts. Copyright links. Auf dem Handy: untereinander, zentriert.
Issues = dein Projekt-Trello
Logo-Issue mit Label „Design“, Favicon „blocked by“ (blockiert durch) Logo, GitHub-„Views“ (gespeicherte Ansichten) nur für Design-Tickets. Projektmanagement ohne Extra-Tool.
Breakpoints (global merken)
| Name | Grenze |
|---|---|
| Tablet | unter 1024 px |
| Mobil | unter 680 px |
Im Browser: Entwicklertools, Breite schieben (360 px = grobes iPhone-Feeling).
Statische Astro-Seite: wenig Angriffsfläche, keine DB, schnell. „This is the way.“