GitHub Copilot CLI para diseño.

Qué es realmente GitHub Copilot CLI

GitHub Copilot CLI es el agente de programación nativo de terminal de GitHub. Lee tu repositorio, edita archivos, ejecuta comandos de shell y trabaja directamente con tu contexto de GitHub —issues, pull requests y repositorios— autenticado con tu cuenta de GitHub existente. Está impulsado por el mismo entorno agéntico que el agente de programación de Copilot de GitHub, de modo que planifica tareas complejas e itera en lugar de limitarse a completar líneas. Alcanzó la disponibilidad general en febrero de 2026, tras una versión preliminar pública que se abrió en septiembre de 2025.

Para el trabajo de diseño, destacan dos propiedades. Lee archivos de instrucciones personalizadas —reglas para todo el repositorio en .github/copilot-instructions.md más AGENTS.md—, así que tus convenciones de diseño se incluyen automáticamente en cada ejecución. Y admite múltiples proveedores de modelos fundacionales, de modo que puedes cambiar de modelo según la tarea con el comando /model, optando por el que mejor razona sobre una interfaz dada.

• Archivos de instrucciones: Copilot CLI lee las instrucciones del repositorio en .github/copilot-instructions.md, los archivos específicos por ruta dentro de .github/instructions y AGENTS.md, el lugar natural para codificar tus convenciones de diseño, tokens y listas de comprobación de revisión.
• Herramientas integradas + MCP: Viene con el servidor MCP de GitHub integrado y ejecuta herramientas de archivos y shell, y puedes añadir servidores MCP personalizados con /mcp add (almacenados en mcp-config.json dentro de ~/.copilot) para contexto externo, como un archivo de Figma en vivo.
• Elección de modelo: Usa el comando /model para elegir entre modelos de frontera de Anthropic, OpenAI y Google, cambiando según la tarea, todo con tu suscripción existente de Copilot.

• Proveedor: GitHub
• Credencial: una suscripción activa a GitHub Copilot (Pro, Pro+, Business o Enterprise)
• Instalación: npm install -g @github/copilot, luego ejecuta copilot

Por qué las instrucciones de repositorio y la elección de modelo encajan con el diseño

La ventaja de Copilot CLI para diseño proviene de dos propiedades, pero, como con todo agente, el buen gusto sigue teniendo que aportarse.

• Convenciones que viajan con el repositorio: Como Copilot CLI lee .github/copilot-instructions.md y AGENTS.md automáticamente, tus tokens, primitivas y reglas de revisión están en contexto en cada ejecución: el agente trabaja contra una marca en lugar de un aspecto por defecto.
• Elige el modelo adecuado por tarea: La elección de modelo entre Anthropic, OpenAI y Google significa que puedes recurrir al modelo que mejor razona sobre una maquetación dada y luego cambiar para la siguiente tarea, sin modificar tu flujo de trabajo.
• Especificaciones reales mediante MCP: El servidor MCP de GitHub integrado más un servidor MCP de Figma dirigen al agente a tus tokens, componentes y especificaciones reales, para que construya desde la fuente en lugar de aproximarla.

La lección es la misma que enseña cada agente: Copilot CLI no tiene buen gusto por defecto. Produce buen diseño cuando le das restricciones: un sistema de diseño, un skill estético y referencias concretas. Open Design empaqueta exactamente esos insumos, y por eso ambos encajan (más abajo, con más detalle).

Configura Copilot CLI para trabajo de diseño, desde cero

Este es el camino completo desde una máquina limpia hasta un Copilot CLI capaz de construir y verificar interfaces.

# 1. Install Copilot CLI (Node.js required)
npm install -g @github/copilot

# 2. Start it in your project and authenticate on first run
cd your-project
copilot           # run /login and follow the prompts to sign in

# 3. Choose a model for the task
#    inside the session:
/model            # pick a frontier model from Anthropic, OpenAI, or Google

# 4. Add custom instructions and the Figma MCP server (optional)
#    write .github/copilot-instructions.md or AGENTS.md
/mcp add          # add the Figma MCP server for design handoff

• Codifica tus reglas de diseño: Pon tus tokens, primitivas y convenciones en .github/copilot-instructions.md o AGENTS.md, para que la salida coincida con una marca en lugar de recurrir a un aspecto genérico.
• Añade verificación en el navegador: Conecta un MCP de Playwright o de navegador para que Copilot renderice en un navegador real y compruebe su salida en distintos puntos de quiebre, en lugar de limitarse a confirmar que la compilación pasa.

