Forma: einen bearbeitbaren Design-Canvas bauen
Ein lokaler Designwerkzeug-Prototyp untersucht, was nach der KI-Generierung eines Bausteins kommt: Struktur aufdecken, in 3D prüfen und weiterbearbeiten.
Ich habe Forma gebaut, um eine Frage zu untersuchen: Was sollte passieren, nachdem eine KI dir ein Design liefert? Ich wollte einen Baustein, den ich im selben Arbeitsbereich zerlegen, verstehen und verändern kann.
Forma ist ein funktionierender lokaler Prototyp. Canvas, Ebeneninspektion, Darstellungsregler und die Bearbeitung von Pixeln zu Verläufen funktionieren tatsächlich. Live-KI-Generierung war für diese Demo nicht angeschlossen.
Das Konzept ansehen
Die Sequenz beginnt mit einem vorbereiteten „Deep focus“-Baustein und seiner Lade- und Enthüllungsanimation. Ich öffne seine Ebenen in 3D, drehe den Stapel, ändere Füllung und Eckenradius, entnehme dann einem Bild Farbwerte, passe Farbe und Helligkeit an, verschiebe einen Verlaufsstopp und wechsle den Verlaufstyp.
Im Gespräch entwickeln
Ich steuerte die Arbeit in Codex desktop und verfeinerte das Produkt in kurzen Zyklen aus Implementierung, Browserinteraktion und visuellem Feedback. Mit der Nutzung des Canvas wurden meine Wünsche konkreter: eine ruhigere anthrazitfarbene Oberfläche, einklappbare Seitenleisten, klarere Navigation, kompaktere Typografie und bessere Ausrichtung.
Figma und Paper dienten als Referenzen für das Bearbeitungserlebnis. Ich wollte die vertraute Beziehung zwischen Ebenenbaum, Canvas und Inspector, mit Raum dafür, wie ein Baustein seine Struktur sichtbar macht.
Die Enthüllung wurde zum Übergang von der Grundgeometrie zum fertigen Inhalt. Die 3D-Ansicht führte diese Idee weiter: ein kompakter Stapel zur Orientierung und eine aufgefächerte „Sandwich“-Ansicht für einzelne Ebenen. Eine Verfeinerung war die umgekehrte Tiefenreihenfolge, damit der deckende Wurzelhintergrund hinter dem Inhalt lag, statt ihn zu verdecken.
Der vorbereitete Baustein wird zu bearbeitbarem Canvas-Inhalt. Die gezeigte Generierung ist simuliert.
Die getrennten Ebenen machen den Aufbau des Bausteins sichtbar; Ziehen dreht die Ansicht.
Aus der Pixelentnahme entstand ein weiterer Bearbeitungsworkflow. Statt bei einer extrahierten Palette aufzuhören, wollte ich Farben und Helligkeit anpassen, Stopps verschieben und unterschiedliche Verlaufstypen ausprobieren.
Die Bildprobe speist einen bearbeitbaren Verlauf mit Reglern für Farbe, Helligkeit und die Position der Stopps.
Werkzeuge und Validierung
Die App nutzt React 19 und TypeScript mit Vite, Tailwind CSS, shadcn/Radix-Elementen und Lucide-Icons. Motion übernimmt Animationen; CSS-3D-Transformationen ermöglichen die Ebeneninspektion. Lokale Bildproben versorgen den Verlaufseditor, und Zod validiert strukturierte Daten.
Ich nutzte Codex desktop zur Entwicklung, Browserautomatisierung für Klicks, Ziehen, Screenshots und visuelle Prüfungen sowie Bun für Skripte und Tests. Das dokumentierte Entwicklungsmodell war gpt-6-astra. Die App enthält einen separaten OpenAI-Provider-Adapter, der bei der Aufnahme aber nicht angeschlossen war.
Für das Video wurden Browser-Screenshots mit etwa 9–10 Bildern pro Sekunde aufgenommen und mit Bun und FFmpeg zu einer 1080p-H.264-Datei mit 60 Bildern pro Sekunde in der Ausgabe zusammengesetzt. Das ist keine native 60-fps-Bildschirmaufnahme; Pausen zwischen Szenen wurden entfernt.
Bei der Artikelprüfung am 8. September bestanden alle 76 Tests des Quellprojekts, darunter Ebenengeometrie, Verlaufsbearbeitung, Dokumenttransaktionen und Provider-Fehlerbehandlung. Das Konzeptvideo zeigt ausgewählte Interaktionen, keine Produktionsreife. Live-Provider-Verhalten, Live-Codesynchronisierung und eine MCP-Brücke werden nicht demonstriert.
Tokens und Kosten
Der aufgezeichnete Stand der Quellaufgabe um 07:32 UTC am 8. September 2026 umfasst 80.448.253 Tokens. Das ist eine kumulative Momentaufnahme dieser Aufgabe, kein endgültiger oder verifizierter Gesamtwert aller Entwicklungsagenten. Die Arbeit ging danach weiter; dieser Portfolioartikel gehört nicht zu ihrem Umfang.
| Erfasste Nutzung | Tokens |
|---|---|
| Eingabe, einschließlich Cache | 80.197.013 |
| Davon aus dem Cache | 78.707.968 |
| Eingabe ohne Cache | 1.489.045 |
| Ausgabe, einschließlich Reasoning | 251.240 |
| Gesamte Eingabe + Ausgabe | 80.448.253 |
Etwa 98,1 % der Eingabe kamen aus dem Cache. Die Zähler enthalten wiederholte Kontextverarbeitung und Cache-Lesevorgänge und stehen deshalb nicht für diese Menge an einzigartigem Text. Cache-Eingaben sind bereits in der Eingabe enthalten; Reasoning ist bereits in der Ausgabe enthalten. Ich habe keine Teilmenge ein zweites Mal addiert. Ob Unteragenten enthalten sind, ist unbestätigt; ein vollständiger Token-Gesamtwert für das Projekt ist daher nicht verfügbar.
Was diese Tokens kosten würden
106,16 USD zu den Standard-API-Tarifen von GPT-6 Astra. Das ist eine reine Token-Schätzung als API-Äquivalent für den dokumentierten Stand, nicht meine tatsächliche Codex-Rechnung. Die offiziellen GPT-6-Astra-Preise, geprüft am 8. September 2026, nennen 10 USD pro Million Eingabetokens ohne Cache, 1 USD pro Million Eingabetokens aus dem Cache und 50 USD pro Million Ausgabetokens.
| Kategorie | USD pro Million | Geschätzte USD |
|---|---|---|
| Cache-Eingabe | 1 USD | 78,71 USD |
| Eingabe ohne Cache | 10 USD | 14,89 USD |
| Ausgabe | 50 USD | 12,56 USD |
| Gesamt | — | 106,16 USD |
Der Cache verändert die Kostenstruktur: Er umfasst 97,84 % aller Tokens, aber etwa 74,14 % dieser Kostenschätzung. Ich ziehe Cache-Eingaben von der gesamten Eingabe ab, bevor ich den Tarif ohne Cache anwende. Der aufgezeichnete Stand enthält keine Cache-Schreibtokens.
Diese Berechnung setzt Standardverarbeitung und keine Anfrage mit mehr als 272.000 Eingabetokens voraus. Nach den veröffentlichten API-Regeln verdoppeln längere Anfragen Eingabe- und Cache-Tarife und erhöhen Ausgabetarife um den Faktor 1,5; der Fast-Modus verdoppelt die jeweils geltenden Tarife. Allein im Fast-Modus entspräche dieselbe Momentaufnahme 212,32 USD. Der kumulierte Stand zeigt nicht den Mix einzelner Anfragen; keiner der Werte rekonstruiert deshalb die tatsächliche Abrechnung. Werkzeugkosten und Nutzung außerhalb der Momentaufnahme sind ausgeschlossen.
Tatsächliche Entwicklungskosten: nicht verfügbar / nicht separat erfasst. Es gibt keinen verifizierten Rechnungsbetrag pro Projekt. Das Konzept nutzte keinen Live-Generierungsaufruf der API, aber dadurch wird die Entwicklung nicht kostenlos. Die Nutzung eines Codex-Abonnements ist keine API-Rechnung.
Was ich gelernt habe
Die nützlichsten Iterationen entstanden beim Versuch, das Ergebnis zu bearbeiten. Eine Enthüllung kann Struktur erklären, ein 3D-Stapel sie greifbar machen. Beides muss aber zu funktionierenden Bedienelementen zurückführen. Forma gab mir einen lokalen Ort, um diesen Übergang zu untersuchen. Den Live-Provider anzuschließen und zu validieren bleibt ein separater nächster Schritt.