DESIGN.md-Anleitungen
Eine DESIGN.md macht das Designsystem einer Website zu einer Datei, die dein Coding-Agent lesen kann: Farben, Typografie, Abstände, Radien und Komponenten, samt den Regeln für ihren Einsatz. Diese Anleitungen zeigen Schritt für Schritt, was du damit machst, jeweils mit einem Praxisbeispiel aus einer echten Datei in der DESIGN.md-Galerie.
Neu im Format? Lies zuerst, was eine DESIGN.md ist. Bereit für deine eigene? DESIGN.md aus jeder Website erstellen.
Anleitungen nach Anwendungsfall
- Entwickler, die mit einem KI-Coding-Agenten bauen
Claude Code und Cursor UI bauen lassen, die zu einer Website passt
Extrahiere eine Website, die dir gefällt, leg ihre DESIGN.md in dein Repo und verweise deinen Agenten darauf, mit den genauen Prompts für Claude Code und Cursor.
- Solo-Gründer und kleine Teams
Kein Designer? Übernimm ein bewährtes Designsystem für deine App
Wie du eine Referenz-Website auswählst, was du aus ihrer DESIGN.md behältst und was du änderst, damit das Ergebnis deins ist und keine Kopie.
- Teams vor Relaunch, Rebranding oder Migration
Website-Relaunch geplant? Extrahiere zuerst ihr Designsystem
Halte deine aktuelle Website vor einem Relaunch, Rebranding oder Framework-Wechsel als DESIGN.md fest und erfahre, was du von Hand prüfen musst.
- Designer und Agenturen beim Prototyping
Zwei Referenz-Websites zu einem Design für einen Prototyp kombinieren
Vergleiche zwei extrahierte DESIGN.md-Dateien Token für Token und führe sie zu einer Spezifikation für einen Prototyp zusammen, von Hand oder mit deinem Agenten.
- Entwickler von Agenten und Agent-Workflows
Gib deinem Coding-Agenten Design-Specs auf Abruf, per MCP
Verbinde den MCP-Server, damit dein Agent die DESIGN.md einer Website selbst extrahieren, auf sie warten und daraus bauen kann.