De 1 hora a 3 minutos: automatizando Frontend con Claude Code

En cualquier equipo técnico surge tarde o temprano una tensión inevitable:

¿Qué tareas deben ejecutarse manualmente y cuáles pueden ser delegadas con seguridad a una IA?

Nosotros —mi equipo— la estamos respondiendo. En este artículo te cuento todo el proceso.

Empezamos con un ejemplo claro: la automatización de eventos AVO.

Para ello, hemos usado una herramienta AI muy especial: Claude Code.

Pero deja que te cuente toda la historia.

Claude Code: mucho más que autocompletado

Importante. Claude Code es solo un ejemplo de un agente que vive en el terminal. Existen otras opciones, solo tienes que buscar. Lo importante es que nada de lo que aprenderás aquí es exclusivo de Claude Code.

Claude Code no es otro copiloto dentro del editor.

Es una herramienta diseñada para automatizar tareas técnicas mediante prompts estructurados, ejecutados desde el terminal.

Funciona como una herramienta de línea de comandos capaz de:

• Leer un proyecto completo.
• Mantener el contexto entre sesiones.
• Integrarse en workflows reales (CI/CD, scripts, terminal).
• Compartir comandos versionados con el equipo.
• Entre otras muchas cosas.

¿Por qué creo que es una gran opción?

En las tres semanas que llevo trabajando con Claude Code, he de decir que estoy impresionado.

Claude está más o menos aceptado como el mejor modelo para programar. Ahora bien, poder usarlo desde el terminal lo lleva a otro nivel.

Estos son los aspectos que para mí destacan, pero te recomiendo que le eches un vistazo a su documentación.

Toma decisiones y ejecuta: de copiloto a agente operativo

Muchas herramientas IA para desarrollo se quedan en la capa de la sugerencia.

Claude Code va un paso más allá: toma acción directa.

No se limita a completar código. Edita archivos, ejecuta comandos, crea ramas, realiza commits, genera PRs.

Esto lo convierte en una herramienta operativa, no solo asistencial.

Si necesitas ir más allá de tu repositorio/proyecto local, Claude puede integrarse con tu sistema real de trabajo a través de MCP (Multi-Context Prompting).

Esto le permite acceder a:

• Documentación en Google Drive.
• Tickets en Jira.
• Repositorios distribuidos o monorepos.
• Herramientas internas de desarrollo.

Vive en el terminal: nuestro lenguaje común

Claude Code no depende del entorno de desarrollo.

Funciona igual si trabajas con editores de código como Visual Studio Code, con IDEs como WebStorm o pasas de GUIs con VIM/NeoVIM (de hecho, tiene VIM mode ❤️).

Uno de los errores más extendidos en el diseño de herramientas con IA es asumir que todos los profesionales Web comparten el mismo editor.

Eso no es cierto. Pero sí hay un punto de convergencia real: el terminal.

El terminal es el único lenguaje verdaderamente común entre desarrolladores/as.

Por eso Claude Code se ejecuta ahí, sin entorno gráfico, sin plugins (aunque los tiene, si es lo que quieres), sin lock-in. Solo texto, contexto y comandos.

$claude "analyze GraphQL query structure"
$claude "generate integration tests for Auth module"
$claude "refactor Vue components in src/components"

Este enfoque lo convierte en una herramienta portable, interoperable y útil para cualquier perfil técnico, sin importar su stack o preferencias de editor.

Filosofía Unix aplicada: Claude Code es parte del sistema, no un asistente

Claude Code no está diseñado para acompañarte mientras escribes código línea a línea.

Está diseñado para componerse con tu sistema, como cualquier herramienta basada en principios Unix: entrada y salida estándar, piping, comandos pequeños que hacen una cosa y la hacen bien.

No es un plugin. Es una pieza de sistema operativo.

# Detect changes in translation files and create a PR with newly translated strings
git diff main...HEAD -- src/i18n | claude -p "Detect new English strings and generate a PR with their Spanish translations for review"

# Monitor the development console log and notify if a new error pattern is detected
tail -f logs/dev-console.log | claude -p "Notify me if a new error pattern appears in this log stream"

# Analyze Vue components and identify missing unit tests
find src/components -name '*.vue' | claude -p "For each file, check if a corresponding unit test exists and suggest missing test cases"

Claude Code no intenta adivinar lo que quieres decir. Ejecuta exactamente lo que le pides, con precisión, sin asumir tu contexto ni depender de tu editor.

Esto —para mí— lo convierte en una herramienta más real, no en una prótesis.

