LJC-god/popular-web-designs-skill

Beliebte Web-Designs

54 echte Designsysteme, bereit zur Verwendung bei der HTML/CSS-Generierung. Jede Vorlage erfasst die vollständige visuelle Sprache einer Website: Farbpalette, Typografie-Hierarchie, Komponentenstile, Abstandssystem, Schatten, responsives Verhalten und praktische Agenten-Prompts mit exakten CSS-Werten.

Verwandte Design-Skills

• claude-design – verwenden für den Design-Prozess und -Geschmack (Briefing eingrenzen, Varianten erstellen, lokales HTML-Artefakt verifizieren, KI-Design-Schrott vermeiden). Kombinieren Sie diesen Skill damit, wenn der Nutzer eine durchdacht gestaltete Seite im Stil einer bekannten Marke wünscht: claude-design steuert den Workflow, dieser Skill liefert das visuelle Vokabular.
• design-md – verwenden, wenn das Ergebnis eine formale DESIGN.md-Token-Spezifikationsdatei ist und kein gerendertes Artefakt.

Verwendung

1. Wählen Sie ein Design aus dem untenstehenden Katalog
2. Laden Sie es: skill_view(name="popular-web-designs", file_path="templates/<site>.md")
3. Verwenden Sie die Design-Tokens und Komponenten-Spezifikationen beim Generieren von HTML
4. Kombinieren Sie es mit dem Skill generative-widgets, um das Ergebnis über einen Cloudflared-Tunnel bereitzustellen

Jede Vorlage enthält oben einen Hermes-Implementierungshinweise-Block mit:

• CDN-Schriftart-Substitut und Google Fonts <link>-Tag (bereit zum Einfügen)
• CSS font-family-Stapel für Primär- und Monospace-Schriftarten
• Erinnerungen, write_file für die HTML-Erstellung und browser_vision für die Verifizierung zu verwenden

HTML-Generierungsmuster

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Seitentitel</title>
  <!-- Fügen Sie den Google Fonts <link> aus den Hermes-Notizen der Vorlage ein -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* Übernehmen Sie die Farbpalette der Vorlage als CSS-Custom-Properties */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... mehr aus Abschnitt 2 der Vorlage */
    }
    /* Übernehmen Sie die Typografie aus Abschnitt 3 der Vorlage */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* Übernehmen Sie die Komponentenstile aus Abschnitt 4 der Vorlage */
    /* Übernehmen Sie das Layout aus Abschnitt 5 der Vorlage */
    /* Übernehmen Sie die Schatten aus Abschnitt 6 der Vorlage */
  </style>
</head>
<body>
  <!-- Erstellen Sie die Seite mit den Komponenten-Spezifikationen aus der Vorlage -->
</body>
</html>

Schreiben Sie die Datei mit write_file, stellen Sie sie mit dem generative-widgets-Workflow (Cloudflared-Tunnel) bereit und verifizieren Sie das Ergebnis mit browser_vision, um die visuelle Genauigkeit zu bestätigen.

Schriftart-Substitutionsreferenz

Die meisten Websites verwenden proprietäre Schriftarten, die nicht über CDN verfügbar sind. Jede Vorlage ist auf ein Google Fonts-Substitut abgebildet, das den Charakter des Designs bewahrt. Häufige Zuordnungen:

Proprietäre Schriftart	CDN-Substitut	Charakter
Geist / Geist Sans	Geist (auf Google Fonts)	Geometrisch, komprimierte Laufweite
Geist Mono	Geist Mono (auf Google Fonts)	Saubere Monospace, Ligaturen
sohne-var (Stripe)	Source Sans 3	Leichte Eleganz
Berkeley Mono	JetBrains Mono	Technische Monospace
Airbnb Cereal VF	DM Sans	Runde, freundliche Geometrie
Circular (Spotify)	DM Sans	Geometrisch, warm
figmaSans	Inter	Sauberer humanistischer Stil
Pin Sans (Pinterest)	DM Sans	Freundlich, abgerundet
NVIDIA-EMEA	Inter (oder Arial System)	Industriell, sauber
CoinbaseDisplay/Sans	DM Sans	Geometrisch, vertrauenswürdig
UberMove	DM Sans	Fett, eng
HashiCorp Sans	Inter	Unternehmensorientiert, neutral
waldenburgNormal (Sanity)	Space Grotesk	Geometrisch, leicht kondensiert
IBM Plex Sans/Mono	IBM Plex Sans/Mono	Verfügbar auf Google Fonts
Rubik (Sentry)	Rubik	Verfügbar auf Google Fonts

