Für Entwickler
Entwickler
Schluss mit dem Neumessen von Bildern. Inspizieren Sie echte Element-Eigenschaften, kopieren Sie Code in der Sprache Ihres Stacks, skripten Sie Exporte über die CLI — und lassen Sie KI-Agenten das Design über MCP lesen.
- Dev Mode: Abstände, Schrift und Variablen an jedem Element
- CSS, React, Tailwind, SwiftUI, UIKit, Compose oder Android XML
- CLI und MCP für Skripting und KI-Workflows
Warum die Übergabe meist Ihre Woche verschwendet
Spezifikationen kommen als Screenshots mit Pfeilen an; die echten Werte bleiben im Tool der Designerin eingesperrt.
Sie übertragen Farben, Abstände und Schriftskalen von Hand — und jede Übertragung ist eine Gelegenheit, sich zu irren.
Das Design-Tool lebt außerhalb Ihrer Toolchain: nichts zu skripten, nichts zu automatisieren, nichts, was Ihre Agenten abfragen können.
Bei der dritten Überarbeitung stimmen Code und Design-Datei nicht mehr überein, und niemand weiß, welche recht hat.
Zahlen, die bei der Übergabe zählen
- 7
- Codeformate, direkt aus Element-Eigenschaften in Dev Mode generiert
- 0
- Screenshots zum Neumessen — klicken Sie auf ein Element und lesen Sie seine echten Werte
- 4
- Fähigkeiten über MCP: Struktur, Eigenschaften, Codegenerierung, PNG-Rendering
- 3
- Arbeitsweisen: Browser-Editor, Kommandozeilen-Tool und MCP für KI-Agenten
Für Menschen gebaut, die Code ausliefern
Inspizieren Sie die Quelle, keinen Screenshot
Eine Design-Datei ist eine Datenstruktur, und Dev Mode behandelt sie als solche. Klicken Sie auf ein Element, und Sie lesen seine tatsächlichen Eigenschaften — Abmessungen, Paddings, Farben, Textstile und Variablen mit ihren Modi — dieselben Werte, mit denen das Design gebaut wurde. Generierter Code folgt derselben Regel: Auto-Layout-Frames kommen als das Flexbox heraus, wie sie sich ohnehin verhalten, und tokenisierte Werte bleiben Tokens, statt in magische Zahlen zusammenzufallen.
Der Workflow-Kontext kommt gleich mit. Ready-for-Dev-Anmerkungen sagen Ihnen, welche Frames Verträge und welche Entwürfe sind; Kommentare tragen die Begründung; der Versionsverlauf beantwortet, was sich seit Ihrem letzten Build gegen die Datei geändert hat. Die Ratespiele, die Frontend-Schätzungen unehrlich machen, haben schlicht weniger Verstecke.
Automatisieren Sie es: CLI und MCP
Der Editor ist nicht die einzige Tür. Ein Kommandozeilen-Tool rendert Dokumente und exportiert PNG — passt natürlich zu Doku-Builds und CI-Checks — und automatisierte Codegenerierung läuft in Pipelines aus denselben Designs, sodass generierte Werte immer mit dem übereinstimmen, was Dev Mode zeigt.
Für KI-gestützte Entwicklung ist MCP der Unterschied zwischen einem Agenten, der aus Pixeln rät, und einem, der es weiß: Er listet Dateien auf, durchläuft die Dokumentstruktur, liest Element-Eigenschaften, generiert Code und rendert Referenz-PNGs. Richten Sie Ihren MCP-fähigen Assistenten darauf, und die Design-Datei wird zu abfragbarem Kontext in Ihrem Editor.
Häufig gestellte Fragen
Wie genau ist der generierte Code?
Er wird aus den echten Eigenschaften des Elements abgeleitet — Abstände, Farben, Typografie, Variablen — mit Auto-Layout als Flexbox ausgedrückt. Betrachten Sie ihn als getreuen Ausgangspunkt: Er beseitigt Übertragungsfehler, und Sie passen ihn dennoch an Ihre Komponentenkonventionen und Ihr State-Handling an.
Brauche ich einen kostenpflichtigen Sitzplatz, nur um Designs zu inspizieren?
Dev Mode ist bei den Plänen Professional und Organization dabei. Das Ansehen und Kommentieren geteilter Designs ist in jedem Plan kostenlos — die Inspektion und Generierung auf Code-Ebene fügt die Bezahlstufe hinzu.
Kann ich Tuvi aus Skripten und CI nutzen?
Ja. Das Kommandozeilen-Tool rendert Dokumente und exportiert PNG für Pipelines, und die automatisierte Codegenerierung deckt die Kernformate ab — sodass Doku-Builds und CI-Checks laufen, ohne dass jemand den Editor öffnet.
Was kann ein KI-Agent tatsächlich mit einem Design tun?
Über MCP: Design-Dateien auflisten, den Dokumentbaum lesen, Element-Eigenschaften inspizieren, Code generieren und Elemente als PNG rendern. Das Verändern von Dokumenten ist bewusst nicht freigegeben — Agenten lesen und generieren, sie bearbeiten nicht heimlich.
Muss ich im Browser arbeiten?
Der Editor ist browserbasiert — null Einrichtung für alle im Team — aber das Tooling ist nicht nur im Browser: Das Kommandozeilen-Tool deckt skriptgesteuertes Rendern und Exportieren ab, und MCP bringt Designs direkt in Ihren IDE-Assistenten.