wanno está hecho para el teléfono desde el principio, no adaptado después. Se nota en los detalles: describes una app escribiendo o hablando, la editas tocando y deslizando sobre la vista previa en vivo, y la publicas desde esa misma pantalla. Esta guía recorre paso a paso cómo crear una app desde el teléfono con un proyecto pequeño —un gato que sigue tu dedo y se enoja cuanto más rápido lo mueves— para que veas qué hace cada parte de la app. El resultado está en línea en angry-cat-follower.wanno.dev.
Las capturas de esta guía muestran la app en inglés; wanno está disponible en español y los textos que citamos son los que verás en tu teléfono.
wanno se descarga gratis para iPhone y Android:
- iOS: Descargar en el App Store
- Android: Disponible en Google Play
1. Inicio: describe lo que quieres
La pantalla de inicio es un solo campo de texto: ¿Qué quieres crear hoy? No hay galería de plantillas ni paso de configuración antes. Debajo del cuadro tienes un clip para adjuntar una referencia, un selector de modo (Construir), un micrófono para dictar el prompt y chips de ejemplo (Boda, Quiz, Juego, Algo viral) por si quieres un punto de partida.
2. Escribe el prompt en lenguaje natural
Este es el prompt usado en el ejemplo:
una página donde un gato sigue tu dedo por la pantalla y se enoja más cuanto más rápido lo mueves. Amarillo manteca y naranja, con un display grande y redondeado; primero el gato a pantalla completa, sin header.
Con una descripción del comportamiento, una dirección de color y una restricción de diseño es suficiente. No necesitas pensar en componentes ni en pantallas.
3. El builder: la construcción empieza enseguida
Al enviar, entras al builder. Tiene dos áreas: la vista previa en vivo arriba y el chat abajo, que puedes plegar. La barra de estado muestra Construyendo con un cronómetro y un botón Detener, y la primera respuesta de wanno aparece como Pensando….
4. El builder: wanno explica lo que está construyendo
Mientras trabaja, wanno describe la app en lenguaje natural en vez de mostrar código: cómo cambian las orejas, las pupilas, la cola y el pelaje del gato según la velocidad, la palabra de humor que lo acompaña (tranquilo, nervioso, gruñón, furioso, bufando), cómo se calma cuando te detienes, y que arrastrar el dedo en un teléfono funciona sin que la página se desplace. También sugiere cambios que podrías pedir a continuación. Antes de entregarla, corre un paso de Verificación sobre la app.
5. La app ya funciona
Cuando la construcción termina, la vista previa muestra la app funcionando en una dirección temporal .wanno.dev. Es una página real con la que puedes interactuar dentro del builder: aquí, un gato a pantalla completa con un medidor de humor y la pista move to wake the cat (mueve el dedo para despertar al gato).
6. Inicia sesión cuando quieras editar
Puedes construir y probar una primera versión sin cuenta. Cuando vas a editarla, wanno te pide iniciar sesión con Google o Apple para que el proyecto tenga un lugar y cada cambio quede guardado. Seguir mirando por ahora te deja explorar el resultado antes.
7. El menú inferior: Chat, Estilo, Editar, Feedback, Publicar
Todo lo que haces después de la primera construcción vive en la barra inferior. Estilo es la primera herramienta de edición: temas listos (Noche, Cálido, Índigo, Mono, Rosa), roles de color individuales (Primario, Fondo, Superficie, Texto, Acento) con un selector completo, y combinaciones de tipografía. Los cambios de estilo se aplican directamente y no consumen un turno de construcción.
8. Editar: dos caminos, Touch o Voz
La pestaña Editar te pregunta cómo quieres trabajar (¿Cómo quieres editar?). Touch te deja tocar elementos en la vista previa para seleccionarlos, deslizar para borrar o pedirle a wanno un cambio sobre ese elemento. Voz es mantener pulsado para hablar: mantienes el botón, dices el cambio y wanno lo aplica cuando lo sueltas. Los dos producen el mismo tipo de ediciones y puedes alternar entre ellos cuando quieras.
9. Editar con Touch son tres gestos
El modo Touch funciona sobre cualquier parte de la página —una sección, un título, un botón, una foto— con tres gestos:
- Toca para seleccionar. Toca otra vez para abrir las opciones del elemento.
- Desliza a la izquierda para borrar. wanno pide confirmación primero, y deshacer es un toque.
- Desliza a la derecha para W. Describe el cambio y wanno reescribe solo ese elemento.
10. Chat: pide cambios con palabras
La pestaña Chat es donde pides cambios más amplios. Al pedir Mueve el estado del gato arriba recibes una explicación breve de lo que wanno está haciendo, el archivo que cambió (AngerMeter.tsx) con la cantidad de líneas y un resumen del resultado. Los chips de acción rápida debajo del campo (ajustar el radio de los bordes, cambiar el color de fondo, agregar sombra) cubren retoques comunes sin escribir.
11. Cada cambio crea un checkpoint
Un segundo pedido, Crea un header con un gato como logo, entra de la misma forma. La marca Checkpoint 8 encima muestra que cada cambio completado se guarda como un punto de restauración, así que puedes probar cosas y volver atrás.
12. El resultado en la vista previa
Los dos cambios se reflejan en la vista previa en vivo: un header con el logo del gato y el nombre de la app, la palabra de humor y el medidor debajo, y el gato más abajo. La dirección de color original se conserva.
13. Edición Touch: selecciona un elemento y pide un cambio
En modo Touch, tocar el logo lo selecciona (wanno lo etiqueta como svg) y un segundo toque abre Pedirle un cambio a wanno sobre la vista previa. Las sugerencias son específicas del elemento que elegiste; para una imagen: Reemplaza la imagen, Mejora el recorte, Destaca la imagen.
14. Usa una sugerencia o escribe la tuya
Tocar una sugerencia rellena el cuadro; también puedes escribir el cambio tú. Como el pedido va atado al elemento seleccionado, wanno cambia solo esa parte en vez de regenerar la página.
15. Desliza a la izquierda para quitar un elemento
Seleccionar una sección y deslizar a la izquierda muestra un panel de borrado, y la barra inferior dice Suelta para borrar. Deslizar a la derecha sobre el mismo elemento lo mandaría a W con una descripción del cambio.
16. Borrar siempre pregunta antes
Al soltar, wanno confirma: ¿Eliminar “svg”? con Conservar o Eliminar. El diálogo aclara que esto usa crédito, porque wanno quita el elemento del código en vez de solo ocultarlo.
17. Publica desde la misma pantalla
Publicar abre un panel con la dirección propuesta (angry-cat-follower-acaa.wanno.dev, verificada como disponible y editable), la opción de comprar o conectar un dominio propio con el DNS configurado por ti, y dos interruptores: un badge Built with wanno y ser candidata al showcase de la comunidad. La publicación es instantánea.
18. SEO y compartir
Antes de salir en línea, un paso de SEO y compartir te deja definir el título de la página (70 caracteres) y la descripción (160) que aparecen en los resultados de búsqueda y en las vistas previas de los enlaces. Escribir por mí los genera a partir de la app si prefieres no escribirlos.
19. La app está en línea
La pantalla de confirmación te da Abrir app, Compartir, otra vez la opción de dominio y Pedir feedback, que crea un enlace privado válido por 7 días para que otras personas comenten antes de que la app se comparta más ampliamente.
Resumen
Todo el flujo —prompt, construcción, estilo, edición por Touch y por voz, cambios por chat, checkpoints, publicación y SEO— ocurre en la pantalla de un teléfono, con la vista previa en vivo siempre visible. La app del ejemplo está en angry-cat-follower.wanno.dev. Si te interesa qué hay detrás de cómo se ven las apps que genera wanno, sigue con Por qué todas las webs hechas con IA se ven iguales.
Consigue wanno
Instálalo en tu teléfono y crea tu primera app desde la pantalla de inicio:
- iPhone / iPad: App Store
- Android: Google Play
