Cómo crear una app con IA, del primer prompt al enlace publicado

Un paso a paso real para crear una app web con inteligencia artificial sin programar: el plan, el primer prompt en español, los ajustes, datos, publicación y costos.

25 de octubre de 20265 min de lectura

Si te preguntas cómo crear una app sin saber programar, la respuesta es describírsela a una IA: le describes lo que debe hacer la app, revisas el resultado en una vista previa en vivo y la vas corrigiendo con mensajes cortos hasta que funciona. Después la publicas y compartes el enlace. No necesitas programar, pero sí ser preciso con las reglas. Esta guía lo muestra con un ejemplo real, una app de pedidos para una taquería, hecha en VibeDream.

¿App web o app nativa?

Primero, una diferencia importante. Una app nativa se descarga de la App Store o de Google Play. Una app web se abre con un enlace en el navegador, desde el celular o la computadora. VibeDream crea apps web y juegos de navegador, no apps nativas para las tiendas.

  • App web: se comparte con un enlace al instante, no pasa por la revisión de una tienda y los cambios llegan a todos en cuanto haces clic en Update it.
  • App nativa: accede a más funciones del teléfono y tiene ícono en la tienda, pero requiere cuentas de desarrollador, revisiones y mucho más trabajo.

Para pedidos, reservas, formularios, herramientas internas o portales de clientes, una app web casi siempre basta, y tus clientes no tienen que instalar nada.

Qué necesitas antes de empezar

Antes de abrir el constructor, responde cinco preguntas en una nota. Para la taquería quedó así:

  • ¿Quién la usa? Clientes desde el celular y el encargado en la cocina.
  • ¿Cuál es su tarea principal? Pedir para recoger sin hacer fila ni llamar.
  • ¿Qué pantallas tiene? Menú, carrito, confirmación y un panel protegido para la cocina.
  • ¿Qué datos se guardan? Nombre, teléfono, platillos, cantidades, hora para recoger y estado del pedido.
  • ¿Qué reglas hay? Pedidos de martes a domingo de 13:00 a 22:00, para recoger en mínimo 20 minutos, la cocina marca cada pedido como listo.

Paso a paso para crear una app con IA

Convierte la nota en un solo mensaje. En VibeDream pulsa New Project, elige Direct Prompt y pega el texto, o dilo por el micrófono. La interfaz todavía está en inglés, pero los prompts pueden ir en español.

Crea una app web de pedidos para recoger en la Taquería El Güero, en Guadalajara.
Pantallas: Menú (tacos al pastor, de asada y de suadero, quesadillas y aguas frescas, con precio en pesos), Carrito con total, Confirmación con número de pedido y un Panel en /cocina protegido con contraseña donde se ven los pedidos y se marcan como listos.
Guardar nombre, teléfono, platillos, cantidades, hora para recoger y estado.
Solo aceptar pedidos de martes a domingo de 13:00 a 22:00, para recoger en mínimo 20 minutos.
Estilo: alegre, colores cálidos, botones grandes, pensado primero para celular.
Todos los textos en español de México, tratando al cliente de tú.

La vista previa aparece junto al chat y se va armando mientras la IA trabaja. Luego pruébala con casos cuyo resultado conoces: pide tres tacos al pastor y dos aguas, y revisa que el total coincida con la suma que haces de cabeza. Intenta pedir un lunes. Si la app lo permite, encontraste tu primer ajuste.

El espacio de trabajo de VibeDream con el chat a la izquierda y la vista previa en vivo de la web de una panadería a la derecha
Chat a la izquierda, vista previa en vivo a la derecha.

Envía los ajustes de uno en uno y revisa cada uno antes del siguiente:

  • “La app deja pedir los lunes. Ese día debe mostrar el mensaje “Hoy descansamos” y no permitir pedidos.”
  • “El total no suma las aguas. Con tres tacos de 25 pesos y dos aguas de 30, el total debe ser 135 pesos.”
  • “En el celular, deja el botón Ver carrito fijo en la parte de abajo.”
  • “En el panel de cocina, ordena los pedidos por hora para recoger, el más próximo arriba.”

Si aparece un mensaje de error, cópialo en el chat y explica cuándo sale. Tienes más ejemplos de buenos prompts de ajuste en la guía en inglés How to build an app with AI. Si prefieres partir de una base, usa la plantilla Blank Starter, con frontend en React y backend en FastAPI.

Datos y login

Toda app de VibeDream tiene un backend en FastAPI, donde se guardan los datos. Después de un pedido de prueba, recarga la página y comprueba que sigue ahí. Para que la cocina entre con usuario, pídelo en un mensaje, por ejemplo: “El encargado entra con correo y contraseña antes de ver /cocina.” La IA lo escribe dentro de tu app. También puedes tocar Add login o Add database debajo del chat: VibeDream activa el acceso con correo y contraseña y el guardado de datos, sin claves que copiar.

Las claves secretas, como la de un servicio de correo o de mensajes, no van en el chat. Guárdalas en la pestaña Settings del proyecto. La página en inglés sobre claves de API y variables de entorno explica qué valores se quedan en el servidor. Como la app guarda nombres y teléfonos, publica también un aviso de privacidad.

Publicar tu app

Haz clic en Put it online, elige un nombre y en 1 a 3 minutos la app queda publicada en una dirección como elguero.vibedreams.ai, ya con HTTPS. La versión publicada solo cambia cuando pulsas Update it, así que puedes seguir probando en la vista previa sin afectar a quien está pidiendo.

La ventana Put it online de VibeDream
Un clic en Put it online y tu app está publicada.

Para usar tu propio dominio, como pedidos.taqueriaelguero.mx, crea un registro TXT y uno CNAME en tu proveedor de dominios. El certificado HTTPS se emite solo. La guía de publicación, en inglés, explica cada paso. Puedes exportar el código en ZIP o sincronizarlo con tu repositorio de GitHub cuando quieras.

Cuánto cuesta crear una app con IA

En VibeDream pagas un plan mensual con créditos. All Access Mini cuesta 49 dólares al mes, con 60 créditos y hasta 3 proyectos activos. All Access cuesta 97 dólares al mes, con 150 créditos y hasta 5 proyectos activos. Los créditos se gastan por mensaje, y los cambios grandes gastan más. Cada publicación o actualización cuesta 5 créditos, y el hosting está incluido. Los precios actuales están en la página de precios.

Si primero quieres entender esta forma de crear software, lee qué es vibe coding.

Preguntas frecuentes

¿Listo para crear tu app?

Describe tu idea y mírala funcionando en una vista previa en vivo.

Empezar a crear

Más guías