Crea tu primera aplicación funcional con IA en Adios.

Entiende qué significan los términos principales

No necesitas aprender a programar para seguir esta guía. Solo necesitas una cuenta de Adios, un navegador web moderno y tiempo suficiente para leer el plan del agente de IA y probar lo que crea.

Plantilla

Una aplicación inicial que funciona. Da a la IA una base segura en lugar de un proyecto vacío.

Espacio de trabajo

El lugar en línea para tus archivos de código fuente, la conversación con la IA, la vista previa, los registros y los controles de despliegue.

Vista previa

Una versión de prueba que puedes abrir antes de cambiar la aplicación pública.

Compilar

Una comprobación de producción que prepara la aplicación y detecta muchos problemas antes de publicarla.

Desplegar

Publica una versión revisada para que otras personas puedan acceder a ella en la web.

Comprobación de estado

Una pequeña prueba automática que Adios utiliza para confirmar que la aplicación responde.

Describe una persona, un problema y una acción útil

Crear una primera aplicación es mucho más fácil cuando tiene una función clara. Esta guía utiliza un estimador de precios de reformas: el visitante selecciona tres opciones y recibe un intervalo de precios aproximado. Es interactivo y útil, pero no necesita datos privados ni otro servicio.

Quiero crear [APP NAME] para [WHO IT HELPS].
La acción principal que debería poder realizar un visitante es [ONE ACTION].
El estilo debe transmitir [THREE STYLE WORDS].
Para la primera versión, no añadas [FEATURES TO LEAVE FOR LATER].

Crea tu aplicación Adios a partir de la plantilla Next.js

La plantilla ya contiene el framework, el comando de inicio, el archivo de despliegue y la comprobación de estado. Tu primer despliegue confirma que esa base funciona antes de que la IA la modifique.

1. 1Abre la plantilla Next.js e inicia sesión o crea tu cuenta de Adios.
2. 2Revisa la plantilla, la región, los recursos y los ajustes de despliegue seleccionados que muestra Adios.
3. 3Crea la aplicación y sigue el registro del despliegue hasta que la aplicación inicial supere las comprobaciones de estado.
4. 4Abre la dirección HTTPS generada. Cópiala en un lugar seguro; la pegarás en las instrucciones para la IA.
5. 5Abre el espacio de trabajo de la aplicación. Aquí conversarás con el agente de IA y verás el resultado en una vista previa.

Pega una petición completa en el espacio de trabajo

Abre la conversación con la IA dentro de tu espacio de trabajo. Sustituye la URL entre corchetes de abajo por la dirección HTTPS del despliegue inicial y después pega la petición completa. Pedir primero un plan te permite corregir un malentendido antes de que cambie ningún archivo de código fuente. El Creador de aplicaciones con IA y espacio de trabajo de Adios mantiene ese plan vinculado al código fuente resultante y a Vista previa.

Estoy empezando a crear aplicaciones. Ayúdame a convertir esta aplicación inicial en una primera versión completa.

La aplicación:
- Nombre: BrightBuild Project Estimator
- Público: propietarios que planean una pequeña reforma
- Función principal: permitir que una persona elija el tipo de proyecto, el tamaño de la habitación y el nivel de acabado y mostrarle un intervalo de precios aproximado
- Estilo: tranquilo, fiable, moderno y fácil de leer

Qué crear:
- Una página de inicio clara que explique el estimador
- Un estimador que funcione, con campos para el tipo de proyecto, el tamaño de la habitación y el nivel de acabado
- Un intervalo de precios estimado al instante y calculado en el navegador
- Una sección breve «Cómo funciona», preguntas frecuentes y un botón de contacto
- Una nota clara que indique que la estimación es orientativa y no constituye un presupuesto vinculante
- Un diseño adaptable que funcione en teléfonos y ordenadores
- Un título y una descripción de página precisos, además de robots.txt y sitemap.xml para esta URL: [PASTE YOUR ADIOS APP URL]

Reglas:
- Conserva el proyecto Next.js actual y su configuración de despliegue en Adios.
- No elimines adios.yaml, package.json ni la ruta de estado existente.
- No añadas inicio de sesión, pagos, una base de datos, API externas ni servicios de pago.
- No recopiles ni almacenes información personal.
- No inventes reseñas, cifras de clientes, premios ni afirmaciones sobre el negocio.
- Usa datos de contacto de ejemplo claramente identificados e indícame dónde aparecen.
- Antes de editar, dame un plan breve en inglés sencillo.
- Después de que apruebe el plan, crea la aplicación, ejecuta las comprobaciones existentes de lint y compilación y explica los cambios sin jerga.

Abre Vista previa y usa la aplicación como un visitante

Espera a que el agente termine los cambios e informe de los resultados de lint y compilación. Después usa el control Vista previa del espacio de trabajo. Que la compilación funcione es importante, pero no indica si los textos tienen sentido o si el estimador resulta útil.

