De una idea a una interfaz que puedes explorar, comentar y mejorar.
Skill para agentes locales · Prototipos interactivos · Excalidraw · Feedback visual
Craft convierte una solicitud de diseño en un proceso revisable: entender la intención, mostrar alternativas visuales, elegir una dirección, navegar un prototipo y validar la implementación con evidencia. Está pensado para web, escritorio y móvil; adapta el nivel de detalle al usuario.
Prototipos navegables generados por Go, comentarios anclados con borradores persistentes y un navegador compartido con el agente. Software MIT, usable mediante MCP stdio en distintos clientes; MCP Apps y Pi son integraciones opcionales.
Pide al agente: «Abre Craft Studio local para este proyecto, genera las tres direcciones y espera mi elección». craft_studio {"action":"local"} devuelve una URL local. El Studio sirve las cards automáticamente. Para actualizar desde Git: recompila con npm run build:native, reinicia el MCP y recarga la extensión si la utilizas.
Nuevo · 1.9: avisos locales de texto desbordado y posibles solapamientos, ajuste de altura y redistribución que respeta las posiciones humanas. Proyecto activo visible y diagnóstico MCP mediante craft_project status. Instalación y conexión · Validación completa.
Lienzo editable: lienzo con jerarquía de capas, arrastre, redimensionamiento, edición directa de texto y componentes añadidos por la persona. Puedes editar y comentar las propuestas antes de elegir. El agente conserva esos cambios al generar la siguiente revisión. HTML interactivo y SVG con capas desde JSON determinístico; imágenes importadas/generadas reutilizables y biblioteca local. Los prototipos legados conservan su inspector limitado y las TUI su salida ANSI. Flujo y límites del editor.
Instalación, flujo completo y contratos. Incluye referencias compactas de elementos, inspección incremental, pestañas, control humano y captura como imagen MCP. Las plantillas interactivas usan datos de ejemplo; la validación final debe recorrer la aplicación real.
Imágenes en las plantillas: genera con Pollinations o importa desde otro modelo, conserva el original y reutiliza la misma imagen en propuestas y vistas. El binario prepara versiones ligeras; HTML, PNG y PDF llevan la imagen integrada. Configuración, ahorro y límites. Pollinations requiere clave y créditos; no se promete generación gratuita.
Motor Go + explorador .codegraft + revisión visual del agente. El agente puede inventariar componentes y tokens, recorrer prototipos, obtener evidencia de superficies disponibles y dejar sus propios hallazgos. En proyectos existentes conserva lo construido y comprueba cambios fuera del alcance. Las mejoras adicionales se implementan tras aprobar los hallazgos concretos.
Uso paso a paso · Cómo está construido · Inventario actual
Incluye adaptadores acotados para Windows, Android, iOS Simulator y TUI. Su presencia no equivale a validación en todos los dispositivos: consulta cobertura y límites.
El MCP también permite abrir un Chromium dedicado y visible mediante craft_browser: el agente conserva la sesión, navega, hace clicks, ajusta el viewport y captura evidencia; tú puedes interactuar en la misma ventana. El modo headless sigue disponible para CI. Uso y requisitos.
La extensión propia para Chrome/Edge hace visible el flujo completo: compara tres direcciones, revisa todas las vistas de la elegida, permite comentar cada card y congela la revisión antes de construir.
Las tarjetas usan estos bocetos ilustrativos; cada una abre el prototipo navegable correspondiente.
Enviar comentarios abre una nueva revisión mediante Native Messaging. Pi recibe la revisión automáticamente mientras la sesión del proyecto está abierta; /craft-listen permite reiniciar manualmente esa escucha. Aprobar diseño y preparar implementación congela la revisión y habilita el contrato determinístico para el stack real.
Instalar Craft Studio y el puente local · Contrato para agentes
Brisa es una app de ejemplo para organizar el trabajo de un equipo pequeño. Compara tres direcciones del mismo producto: agenda editorial, panel operativo y tablero visual.
Los visuales de arriba son bocetos. La demo interactiva permite crear tareas, abrir detalles, completarlas, cambiar a móvil y exportar comentarios. Los datos duran esta sesión; no hay backend.
Desde la carpeta del repositorio ejecuta python -m http.server 8080 --bind 127.0.0.1 y abre Brisa en tu navegador. También puedes abrir directamente el HTML.
Prompts por etapas: de tu idea a un producto · Diagrama completo del flujo · Publicaciones para X y Discord
Las referencias WEGcode se conservan como ejemplo de otro proyecto. No definen la marca ni la composición de nuevos productos. También están disponibles las 12 vistas móviles editables.
Con Pi instalado:
El checkout Git entrega fuentes del motor: necesitas Go 1.23+ o configurar un binario compilado mediante CRAFT_CODEGRAFT_BIN. Para compilar una vez y usarlo desde Pi, sigue la instalación del motor Go (npm run build:native).
pi install npm:pi-mcp-adapter
pi install git:github.com/Maicololiveras/Craft_Visual_ExperienceReinicia Pi o recarga sus recursos. Luego escribe:
/craft-visual Diseña una app de proyectos para mi equipo. Muéstrame tres direcciones visuales antes de implementar.
También puedes pedir directamente: «Usa craft-visual-experience para diseñar esta interfaz».
El paquete registra la skill, el prompt, el listener y el servidor MCP craft_browser. El adaptador lo inicia de forma lazy en el proyecto activo. craft_studio muestra las cards como una UI interactiva embebida; la extensión Chrome/Edge ofrece el mismo flujo en una ventana completa y permite navegar páginas reales. No instala Playwright ni la extensión del navegador silenciosamente.
| Contenido | Qué puedes hacer | Abrir |
|---|---|---|
| Skill | Descubrimiento, alternativas, diseño, movimiento, validación y feedback | Flujo y referencias |
| Prototipo interactivo | Navegar, cambiar densidad y dispositivo, comentar, simular errores y revisar Debug | HTML autocontenido |
| Escritorio | Editar 32 pantallas: 14 Dev, 12 Work y 6 compartidas | Excalidraw completo · Índice |
| Móvil | Editar 12 pantallas en iOS 390, Android 360 y Android 412 | Excalidraw móvil |
| Extensión | Elegir propuestas, revisar vistas, anotar y enviar a Pi | Instalación y recorrido |
| MCP Browser | Abrir cards interactivas, seleccionar, comentar y devolver eventos al agente | Contrato MCP |
| Debug | Inspección DOM y comprobaciones con Playwright | Validación y límites |
| Instalador | Copiar la skill a Pi, Gentle AI, Codex o Claude con respaldo | Instalación detallada |
| Integración | Entender contratos, capacidades y cómo extender | Arquitectura |
Para abrir un .excalidraw, descárgalo y arrástralo a Excalidraw o ábrelo con su menú. Los elementos son editables. Las imágenes del README se generan con la misma geometría; la tipografía puede variar en Excalidraw.
git clone https://github.com/Maicololiveras/Craft_Visual_Experience.git
cd Craft_Visual_Experience
python -m http.server 8080 --bind 127.0.0.1Abre el prototipo local. En Windows también puedes usar py -3 -m http.server 8080 --bind 127.0.0.1.
- Cambia entre escritorio, iOS y Android.
- Explora inicio, conversación, archivos y documento.
- Prueba las composiciones y la opción de movimiento reducido.
- Añade comentarios y expórtalos.
- Abre Debug para revisar los eventos simulados del prototipo.
GitHub muestra el código del HTML; para interactuar debes abrirlo localmente. El prototipo usa datos simulados y no contiene un backend ni ejecuta agentes reales.
Idea → preguntas útiles → opciones visuales → selección → prototipo → implementación → revisión.
Las alternativas deben tener bocetos reales comparables. Tras elegir, el agente prepara estados, navegación y movimiento antes de construir la aplicación de producción. Durante la implementación recoge comentarios, reproduce fallos, modifica el código y verifica con las herramientas disponibles.
Para Android pregunta dónde quieres revisar: navegador, emulador o dispositivo físico. La simulación del tamaño de un teléfono ayuda a explorar el diseño; la validación nativa se realiza en el entorno correspondiente.
- Clona o descarga este repositorio.
- Abre
chrome://extensionsy activa Modo de desarrollador. - Pulsa Cargar descomprimida y elige
browser-extension/chrome. - Fija Visual Feedback — Craft UI y abre tu web.
- Abre Craft Studio, conecta el proyecto y sigue el recorrido del panel nativo. El popup conserva la exportación JSON.
También incluye una variante para Firefox y funciona con la carpeta Chrome en Edge. Recorrido completo, permisos y límites.
Incluye pruebas del instalador, pruebas del background de la extensión con APIs simuladas, validación de manifiestos y documentos, y CI para Windows, Linux y macOS. Consulta qué valida cada prueba.
La skill guía al agente; no garantiza por sí sola un resultado perfecto. Consulta la evidencia y los límites del panel nativo en validación. El prototipo no equivale a una aplicación WPF, SwiftUI o Android terminada. En iOS puedes revisar las vistas web y trabajar con un agente en otro equipo; no se entrega un instalador nativo de Pi ni una extensión Safari.
Requiere Python 3.9+ y Node.js para las comprobaciones locales.
python scripts/validate.py
npm test
python scripts/package_extension.pyEl ZIP de la extensión se genera en dist/. Pillow es opcional para generar imágenes de las vistas. Contribuir · Historial · Licencia MIT