Design.md

Source: https://github.com/VoltAgent/awesome-design-md at f6961238d5cd
License: MIT
Read the English original

This edition is an AI-assisted translation.

Kuratierte Sammlung von DESIGN.md-Analysen von entwicklerorientierten Websites.

DESIGN.md-Sammlung

Kopieren Sie eine DESIGN.md in Ihr Projekt, sagen Sie Ihrem KI-Agenten “Bauen Sie mir eine Seite, die so aussieht” und generieren Sie eine qualitativ hochwertige Benutzeroberfläche, die visuell konsistent mit der Designsprache bleibt.

Gebaut mit echter Designtiefe - einschließlich analysierter Muster, Token und Regeln - für eine qualitativ hochwertige UI-Generierung, nicht für Ausgaben auf Oberflächenebene.

Was ist DESIGN.md?

DESIGN.md ist ein neues Konzept, das von Google Stitch eingeführt wurde. Ein Klartext-Design-Systemdokument, das KI-Agenten lesen, um eine konsistente Benutzeroberfläche zu generieren.

Es ist nur eine Markdown-Datei. Keine Figma-Exporte, keine JSON-Schemata, keine speziellen Werkzeuge. Legen Sie es in Ihren Projektstamm und jeder AI-Codierungsagent oder Google Stitch versteht sofort, wie Ihre Benutzeroberfläche aussehen soll. Markdown ist das Format, das LLMs am besten lesen, also gibt es nichts zu analysieren oder zu konfigurieren.

Datei	Wer liest es	Was es definiert
AGENTS.md	Codierungsmittel	Wie man das Projekt baut
DESIGN.md	Design-Agenten	Wie das Projekt aussehen und sich anfühlen sollte

Dieses Repo bietet gebrauchsfertige DESIGN.md-Dateienvon echten Websites extrahiert.

Ein DESIGN.md anfordern

Sie könnenein DESIGN.md anfordern für bestimmte Websites, einschließlich privater Anfragen, die ausschließlich an Sie gesendet werden.

KI-Design- und Entwicklungswerkzeuge

Sie versenden Produkte mit KI, aber jeder Start stirbt immer noch leise, weil niemand darüber schreibt.EveryFeed Schließt Ihren KI-Assistenten an einen Social Workspace an, der über 35 Kanäle entwirft, plant und veröffentlicht - keine Agentur, kein Marketing-Miet.

👉 Präsentieren Sie Ihr Produkt neben Entwicklern, Designern und Vibecodern, die Benutzeroberflächen mit KI-Coding-Agenten und Web-Baukästen entwickeln. Rang 150 weltweit auf GitHub. Eine Community-Ressource, die von Entwicklern, Designern und Vibecodern verwendet wird.

Sammlung

KI- und LLM-Plattformen

• Claude - Der KI-Assistent von Anthropic. Warmer Terrakotta-Akzent, sauberes redaktionelles Layout
• Cohere - Enterprise AI-Plattform. Vibrierende Gradienten, datenreiche Dashboard-Ästhetik
• ElevenLabs - AI Voice Plattform. Dark Cinematic UI, Audio-Wellenform Ästhetik
• Minimax - Anbieter von AI-Modellen. Bold Dark Interface mit Neon-Akzenten
• Mistral AI - Offengewichtiger LLM-Anbieter. Französischer Minimalismus, lila getönt
• Ollama - Führen Sie LLMs lokal aus. Terminal-First, monochrome Einfachheit
• OpenCode AI - KI-Codierungsplattform. Entwicklerzentriertes Dark Theme
• Replicate - Führen Sie ML-Modelle über API aus. Saubere weiße Leinwand, Code-Forward
• Runway - AI Creative-Tools-Plattform mit einer redaktionellen Filmfestival-Ästhetik - filmische dunkle Helden, papierweiße Lesebands, einzelne proprietäre Sans und reine schwarze Pillen-CTAs.
• Together AI - Open-Source-AI-Infrastruktur. Technisches Design im Blueprint-Stil
• VoltAgent - AI Agent Framework. Void-black Leinwand, Smaragd-Akzent, terminal-native
• xAI - Elon Musks KI-Labor. Starker monochromer, futuristischer Minimalismus

Entwicklertools und IDEs

• Cursor - AI-First Code Editor. Sleek Dark Interface, Gradientenakzente
• Expo - React Native Plattform. Dunkles Thema, enge Buchstabenabstände, codezentrisch
• Lovable - AI Full-Stack Builder. Verspielte Verläufe, freundliche Dev-Ästhetik
• Raycast - Launcher für Produktivität. Schlankes dunkles Chrom, lebendige Gradientenakzente
• Superhuman - E-Mail-Client. Premium Dark UI, Keyboard-First, Lila Glow
• Vercel - Frontend-Einsatzplattform. Schwarz-Weiß-Präzision, Geist Schrift
• Warp - Modernes Terminal. Dark IDE-ähnliche Schnittstelle, blockbasierte Befehls-UI

Backend, Datenbanken und DevOps

