**Anmerkungsgesteuerte UI: Wie man Vorlagen in Figma entwirft und Claude Koordinaten extrahieren lässt**

Ein Entwickler, der Zinecore baut – eine Zeitschriften-App mit 90er/Y2K-Ästhetik (knalliges Pink, dicke Umrisse, Chatblasen, Riot-Grrrl-Flyer, MySpace-Seiten) – stellte fest, dass der offensichtliche Ansatz (programmatisches Definieren von Foto-Slots im Code) jede Vorlage auf ein langweiliges Raster beschränkte. Die Lösung: Vorlagen in Figma gestalten (teils KI-generiert, dann bereinigt), als flache PNGs exportieren und farbige Rechtecke auf einer separaten Ebene zeichnen. Rot für Foto-Slots, Blau für Text. Sowohl das Design als auch das Annotationsbild an Claude übergeben.

Claude extrahiert die Koordinaten, generiert bearbeitbare Bereichsdefinitionen und richtet Tap-Ziele ein. Das Ergebnis: ein Nachmittag Arbeit für das, was Wochen für den Bau einer eigenen Layout-Engine gebraucht hätte. Eine neue Vorlage erfordert jetzt nur noch Design und das Zeichnen von Boxen – keine Code-Änderung. Das gesamte Design-Tool-System ist diese Annotations-Pipeline.

Das größere Muster: Papier-zuerst-Design

Der Entwickler betont eine Workflow-Änderung:

• Sämtliches Design-Denken auf Papier erledigen, bevor Claude etwas sieht.
• Bildschirme von Hand skizzieren, die gesamte Farbpalette wählen, die Typografie-Hierarchie festlegen.
• Apps, die dir gefallen, screenshotten und konkrete Elemente markieren, die du übernehmen möchtest.
• Claude die Vorgaben geben und um Implementierung bitten.

Der umgekehrte Weg („Design mir eine App, mach sie 90er-mäßig") führt zu drei Tagen Herumprobieren, bis etwas immer noch generisch wirkt. Claude ist stark darin, eine spezifische Vision treu umzusetzen, aber schwach darin, die Vision selbst zu haben. Sobald du Design als deine Aufgabe und Implementierung als Claudes Aufgabe betrachtest, steigt die Qualität der Ergebnisse.

Die unglamourösen Details

• Beschreibe visuelle Probleme mit Gewicht, Hierarchie und Rhythmus, statt „das sieht komisch aus, mach es besser".
• Füge Hex-Codes aus echten Referenzfotos ein, statt „warmes Pink" zu sagen.
• Sei konkret, welches App-Spacing du nachahmen willst – nenne nicht nur die Stimmung.

Die App (Zinecore im App Store) ist das konkrete Ergebnis, aber die Papier-zuerst-Annotationsmethode ist der übertragbare Teil.