Warum ich App Canvas gebaut habe

Warum ich App Canvas gebaut habe

KI machte die nächste Seite einfach, aber eine wachsende App nicht verständlicher. Ich wollte implementierte Seiten und Fehlerzustände sehen, ohne alles durchzuklicken oder eine zweite Designdatei zu pflegen.

App Canvas macht die Prüfung zu einer navigierbaren Übersicht. Der Agent integriert das Repository; das gemeinsame Werkzeug liefert Canvas, echte Code-Vorschauen, Kameraführung und geprüfte Wiedergabe.

StoolSense ist das synthetische öffentliche Beispiel. Keine Produktionssitzung, echten Gesundheitsdaten oder KI-Anfragen. Optionale Nutzungsereignisse sind von App-Daten getrennt.

Überblicken, bedienen, abspielen

Vom vorhandenen Repository zur interaktiven Übersicht

Beauftrage einen Agenten, der Dateien lesen, ändern und Befehle ausführen kann. Vorhandenes Storybook oder manuelle Seitenlisten sind nicht nötig. Die Installation allein füllt die Übersicht nicht.

Diesen Auftrag an den Agenten geben

Read https://github.com/tombelieber/app-canvas/blob/v0.12.0/AGENT_GUIDE.md and add a completely populated App Canvas to this repository. Discover all screens, components, variants, states and navigation from the whole application source. Use original UI code. Create the missing synthetic fixtures and render harnesses. Reconcile an independent source inventory with rendered cases and source-linked runtime checks. Add checked happy, failure and recovery journeys. Run --complete against the original source root. Continue until the full landscape is populated and verified; report genuine blockers as incomplete. Keep production sessions, credentials and real user data out of previews.

1. Gemeinsames Werkzeug installieren

   Nutze Node.js 22+ sowie Paketverwaltung und Lockfile des Projekts. Installiere das feste GitHub-Release und den Browser. Blockiert npm 12 diese direkte Git-Abhängigkeit, ergänze nur dann --allow-git=root; ändere keine globale Richtlinie.

   npm install --save-dev github:tombelieber/app-canvas#v0.12.0
   npx app-canvas browsers

2. Erst inventarisieren, dann Fälle wählen

   Führe discover im gesamten App-Stamm aus. Der Agent prüft jede Quellregion und jeden Kandidaten, löst pending auf und erfasst semantische Zustände unabhängig vom Catalog. Blockaden bleiben sichtbar.

   npx app-canvas discover --source-root . --out .artifacts/app-canvas/inventory.json
   npx app-canvas pending --inventory .artifacts/app-canvas/inventory.json

3. Original-UI mit Fixtures rendern

   Erstelle Config, Catalog, synthetische Fixtures, Preview-Einstieg und Journeys unter ui-review. Der Adapter importiert echte Seiten, Provider und Styles. Ersetze Daten und Abhängigkeiten, nicht die UI; lehne unbekannte Netzwerkanfragen ab.

   ui-review/
     canvas.config.mjs
     catalog.json
     frame.jsx
     fixtures.js
     README.md
   .artifacts/app-canvas/inventory.json

   // package.json → scripts
   "ui:review": "app-canvas --config ui-review/canvas.config.mjs"

   React/Vite · Agent-Anleitung

4. Zustände und Interaktionen prüfen

   Erfasse Normal-, Leer-, Lade-, Fehler-, Zugriffs-, Dialog- und Wiederherstellungszustände. Prüfe jeden Fall und echte Bedienelemente in fortlaufenden Abläufen. Gleiche Inventory, quellbezogene Assertions und Routen ab; bestehe --complete im selben Stamm.

   npx app-canvas --config ui-review/canvas.config.mjs --check
   npx app-canvas --config ui-review/canvas.config.mjs --verify
   npx app-canvas --config ui-review/canvas.config.mjs --complete --source-root .

5. Aus dem Quellcode pflegen

   Starte ui:review, prüfe Übersicht und Zustandsgraph und spiele einen Ablauf ab. Lass den Agenten den echten App-Code ändern. Bestehende Vorschauen werden neu gebaut; neue Routen und Zustände brauchen Inventory-, Fixture- und Journey-Updates. Vor Übergabe gilt die vollständige Prüfung.

   npm run ui:review

Was in deiner App bleibt

Das gemeinsame Paket enthält Viewer, CLI und Skill. Dein Repository pflegt Adapter, Fixtures, unabhängiges Inventory, Catalog und Interaktionsprüfungen. Starte mit dem ausführbaren React/Vite-Beispiel; andere Stacks brauchen eigene Adapter.

Optionaler Agent-Skill

Codex und Claude Code können den enthaltenen Skill installieren. Andere Agenten lesen AGENT_GUIDE.md direkt. Die Laufzeit ruft keine Modelle auf und braucht keinen API-Schlüssel; dein Agent hat eigene Kosten und Berechtigungen.

npx app-canvas install --target both

Datenschutz und Telemetrie

Optionale minimale Ereignisse über Cloudflare an PostHog. Keine Inhalte, Codes, Namen, Pfade, E-Mails oder IPs werden an PostHog weitergeleitet. Du kannst dies deaktivieren.

Datenschutz und Telemetrie ↗

Umfang und Grenzen

• Web-Vorschauen nutzen echtes HTML/CSS und Original-JavaScript bei Interaktionen. UIKit, SwiftUI und Android brauchen Harnesses und Nachweise aus der ursprünglichen Laufzeit; ein Bild ist keine interaktive native App.
• Abdeckung ist eine geprüfte Zuordnung von Quellen zu Fällen, keine automatische Erkennung jeder Geschäftsbedingung. UI-Prüfungen qualifizieren weder Produktions-Backends noch klinische oder Modellgenauigkeit.
• Viewer: standardmäßig Englisch, 11 Sprachen. Die öffentliche Demo ist ein eingefrorenes synthetisches Frontend; lokale Integrationen folgen dem Quellcode. Physische iPad-Leistung wurde nicht gemessen.