Cómo utilizo Claude Code y Gemini CLI & CoPilot juntos (te dejará boquiabierto)

¡Deja de malgastar dinero! Claude Code y Gemini CLI no deberían ser competidores; si eres inteligente, te darás cuenta de ello.

En lugar de preguntarte cuál elegir, Claude es muy rápido e inteligente, y Gemini CLI es completo y gratuito.

¿Por qué no utilizarlos juntos?

Puedes hacer que colaboren en tu proyecto y ser diez veces más productivo sin gastar dinero.

Se me ocurrió esta idea y realicé un proyecto utilizando ambas herramientas juntas. Fue un gran éxito.

Entonces me di cuenta de que es mejor utilizar cada una para tareas específicas. Incluso incorporé GitHub Copilot y pude hacer mucho más trabajo por mucho menos.

En esta publicación, te guiaré a través de lo que puedes lograr combinando estas dos herramientas y la mentalidad que debes adoptar al abordar la codificación con IA.

Elegir la herramienta debería ser la menor de tus preocupaciones, ya que estas herramientas son esencialmente iguales, con sutiles diferencias en velocidad y rendimiento.

Lo que importa es ahorrar dinero.

El problema del costo de la codificación con IA

La mayoría de los desarrolladores tratan las herramientas de codificación con IA como un matrimonio. Eliges una y le eres fiel.

Eso es caro y limitante.

Claude Code cuesta dinero por solicitud, mientras que Gemini CLI es gratuito, pero a veces puede ser más lento al manejar lógica frontend compleja.

GitHub Copilot se encuentra en tu editor, pero no es comparable a Claude Code, aunque es decente para la codificación con IA y está mejorando.

Todas estas herramientas tienen superpoderes en diferentes áreas.

Claude Code aplasta el trabajo frontend. Respuestas rápidas, código limpio y entiende los patrones de la interfaz de usuario al instante.

Gemini CLI destaca en lógica backend y diseño de API. Piensa más profundamente en la arquitectura y es completamente gratuito.

GitHub Copilot llena los vacíos con documentación y revisiones de código.

¿Por qué no usar las tres?

Construyamos algo

Te voy a mostrar cómo funciona esto construyendo un proyecto real llamado ASE Prompts Manager.

Es una aplicación de almacenamiento y gestión de prompts con un backend FastAPI y un frontend JavaScript vanilla.

Lo suficientemente real como para demostrar cómo estas herramientas colaboran en tareas de desarrollo reales.

Uno de mis mejores flujos de trabajo es el siguiente: Claude Sonnet 4.5 se encarga del frontend, Google Gemini 2.0 Flash se encarga del backend y Copilot con GPT-4 se encarga de la documentación.

Mi otra alternativa favorita es combinar la generación de código del backend y del frontend utilizando Claude Sonnet 4.5, mientras dejo que Google Gemini se encargue de la documentación y la revisión del código.

La estrategia depende de tu situación y presupuesto concretos, pero el principio es el mismo. Utiliza cada herramienta donde rinda mejor y cueste menos.

Te voy a enseñar cómo.

Creación de ASE Prompts Manager

ASE Prompts Manager es una aplicación de almacenamiento y gestión de indicaciones con un frontend Vanilla JavaScript.

Operaciones CRUD para indicaciones: crear, leer, actualizar, eliminar.

Desarrollo del frontend de Claude Code

Inicié Claude Code en el terminal.

Le di todas las instrucciones con la estructura del proyecto, las características y los requisitos de diseño.

I'm building ASE Prompts Manager - a web app to store and manage AI prompts.

  Build the frontend using vanilla JavaScript with these requirements:

  PROJECT STRUCTURE:
  - index.html: Main page with header "ASE Prompts Manager"
  - styles.css: Modern, clean design with good spacing
  - app.js: All client-side logic

  FEATURES NEEDED:
  1. Add Prompt Form (at top):
     - Title input field
     - Content textarea (multi-line)
     - Category dropdown (select from: Coding, Writing, Analysis, Other)
     - "Add Prompt" submit button

  2. Prompts Display Section (below form):
     - Show all prompts in cards/list format
     - Each prompt card displays: title, content preview, category, timestamp
     - Edit button (opens form with existing data)
     - Delete button (removes prompt)

  3. Client-side Logic in app.js:
     - Fetch prompts from API endpoint: GET http://localhost:8000/prompts
     - Add new prompt: POST http://localhost:8000/prompts
     - Update prompt: PUT http://localhost:8000/prompts/{id}
     - Delete prompt: DELETE http://localhost:8000/prompts/{id}
     - Handle form validation and user feedback

  DESIGN:
  - Clean, professional interface
  - Responsive layout
  - Good color contrast
  - Smooth transitions
  - Mobile-friendly

  Keep code simple, well-organized, and production-ready.

