Designschulden von KI-Codierungstools mit einer einzigen Design.md-Datei lösen
makedream٨ مايو ٢٠٢٦
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
Mit ein paar Prompts in einem KI-Codierungstool erhält man schnell eine ansehnliche Seite. Das Problem folgt jedoch direkt danach: Die Abrundung eines neu erstellten Buttons unterscheidet sich von der auf der Nachbarseite, und die Markenfärbung weist minimale Abweichungen in der Sättigung auf. Die Entwicklungsgeschwindigkeit ist hoch, aber das Ergebnis wirkt unsauber. Wenn die KI den Kontext nicht kennt, liefert sie meist nur den gängigsten Durchschnittswert. Um dieses Problem zu lösen, müssen Sie eine Design.md im Projekt-Root verankern und der KI strikte Einschränkungen auferlegen.
Der KI zu sagen, sie solle ein "stilvolles Blau" verwenden, ist Zeitverschwendung. Die KI verarbeitet keine Adjektive, sondern normalisierte Daten. Spezifizieren Sie Ihr Designsystem in drei Ebenen: Primitiv (Primitive), Semantisch (Semantic) und Komponente (Component).
blue-500: #3B82F6.bg-primary: var(--blue-500).[category]-[property]-[modifier], damit Namen wie $color-background-hover entstehen.Laut einer Fallstudie zur UI-Zusammenarbeit aus dem Jahr 2025 konnten Teams, die solche strukturierten Tokens verwendeten, die Rate an UI-Fehlern von 14 auf 4 Fälle pro Sprint senken. Wenn die KI beginnt, Klassen basierend auf der Funktion statt auf Farbcodes auszuwählen, verschwinden 70 % der Zeit für Designkorrekturen. Wenn Sie Tailwind CSS verwenden, weisen Sie die KI an, diese Tokens eins zu eins mit der tailwind.config.js abzugleichen.
Je mehr Freiheitsgrade eine KI hat, desto dümmere Entscheidungen trifft sie. Um uneinheitliche Abstände auf verschiedenen Seiten zu vermeiden, müssen die Werte in Form einer Tabelle in der Spezifikation festgehalten werden.
| Eigenschaft | Wert | Anwendungsregel |
|---|---|---|
| Button-Abrundung | 8px | Festgelegt auf rounded-lg, keine willkürlichen Änderungen |
| Sektionsabstand | 64px | Vertikaler Abstand zwischen allen Hauptsektionen |
| Maximale Breite | 1280px | Begrenzungslinie für die Zentrierung des Hauptinhalts |
Begrenzen Sie Abstandseinheiten auf Vielfache von 8px und fixieren Sie das Card-Padding auf 24px. Besonders effektiv ist die Erstellung einer Sektion für Anti-Pattern. Mit Verboten wie "Nicht mehr als 3 CTA-Buttons auf einem Bildschirm" oder "Verwenden Sie einen 1px Rahmen anstelle von Schatten" eliminiert die KI zuerst falsche Optionen, bevor sie mit der Arbeit beginnt. Diese einfache Tabelle reduziert die Anzahl manueller Korrekturen um mehr als die Hälfte.
Wenn der Tonfall je nach Funktion variiert und Icon-Stile gemischt werden, wirkt die App billig. Definieren Sie die Brand Persona in der Design.md. Legen Sie fest, ob eine Erfolgsmeldung als "Update abgeschlossen" oder "Bereit!" formuliert werden soll.
Icons sollten folgendem Protokoll entsprechen:
stroke-width aller Icons auf 1,5px.Dasselbe gilt für den Dark Mode. Einfaches Invertieren der Farben ruiniert die Lesbarkeit. Wie in den Google Material Design Guidelines empfohlen, sollten Sie ein dunkles Grau (#121212) statt reinem Schwarz für den Hintergrund festlegen. Wenn Sie zudem die Formel für ein Kontrastverhältnis von hinterlegen, vermeidet die KI Barrierefreiheitsfehler von selbst.
Eine gut geschriebene Spezifikation nützt nichts, wenn die KI sie nicht liest. Erstellen Sie im Verzeichnis .cursor/rules/ UI-spezifische Regeln und zwingen Sie die KI, vor jeder Aufgabe die Design.md zu konsultieren. Entwicklungsdaten aus dem Jahr 2025 zeigen, dass Teams, die diese Routine einführten, die Zeit für die Feature-Entwicklung von durchschnittlich 12,5 auf 8,1 Stunden verkürzen konnten.
Jetzt korrigiert der Entwickler nicht mehr den Code, sondern passt nur noch die Werte im Dokument an, um den Gesamteindruck des Dienstes zu verändern. Design sollte kein Bereich des Gefühls, sondern ein Bereich präzisen Engineerings sein, um Geschwindigkeit zu ermöglichen. 30 Minuten Dokumentationsarbeit zu Beginn verhindern Dutzende Stunden an mühsamer Nacharbeit im späteren Verlauf.