Anthropic Frontend Design

Sag das, um den Skill zu aktivieren

---
name: anthropic-frontend-design
description: Entwirft markante, produktionsreife Web-UIs (Hero, Sections, Komponenten) mit eigener Designrichtung statt generischer Template-Optik.
---

Dieser Skill baut Frontend-Layouts mit klarer gestalterischer Haltung statt Baukasten- oder KI-Standardoptik.

## Wann dieser Skill aktiviert wird
- Eine Landingpage, ein Hero oder Benefit-Sections sollen entworfen und als HTML/CSS oder React umgesetzt werden.
- Ein Wireframe oder eine Stichpunktliste soll in ein Layout mit Typografie, Farbe und Raster übersetzt werden.
- Eine bestehende Seite wirkt austauschbar und soll einen erkennbaren eigenen Look bekommen.

## Workflow
1. Kontext klären: Marke, Zielgruppe, Tonalität (nüchtern, editorial, verspielt). Fehlt alles, selbst eine Richtung festlegen und benennen.
2. Vor dem Code eine Designrichtung committen: ein Adjektivpaar ("ruhig und präzise"), eine Layout-Leitidee (etwa asymmetrisches Editorial-Grid), ein dominantes Gestaltungsmittel.
3. Design-Tokens zuerst: CSS Custom Properties für Farben (1 Akzent, 2 bis 3 Neutraltöne), Typo-Skala mit deutlichen Sprüngen (etwa 16/24/56px), Spacing im 4er- oder 8er-Raster.
4. Schrift bewusst wählen: eine charaktervolle Display-Schrift plus eine neutrale Textschrift, maximal 2 Familien.
5. Hero mit klarer Hierarchie bauen: Eyebrow, H1 mit 8 bis 10 Wörtern, Subline, genau ein primärer CTA.
6. Sections rhythmisch variieren: Breite, Ausrichtung und Hintergrund wechseln, statt drei identische Card-Reihen zu stapeln.
7. Realistische Inhalte schreiben: konkrete Headlines und Microcopy, kein Lorem ipsum, keine Platzhalter-Benefits.
8. Detail-Pass: Hover- und Focus-States, Transitions 150-300ms, responsives Verhalten bei 360px, 768px und 1280px prüfen.
9. Anti-Generik-Check: Lila-Gradient auf Weiß, zentrierte Card-Reihe mit Emoji-Icons, überall derselbe Schatten? Dann Richtung nachschärfen.

## Output-Format
- Lauffähiger Code: eine HTML-Datei mit eingebettetem CSS oder eine React-Komponente, direkt im Browser prüfbar.
- Davor 3 bis 5 Zeilen Design-Rationale: Richtung, Schriftwahl, Farblogik.
- Alle Werte laufen über Design-Tokens, keine Magic Numbers im Komponenten-CSS.

## Qualitätsregeln
- Textkontrast mindestens 4.5:1, große Headlines mindestens 3:1.
- Genau ein primärer CTA pro Viewport-Höhe, visuell dominant.
- Spacing nur aus der definierten Skala, keine Zufallswerte wie 13px.
- H1 bis H3 unterscheiden sich in Größe oder Gewicht, nie nur in Farbe.
- Jedes interaktive Element hat sichtbare Hover- und Focus-States.
- Layout funktioniert bei 360px Breite ohne horizontales Scrollen.

Kompakte, eigenständige Fassung von Collective Brain. Die ausführliche Original-Version findest du in der Quelle ↗.

Skill teilen