Diseño en Bitácora
Del boceto a la entrega: dictar, ejecutar, revisar y publicar.
Empezar
- Crear tu cuenta y dar los primeros pasosEntras con tu correo o con Google, sin contraseña, y en cuatro pasos dejas listo tu perfil, tu IA, tu equipo y tu primer boceto.
- Crear tu primer proyectoPonle nombre, elige si empiezas en blanco, desde un archivo de Bitácora o desde el brief de tu cliente, y el tamaño de sus pantallas.
- Explorar el proyecto de ejemploSi todavía no tienes proyectos, abre el de ejemplo, Cafetería Luma: una pantalla y una bitácora ya dictada para que veas cómo trabaja Bitácora al ejecutarla.
- GlosarioLas palabras de Bitácora en una línea cada una, de bitácora a Recursos, para entender la Ayuda y la app.
Conecta tu IA
- Conectar Claude con BitácoraAñade Bitácora como conector en Claude, en la web, la app de escritorio o el móvil, y tu Claude podrá leer tus proyectos y aplicar tus bitácoras.
- Conectar Claude Code con BitácoraUn comando en tu terminal y una autorización en el navegador, y Claude Code aplica tus bitácoras desde tu ordenador.
- Conectar Cursor con BitácoraAñade Bitácora a los servidores MCP de Cursor con un clic o con su archivo mcp.json, autoriza en el navegador y Cursor aplicará tus bitácoras.
- Conectar ChatGPT con BitácoraAñade Bitácora como servidor MCP personalizado en ChatGPT, en la web, y autoriza en la ventana de Bitácora para que ChatGPT trabaje en tus proyectos.
- Conectar VS Code con BitácoraAñade Bitácora como servidor MCP en VS Code y úsalo desde el chat de Copilot en modo agente para aplicar tus bitácoras.
- Conectar Gemini CLI con BitácoraDos comandos en tu terminal y una autorización en el navegador, y Gemini CLI aplica tus bitácoras desde tu ordenador.
- Conectar Codex con BitácoraAñade Bitácora a Codex con un comando, entra con otro y autoriza en el navegador para que Codex aplique tus bitácoras.
- Usar tu clave de la API de ClaudeGuarda tu clave de Anthropic en Ajustes y Bitácora ejecuta tus bitácoras por sí sola, sin abrir tu chat. Elige con qué clave trabaja cada proyecto y préstala a uno compartido.
- Crear y revocar claves de accesoEn Ajustes › Conector ves cada herramienta que entra en tu espacio y la revocas cuando quieras. Para las que no abren el navegador, crea una clave de acceso.
Bitácoras
- Dictar una bitácoraPulsa R, di lo que cambiarías mientras miras la pantalla y marca con un clic dónde. La bitácora queda pegada a ese punto, lista para ejecutar.
- Escribir una bitácora en lugar de dictarlaPulsa E, escribe el cambio que pides y pulsa Intro. Sirve igual que una dictada y entra en el mismo lote.
- Responder las dudas de la IACuando una bitácora no queda clara, aparece «La IA tiene dudas». Un solo dictado o un texto responde a todas y la bitácora entra en el lote.
- Tu vocabulario: Bitácora aprende cómo nombras las cosasBitácora apunta las palabras que usas al dictar («la pastilla» es un chip de filtro) para entenderte mejor en todos tus proyectos. Las ves, corriges y borras en Ajustes.
Ejecutar y revisar
- Ejecutar tus bitácoras y revisar los cambiosPulsa Ejecutar, mira cómo cambian tus pantallas en el lienzo y repasa en Revisión cada ajuste, con su antes y después, para darlo por bueno o revertirlo.
- Elegir con qué se ejecutan tus bitácorasTu Claude por el conector, tu clave de la API o tu propia IA trabajando sobre los archivos. Aquí eliges, pruebas sin gastar y decides si apruebas cada lote.
- Deshacer lo que hizo un loteDesde Revisión devuelves una pantalla, o todas las de un lote, a como estaban antes de ejecutar. Las bitácoras vuelven a la franja para reintentarlas.
El lienzo
- Los modos del puntero en el lienzoRecorrer, Interactuar, Seleccionar, Textos y Ajustar cambian lo que hace un clic en el lienzo. Se eligen en el riel de la izquierda o con V, I, S, T y P.
- Agrupar pantallas y asignar responsablesJunta las pantallas de un mismo flujo en grupos con nombre y color, deja que se agrupen solas y asigna a cada grupo quién lo lleva.
- Retocar a mano un elemento de una pantallaCon el modo Ajustar cambias el relleno, los colores, la tipografía, las esquinas o un icono de cualquier elemento, sin dictar ni gastar IA, en una pantalla o en todas sus copias.
- Corregir un texto directamente en la pantallaCon el modo Textos haces clic en cualquier texto de una pantalla, lo corriges y pulsas Intro. Sin dictar y sin gastar IA.
- Volver a una versión anterior de una pantallaCada pantalla guarda sus últimas versiones. Desde su historial las comparas lado a lado y restauras la que quieras.
- Elegir entre varias versiones de una pantallaPide en una bitácora dos o tres propuestas de un mismo elemento, compáralas una a una o lado a lado y quédate con la que te guste.
- Corregir los avisos de accesibilidad de una pantallaBitácora mide en cada pantalla el contraste, el tamaño para el dedo, los textos pequeños y lo que no tiene nombre, y te deja corregirlo todo con una bitácora.
- Probar un diseño a toda la ventanaCon pantallas de ordenador o de tablet, Probar diseño abre la pantalla a toda la ventana en una pestaña nueva, con sus enlaces, para probarla como el producto terminado y dictar sobre ella.
- Fotos libres e iconos de librería para tus pantallasCambia las imágenes de una pantalla por fotos de uso libre o por las tuyas, y elige las librerías de iconos del proyecto, sin gastar IA. La IA también las usa al construir.
- Probar el proyecto en tu móvilEscanea el código QR de «Pruébalo en el móvil» y navega tus pantallas en el teléfono como si fuera la app terminada.
- Atajos de teclado del lienzoTodas las teclas y los gestos del lienzo, de las bitácoras y de Pendientes y Flujo, en una sola página.
Entregar a tu cliente
- Entregar un proyecto a tu clienteDesde el botón Entrega eliges a quién va, cómo entra y qué pantallas viajan, y publicas. Tu cliente lo recibe en su portal y te devuelve sus comentarios ahí mismo.
- Elegir cómo entra tu cliente a la entregaUna contraseña para cada persona, una contraseña para todos o un enlace público. Qué ve cada una, qué sabrás de quién entra y cómo se cambia.
- Elegir qué ve tu cliente en su portalEnciende o apaga las secciones, las herramientas y cada pantalla de la entrega, mira quién ha entrado y ábrela tal como la verá tu cliente.
- Saber quién vio la entrega y recordárseloDespués de publicar, el resumen de la entrega te dice quién la tiene al día, quién no ha visto la última y quién no la ha abierto, pantalla por pantalla.
- Publicar la siguiente actualizaciónCuando cambias pantallas después de entregar, publica una actualización nueva con todo o solo con lo cambiado. Tu cliente ve qué es nuevo y qué cambió.
- Atender los comentarios de tu clienteLos comentarios del portal llegan a tu lienzo. Respóndelos, ciérralos o conviértelos en bitácoras para que entren en tu siguiente lote.
- Descargar la entrega en un ZIPEn lugar de publicar en el portal, llévate el proyecto en un ZIP. Con Essential, las capturas de las pantallas; desde Professional, el HTML completo.
- Poner la marca de tu estudio en el portalTu logotipo, tu color, tu nombre y tu dirección en el portal que ven tus clientes, más el correo y el WhatsApp de ayuda y el idioma.