Delegando tareas a Claude Code

Claude Code puede encargarse de tareas que combinan análisis, transformación y ejecución: no solo genera código, sino que lo ejecuta, deja trazabilidad y lo integra en tu flujo de trabajo.

Construcción de features desde descripciones

• Claude genera la estructura, actualiza componentes, crea tests y propone un PR completo.

Depuración de errores

• Claude analiza el código, localiza el fallo, aplica el fix y valida con pruebas o ejemplos de uso.

Navegación por proyectos complejos

• Claude lee la estructura completa, identifica dependencias, documenta flujos y te orienta con precisión (para mi esto es revolucionario).

Automatización de tareas repetitivas

• Claude edita, formatea, crea commits y deja el histórico limpio, ejecutándolo todo desde tu terminal (lo que estamos haciendo aquí).

Operaciones avanzadas vía MCP

• Si tu flujo implica documentación externa, gestión de tickets o recursos de diseño, MCP (Multi‑Context Prompting) amplía las capacidades:
  • Lee Google Docs con especificaciones de UI y aplica esas decisiones en el código.
  • Actualiza tickets de Jira con estado y enlaces a PR.
  • Interactúa con herramientas internas: Storybook, migradores personalizados, workflows CI/CD.

El test ideal (caso AVO)

Hemos comenzado por la implementación de eventos de tracking —como los de AVO.

Parece, a simple vista, una tarea rutinaria. Pero en realidad combina múltiples pasos con dependencias técnicas, validación cruzada y repetibilidad.

Cuando se trata de varios eventos y/o el sistema de destino es desconocido, el tiempo humano invertido crece de forma exponencial.

¿La solución? Diseñar un comando reutilizable, compartido entre todo el equipo, y respaldado por una IA capaz de entender el contexto completo del proyecto.

Comandos reutilizables: .claude/commands/

En mi opinión, la verdadera potencia de Claude Code está en la capacidad de definir comandos personalizados versionados junto al proyecto.

Para el caso descrito (AVO), creamos un comando llamado implement-avo-event, que encapsula todos los pasos necesarios para añadir un evento AVO.

Los comandos son, en realidad, prompts donde debes aportar todo el contexto necesario para que el agente haga su trabajo de forma óptima y evitar alucinaciones.

Para añadir un comando, basta con crear un archivo Markdown en el directorio .claude de tu proyecto (puedes versionarlo y compartir el comando con el resto del equipo).

Archivo PROJECT_DIR/.claude/commands/implement-avo-event.md

1. Ask me for clarification regarding ANY step.
2. If I don't provide #$ARGUMENTS, ask me, independently, for EVENT_NAME, BRANCH_NAME, AVO_BRANCH_NAME and comma-separated FILES_TO_APPLY the event.
3. If I do, parse the space-separated arguments from #$ARGUMENTS.
4. Extract: EVENT_NAME, BRANCH_NAME, AVO_BRANCH_NAME and comma-separated FILES_TO_APPLY to apply the event.
5. Before starting, make sure the event and the file/s exists.
6. Create and checkout a new GIT branch named [BRANCH_NAME].
7. Checkout AVO branch using: `avo:checkout [AVO_BRANCH_NAME]`.
8. Read `@avo-types/events.ts` for [EVENT_NAME] definition.
9. Add the event to `src/tracking/events.ts`, following the file pattern.
10. Check the `EventTracker` class located in `src/tracking/tracker.ts` for context.
11. Implement the new event in specified [FILES_TO_APPLY].
12. Generate essential unit tests (make sure you are not breaking existing ones).
13. Create a basic GitHub PR detailing, in a to-do list fashion, what you have done. Follow conventional commits.

Como puedes comprobar, tenemos acceso a $ARGUMENTS para personalizar el comando y hacerlo aún más polivalente. Es la forma en la que Claude entiende a qué me refiero con EVENT_NAME, BRANCH_NAME, AVO_BRANCH_NAME y FILES_TO_APPLY.

Usando el comando

$claude /implement-avo-event PurchaseCompleted feature/purchase avo/purchase src/checkout.ts,src/analytics.ts

¿Qué es lo que hace?

Si has creado un buen prompt/comando, bastará con leerlo para entender su funcionamiento:

• Lee las definiciones existentes.
• Realiza las preguntas adecuadas para obtener todo el contexto.
• Examina la base de código.
• Incorpora el nuevo evento desde AVO.
• Implementa el patrón correcto.
• Añade los tests.
• Genera una PR con descripción y checklist detallado.

