Ejecutar · Vista previa · Diseño

Son las funciones para probar el programa que has hecho (ejecutar), mirar por dentro (depurar), ver la pantalla web (vista previa web) y revisar el diseño (banco de trabajo de diseño). Corregir → ejecutar → comprobar se resuelve dentro de Blyck.

Función	Gratis / Pro
▶ Ejecutar, ventana de salida, marcado de la ubicación de errores	Gratis
Ver la ventana de depuración (Ctrl+Shift+D)	Gratis
Vista previa web, marcadores	Gratis
Enviar capturas·grabaciones al chat de IA	Pro
La IA ejecuta y observa (Run & Observe), herramientas de depuración de IA·investigación automática, la IA maneja la vista previa, regresión visual, banco de trabajo de diseño	Pro

Ejecutar código (▶ Ejecutar)

1. ▶ Ejecutar — ejecuta con un botón un archivo guardado en local (mientras corre, ■ Detener) · el ▾ de al lado también ofrece "Depurar" (F5) para Python · JavaScript
2. Estado — al terminar, "Código de salida 0" · [■ Detener] [Limpiar] [✕]
3. Panel de salida — arriba el comando $ (ámbar), luego la salida del programa y al final [Código de salida 0] (verde)

Desde el editor ejecutas con un solo botón el archivo actual (o su proyecto) y ves el resultado en tiempo real en la ventana de salida, debajo del editor.

Pasos

1. Guarda primero el archivo (Ctrl+S). ▶ Ejecutar ejecuta el contenido guardado en el disco.
2. Pulsa [▶ Ejecutar] en la cabecera del editor (Ctrl+F5). Se abre la ventana de salida.
3. Durante la ejecución, el botón cambia a [■ Detener], en rojo.
4. Al terminar, ves Código de salida {n} y, si encontró errores, {n} problema(s).

▶ Ejecutar solo aparece en archivos guardados localmente (no en archivos remotos ni sin nombre).

Con qué comando se ejecuta

Blyck mira el archivo y el proyecto y decide el comando automáticamente.

Objetivo	Comando de ejecución
Archivos .py · .rb · .php · .lua · .sh	Ejecuta ese archivo directamente (python archivo, etc.) — tiene prioridad sobre el proyecto
go.mod	go run .
Cargo.toml	cargo run
*.sln · *.csproj	dotnet run
pubspec.yaml	flutter run
pom.xml / build.gradle	mvn exec:java / gradle run
package.json	npm start
.js / .go sin archivo indicador	node archivo / go run archivo

Ventana de salida y ubicación de errores

