100 beliebte Apps in Markdown-Designspezifikationen für Claude UI Cloning zurückentwickelt

Ein Entwickler hat 50 beliebte Apps in strukturierte Markdown-Designspezifikationen zerlegt und sie Claude gefüttert, um UIs nachzubauen. Nach mehreren Iterationen fand er einige kritische Muster, die die Klon-Genauigkeit verbesserten, und veröffentlichte das Repository mit 100 Apps.

Was Claude bei UI-Klonen erfolgreich macht

• Exakte Werte, keine Bereiche: #1A1A1A funktioniert; „dunkelgrau“ produziert fünf verschiedene Grautöne auf fünf Bildschirmen.
• Zustandsabdeckung im Voraus: Die Auflistung jedes Zustands (leer, laden, Fehler, gefüllt) verhinderte, dass Claude eigene Zustände erfand.
• Abstände als Skala: Verwenden Sie ein 4/8/16/24-Abstandssystem anstelle von pixelgenauen Annotationen pro Element für konsistentere Layouts.
• Navigation als Graph: Explizite Bildschirm-zu-Bildschirm-Übergänge eliminieren das Rätselraten, wohin Schaltflächen führen.

Längere Prosa verschlechterte die Ausgabe ab einem bestimmten Punkt – Kürze und Präzision sind wichtiger als Umfang.

Was im Repository enthalten ist

Das öffentliche Repository unter github.com/Meliwat/awesome-ios-design-md enthält 100 Apps, jede mit drei Spezifikationstiefen: Kurzreferenz, Standard-Build und vollständiger Pixel-Level-Klon. Alle Spezifikationen sind als Markdown, MIT-lizenziert, ohne Abhängigkeiten. Geben Sie eine Spezifikation in Claude für vorhersagbarere UI-Ausgabe.

Für wen ist das gedacht

Entwickler, die Claude verwenden, um UI-Komponenten zu generieren oder zu klonen, insbesondere für iOS oder allgemeines App-Design.