Un espacio ligero para ver, probar y mejorar la app que construye tu agente. Explora pantallas reales, señala qué cambiar y sigue trabajando desde el código fuente.
Ve juntas las pantallas completas, sus estados y los flujos implementados.
Mantén una sola implementación de UI. Tu agente crea fixtures, adapter y verificaciones de cobertura.
Prueba 77 estados y 44 flujos con datos sintéticos, sin cuenta ni API key.
Por qué creé Agent 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.
Agent 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.
Demo real: 77 estados, 44 flujos y 121 entradas reproducibles. Incluye casos independientes; no son 121 recorridos E2E.
Explora, interactúa y reproduce
1
Aléjate para entender la app
Pantallas completas agrupadas por página, búsqueda, filtros y paneles plegables. Los enlaces de flujo llevan la cámara al destino.
2
Acércate para usar la UI real
Browse bloquea los controles para mover el lienzo. Selecciona una pantalla y pulsa Interact para usar el código original con datos desechables.
3
Señala exactamente qué cambiar
Selecciona una pantalla o elemento UI, añade tu petición y copia una referencia para el agente. Pídele modificar el código; las vistas conectadas al código se reconstruyen.
Elige un flujo para ver pantallas completas y transiciones etiquetadas. Un enlace mueve la cámara al destino.UI real de fallo y recuperación. La reproducción ejecuta acciones y comprobaciones; una conexión dibujada no es una prueba.
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.16.0/AGENT_GUIDE.md and add a completely populated Agent 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. Group by actual page and feature, connect checked flows, deduplicate repeated captures and resume checkpoints. Run --ui-complete against the original source root; keep the stricter --complete source audit separate and unchanged. 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.
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.
Ejecuta plan en todo el repositorio original. Revisa cada archivo, anclaje UI, dependencia que afecte a la UI y navegación real. Enumera pantallas y estados independientemente del catálogo; mantén visibles las UI pendientes.
npx agent-canvas plan --source-root . --out ui-review/ui-inventory.json
npx agent-canvas status --inventory ui-review/ui-inventory.json
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.
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 --ui-complete sobre la misma raíz. --complete sigue siendo una auditoría estricta e independiente de todo el código fuente. Sus pendientes no equivalen a pantallas ausentes.
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 agent-canvas install --target both
Antes de empezar
¿Es gratis?
El CLI, canvas y skills son gratuitos y abiertos bajo MIT. Tu agente puede tener costes de suscripción o API.
¿Funciona con Claude Code y Codex?
Sí. Instala los skills para uno o ambos. Otros agentes pueden seguir la guía pública y usar el CLI. El canvas no llama a modelos.
¿Necesito un archivo de diseño?
Empieza desde el código de tu app o importa un sitio. El agente conecta la UI existente y fixtures sintéticos para revisar pantallas y estados juntos.
¿La demo modifica mi app?
No. Ejecuta un ejemplo sintético fijo en el navegador. Revisar tu app y cambiar su código ocurre en tu proyecto local con tu agente.
¿Y las apps nativas?
UIKit, SwiftUI y Android usan harnesses y capturas del runtime original de cada proyecto. Una captura no es una app nativa interactiva en el navegador.
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.
Captura de Safari en un iPhone físico. El artículo técnico explica cómo pasó de fallar a funcionar y los límites de las mediciones.
Artículo técnico de Safari
Captura de Safari en un iPhone físico. El artículo técnico explica cómo pasó de fallar a funcionar y los límites de las mediciones.
¿Quieres un espacio alojado? Registra tu interés. Cloud aún no está disponible; la herramienta MIT y la demo pública ya funcionan.
Salir de la lista
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.