• Arriba ves $ comando, la salida normal, la salida de errores (en rojo) y, al final, el código de salida. Se guardan las últimas 5.000 líneas.
• [Limpiar] borra la salida y [✕] oculta la ventana (el programa no se detiene).
• Reconoce los formatos de error de la salida (Python, Go, Rust, gcc/clang, C#, TypeScript, etc.) y pone subrayados rojos (error) y amarillos (aviso) en los archivos abiertos. Al pulsar una línea de error, vas a esa línea de ese archivo.

Ten en cuenta

• No hay forma de cambiar ni guardar el comando de ejecución. Para ejecutarlo con otro comando, hazlo directamente en la terminal.
• Los proyectos CMake·Make no funcionan con ▶ Ejecutar. Usa make, etc. en la terminal.
• No recibe entrada de teclado. Los programas que esperan una entrada parecen colgados; ejecútalos en la terminal.

Ejecutar con el depurador — detenerse en los puntos rojos y ver valores

Detén un archivo Python o JavaScript guardado en este PC en la línea que quieras, mira los valores de las variables en ese momento y avanza línea a línea. Sin añadir print.

1. Pulsa a la izquierda del número de línea donde quieres parar, o F9: aparece un punto rojo (punto de interrupción).
2. En la cabecera, ▶ Ejecutar ▾ → Depurar (o F5). Para Python se descarga una vez el depurador (debugpy, unos 33 MB). JavaScript usa el depurador incluido en Node.js.
3. Al detenerse, la línea se pone amarilla, los valores actuales aparecen tenues al final de las líneas y abajo se abre el panel Variables · pila de llamadas. Pasa el ratón por una variable para ver su valor.
4. Continuar (F5) · Siguiente línea (F10) · Entrar en la función (F11) · Salir de la función (Shift+F11) · Detener la depuración (Shift+F5).

• Pulsa Preguntar a la IA donde se detuvo y se envían la línea · el error · los valores actuales · la pila de llamadas · la salida (Pro).
• El chat de IA depura por ti (Pro): di “busca la causa” y la IA pone puntos rojos, ejecuta con el depurador y lee los valores (dbg_breakpoint · dbg_start · dbg_step · dbg_inspect). Tu propia pantalla del editor se mueve a la vez y la barra de estado muestra El chat de IA está depurando. Funciona en los modos ⚡ Ejecutar · 🚀 Automático.
• Los archivos remotos (SFTP) y otros lenguajes aún no son compatibles.

La IA ejecuta y corrige — Run & Observe (Pro)

Si le dices al chat de IA “ejecuta los tests y, si fallan, arréglalo”, la IA repite por sí misma ejecutar → revisar la salida y los errores → corregir el código → volver a ejecutar. No hace falta copiar y pegar la salida.

1. Pon el chat de IA en modo ⚡ Ejecutar o 🚀 Auto (en los modos 💬 Chat·📋 Plan no puede ejecutar).
2. Pídeselo, por ejemplo: “ejecuta pytest y arregla los fallos”.
3. Los comandos que mueven o sobrescriben archivos muestran una tarjeta de aprobación. Los comandos muy peligrosos preguntan incluso en modo 🚀 Auto.

• El tiempo de espera por defecto es de 30 segundos. En programas que siguen ejecutándose, como un servidor, devuelve la salida hasta ese momento.
• Si la carpeta de proyecto del chat de IA es remota (SSH), se ejecuta en el servidor.

Ventana de depuración y AI Debug Bridge

1. Filtros — campos label · loc, elegir level · source / 🔕 investigación automática de IA · ⏸ Pausar · 🗑 Borrar · ✕ Cerrar
2. Una línea de registro — [nivel] nombre valor · origen (terminal / preview)

Es un mecanismo para que la IA lea directamente los valores internos (valores de variables, etc.) mientras el programa se ejecuta. Si pones en el código una línea de registro con la forma @BLYCK@ …, cuando esa línea se imprime en una terminal de Blyck o en la vista previa web, Blyck la recoge y la IA la lee para encontrar la causa. Normalmente la IA la pone ella misma y la quita cuando termina.

• Con Ctrl+Shift+D abres la ventana 🐞 Debug Bridge, donde ves en tiempo real los registros recogidos (gratis). Puedes filtrar por nombre·ubicación·nivel.
• Si activas 🔔 Investigación automática de IA (Pro, desactivada por defecto), la IA empieza a investigar sola cuando aparece un registro error·assert. Como usa la IA, tiene coste.
• Los registros impresos en la ventana de salida de ▶ Ejecutar o fuera de Blyck no se recogen.

Para más detalles, consulta Puente de depuración con IA.

Vista previa web (Live Preview)

1. Editor — el código que genera la pantalla (app.py)
2. Barra de la vista previa web — ← → ↻ ☆ · barra de dirección · − 100% + · 📷 Capturar · Grabar
3. La pantalla en desarrollo, abierta en un pequeño navegador dentro de Blyck

Es un pequeño navegador que muestra dentro de un panel de Blyck el sitio web que estás haciendo. Puedes pulsar en él tú mismo, y la IA también puede ver la pantalla y manejarla. La vista previa en sí es gratis.

Pasos

1. Arranca primero el servidor de desarrollo (p. ej., npm run dev en la terminal).
2. Pulsa Ctrl+Alt+B (o menú de nueva pestaña → icono Vista web).
3. Escribe la dirección (por defecto http://localhost:3000). [Abrir].

• Si no escribes http://, se añade solo. Los archivos HTML de tu PC se abren como file:///C:/…/index.html.

Barra superior

Botón	Qué hace
← / → / ↻	Atrás / adelante / recargar
☆	Marcadores (importar del navegador)
Campo de dirección	Escribe la dirección y pulsa Enter
− / 100% / +	Alejar / zoom (al pulsarlo, vuelve al 100%) / acercar. 25%~500%
📷 Capturar	Captura la pantalla, abre el editor de capturas y la adjunta al chat de IA
Punto rojo Grabar	Captura la pantalla cada 0,5 segundos (máximo 60 imágenes, unos 30 segundos) → eliges las escenas a enviar y se adjuntan al chat de IA

• Enviar capturas·grabaciones a la IA es Pro. Antes de enviar, abre el panel de chat de IA (si no está, se pierden las marcas dibujadas).
• ☆ Marcadores: la primera vez que lo pulsas aparece el botón [Importar de {navegador}]. Importa los marcadores del perfil por defecto de Chrome·Edge·Brave·Vivaldi (en Mac, también Safari). Firefox no funciona.
• Los inicios de sesión en ventana nueva, como Google o GitHub, se abren en una ventana real y el inicio de sesión funciona.
• Se guardan los 200 registros más recientes de la consola y de la red, por separado (los lee la IA).
• Al volver a abrir la app, solo se restaura la dirección.

La IA ve y maneja la vista previa (Pro)

El chat de IA ve directamente la vista previa web, pulsa, escribe, lee los errores de consola y los corrige.

Pon una cuenta de prueba en el formulario de inicio de sesión y envíalo. Si hay errores en la consola, busca la causa y arréglalo.

La IA sigue este orden: entrada → espera → captura de pantalla → lectura de la consola.

Lo que puede hacer	Aprobación
Capturar la pantalla, leer los registros de consola·red, ir a una dirección, esperar	No hace falta
Pulsar elementos, escribir texto, ejecutar JS en la página	Hace falta en modo ⚡ Ejecutar

• Pulsar·escribir·ejecutar JS están bloqueados en los modos 💬 Chat·📋 Plan.
• Para que la IA capture la pantalla, el panel de vista previa tiene que verse en pantalla.

Regresión visual — comparar la pantalla antes y después de corregir (Pro)

Guarda como referencia la pantalla de antes de cambiar el código y la compara con la pantalla de después, para detectar “si la pantalla se rompió sin querer”. Funciona en la vista previa web, la réplica de escritorio y el banco de trabajo de diseño.

Esta función se le pide a la IA con palabras. No hay ningún botón que pulses tú.

1. Pídeselo, por ejemplo: “toma la pantalla actual como referencia, cambia el color del botón y compáralas”.
2. La IA guarda la pantalla de referencia, corrige el código y compara.

Resultado	Significado
Aprobado	Los cambios son del 2% o menos
Revisar	Más del 2%
Regresión	Cambió el propio tamaño de la pantalla (se sospecha que el diseño se rompió)

La imagen de comparación muestra BEFORE a la izquierda, AFTER a la derecha y recuadros rojos donde hay cambios. La pantalla de referencia solo está en memoria, así que desaparece si cierras el panel o vuelves a abrir la app.

Banco de trabajo de diseño (Pro)

Es un panel donde reúnes como lista de tarjetas las piezas de diseño que hizo la IA (tokens como colores o espaciados, componentes como botones, pantallas y flujos de pantallas) y las revisas viéndolas en tamaño web·tableta·móvil (etiqueta Diseño, 🎨).

1. Pon el archivo de lista de diseño _ds_manifest.json en la carpeta design-system de la carpeta de proyecto. Normalmente lo crea la IA (Claude·Codex).
2. Dile al chat de IA (en modo ⚡ Ejecutar o 🚀 Auto) “abre el panel de diseño”. No se puede abrir desde el menú de nueva pestaña ni con un atajo.
3. Al pulsar una tarjeta la ves en grande (si es web, en tres columnas: móvil·tableta·escritorio). Vuelves con ← Lista.

Botón	Qué hace
[Exportar tokens ↓]	Exportar los tokens de diseño a archivos de Flutter (app_tokens.dart)·CSS (tokens.css)
[Golden harness ↓]	Crear archivos de test de comparación de pantallas para iOS·Android (.dart)
Elegir plataforma	Todas / web / desktop / iOS / Android

• Si el panel de diseño está abierto, la IA recibe también la indicación de reutilizar los tokens·componentes de la lista.
• Si la comparación visual detecta un problema, debajo de la respuesta aparecen los botones [Regenerar diseño] / [Ignorar].
• No lee el design-system de carpetas de proyecto remotas (SFTP).

Preguntas frecuentes

P. No veo el botón ▶ Ejecutar. Es un archivo remoto o un archivo sin nombre que nunca se ha guardado. Solo se ve en archivos guardados localmente.

P. Aparece “No se encontró comando de ejecución”. Es un tipo no compatible o un proyecto CMake·Make. Ejecútalo directamente en la terminal.

P. Los cambios no se reflejan al ejecutar. No has guardado. Pulsa Ctrl+S y vuelve a ejecutar.

P. La vista previa web sale en blanco o aparece “Error al cargar la página”. Comprueba que el servidor de desarrollo está en marcha y que la dirección·puerto son correctos, y pulsa ↻. Si es un proyecto remoto, el servidor se ejecuta en el remoto, así que ábrelo con la dirección del servidor.

P. La IA no puede capturar la pantalla. El panel de vista previa está tapado. Trae esa pestaña al frente para que se vea.

P. En la ventana de depuración no aparece nada. Lo ejecutaste en la ventana de salida de ▶ Ejecutar o fuera de Blyck. Ejecútalo en una terminal de Blyck o en la vista previa web.

P. La comparación visual dice “No hay línea base”. La referencia se perdió al reiniciar la app o cerrar el panel. Pídele a la IA que vuelva a tomar la referencia.

P. No se abre el panel de diseño. Estás en modo 💬 Chat·📋 Plan. Cambia al modo ⚡ Ejecutar y vuelve a pedirlo.

P. (Mac) Safari no aparece en los marcadores. Permite Blyck en Ajustes del Sistema → Privacidad y seguridad → Acceso total al disco.