Awesome Design.MD – Design-Systeme bekannter Websites auf die eigene Site anwenden

 (github.com/VoltAgent)
117 Punkte von xguru 24 일 전 | 5 Kommentare | Auf WhatsApp teilen
  • DESIGN.md ist ein von Google Stitch eingeführtes Konzept: ein textbasiertes Design-Dokument, das von AI-Agenten gelesen wird, um konsistente UIs zu erzeugen
  • Ohne Figma, JSON-Schema oder separates Tooling reicht es, eine einzige Markdown-Datei ins Projekt-Root zu kopieren, damit AI-Coding-Agenten den UI-Stil sofort erkennen
  • Es bildet ein Paar mit dem bestehenden AGENTS.md; DESIGN.md definiert dabei das visuelle Erscheinungsbild und Look-and-Feel
  • Jede Datei besteht aus 9 Standardsektionen zu Farbpalette, Typografie, Komponenten-Styling, Layout, responsivem Verhalten usw.
  • Für jede Site wird ein Dreier-Set aus DESIGN.md + preview.html + preview-dark.html bereitgestellt
  • Enthält die Design-Systeme von mehr als 60 Services aus den Bereichen AI, Developer Tools, Fintech und Enterprise, darunter Claude, Vercel, Stripe, Notion, Figma und Cursor
    • Kopiere das DESIGN.md der gewünschten Site ins Projekt-Root und weise den AI-Agenten an, die UI unter Bezug auf diese Datei zu bauen
    • Mit nur einem Satz wie „Erstelle mir eine Seite, die so aussieht“ lässt sich eine UI erzeugen, die zur Original-Site passt
  • MIT-Lizenz

Aufbau jeder DESIGN.md-Datei

  • Folgt dem Format von Stitch DESIGN.md und erweitert es um die folgenden 9 Sektionen

    # Sektion Erfasste Inhalte
    1 Visual Theme & Atmosphere Stimmung, Dichte, Design-Philosophie
    2 Color Palette & Roles Farbnamen + HEX + funktionale Rollen
    3 Typography Rules Schriftfamilien, komplette Hierarchie-Tabelle
    4 Component Stylings Buttons, Karten, Eingaben, Navigation und Zustände
    5 Layout Principles Abstands-Skala, Grid, Philosophie der Weißräume
    6 Depth & Elevation Schatten-System, Surface-Hierarchie
    7 Do's and Don'ts Design-Guidelines und Anti-Patterns
    8 Responsive Behavior Breakpoints, Touch-Ziele, Strategien zur Verkleinerung
    9 Agent Prompt Guide Schnelle Farbreferenz, sofort nutzbare Prompts

Enthaltene Kollektionen

  • AI & Machine Learning: Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
  • Developer Tools & Platforms: Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier
  • Infrastructure & Cloud: ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe
  • Design & Productivity: Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow
  • Fintech & Crypto: Coinbase, Kraken, Revolut, Wise
  • Enterprise & Consumer: Airbnb, Apple, BMW, IBM, NVIDIA, SpaceX, Spotify, Uber

Verwandte Beiträge

5 Kommentare

 
hidarite 24 일 전

Das Konzept ist gut und scheint nützlich zu sein, aber ...
Auch Webdesign dürfte urheberrechtlich geschützt sein,
und ich frage mich, ob es kein Problem mit dem Urheberrecht oder der geschäftlichen Fairness gibt, wenn man es so komplett kopiert und übernimmt.
 
tsboard 18 일 전

Das dachte ich auch sofort. Heutzutage scheint man einfach vorauszusetzen, dass AI-Services oder Agenten irgendwie quasi-übergesetzliche Befugnisse haben. Kann man wirklich so mit halb verbundenen Augen weitermachen? ...
 
kaydash 23 일 전

Gefällt mir. Leute aus Frontend und Design erstellen so etwas offenbar schon im Voraus und starten dann damit.
 
m00nlygreat 24 일 전

Aber normalerweise liegt das Designsystem im Frontend-Framework doch in Form von Code-Snippets vor, und man sollte das dann nicht gemeinsam nutzen..?

DESIGN.md zu folgen, wirkt so, als würde man die entsprechenden Farben und Vorgaben jedes Mal willkürlich neu erzeugen ...
 
hmmhmmhm 24 일 전

Ich denke, es wäre gut, wenn man das nicht einfach nur kopiert, sondern nutzt, um auf Basis verschiedener Designsysteme ein neues Designsystem zu entwickeln.