Haz tu primera app con IA gratis: Windsurf y Gemini para programar

Mira, colega. Si estás leyendo esto es porque te has cansado de ver tutoriales de gente que te enseña a hacer una app pero te deja a medias. O peor, te habla de herramientas que cuestan un pastón. Pues hoy te voy a contar cómo montar tu primera app sin soltar un euro, usando Windsurf y Gemini. Toma nota, que esto va de acción.

¿Por qué Windsurf y Gemini?

Windsurf es un editor de código con IA integrada que te permite programar como si tuvieras un compañero de curro que te entiende. Y lo mejor: tiene plan gratuito con el que puedes apañarte de sobra para tus primeros proyectos. Al combinarlo con Gemini (el modelo de Google), tienes un tándem bestial que te saca de casi cualquier aprieto. Nada de copiar y pegar sin saber qué haces; te lo explico para que aprendas el funcionamiento real.

Primeros pasos: configura tu entorno

Descarga Windsurf (gratis) y crea una cuenta. Una vez dentro, crea una carpeta nueva para tu proyecto. No te compliques: un sitio limpio, sin historias. Cuando tengas Windsurf abierto, busca el apartado de IA (normalmente a la derecha o con Ctrl+L) y empieza a usar los prompts. Ahí es donde está la magia.

Los prompts que te van a salvar la vida

Esto es lo que necesitas, tío. Prompts funcionales, en español y listos para copiar. Pruébalos y verás que no hay misterio.

Prompt 1: Generar la estructura base de tu app

Actúa como un desarrollador senior. Quiero crear una app web simple de lista de tareas (to-do list). Necesito que me des la estructura inicial de archivos (HTML, CSS y JavaScript en archivos separados) para empezar desde cero. Explícame brevemente qué hace cada archivo.

Prompt 2: Crear la interfaz con estilo

Ahora, en el archivo CSS, quiero un diseño moderno y limpio para mi to-do list. Usa un esquema de colores que combine azul oscuro y blanco (estilo minimalista). Haz que los botones sean grandes y fáciles de tocar en móvil. Incluye un título que diga 'Mi Primera App'.

Prompt 3: Programar la lógica de la app

Escribe el código JavaScript necesario para que mi to-do list funcione. Debe permitir: 1) Añadir nuevas tareas al pulsar Enter o un botón. 2) Marcar las tareas como completadas al hacer clic. 3) Eliminar tareas con un botón de papelera. No quiero librerías externas, solo JavaScript puro y claro.

Prompt 4: Solucionar un error o mejorar algo

Mi código tiene un error: cuando añado una tarea y refresco la página, se borra todo. ¿Cómo puedo usar localStorage para que las tareas se guarden? Dame el código modificado del archivo JavaScript y dime dónde tengo que pegarlo.

Prompt 5: Añadir una función avanzada

Quiero añadir un filtro a mi to-do list para ver solo las tareas pendientes, solo las completadas o todas. Dame el código CSS y JavaScript necesario para implementar este filtro, integrado con el código que ya tengo.

Poniéndolo todo en marcha

Copia el primer prompt en Windsurf, revisa lo que te propone, y sigue con los demás. La clave está en que entiendas lo que vas haciendo; no se trata de vaciar la mente, sino de aprender.

Mi consejo

No intentes hacer una app de IA en tu primer día. Empieza con una herramienta sencilla, como esta lista de tareas, y ve subiendo. Con Windsurf y Gemini, la barrera de entrada es mínima, y el aprendizaje, máximo. Y no te olvides de guardar todo con Git desde el principio, que luego llorar es gratis.

Y tú, ¿qué herramienta usas para tus primeros proyectos? Cuéntame en los comentarios si ya te has lanzado con la IA para programar o si sigues con el bloc de notas de toda la vida.