Por qué creé App Canvas

Por qué creé App Canvas

La IA facilitó crear otra página, pero no entender una app creciente. Quería ver las pantallas implementadas y sus fallos sin recorrer cada pantalla ni mantener un segundo archivo de diseño.

App Canvas convierte la revisión en un paisaje navegable. El agente integra cada repo; la herramienta compartida ofrece el lienzo, previews de código real, navegación con cámara y reproducción verificada.

StoolSense es el ejemplo público sintético. No contiene sesiones de producción, historiales reales ni peticiones de IA. Los eventos opcionales de uso son independientes de los datos de la app.

Explora, interactúa y reproduce

De un repo existente a un lienzo interactivo

Encarga la integración a un agente que pueda leer, editar y ejecutar comandos. No necesitas Storybook ni una lista previa de pantallas. Instalar el paquete no llena el lienzo por sí solo.

Pega esto en tu agente

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. Instala la herramienta compartida

   Usa Node.js 22+ y el gestor y lockfile del proyecto. Instala la versión fijada desde GitHub y el navegador. En npm 12, añade --allow-git=root solo si bloquea esa dependencia Git directa; no cambies la política global.

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

2. Inventaría antes de elegir casos

   Ejecuta discover sobre toda la raíz de la app. El agente revisa cada región y candidato, resuelve pending y enumera estados semánticos independientemente del catalog. Los bloqueos siguen visibles.

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

3. Renderiza la UI original con fixtures

   Crea config, catalog, fixtures sintéticos, preview entry y journeys en ui-review. El adapter importa páginas, providers y estilos reales. Sustituye datos y dependencias, no la UI; rechaza solicitudes desconocidas.

   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 · Guía del agente

4. Verifica estados e interacciones

   Incluye estados normal, vacío, carga, error, acceso denegado, diálogos y recuperación. Comprueba cada caso y los controles reales en flujos continuos. Concilia inventory, assertions vinculadas al código y rutas; pasa --complete sobre la misma raíz.

   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. Revisa y mantén desde el código

   Ejecuta ui:review, explora el mapa y reproduce un flujo. Pide cambios al código real. Las vistas existentes se reconstruyen; rutas y estados nuevos requieren actualizar inventory, fixtures y journeys. Exige el control completo antes de entregar.

   npm run ui:review

Qué conserva tu aplicación

El paquete compartido mantiene viewer, CLI y skill. Tu repo mantiene adapter, fixtures, inventory independiente, catalog y comprobaciones. Empieza con el ejemplo ejecutable React/Vite; otros stacks necesitan su adapter.

Skill opcional

Codex y Claude Code pueden instalar la skill incluida. Otros agentes siguen AGENT_GUIDE.md directamente. El runtime no llama a modelos ni necesita API key; tu agente tiene sus propios costes y permisos.

npx app-canvas install --target both

Privacidad y telemetría

Eventos mínimos opcionales mediante Cloudflare a PostHog. No se reenvían contenidos, código, nombres, rutas, correo ni IP a PostHog. Puedes desactivarlos.

Privacidad y telemetría ↗

Alcance y límites

• Web utiliza HTML/CSS reales y JavaScript original al interactuar. UIKit, SwiftUI y Android necesitan harnesses y evidencia del runtime original; una captura no es una app nativa interactiva.
• La cobertura relaciona código revisado y casos, no descubre automáticamente toda condición posible. Las pruebas UI no validan backends de producción ni precisión clínica o de modelos.
• Viewer: inglés por defecto y 11 idiomas. La demo pública es un frontend sintético fijo; las integraciones locales siguen tu código. No se ha medido el rendimiento en un iPad físico.