El flujo de trabajo de captura de pantalla a interfaz

El bucle de diseño de mayor impacto con Copilot CLI es convertir una imagen de referencia en una interfaz funcional y adaptable e iterar hasta que coincida, apoyándose en un modelo multimodal potente para comparar la salida con la referencia.

1. Parte de las referencias visuales más claras que tengas, e incluye varios estados (escritorio y móvil, hover, vacío, cargando), no solo una captura principal.
2. Sé específico en el prompt; los prompts vagos producen interfaces genéricas incluso con un modelo potente.
3. Mantén tu sistema de diseño y convenciones en .github/copilot-instructions.md o AGENTS.md, e indícale a Copilot dónde viven los tokens y las primitivas canónicas.
4. Ejecuta un servidor de desarrollo y haz que Copilot renderice en un navegador real, redimensionando a los puntos de quiebre para comprobar el resultado.
5. Itera haciendo que Copilot compare su implementación con las capturas, no que se limite a confirmar que compila.

Dirige a Copilot a tus imágenes de referencia y dale restricciones concretas; previsualiza cada edición de archivo o comando para tu aprobación antes de ejecutarlo:

copilot
# in the prompt:
> Implement the design in reference-desktop.png and reference-mobile.png
  in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens described in
  .github/copilot-instructions.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

Mantén los prompts pequeños y enfocados, confirma las buenas iteraciones y revierte las malas (avisándole a Copilot cuando reviertas), para que cada pasada se construya sobre una base limpia.

Instrucciones personalizadas, MCP y extensiones

Tres puntos de extensión hacen que Copilot CLI sea práctico para trabajo de diseño sostenido, y los tres encajan limpiamente en un flujo de trabajo de diseño abierto.

• Instrucciones personalizadas: Las reglas del repositorio viven en .github/copilot-instructions.md (con archivos específicos por ruta dentro de .github/instructions y AGENTS.md). Son el hogar duradero de tus convenciones de diseño, incluidas automáticamente en cada ejecución.
• Servidores MCP: Copilot CLI viene con el servidor MCP de GitHub integrado y te permite añadir servidores personalizados mediante /mcp add (almacenados en mcp-config.json dentro de ~/.copilot): la forma portátil de incorporar contexto de diseño, sobre todo el servidor MCP de Figma, que funciona entre agentes, no solo en Copilot.
• Agentes especializados y herramientas integradas: Los modos especializados de Copilot CLI —para explorar la base de código, ejecutar compilaciones y pruebas, revisar cambios y planificar— más sus herramientas de archivos y shell le permiten reunir referencias y ejecutar el bucle de verificación sin salir de la terminal.

Estas son capacidades portátiles y multiagente, exactamente el tipo de cosas que Open Design está diseñado para orquestar, en lugar de recrearlas en cada proyecto.

Copilot CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI para diseño

No hay un único ganador para el trabajo de diseño: cada agente tiene una fortaleza distinta, y los equipos con experiencia los combinan. Un resumen justo:

El veredicto recurrente de la comunidad es que el buen gusto proviene de las personas: todos recurren por defecto a una estética genérica sin skills, referencias y restricciones. Ese es el verdadero problema a resolver, y tiene forma de herramienta de diseño, no de modelo.

Obstáculos y cómo evitar el aspecto de «IA descuidada»

La queja más común sobre el diseño generado por IA es que parece genérico: degradados suaves, paneles flotantes, esquinas redondeadas demasiado grandes, sombras dramáticas, un aire de Inter y morado que «grita que esto lo hizo una IA». Otros problemas reportados incluyen maquetaciones móviles rotas e instrucciones que se filtran en el texto de la interfaz. Ninguno de ellos es exclusivo de Copilot CLI; son lo que ocurre cuando cualquier agente se ejecuta sin un contexto de diseño curado.

• Añade un skill estético: Un skill de diseño curado obliga al agente a comprometerse con una dirección real en lugar del aspecto por defecto.
• Verifica en un navegador real: Renderiza y autoverifica en distintos puntos de quiebre con un MCP de navegador para que las maquetaciones no se rompan en silencio en móvil.
• Aporta tokens y referencias: Los tokens de diseño reales y las capturas de referencia son la mayor palanca individual sobre la calidad de la salida.
• Codifica reglas en instrucciones personalizadas: Pon reglas de estilo como «sin tarjetas hero, máximo dos tipografías, jerarquía centrada en la marca» en .github/copilot-instructions.md o AGENTS.md, donde el agente las lee en cada ejecución.

