50 beliebte Apps in Claude-lesbare Designspezifikationen zurückentwickelt: Schlüsselmuster für UI-Klonierung
u/meliwat hat wochenlang 50 beliebte Apps in strukturierte Markdown-Designspezifikationen zerlegt und sie Claude gefüttert, um die UIs nachzubauen. Der Unterschied zwischen nahezu perfekten Klonen und abweichenden Ergebnissen lag in einigen konkreten Praktiken, die bei der Menge beobachtet wurden.
Was Claude dazu brachte, UI-Klone zu treffen
- Exakte Werte, keine Bereiche.
#1A1A1Afunktioniert. „dunkelgrau“ produziert fünf verschiedene Grautöne über fünf Bildschirme hinweg. - Zustandsabdeckung im Voraus. Die Auflistung jedes Zustands (leer, ladend, Fehler, gefüllt) verhinderte, dass Claude eigene erfand.
- Abstände als Skala, nicht als Pixel pro Element. Ein 4/8/16/24-Abstandssystem erzeugte konsistentere Layouts als das Annotieren jeder Lücke.
- Navigation als Graph. Explizite Bildschirm-zu-Bildschirm-Übergänge stoppten das Rätselraten „wohin führt dieser Button“.
Was nicht half
Längere Prosa. Ab einem bestimmten Punkt machten mehr Worte die Ausgabe schlechter, nicht besser. Halten Sie Spezifikationen präzise.
Verfügbare Ressourcen
Die gesamte Sammlung ist auf GitHub unter github.com/Meliwat/awesome-ios-design-md als Open Source verfügbar. Jede App wird mit 3 Spezifikationstiefen ausgeliefert: Kurzreferenz, Standardaufbau oder vollständiger Pixel-Level-Klon. Alles Markdown, MIT-Lizenz, keine Abhängigkeiten.
Community-Frage
Der Autor fragt: Wenn Sie UI-Klonen mit Claude betrieben haben, welche Muster haben Sie gefunden, die in dieser Liste fehlen? Welche Apps sollten als nächstes hinzugefügt werden?
📖 Lesen Sie die vollständige Quelle: r/ClaudeAI
👀 Siehe auch
Steuere echte iPhones über OpenClaw Agenten – Praxis mit AvaBerry43s Aufbau
Ein Entwickler hat eine API-gesteuerte iPhone-Umgebung für KI-Agenten geschaffen, die Funktionen wie das Verfassen von iMessages, Shortcuts und mobiles QA testen. 70 Geräte stehen für Experimente zur Verfügung.
TinyFish Web Agent übertrifft Wettbewerber bei der Web-Task-Benchmarking.
Der Web-Agent von TinyFish erzielte eine Erfolgsquote von 81,9 % bei schwierigen Web-Aufgaben und übertraf damit deutlich Wettbewerber wie OpenAI Operator mit 43,2 %.
HTML-Artefakte ersetzen Google Docs für technische Dokumentation, aber es fehlt die Kommentarfunktion
Claude-generierte HTML-Artefakte ersetzen Google Docs für lange, technische Inhalte wie Spike-Auswertungen und Architekturnoten, aber die Sandbox-iframe-Natur verhindert Inline-Kommentare und Überprüfungsfunktionen.
Claude Code-Fähigkeiten für automatisiertes Projektgerüst
Ein Entwickler hat Claude Code-Fähigkeiten erstellt, die die Einrichtung von Full-Stack-Projekten mit Befehlen für React, Next.js, Node.js-APIs und Turborepo-Monorepos automatisieren. Die Fähigkeiten ziehen die neuesten Abhängigkeiten, unterstützen über 50 Integrationen und sind unter der MIT-Lizenz verfügbar.