Aviso: Sí, este artículo fue creado con ayuda de la IA — ¿por qué no?
Una tarde, escribí una sola frase en un asistente de IA, le indiqué un archivo GPS de una salida en bicicleta de gravel — y unas horas después tenía tres aplicaciones funcionando, un mapa interactivo en directo y una herramienta que compara cualquier dos rutas. Sin diseño previo, sin instrucciones detalladas. Solo un archivo y una idea.
Esta es la historia de cómo ocurrió, paso a paso — con todos los prompts incluidos.
Herramientas utilizadas Link to heading
- Claude Code — El asistente de IA de Anthropic que funciona en la terminal. Le hablas en lenguaje natural y lee archivos, escribe código y ejecuta comandos. Imagínalo como un compañero de trabajo muy capaz que vive en tu línea de comandos.
- OpenSpec — Un flujo de trabajo que funciona sobre Claude Code. Antes de escribir ningún código, obliga a la IA a redactar un plan: qué va a construir, por qué y cómo. Como los planos de un arquitecto antes de empezar la obra.
Paso 1: Una frase, un dashboard Link to heading
Prompt:
@done.gpx is a GPS track that I created on a gravel bike. Analyse this track
and create a single-page website displaying the most important statistics
and information that can be extracted from it.
Una sola frase. Sin documento de diseño, sin decisiones tecnológicas. Solo un objetivo en lenguaje normal.
El resultado: una página web completa con un mapa, perfil de elevación, velocidad, distancia y tiempo en movimiento — que se abre directamente en cualquier navegador. Sin instalación, sin cuenta, sin internet.
El prompt no decía cómo construirlo. Describía cómo debía sentirse el resultado. Ese cambio — de instrucciones a intenciones — es uno de los hábitos más útiles con la IA. Describe el resultado que quieres, no los pasos para llegar.
Algo útil a saber: La primera versión tenía un error — el desnivel aparecía como cero. Al señalarlo, la IA lo corrigió sola. Revisa siempre el resultado de la IA, igual que harías con el trabajo de cualquier colaborador.
Paso 2: Pedir más — y dejar que la IA sorprenda Link to heading
Prompt:
* Add to @index.html a speed profile of the ride.
* When passing with the mouse or finger over the elevation and speed profile graphs,
display the X and Y values. Link this to the location in the map.
* Any other improvement to the UI you can bring?
* Ask any questions.
Dos cosas en este prompt merecen atención. Primera: “vincula esto a la ubicación en el mapa” — sin explicar cómo, solo describiendo el comportamiento deseado. La IA se encargó del resto.
Segunda: "¿Qué otras mejoras puedes aportar?" Esta invitación abierta produjo algo inesperado — la IA coloreó la ruta en el mapa por velocidad (verde = lento, rojo = rápido), sin que se le pidiera.
Terminar un prompt con una pregunta abierta es una forma fiable de obtener ideas que no se te habrían ocurrido. Tú sabes lo que quieres; la IA sabe lo que es posible. Esa combinación supera constantemente a cualquiera de los dos por separado.
Paso 3: De un resultado único a una herramienta para cualquiera Link to heading
Prompt:
Create a Python app in folder named 'app-analysis' which outputs a single page 'output.html':
* 'output.html' must be like @index.html
* Use new venv and requirements.txt for dependencies.
* Desired usage: ./app.py <input.gpx> [--output/-o output.html]
* Python app should use external template files for HTML and CSS.
* Create basic documentation in 'app-analysis/README.md'.
* Ask any questions.
El Paso 1 produjo un dashboard para una salida concreta. Este prompt lo convirtió en una herramienta reutilizable para cualquier archivo GPS.
Dos lecciones aquí. Primera: puedes describir el comando que quieres ejecutar — ./app.py salida.gpx -o resultado.html — sin explicar cómo construirlo. La IA se encarga de la implementación.
Segunda: pide siempre la documentación en el mismo prompt. No cuesta nada y vale mucho cuando vuelves a la herramienta meses después o la compartes con alguien. Pídelo una vez; ya está escrito.
El resultado: 8 tarjetas de estadísticas, un mapa donde la ruta cambia de color según la velocidad (verde = lento, rojo = rápido) y gráficos interactivos. Pasa el ratón por los gráficos para ver un punto moverse en el mapa.
Paso 4: Comparar dos rutas — y ver cómo la IA hace preguntas Link to heading
Prompt:
Create a Python app in folder named 'app-compare' which outputs a single page 'comparison.html':
* Usage: ./app.py --completed done.gpx --todo todo.gpx [-o comparison.html]
* The app must compare a completed ride with a planned route, bringing information
on effort, time differences, tips, etc.
* Create basic documentation in 'app-compare/README.md'.
* Ask any questions.
Antes de construir nada, la IA respondió con dos preguntas: ¿Qué debe mostrar la página? ¿Cómo calcular el tiempo estimado?
Esto es una de las cosas más infrautilizadas de los asistentes de IA: pedir aclaraciones en lugar de suponer. Cuando una IA te pregunta, ha detectado una ambigüedad real en tu petición. Responder directamente produce un resultado mucho mejor que dejar que asuma.
Las respuestas: sí a todas las opciones, el tiempo escala con la distancia. El resultado — una salida completada de 39,6 km frente a una ruta planificada de 102 km — fue "~24% más fácil por km", pero aproximadamente 3 horas más larga por la distancia extra.
El resultado: una estimación de esfuerzo, una tabla donde el verde significa más fácil y el rojo más difícil, ambas rutas en un mismo mapa y los perfiles de elevación a la misma escala.
Qué viene después Link to heading
Algunas cosas que harían esto más sólido:
- Tests automatizados — una comprobación simple con un archivo GPS pequeño para verificar que los cálculos de distancia y elevación son correctos.
- Tests de regresión visual — capturar una pantalla del resultado tras cada cambio y compararla con la anterior. Detecta un mapa roto o un gráfico que falta, algo que ningún test de código identificaría.
- Pipeline de CI/CD — ejecutar ambas herramientas automáticamente en cada cambio de código y detectar cualquier error antes de que llegue a la rama principal.
- Mejor manejo de errores — actualmente, un archivo GPS malformado podría hacer que las herramientas fallen. Mensajes de error amigables en lugar de fallos inesperados.
- Un único punto de entrada — un solo comando para ejecutar todo el proyecto, en lugar de consultar la documentación de cada aplicación por separado.
Cuatro prompts. Tres aplicaciones. Una tarde. La IA no solo escribió código — planificó, hizo preguntas de aclaración y dejó documentación explicando lo que construyó.
El proyecto completo es abierto: gitlab.com/carlessanagustin/gps-deep