Include all these files inside a folder named frontend since we will 
build the backend later.

Claude Code se puso manos a la obra de inmediato. Creó una lista de tareas pendientes para realizar un seguimiento de la construcción. Comenzó a generar archivos.

Primero vino index.html. Estructura limpia con un encabezado, añadir un formulario de solicitud y una sección de visualización para las tarjetas de solicitud.

A continuación, styles.css: diseño moderno con variables CSS, diseño de cuadrícula adaptable e insignias de categorías codificadas por colores. Diseño profesional basado en tarjetas con transiciones fluidas.

Por último, app.js. Lógica completa del lado del cliente con operaciones CRUD completas, integración de API, validación de formularios, mensajes de retroalimentación del usuario y protección XSS.

Claude Code terminó en menos de dos minutos. Tres archivos listos para producción en la carpeta frontend.

El resultado fue detallado. Enumeraba todas las funciones que había implementado:

• Añadir nuevas indicaciones con validación
• Editar indicaciones existentes en línea
• Eliminar indicaciones con confirmación
• Filtrado por categorías con insignias codificadas por colores
• Diseño de cuadrícula responsivo
• Estados de carga y mensajes de error

Abrí los archivos. El código estaba limpio y bien organizado.

Desarrollo del backend de Gemini CLI

Cambié al terminal Gemini CLI para poder generar el código del backend.

Creé este prompt para ayudarme a construirlo dentro de la carpeta del backend.

I'm building ASE Prompts Manager - a web app to store and manage AI prompts.

The frontend is already built in the 'frontend' folder. Now build the FastAPI backend.

PROJECT STRUCTURE:
Create a 'backend' folder containing:
- main.py: FastAPI application with all routes
- models.py: Pydantic models for data validation
- requirements.txt: List all dependencies

BACKEND REQUIREMENTS:

1. Data Model (Pydantic):
   - id: unique identifier (UUID or integer)
   - title: string (min 3 characters)
   - content: string (min 10 characters)
   - category: string (Coding, Writing, Analysis, Other)
   - created_at: datetime timestamp
   - updated_at: datetime timestamp

2. API Endpoints:
   - GET /prompts - Return all prompts (sorted by created_at, newest first)
   - GET /prompts/{id} - Return single prompt by ID
   - POST /prompts - Create new prompt (validate data)
   - PUT /prompts/{id} - Update existing prompt
   - DELETE /prompts/{id} - Delete prompt by ID

3. Storage:
   - Use in-memory storage (Python list or dict)
   - Auto-generate IDs for new prompts
   - Auto-generate timestamps on create/update

4. CORS Configuration:
   - Enable CORS for frontend at http://localhost:8080
   - Allow all standard HTTP methods
   - Allow credentials

5. Response Format:
   - Success responses with proper HTTP status codes (200, 201, 204)
   - Error responses with clear messages (404, 400, 422)
   - JSON response format for all endpoints

6. Error Handling:
   - Validate all incoming data
   - Handle missing prompts (404)
   - Handle invalid data (422)
   - Proper error messages

ADDITIONAL FEATURES:
- Add API documentation (automatic via FastAPI)
- Include startup message with available endpoints
- Add basic logging for requests

Keep code clean, well-organized, and production-ready.
Include all files inside a 'backend' folder since the frontend is already in 'frontend' folder.

Pegué el mensaje del backend: requisitos completos para la estructura FastAPI, modelos de datos, puntos finales, CORS y gestión de errores.

Gemini CLI procesó la solicitud. A continuación, esbozó su plan.

Creación de una carpeta backend con main.py, models.py y requirements.txt.

Se ejecutó paso a paso:

Paso 1: Se creó el directorio backend.

Paso 2: Se generaron tres archivos vacíos utilizando comandos de PowerShell.

Paso 3: Se escribió requirements.txt con fastapi y uvicorn[estándar].

Paso 4: Creación de models.py con esquemas Pydantic. Modelos Category enum, PromptBase, PromptCreate, PromptUpdate y Prompt. UUID para ID, datetime para marcas de tiempo, validación de campos para título y contenido.

Se ejecutó paso a paso:

Paso 1: Se creó el directorio backend.

Paso 2: Se generaron tres archivos vacíos utilizando comandos de PowerShell.