• ✓La página se abre sin un error o una pantalla en blanco.
• ✓Cambiar el tipo de proyecto, el tamaño o el acabado cambia la estimación.
• ✓Se indica claramente que la estimación es una orientación aproximada.
• ✓Cada botón y enlace va a algún lugar útil.
• ✓El texto es cómodo de leer en un teléfono y una computadora.
• ✓No hay reseñas falsas, afirmaciones sin explicar ni textos de ejemplo olvidados.
• ✓La aplicación sigue cargando correctamente al actualizar la página.

No necesitas entender cada archivo modificado. Al revisar el espacio de trabajo, confirma que el agente haya cambiado la página y los estilos conservando adios.yaml, package.json, y la ruta de estado.

Da comentarios concretos en rondas cortas

«Hazlo mejor» deja demasiado margen de interpretación. Explica qué has visto, qué esperabas y dónde ha ocurrido. Prueba la nueva vista previa después de cada ronda para que un pequeño cambio visual no rompa la acción principal.

Corrige solo estos puntos en la aplicación actual:
1. [DESCRIBE THE FIRST PROBLEM]
2. [DESCRIBE THE SECOND PROBLEM, OR DELETE THIS LINE]

Mantén todo lo demás como está. No elimines los archivos de despliegue de Adios ni la ruta de estado. Ejecuta las comprobaciones existentes después del cambio y dime exactamente qué debo probar en Vista previa.

Haz una última revisión y después despliega

Pega esta petición final cuando la vista previa se vea bien. Convierte tu revisión visual en una lista de comprobación para la publicación e indica al agente que no publique por su cuenta.

Haz una revisión final de esta aplicación antes de publicarla.

Comprueba que:
- el estimador principal funciona con varias combinaciones de entradas;
- el diseño se puede leer bien en un teléfono y en un ordenador;
- cada enlace y botón tiene un resultado claro;
- no quedan textos de ejemplo sin terminar, salvo los datos de contacto que hemos acordado;
- el título y la descripción de la página se corresponden con la aplicación;
- robots.txt y sitemap.xml usan [PASTE YOUR ADIOS APP URL];
- la ruta de estado sigue funcionando;
- no aparecen contraseñas, tokens ni información privada en los archivos;
- se superan las comprobaciones existentes de lint y compilación.

Corrige solo los problemas que encuentres. Después dame una lista de comprobación para la publicación con palabras sencillas. No despliegues hasta que la apruebe.

La revisión de la versión da paso al flujo de trabajo de producción. Lee cómo desplegar tu aplicación creada con IA manteniendo conectados el código fuente, las comprobaciones de estado, los registros y la evidencia de aprobación.

1. 1. Lee el resultado. Asegúrate de que se hayan superado las comprobaciones de lint y compilación. Si alguna falla, pide al agente que corrija el fallo y vuelva a ejecutarla.
2. 2. Vuelve a abrir Vista previa. Prueba el estimador una vez más después de las últimas correcciones.
3. 3. Usa los controles de despliegue del espacio de trabajo. Revisa la versión que se va a publicar, inicia el despliegue y sigue su registro de compilación.
4. 4. Espera a que supere las comprobaciones de estado. No cierres la página al ver el primer mensaje de éxito. Confirma que la nueva versión supera las comprobaciones de estado y está atendiendo la ruta pública.

Si el registro muestra un fallo, copia el último error —no todo el registro— en la conversación con la IA y pide una explicación con palabras sencillas antes de aprobar otro cambio.

Comprueba la aplicación pública, no solo el mensaje de despliegue

Abre la dirección HTTPS en una nueva pestaña del navegador. Prueba la aplicación como si nunca hubieras visto el proyecto. La publicación solo está terminada cuando la aplicación pública responde y su función principal funciona.

Crea un punto de control del código fuente antes de añadir más funciones

Un commit de Git es un punto de control con nombre para tu código fuente. En el espacio de trabajo, revisa la lista de archivos modificados y crea un commit como Crear el primer estimador BrightBuild. Conecta un repositorio Git remoto y sube el código cuando quieras tener otra copia fuera del espacio de trabajo.

Añade complejidad en este orden

1. Siguiente 1

   Mejora la página pública

   Mejora los textos, los colores, la distribución y las opciones del estimador.

2. Siguiente 2

   Conecta un dominio personalizado

   Dale a la aplicación publicada una dirección que te pertenezca.

3. Siguiente 3

   Añade datos persistentes

   Introduce una base de datos sólo cuando la aplicación realmente necesita recordar algo.

4. Siguiente 4

   Añade servicios privados

   Guarda las credenciales en Adios Secrets, nunca en las instrucciones para la IA ni en el código fuente.

Resuelve los bloqueos sin adivinar