Fíjate en que toda mitigación consiste en dar al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto a proyecto, es la tarea pesada que Open Design elimina.

Diseñar con Copilot CLI dentro de Open Design

Open Design es la capa de diseño de código abierto que el flujo de trabajo anterior no deja de pedir. Trata a GitHub Copilot CLI como un adaptador de primera categoría y lo envuelve en una biblioteca curada de skills y sistemas de diseño, una canalización de renderizado estructurada y una interfaz de escritorio local, de modo que el contexto de diseño que hace bueno a Copilot está ahí desde la primera ejecución, no ensamblado a mano cada vez. Open Design es independiente, de código abierto (Apache-2.0) y local-first, y por eso la combinación encaja: el agente hace el trabajo, y tus archivos y credenciales siguen siendo tuyos.

1. Instala Open Design y selecciona GitHub Copilot CLI como tu agente.
2. Autentícate con tu suscripción a GitHub Copilot: las credenciales permanecen en tu máquina y nunca pasan por nuestros servidores.
3. Elige un sistema de diseño y un skill, y luego genera presentaciones, prototipos y páginas de aterrizaje con un gusto consistente.
4. Cada artefacto y archivo DESIGN.md vive en tu propio repositorio, no en una nube alojada.

El mismo agente Copilot CLI, la misma suscripción, más un flujo de trabajo de diseño real, portátil y de código abierto a su alrededor. Open Design es local-first y Apache-2.0, así que nada de tu trabajo ni de tus credenciales sale de tu máquina.

Preguntas frecuentes

1. 01 ¿Puede GitHub Copilot CLI hacer realmente trabajo de diseño? +

   Sí: con un skill estético, un sistema de diseño e imágenes de referencia reales en contexto, Copilot CLI produce interfaces adaptables de calidad de producción, y puedes elegir el modelo que mejor verifica la salida frente a las referencias. Sin ese contexto tiende a recurrir a un aspecto genérico, que es la brecha que Open Design rellena.

2. 02 ¿Necesito una suscripción para diseñar con Copilot CLI? +

   Sí: Copilot CLI funciona con una suscripción activa a GitHub Copilot (Pro, Pro+, Business o Enterprise); no es de tipo trae tu propia clave. Te autenticas con tu cuenta de GitHub. Open Design nunca actúa de intermediario con tus credenciales: tu suscripción la usa directamente tu agente.

3. 03 ¿Qué hace bueno a Copilot CLI para diseño en concreto? +

   Dos cosas: lee las instrucciones del repositorio y AGENTS.md automáticamente, de modo que tus convenciones de diseño viajan con el repositorio; y te permite cambiar entre modelos de frontera de Anthropic, OpenAI y Google según la tarea. Ambas ayudan, pero el buen gusto sigue proviniendo del sistema de diseño, el skill y las referencias que tú aportas.

4. 04 ¿Copilot CLI o Claude Code para diseño de frontend? +

   Ambos son potentes. Claude Code es conocido por decisiones de diseño específicas y conscientes de la base de código; la ventaja de Copilot CLI es la elección de modelo entre proveedores y la integración profunda con GitHub en una suscripción que quizá ya tengas. Muchos equipos usan ambos: Open Design te permite cambiar de agente sin cambiar tu flujo de trabajo de diseño.

5. 05 ¿Cómo conecto Copilot CLI con Figma? +

   Añade el servidor MCP de Figma con el comando /mcp add; la configuración se almacena en mcp-config.json dentro de ~/.copilot. Copilot puede entonces extraer contexto de diseño real —componentes, variables, datos de maquetación— para que el código generado coincida con la fuente en lugar de aproximarla.

6. 06 ¿Open Design está afiliado a GitHub o Microsoft? +

   No. GitHub Copilot CLI es un producto de GitHub; Open Design es un proyecto independiente de código abierto que lo admite como adaptador de primera categoría. GitHub Copilot es una marca comercial de GitHub, Inc. y Microsoft.

7. 07 ¿Están seguros mis archivos y credenciales? +

   Sí: Open Design es local-first y Apache-2.0. Tus archivos, artefactos y DESIGN.md permanecen en tu propio repositorio, y tus credenciales de GitHub Copilot las usa directamente tu agente, sin enrutarse nunca a través de los servidores de Open Design.