Wenn die CDN-Schriftart einer Vorlage mit dem Original übereinstimmt (Inter, IBM Plex, Rubik, Geist), entsteht kein Substitutionsverlust. Wenn ein Substitut verwendet wird (DM Sans für Circular, Source Sans 3 für sohne-var), folgen Sie genau den Angaben zu Gewicht, Größe und Buchstabenabstand der Vorlage – diese tragen mehr zur visuellen Identität bei als die spezifische Schriftart.

Design-Katalog

KI & Maschinelles Lernen

Vorlage	Website	Stil
claude.md	Anthropic Claude	Warmer Terrakotta-Akzent, sauberes redaktionelles Layout
cohere.md	Cohere	Lebendige Farbverläufe, datenreiches Dashboard-Design
elevenlabs.md	ElevenLabs	Dunkle filmische Benutzeroberfläche, Audio-Wellenform-Ästhetik
minimax.md	Minimax	Kräftige dunkle Oberfläche mit Neon-Akzenten
mistral.ai.md	Mistral AI	Französisch gestalteter Minimalismus, lila Töne
ollama.md	Ollama	Terminal-zentriert, monochrome Einfachheit
opencode.ai.md	OpenCode AI	Entwicklerzentriertes dunkles Thema, vollständig Monospace
replicate.md	Replicate	Saubere weiße Leinwand, code-orientiert
runwayml.md	RunwayML	Filmische dunkle Benutzeroberfläche, medienreiches Layout
together.ai.md	Together AI	Technisches, bauplanartiges Design
voltagent.md	VoltAgent	Leer-schwarze Leinwand, smaragdgrüner Akzent, terminal-nativ
x.ai.md	xAI	Strenges Monochrom, futuristischer Minimalismus, vollständig Monospace

Entwickler-Tools & Plattformen

Vorlage	Website	Stil
cursor.md	Cursor	Elegante dunkle Oberfläche, Farbverlaufs-Akkzente
expo.md	Expo	Dunkles Thema, enge Laufweite, code-zentriert
linear.app.md	Linear	Ultra-minimalistischer Dark-Mode, präziser lila Akzent
lovable.md	Lovable	Verspielte Farbverläufe, freundliche Entwickler-Ästhetik
mintlify.md	Mintlify	Sauber, grüne Akzente, leseoptimiert
posthog.md	PostHog	Verspieltes Branding, entwicklerfreundliche dunkle Benutzeroberfläche
raycast.md	Raycast	Elegantes dunkles Chrom, lebendige Farbverlaufs-Akkzente
resend.md	Resend	Minimales dunkles Thema, Monospace-Akkzente
sentry.md	Sentry	Dunkles Dashboard, datendicht, pink-lila Akzent
supabase.md	Supabase	Dunkles Smaragd-Thema, code-first Entwickler-Tool
superhuman.md	Superhuman	Premium dunkle Benutzeroberfläche, tastatur-zentriert, lila Schimmer
vercel.md	Vercel	Schwarz-weiße Präzision, Geist-Schriftsystem
warp.md	Warp	Dunkle IDE-ähnliche Oberfläche, blockbasierte Befehls-Benutzeroberfläche
zapier.md	Zapier	Warmer Orange-Ton, freundliche, von Illustrationen getriebene Gestaltung

Infrastruktur & Cloud