Tú sigues en control

Claude se pone a trabajar cuando tiene todo el contexto necesario. Cuando lo hace, por defecto, te propondrá lo que quiere hacer y tú tendrás que validarlo.

Una vez pasada esta fase puedes indicarle que lo haga por su cuenta, reduciendo aún más el tiempo necesario para realizar la acción.

Es mucho más que un comando

Algo que puede pasar desapercibido pero que es vital entender es que esto es mucho más que un comando:

No estás activando un proceso inerte. Te estás comunicando con una entidad AI que puede responderte.

Esto cambia completamente la perspectiva, ya que cada sesión puede ser radicalmente diferente a la anterior, permitiéndote enfocar tus esfuerzos en resolver un problema en lugar de escribir boilerplate.

El resultado

Tras implementar el comando los resultados son prometedores. La mayoría de eventos sin incluyen (con validaciones e incorporación) en cuestión de minutos. Si se trata de un contexto más abstracto es posible que Claude requiera más "hand-holding", pero aún así estás automatizando la mayoría del proceso.

Deja que te lo resuma:

Antes

1. El equipo de datos define el evento AVO.
2. El desarrollador/a recibe la definición.
3. Implementa el evento "a mano".
4. Escribe los tests.
5. Valida todo el flujo.
6. Crea una incorporación de cambios.

Ahora

1. El equipo de datos define el evento AVO.
2. El desarrollador/a recibe la definición.
3. El desarrollador/a ejecuta un comando que se encarga de los pasos 3, 4, 5 y 6.

Diferencia

• Antes: 1–3 horas por evento.
• Ahora: menos de 5 minutos.
• Ganancia: tiempo, contexto, consistencia.

Además, la diferencia no es solo técnica. Es de contexto. Muchos detalles del sistema AVO no están documentados formalmente. El coste de validación es alto y difícil de estimar sin automatización.

¿Cuánto cuesta realmente?

Una de las preguntas más frecuentes sobre herramientas AI es el coste operativo. Es comprensible: las soluciones empresariales suelen tener precios opacos, y las herramientas de desarrollo individual no siempre escalan bien a equipos.

Claude Code opera con un modelo de precios transparente basado en tokens procesados. A continuación, te muestro el desglose real de costes para nuestro caso de uso específico, sin estimaciones infladas ni escenarios ideales.

Por comando ejecutado:

Comparativa de rentabilidad:

En la práctica:

• 10 eventos por sprint = $1.00 en tokens.
• Ahorro de tiempo = 20-30 horas.

El cuello de botella no es el dinero. Es el tiempo hasta obtener valor y la curva de aprendizaje.

Beneficios reales

Lo que funciona especialmente bien

• Calidad del código generado.
• Reconocimiento de estructura.
• Adopción inmediata.
• Documentación automatizada.
• Integración continua.

Limitaciones actuales

• Contexto limitado en proyectos realmente grandes.
• Coste por tokens, si se abusa o no se aporta el contexto necesario.
• Resultados no deterministas (requieren revisión).

Conclusión

Claude Code una herramienta que puede integrarse con tu flujo de trabajo real y transformar procesos que antes eran ineficientes, tediosos o propensos a errores humanos.

En lugar de limitarse a generar código, Claude opera. Toma decisiones, edita, ejecuta, valida. Y lo hace desde el lenguaje universal que todo equipo técnico comparte: el terminal.

Pero no te confundas: esto no significa que puedas delegarlo todo.

• Si una tarea es repetible, contextual y basada en patrones: puede delegarse.
• Si una tarea requiere juicio, validación o decisión crítica: debe revisarse.
• Si una tarea requiere creatividad o criterio profundo: no se puede delegar, todavía. Pero puedes automatizar el 80% restante.

Y lo más importante: tú mantienes el control. No se trata de desconectarte del proceso, sino de elevar el punto en el que aportas valor.

Main takeaways

• Claude Code es un agente operativo, no un copiloto pasivo. Toma acción real.
• Vive en el terminal, no en tu editor. Portabilidad y control total.
• Se integra con tu sistema real de trabajo (CI/CD, Jira, GDocs) vía MCP.
• Puedes definir comandos versionados que encapsulan prompts avanzados.
• Automatiza tareas reales: integración de eventos, tests, refactor, PRs.
• Ahorra horas por tarea. Literalmente.
• Cuesta céntimos. El cuello de botella ya no tiene por qué ser el dinero, sino la voluntad.