• ClickHouse - Datenbank für schnelle Analysen. Yellow-accented, technischer Dokumentationsstil
• Composio - Werkzeugintegrationsplattform. Modernes Dunkel mit bunten Integrations-Icons
• HashiCorp - Automatisierung der Infrastruktur. Unternehmen sauber, schwarz und weiß
• MongoDB - Dokumentendatenbank. Green leaf branding, Fokus auf Entwicklerdokumentation
• PostHog - Produktanalyse. Spielerisches Hedgehog-Branding, entwicklerfreundliches Dark UI
• Sanity - Headless-Content-Plattform mit einer dunklen ersten redaktionellen Marketing-Oberfläche - 112px-Display-Typ, IBM Plex Mono technische Augenbrauen und ein einziger korallenroter Akzent, der für den CTA mit höchster Priorität reserviert ist.
• Sentry - Fehlerüberwachung. Dunkles Dashboard, datendicht, rosa-lila Akzent
• Supabase - Open-Source Firebase Alternative. Dark Smaragd Thema, Code-First

Produktivität und SaaS

• Cal.com - Open-Source-Planung. Saubere neutrale Benutzeroberfläche, entwicklerorientierte Einfachheit
• Intercom - Kundennachrichten. Freundliche blaue Palette, konversative UI-Muster
• Linear - Projektmanagement für Ingenieure. Ultraminimal, präzise, lila Akzent
• Mintlify - Dokumentationsplattform. Sauber, grün akzentuiert, leseoptimiert
• Notion - All-in-one Workspace. Warmer Minimalismus, Serifenüberschriften, weiche Oberflächen
• Resend - E-Mail API für Entwickler. Minimales dunkles Thema, monospace Akzente
• Zapier - Automatisierungsplattform. Warmes Orange, freundliche Illustration

Design- und Kreativwerkzeuge

• Airtable - Tabellenkalkulationsdatenbank-Hybrid. Bunte, freundliche, strukturierte Daten Ästhetik
• Clay - Kreativagentur. Organische Formen, weiche Steigungen, art-directed layout
• Figma - Collaborative Design Tool. Lebendig mehrfarbig, verspielt und doch professionell
• Framer - Website Builder. Mutig schwarz und blau, Motion-First, Design-Forward
• Miro - Visuelle Zusammenarbeit. Heller gelber Akzent, unendliche Canvas Ästhetik
• Webflow - Visual Web Builder. Blue-accented, poliert Marketing-Website Ästhetik

Fintech und Kryptowährungen

• Binance - Krypto-Austausch. Bold Binance Yellow auf monochrome, trading-floor Dringlichkeit
• Coinbase - Krypto-Austausch. Saubere blaue Identität, vertrauensorientiertes, institutionelles Gefühl
• Kraken - Crypto Handelsplattform. Purple-accented dark UI, datendichte Dashboards
• Mastercard - Globales Zahlungsnetzwerk. Warme Creme Canvas, Orbitalpille Formen, redaktionelle Wärme
• Revolut - Digital Banking. Sleek Dark Interface, Gradientenkarten, Fintech Präzision
• Stripe - Zahlungsinfrastruktur. Signature lila Gradienten, Gewicht-300 Eleganz
• Wise - Internationaler Geldtransfer. Hellgrüner Akzent, freundlich und klar

E-Commerce und Einzelhandel

• Airbnb - Reisemarktplatz. Warmer Korallenakzent, fotografisch, abgerundete Benutzeroberfläche
• Meta - Tech Einzelhandelsgeschäft. Fotografie-first, binäre helle/dunkle Oberflächen, Meta Blue CTAs
• Nike - Sporthandel. Monochromes UI, massives Großbuchstaben-Futura, Vollblut-Fotografie
• Shopify - E-Commerce-Plattform. Dark-first cinematic, neongrüner Akzent, ultraleichtes Display
• Starbucks - Flaggschiff des Kaffeeeinzelhandels. Vierstufiges erdgrünes System, warmes Creme-Canvas, proprietäre SoDoSans-Typografie

Medien und Verbrauchertechnologie

• Apple - Unterhaltungselektronik. Premium White Space, SF Pro, Filmaufnahmen
• HP - PC und Druckerhersteller. Reine weiße Leinwand, HP Electric Blue Signal CTA, geometrische Forma DJR Micro, blaue Chevron Dekorationen
• IBM - Unternehmenstechnologie. Carbon Design System, strukturierte blaue Palette
• NVIDIA - GPU Computing. Grün-schwarze Energie, technische Kraft Ästhetik
• Pinterest - Visual Discovery Plattform. Roter Akzent, Mauerwerksgitter, image-first
• PlayStation - Spielekonsolen-Einzelhandel. Drei-Oberflächen-Kanal-Layout, Cyan-Hover-Skala-Wechselwirkung
• SpaceX - Raumfahrttechnologie. Stark schwarz-weiß, Vollblutbilder, futuristisch
• Spotify - Musikstreaming. Vibrierendes Grün auf dunkel, fett, Album-Art-gesteuert
• The Verge - Tech redaktionelle Medien. Säure-Minze und ultraviolette Akzente, Manuka Display-Typ
• Uber - Mobilitätsplattform. Fett schwarz-weiß, fester Typ, städtische Energie
• Vodafone - Globale Telekommunikationsmarke. Monumentale Großbuchstaben, Vodafone Red Chapter Bands
• WIRED - Tech Magazin. Papierweiße Breitblattdichte, benutzerdefinierte Serifen, farbblaue Verbindungen