Vorlage	Website	Stil
clickhouse.md	ClickHouse	Gelbe Akzente, technischer Dokumentationsstil
composio.md	Composio	Modernes Dunkel mit bunten Integrationssymbolen
hashicorp.md	HashiCorp	Unternehmensorientiert-sauber, schwarz und weiß
mongodb.md	MongoDB	Grünes Blatt-Branding, Fokus auf Entwicklerdokumentation
sanity.md	Sanity	Roter Akzent, inhaltsorientiertes redaktionelles Layout
stripe.md	Stripe	Charakteristische lila Farbverläufe, Eleganz mit Stärke 300

Design & Produktivität

Vorlage	Website	Stil
airtable.md	Airtable	Bunt, freundlich, strukturierte Datenästhetik
cal.md	Cal.com	Saubere neutrale Benutzeroberfläche, entwicklerorientierte Einfachheit
clay.md	Clay	Organische Formen, sanfte Farbverläufe, künstlerisch gestaltetes Layout
figma.md	Figma	Lebendig mehrfarbig, verspielt dennoch professionell
framer.md	Framer	Kräftiges Schwarz und Blau, bewegungsorientiert, design-zentriert
intercom.md	Intercom	Freundliche blaue Palette, konversationelle UI-Muster
miro.md	Miro	Heller gelber Akzent, Ästhetik der unendlichen Leinwand
notion.md	Notion	Warmer Minimalismus, Serifen-Überschriften, weiche Oberflächen
pinterest.md	Pinterest	Roter Akzent, Mauerwerk-Raster, bild-orientiertes Layout
webflow.md	Webflow	Blaue Akzente, polierte Marketing-Website-Ästhetik

Fintech & Krypto

Vorlage	Website	Stil
coinbase.md	Coinbase	Saubere blaue Identität, vertrauensorientiert, institutionelles Gefühl
kraken.md	Kraken	Lila betonte dunkle Benutzeroberfläche, datendichte Dashboards
revolut.md	Revolut	Elegante dunkle Oberfläche, Farbverlaufskarten, Fintech-Präzision
wise.md	Wise	Heller grüner Akzent, freundlich und klar

Unternehmen & Verbraucher

Vorlage	Website	Stil
airbnb.md	Airbnb	Warmer Korallen-Akzent, fotografie-getrieben, abgerundete Benutzeroberfläche
apple.md	Apple	Premium-Weißraum, SF Pro, filmische Bildsprache
bmw.md	BMW	Dunkle Premium-Oberflächen, präzise Ingenieursästhetik
ibm.md	IBM	Carbon-Designsystem, strukturierte blaue Palette
nvidia.md	NVIDIA	Grün-schwarze Energie, technische Kraftästhetik
spacex.md	SpaceX	Strenges Schwarz und Weiß, randlose Bildsprache, futuristisch
spotify.md	Spotify	Lebendiges Grün auf Dunkel, kräftige Typografie, album-kunst-getrieben
uber.md	Uber	Kräftiges Schwarz und Weiß, enge Schrift, urbane Energie

Ein Design auswählen

Passen Sie das Design an den Inhalt an:

• Entwickler-Tools / Dashboards: Linear, Vercel, Supabase, Raycast, Sentry
• Dokumentation / Inhaltsseiten: Mintlify, Notion, Sanity, MongoDB
• Marketing / Landingpages: Stripe, Framer, Apple, SpaceX
• Dark-Mode-Benutzeroberflächen: Linear, Cursor, ElevenLabs, Warp, Superhuman
• Helle / saubere Benutzeroberflächen: Vercel, Stripe, Notion, Cal.com, Replicate
• Verspielt / freundlich: PostHog, Figma, Lovable, Zapier, Miro
• Premium / Luxus: Apple, BMW, Stripe, Superhuman, Revolut
• Datendicht / Dashboards: Sentry, Kraken, Cohere, ClickHouse
• Monospace / Terminal-Ästhetik: Ollama, OpenCode, x.ai, VoltAgent