Artikel · 03.10.2026

• #Design
• #CSS
• #Cursor
• #Astro

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.

Ubuntu einbinden (ohne Font-Drama)

1. 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).
2. ZIP laden, nur die .ttf, die du brauchst.
3. transfonter.org → woff/woff2 fürs Web.
4. 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. Vorschau an.
• 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:

1. Niemals von allein pushen. Commits lokal sind okay. Push nur auf Anweisung, sonst baut Cloudflare einen Zwischenstand live.
2. CSS nicht jedes Mal neu erfinden: bestehende Klassen und Tokens nutzen.
3. 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 …). 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 Logo, GitHub-Views nur für Design-Tickets. Projektmanagement ohne Extra-Tool.

Breakpoints (global merken)

Im Browser: Entwicklertools, Breite schieben (360 px = grobes iPhone-Feeling).

Statische Astro-Seite: wenig Angriffsfläche, keine DB, schnell. „This is the way.“