Paso 3: Se escribió requirements.txt con fastapi y uvicorn[estándar].

Paso 4: Creación de models.py con esquemas Pydantic. Modelos Category enum, PromptBase, PromptCreate, PromptUpdate y Prompt. UUID para ID, datetime para marcas de tiempo, validación de campos para título y contenido.

Paso 5: Creación de main.py con la aplicación FastAPI completa. Middleware CORS configurado para localhost:8080. Base de datos en memoria utilizando un diccionario Python. Todos los puntos finales CRUD con códigos de estado HTTP adecuados. Un evento de inicio que registra los puntos finales disponibles. Middleware de registro de solicitudes. Controladores de excepciones personalizados.

El código era exhaustivo e incluía el manejo de errores por indicaciones faltantes, la validación de todos los datos entrantes y una indicación de muestra añadida al inicio.

Paso 6: Instalación de dependencias. Gemini CLI ejecutó pip install automáticamente. Descarga e instalación de FastAPI, Uvicorn, Pydantic y todos los paquetes necesarios.

Paso 7: Inicié el servidor. Uvicorn se lanzó con un——reload para reinicio automático.

El terminal mostró todos los puntos finales disponibles:

GET /prompts
POST /prompts
GET /prompts/{prompt_id}
PUT /prompts/{prompt_id}
DELETE /prompts/{prompt_id}

Inicio de la aplicación completado.

La creación completa del backend tardó menos de tres minutos. Gemini CLI se encargó de todo, desde la creación de archivos hasta la implementación del servidor.

Estructura completa del proyecto

Eché un vistazo al explorador VS Code. Dos carpetas una al lado de la otra:

frontend/ con index.html, styles.css, app.js

backend/ con main.py, models.py, requirements.txt

Claude Code creó el frontend y Gemini CLI creó el backend

Mi flujo de trabajo en la terminal

Para este tipo de enfoque, mantengo abiertas tres ventanas de terminal:

Terminal 1: donde ejecuté Claude Code y más tarde Gemini CLI. Cambié entre ellos según fue necesario.

Terminal 2: servidor backend ejecutando uvicorn. Registros que muestran las solicitudes de API en tiempo real.

Terminal 3: servidor frontend que sirve los archivos HTML.

Esta configuración me permite ver todo lo que sucede a la vez.

Documentación con GitHub Copilot

Una vez completados el frontend y el backend, recurrí a GitHub Copilot para la documentación.

Copilot se encuentra directamente en VS Code.

A modo de ejemplo, abrí main.py y resalté la función de middleware log_requests. Le pregunté a Copilot en el panel de chat: «¿Puedes añadir un comentario al principio de esta línea que explique lo que hace el código?».

Copilot analizó la función y generó un comentario explicativo claro. Un clic para aceptar. Comentario añadido.

Pasé al punto final get_all_prompts(). Solicité documentación sobre lo que devuelve el punto final y cómo ordena los datos.

Copilot proporcionó una cadena de documentación detallada que explicaba el propósito de la función, el tipo de retorno y la lógica de clasificación. Aceptado. Hecho.

En cuestión de minutos, todo el código base contaba con la documentación adecuada: descripciones de funciones, explicaciones de parámetros y anotaciones de tipos de retorno.

Y así es como utilizo Copilot para otras tareas en las que no quiero gastar mis tokens de Claude.

Reflexiones finales

Este flujo de trabajo da un giro al paradigma de la codificación con IA: en lugar de comprometerse con una herramienta cara y ver cómo se acumulan los costes, se coordinan varias herramientas como si fueran un equipo.

Claude Code crea tu interfaz en dos minutos con código listo para la producción. Gemini CLI diseña tu backend en tres minutos sin cobrar ni un céntimo. GitHub Copilot se encarga de la documentación mientras tú trabajas.

El ASE Prompts Manager demostró que esto funciona: una aplicación totalmente funcional en menos de 10 minutos por 0,50 $ o menos. Esto se aplica a un proyecto enorme, lo que significa un mayor ahorro de costes.

Deja de tratar las herramientas de codificación de IA como competidores entre los que debes elegir. Empieza a tratarlas como especialistas a los que asignas trabajo. Conecta las piezas, prueba las integraciones y envía el producto.

Ese es el flujo de trabajo que ahorra dinero y se construye más rápido.

Sé que tienes tu propio flujo de trabajo único que incluye el uso de varias herramientas juntas. Me gustaría saber cómo lo haces, compartir tus opiniones y tu experiencia en los comentarios a continuación.

Gracias por leer Código en Casa.