Acerca de WebDev-Tools

Sí, lo sé. La colección de herramientas número 10 000 en Internet. ¿Quién la necesita? Pero puedo tranquilizaros: este proyecto nunca estuvo planeado. Es un accidente, fruto de la pura procrastinación, pero también una lección sobre cómo lidiar con la inteligencia artificial.

Todo empezó de forma muy inocente en mi escritorio.

Al principio fue el script

Como muchos desarrolladores, yo también tenía varias herramientas de creación propia almacenadas en mi localhost. Pequeños scripts para las molestias cotidianas: una conversión de em/px por aquí, una pequeña ayuda por allá. Cosas para las que me daba pereza buscar siempre en los mismos sitios web. Y es que estoy en guerra abierta con los marcadores.

Esas pequeñas ayudas cumplían diligentemente su función. Pero entonces añadí dos más y mi instinto de desarrollador web se impuso sin piedad: empecé a enlazarlas. Hacía falta un menú. Un poco de diseño. Y de repente me vi metido de lleno en todo lo que se te ocurre cuando quieres distraerte con éxito de tu trabajo real. La simple colección se convirtió en un proyecto en toda regla. Tenía que «tunearlo» hasta que tuviera ante mí una pequeña página web en toda regla con todos los detalles.

«IA, ¡toma el relevo!»: ¿fue una idea descabellada?

En algún momento se me ocurrió: al fin y al cabo, solo son scripts sencillos. ¡Deja que la IA se encargue de ello! Como fiel usuario de VS Code, monté el proyecto directamente con Claude Code (Sonnet).

Pero antes de darle rienda suelta a la IA, tenía que establecer unas pautas claras. Así que, en primer lugar, definí una pila tecnológica fija. A partir de ahí, derivé un CLAUDE.md (estrictamente limitado a un máximo de 60 líneas; las rutas de comandos cortas son fundamentales en la IA) y un .claude/comments/review.md. Igualmente vitales para el bolsillo son un archivo .claudeignore coherente y un .claude/settings.local.json adaptado específicamente para ahorrar tokens de forma masiva al programar.

El resultado fue sorprendente: una aplicación web increíblemente buena y ampliable de forma modular. Pero, por supuesto, no todo salió a la perfección. Hay que evitar constantemente que una IA se exceda. Mi comando más importante se convirtió rápidamente en: «¡No, no necesitamos un gestor de paquetes! ¡Y ahora deja de intentar sugerirme otro framework!» Al final, sin embargo, salió un esqueleto básico realmente útil.

Las trampas del «Vibe Coding»

El proyecto cobró impulso y aprendí rápidamente algunas lecciones duras sobre la colaboración con mis colegas digitales.

• La cuestión del framework: a las IA les encanta Tailwind. Tras algunos ajustes manuales, durante los cuales mi paciencia se fue agotando peligrosamente, finalmente se rompió. A raíz de ello, me pasé a Bootstrap para terminar el asunto de forma pragmática. A veces, «terminado» es simplemente mejor que «perfecto» (o Tailwind).


• ¿Sin Git? ¡Sin mí! Por costumbre, creé directamente un repositorio. ¡Menos mal! Rápidamente me di cuenta de que este «Vibe Coding» sin planificación y sin control de versiones acababa siendo una enorme pérdida de tiempo.


• Lógica de la IA frente a la realidad: a veces, las IA se lo ponen demasiado fácil... o demasiado complicado. Es cierto que Claude ha mejorado enormemente en este aspecto y ahora analiza el código de forma mucho más fundamentada en lugar de especular a ciegas. Sin embargo, si no se especifica con precisión hacia dónde debe ir el proyecto, las IA siguen tendiendo a soluciones de script arbitrarias que acaban en un callejón sin salida. Sin un valiente «git reset --hard», probablemente habría tenido que reiniciar el proyecto por completo más de una vez.


• Ping-pong de IA en la revisión de código: para el control de calidad, he apostado por un sistema de «checks and balances». Mediante el comando /review, activo la revisión interna de Claude, que funciona estrictamente según las especificaciones de mi review.md. Como complemento, encargué revisiones externas a ChatGPT y Gemini y, finalmente, discutí los resultados con Claude Opus. Esta «revisión de IA para la revisión de IA» es bastante meta, pero extremadamente útil para contrastar diferentes formas de pensar y cerrar lagunas lógicas.

Ronda extra: ¿IA como traductor?

Una vez que la funcionalidad estuvo lista, llegó el turno de las traducciones. Aquí la IA mostró su lado filosófico: Claude Sonnet 4.5 me señaló, sin que yo se lo pidiera, que en idiomas como el hindi, el chino o el japonés no solo se trata de vocabulario, sino también de peculiaridades culturales y formas de cortesía. Fue un nivel refrescante de autorreflexión.

En la práctica, sin embargo, la decisión fue pragmática: para la traducción por lotes del contenido estático, Claude me resultaba demasiado «intelectual» y complicado. En el caso de Gemini y ChatGPT, la calidad de la ejecución fluctuaba demasiado. Al final, lo traduje todo con DeepL. También en este caso se aplica lo siguiente: ¡la herramienta adecuada para cada trabajo!

De la intranet a la web

Una vez que terminé la colección de herramientas, que incluso admitía varios idiomas, nos prestó un buen servicio durante bastante tiempo en nuestra red corporativa. En algún momento pensé: ¿por qué no compartirla?

Así que la puse a punto y la hice pública. Y como todo esto surgió de un «accidente», el código es totalmente abierto. Si alguien quiere echar una mano o encuentra algún error: el repositorio de Git lo encontraréis aquí: https://github.com/RamonKaes/WebDev-Tools.

Sí, lo siento. Así que ya está aquí, la colección de herramientas número 10 000. La colección de herramientas número 10 000. Pero bueno, ¡al menos tiene una bonita historia detrás!

¡Que la disfrutéis!

Ramon