En este repo muestro (y cuento) cómo he ido construyendo una idea de principio a fin para una presentación sobre programación con IA partiendo de cero. Comparto algunas prompts y capturas de pantalla del progreso y, también, unas conclusiones al final del documento. Esta experiencia ha requerido un fin de semana, dedicando pocas horas cada día. Lo que más tiempo me llevó fue establecer los pasos, entender lo siguiente a realizar y redactar mi experiencia aquí. Calculo que todo eso suma menos de 24h de trabajo, para que puedas tener una idea de todo lo realizado (y ahorrado) en ese tiempo.
A lo largo del proceso he querido utilizar distintos modelos para también experimentar con algunos nuevos.
- Para establecer la idea, usé
Grok, desde X, que no lo había usado hasta el momento. - Para diseñar el producto y su plan de implementación, empleé
Gemini 2.5 Proen modoThinking. Con Gemini sí he conversado sobre muchas cosas. - Para la ejecución, no dudé en usar
Claude Sonnet 4. Ahí sí tengo favoritismo absoluto. - Para la propuesta de interfaz (el código ya lo había construido Claude) empleé
HeroUI.
Para esta experiencia ya venía realizando pruebas e investigación, por supuesto, pero es la primera vez que decido delegar al 100% el desarrollo a la IA. La estructura de trabajo de este proyecto está inspirada en los talleres de Vibe Coding realizados por @alesanchezr para crear su proyecto Vibe Culture.
Le he pedido ideas para solucionar problemas actuales mediante software. Para ello, he empleado este prompt:
Quiero desarrollar un emprendimiento. ¿Cuáles consideras que son las principales necesidades que actualmente puede haber en el mercado para desarrollar un MVP con software?
Idea seleccionada: "Una extensión de navegador que detecte sitios web sospechosos en tiempo real y ofrezca consejos prácticos para evitar estafas."
Le he pedido que desarrolle una pequeña prompt con la descripción y las características principales del proyecto, para luego colocarlo en el primer documento del banco de memoria: ./memory-bank/sobre-el-producto.md.
Escribe un prompt pequeño con la descripción del proyecto y las características principales para este MVP: "Una extensión de navegador que detecte sitios web sospechosos en tiempo real y ofrezca consejos prácticos para evitar estafas."
He creado un fichero llamado ./memory-bank/plan-de-implementacion.md y le he pedido a Cursor que me desarrolle un plan de implementación y lo incorpore al banco de memoria.
Con base en @sobre-el-producto.md y teniendo en consideración las características allí descritas, quiero que desarrolles un plan de implementación y lo escribas en @plan-de-implementacion.md con pasos mínimos necesarios para empezar a incorporar funcionalidades y alcanzar el MVP.
El plan de implementación debe tener: Un pequeño preámbulo con la descripción del proyecto y la audiencia objetivo, describiendo las tecnologías necesarias para construirlo, las principales características del MVP, buenas prácticas a aplicar e instrucciones para el despliegue El plan de implementación debe contener una guía paso a paso detallada, con pequeñas tareas realizables separadas por fases El plan de implementación también debe considerar un despliegue ágil y rápido tanto del MVP como de las consiguientes actualizaciones mayores
El plan estaba bien planteado, así que lo acepté, aunque le pedí que revisara nuevamente el documento inicial porque faltaban algunos aspectos. Luego, le pedí que empleáramos Vite y Typescript en lugar de Javascript, y ShadCN en lugar de CSS3 puro. Y, finalmente, opté por pedirle que cambiara la estrategia, de tener una blacklist propia a que consultara la API de Google Safe Browsing de Google.
Así finalicé con el refinamiento de la primera versión del Plan de implementación.
Cabe acotar que yo tenía un conjunto de Reglas de Usuario predefinidas en mi editor de código y eso también ha influido en aspectos planteados en el Plan de Implementación.
La Fase 1 fue ejecutada totalmente por la IA. Mi única intervención se limitó a decirle a la Terminal que no corrigiera el comando npm test que la Terminal sugería con una 's'. 😅
Repitió varias veces un ciclo, relacionado con tests fallidos, y finalmente la cumplimentó.
Luego, le pedí que me explicara cómo probar la extensión en esta primera fase y me dio todas las instrucciones.
La extensión sólo mostraba un cuadro blanco, así que le reporté:
La extensión está instalada y activa, pero al presionar sobre ella sólo muestra un pequeño cuadro blanco.
Fuimos iterando correcciones, hasta que finalmente se pudo ver algo. Aunque con ciertos fallos estéticos. Así que le indiqué el problema adjuntándole la imagen.
Luego de algunas iteraciones y pasarle capturas, logramos un resultado que cumplía con lo previso para la Fase 1.
Finalmente, le indico que quiero que verifique el Plan de Implementación y que actualice su estado si se ha cumplido con todo lo previsto en la Fase 1.
En total, fueron como 1 o 2 horas de trabajo (interrumpidas). Al comienzo estuvo unos 10 minutos configurando todo y luego otros 10 escribiendo todo. Más las pruebas y revisiones posteriores.
Le pedí que procediera con la segunda fase. Estuvo desarrollando todo el código y la lógica durante unos 10-15 minutos más.
Ahora, la extensión se conecta con Google Safe Browsing API y también evalúa patrones de nombre de URL, mostrando un pequeño indicador según si el sitio web es seguro o no.
En total, con las pruebas realizadas en el navegador. Diría que no pasó más de media hora desde que le dije que empezara esta fase.
Como curiosidad, esta vez decidió actualizar el Plan de Implementación por su cuenta, para lo que le he indicado que:
No actualices el plan de implementación hasta que te indique que todo está correcto.
Principalmente, por poder revisar que todo anda bien en el navegador, ya que previamente fue el punto donde se presentaron fallos. Y, como me parecía una norma a mantener, decidí incorporarla como un Regla de Proyecto específica del banco de memoria, por lo que la coloqué en ./memory-bank/.cursor/rules/plan-de-implementacion.mdc.
La fase 3 se ejecutó sin muchos inconvenientes.
Sin embargo, hubo un problema de incompatiibilidad de caracteres que generaba que dos casos no se verificaran adecuadamente: Conteniendo una "i" mayúscula como "L" minúscula y conteniendo una omincrón como una "o". Tras varias iteraciones (le pedí que volviera a revisar esos cosas), logró dar con la solución.
Al ver que también se deben hacer pruebas de formularios, le pedí que generara vistas para cada caso.
Crea unas vistas temporarles para las pruebas pruebas de formularios y dime cómo hacer las pruebas.
Y luego, le pedí que empleara el MCP de Browser Tools para hacer las pruebas y que creara un documento con la Guía Completa de Pruebas
Realiza las pruebas a las vistas usando el MCP de
@Browser Toolscon Chrome.
La ejecución de la Fase 4 fue realizada sin inconvenientes. Sin embargo, detecté que en su proceso, hizo y deshizo algunas cosas. Por ejemplo, la vista de Opciones no tenía contenid (yo había eliminado el options.tsx por encontrarlo vacío). Se lo indiqué y corrigió la vista.
Luego, quise mejorar la apariencia del popup. Primero, fui a HeroUI Chat para proponer una plantilla:
Crea una plantilla de popup para una extensión de Chrome que dectecta si un sitio web es seguro o no, y para su vista de configuración. Hazlo colorido y no solo blanco y negro.
Hice algunas capturas y se las pasé a Cursor:
Ahora, hagamos que el popup se vea más moderno y profesional. Guíate por las imágenes en cuanto a apariencia e incorpora diferencia de color cuando un sitio es seguro respecto a cuando es inseguro, también, usa un tamaño de letra que sea estándar actual y que garantice la legibilidad del contenido.
En la generación de los cambios empleó reglas CSS y tuve que recordarle luego que usara Tailwind. Generó este resultado.
Tuve que insistirle en que se guiara por las capturas y que tuviera en cuenta los colores, hasta que finalmente se logró un resultado satisfactorio:
Logrado esto, tuve que indicarle que el contenido del popup no se estaba actualizando cuando la web era detectada como peligrosa, aunque el ícono sí reaccionaba. Luego, pasó a detectar todo como peligroso. En este punto le insistí en que revisara con cuidado y ejecutara todas las pruebas para garantizar el funcionamiento.
Finalmente, le pedí que volviera a traducir todo al español (no me había dado cuenta de que con los ejemplos de interfaz lo había colocado en inglés) y que moviera el botón de rescan a la tab principal.
¡Listo! Tengo mi extensión desarrollada y, además, me ha propuesto las siguientes mejoras:
- Firefox support: Adaptación para WebExtensions
- Más idiomas: Internacionalización completa
- Machine Learning: Detección local con modelos ligeros
- Análisis avanzado: Detección de cryptojacking y más amenazas
- Dashboard: Panel de estadísticas de navegación segura
- Desarrollar apoyándose en la IA tiene un impacto enorme en el desarrollo de software:
- Reducción radical del tiempo de desarrollo
- Eliminación del trabajo repetitivo (plantillas, componentes...)
- Dedicar más tiempo al desarrollo del producto y no del código.
- El trabajo previo, describiendo el producto y definiendo un plan de implementación marca la diferencia en la ejecución.
- El banco de memoria juega un papel muy importante al permitirle mantener contexto y alinearle mejor el resultado.
- Resulta mejor iterar que analizar cómo resolver algunos errores.
- Hay que aprender a no intervenir en el proceso, respetar la lógica de la IA y, en caso de equivocarse, corregirle mediante conversación, en lugar de tocar el código.
- Las nociones y fundamentes de desarrollo son muy importantes porque permiten entender qué va haciendo, así sea la primera vez que haces un desarrollo de ese tipo (en mi caso, nunca había hecho una extensión).