Automobil

• BMW - Luxusautomobil. Dunkle Premium-Oberflächen, präzise deutsche Ingenieurästhetik
• BMW M - Performance Automotive. Motorsport-inspirierter Kontrast, M-Farbakzente, präzises Layout
• Bugatti - Luxus-Hypercar. Kino-schwarze Leinwand, monochrome Strenge, monumentale Display-Typ
• Ferrari - Luxusautomobil. Chiaroscuro schwarz-weiß Editorial, Ferrari Red mit extremer Geringfügigkeit
• Lamborghini - Luxusautomobil. Echte schwarze Kathedrale, Goldakzent, LamboType benutzerdefinierte Neo-Grotesk
• Renault - Französisches Automobil. Vivid Aurora Gradienten, NouvelR proprietäre Schrift, Null-Radius-Tasten
• Tesla - Elektrofahrzeuge. Radikale Subtraktion, filmische Vollbildfotografie, Universal Sans

Retro-Web · DESIGN.md-Nostalgie

Eine Samstagsserie - DESIGN.md-Dateien aus dem Web der 1990er Jahre extrahiert. Lassen Sie einen hinein und sagen Sie Ihrem KI-Agenten, dass er eine periodengenaue Vintage-Benutzeroberfläche erstellen soll.

• Dell (1996) - Catalog-Ära Enterprise Web. Wörtlich schwarzer Seitenrahmen, flache Farbblock “Ribbon-Karten”, klobige Helvetica-Black-Titel über Times Roman Body und handgeschnittene GIF-Aufkleber (NEW!) Bursts, Preissiegel, abgeschrägte Produktfotos.
• Nintendo.com (2001) - Y2K “Konsole Chrom” Web. Brushed-periwinkle abgeschrägte Metallpaneele, ein halbtongepunkteter Carbon-Nav glühender Bernstein, skizzierte Arial-Black-Box-Art-Wortmarken über Leiterplatten-Heldenfeldern und eine Pixel-Mario-Willkommensblase.

Was steckt in jeder DESIGN.md?

Jede Datei folgt demStitch-DESIGN.md-Format mit verlängerten Abschnitten:

#	Abschnitt	Was es einfängt
1	Visual Theme & Atmosphäre	Stimmung, Dichte, Designphilosophie
2	Farbpalette und Rollen	Semantische Bezeichnung + hex + funktionelle Rolle
3	Typografievorschriften	Schriftfamilien, vollständige Hierarchietabelle
4	Komponentenformgebungen	Tasten, Karten, Eingaben, Navigation mit Zuständen
5	Layoutprinzipien	Abstand Skala, Gitter, Whitespace Philosophie
6	Tiefe und Höhe	Schattensystem, Oberflächenhierarchie
7	Do’s und Don’ts	Konstruktionsleitplanken und Anti-Muster
8	Responsives Verhalten	Breakpoints, Touch-Ziele, Zusammenbruchsstrategie
9	Agent Prompt Guide	Schnelle Farbreferenz, gebrauchsfertige Aufforderungen

Jede Website umfasst:

Datei	Zweck
DESIGN.md	Das Designsystem (was Agenten lesen)
preview.html	Visueller Katalog mit Farbfeldern, Typskala, Schaltflächen, Karten
preview-dark.html	Der gleiche Katalog mit dunklen Oberflächen

Verwendung

1. Kopieren einer WebsiteDESIGN.mdIn Ihre Projektwurzel
2. Sagen Sie Ihrem KI-Agenten, dass er es verwenden soll.

Mitwirken

SieheBEITRAG.md für Leitlinien.

• Bestehende Dateien verbessernFix falsche Farben, fehlende Token, schwache Beschreibungen
• Berichtsprobleme: Lassen Sie uns wissen, ob etwas absieht

Bevor Sie eine PR eröffnen, bitteOffenes Problem zuerst Ihre Idee zu diskutieren und Feedback von Maintainern zu erhalten.

Lizenz

MIT Lizenz - sieheLIZENZ

Dieses Repository ist eine kuratierte Sammlung von Designsystemdokumenten, die von öffentlichen Websites extrahiert wurden. Alle DESIGN.md-Dateien werden “wie sie sind” ohne Garantie bereitgestellt. Die extrahierten Design-Token repräsentieren öffentlich sichtbare CSS-Werte. Wir beanspruchen keinen Besitz der visuellen Identität einer Website. Diese Dokumente existieren, um KI-Agenten dabei zu helfen, eine konsistente Benutzeroberfläche zu generieren.