MÁS INFORMACIÓN
Lecturas adicionales sobre Copilot
Tutoriales, documentación y guías paso a paso para el trabajo de diseño con Copilot, como se indica en la guía publicada.
Copilot 
OpenDesign Diseñar con
Copilot en
OpenDesign.
Cómo diseñar interfaces con GitHub Copilot CLI en OpenDesign: una captura de pantalla como entrada, los componentes de su repositorio reutilizados, una tarea de página de lanzamiento desde el briefing hasta el archivo revisado, y los límites que debe conocer antes de empezar.
TRES PUNTOS DE PARTIDA PARA EL DISEÑO CON COPILOT
Elige un punto de partida para Copilot
ESTA GUÍA · DISEÑO DE UI
Cree Una Interfaz de Producto Con Copilot
En esta guía: un brief, imágenes de referencia, reglas de diseño y un artefacto HTML que revisas.
Lea esta guía CONFIGURACIÓNConfigure Copilot Desde Cero
La ruta completa desde una máquina limpia hasta que Copilot CLI construye y verifica la interfaz de usuario.
Ir a la configuración COMPARACIÓNCompare Copilot Con Otros Agentes
Dónde se diferencia Copilot de Codex, Claude Code y Cursor en el trabajo de diseño, y cuándo encaja mejor otro flujo de trabajo.
Ver la comparaciónEn esta página Ejemplo
Una Tarea de Diseño Completa Con Copilot
Una tarea de diseño con Copilot: del brief a la interfaz
Una tarea trazada a lo largo de todo su arco: el brief y las restricciones que le das a Copilot, el artefacto que devuelve y las comprobaciones que aún ejecutas antes de que esté terminada. La interfaz que aparece a continuación es un ejemplo ilustrativo creado para esta página, no una ejecución de Copilot registrada.
1Briefing de diseño y restricciones
BriefingUsando la captura de pantalla del competidor adjunta, diseña la landing page de lanzamiento de un producto CLI: hero con comando de instalación, tres bloques de características y proof points. Reutiliza los componentes del repositorio. Escritorio y teléfono.
- Sistema de diseñoComponentes y tokens del repositorio; Albert Sans, un acento verde
- Breakpoints1440px de escritorio y 390px de móvil, sin desplazamiento horizontal
- InteraccionesTexto del comando de instalación, CTA principal y secundaria, navegación por anclas
- ResultadoUn archivo HTML autónomo con anclajes
data-od-idestables
2Quién hace qué: tú, Copilot y OpenDesign
- Usted
Escribe el brief, elige el sistema de diseño y establece los criterios de aceptación.
- Copilot
Copilot planifica el diseño, escribe HTML, CSS y JavaScript, y revisa a petición.
- OpenDesign
OpenDesign proporciona el sistema de diseño y la skill, renderiza la vista previa y almacena cada versión como un archivo en el proyecto.
- Revisión
Antes de la entrega, comprueba la jerarquía visual, el espaciado en la cuadrícula de 8px, ambos breakpoints y cada interacción.
3Artefacto de Copilot: página de lanzamiento a 1440px y 390px
4Revisión antes de la entrega
Diseño
Cuadrícula y espaciado
Hero, características y proof comparten la cuadrícula de 8px; la columna de arte nunca empuja el texto por debajo del pliegue.
Jerarquía
Jerarquía visual
Titular, comando de instalación, luego funciones; el acento marca solo el botón de instalación.
Responsivo
Diseño para móvil
Primero el texto, después el arte, funciones apiladas; el comando de instalación permanece copiable.
Interacción
Comprobaciones de interacción
Copie el comando, siga ambos CTA, salte a un ancla de función.
Ajuste
Cuándo encaja Copilot y cuándo no
Copilot es adecuado cuando
- Captura de pantalla → UI. Elige un modelo multimodal potente, convierte una imagen de referencia en marcado responsivo y luego compara el resultado con esa imagen.
- Elección multimodelo. Usa /model para cambiar entre modelos de vanguardia de Anthropic, OpenAI y Google según la tarea, todo con tu suscripción de Copilot.
- Instrucciones + MCP. Las instrucciones personalizadas como .github/copilot-instructions.md y AGENTS.md transmiten tus convenciones; el servidor MCP de Figma lleva el contexto de diseño real al código.
- Integración profunda con GitHub. Servidor MCP de GitHub integrado y acceso a sus repositorios, incidencias y PR, autenticado con su cuenta de GitHub existente.
Elija otro workflow cuando
- Necesita archivos vectoriales editables. El producto es HTML, no un documento de diseño editable. Consulte un workflow vectorial independiente para el formato de recurso que necesita.
- Usted no tiene ninguna referencia ni restricciones. Sin un sistema de diseño o ejemplos, el resultado tiende hacia un aspecto genérico; escriba primero el briefing.
- No dispone de la credencial que este agente necesita. Se requiere: suscripción a GitHub Copilot. OpenDesign no proporciona ni intermedia credenciales.
- Tu equipo trabaja en Codex o Claude Code. Esos agentes tienen sus propias páginas; el espacio de trabajo no cambia, pero la configuración sí. Consulta agentes relacionados.
Compatibilidad
Requisitos de Copilot antes de empezar
Esta página cubre Copilot conectado a través de la aplicación de escritorio OpenDesign. Referencias publicadas verificadas el 6 de septiembre de 2026.
Alcance de la herramientaCopilot, por GitHub
GitHub Copilot CLI es el agente de codificación nativo de terminal de GitHub, impulsado por el mismo arnés agéntico que el agente de codificación de Copilot. Lee tu base de código, edita archivos, ejecuta comandos y trabaja con tus issues, PRs y repositorios de GitHub. Esta página trata sobre el diseño de interfaces con Copilot a través de OpenDesign, no sobre la interfaz propia de Copilot. Las notas de configuración de OpenDesign enumeran los agentes disponibles.
Cuentas y autenticaciónSuscripción de GitHub Copilot
Suscripción de GitHub Copilot. Autentíquese con su suscripción de GitHub Copilot; las credenciales permanecen en su equipo. Esta página no garantiza una cuota o un precio.
Sistema y versionesApp de escritorio o código fuente
Consulte la página de descargas para las compilaciones de escritorio. Los requisitos de Node.js y pnpm de la guía rápida de origen se aplican a la ejecución desde el código fuente, no a la instalación de un paquete de escritorio. Versión mínima compatible de Copilot: no verificada aquí.
Verificación de conexiónLa señal de éxito
Siga las instrucciones de conexión que muestre su versión instalada y, a continuación, ejecute una tarea pequeña. Confirme que Copilot la manejó y que el artefacto se abre. Una descarga sola no establece una conexión funcional.
Empiece con la app de escritorio
Configuración de Copilot en tres pasos
Descargue primero, complete la configuración de Copilot para su versión instalada y luego verifique un pequeño resultado. No necesita compilar OpenDesign desde el código fuente para seguir este camino.
- 1
Descargue la app de escritorio de OpenDesign
Elija el paquete para su ordenador, instálelo y abra la app.
Descargar OpenDesignPUNTO DE CONTROLSe abre la aplicación de escritorio. ¿Ya está instalada? Continúe con el siguiente paso; no es necesario volver a descargarla. - 2
Prepare su conexión con Copilot
Siga las instrucciones de Copilot en su versión instalada. Autentíquese con su suscripción de GitHub Copilot; las credenciales permanecen en su equipo.
Uso de GitHub Copilot CLI# 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 inDe las notas de configuración de Copilot en la guía publicada; consulte la documentación del proveedor para el comando actual.
PUNTO DE CONTROLConfirme el agente y la cuenta previstos. Si no está disponible, verifique la compatibilidad antes de intentar una tarea más grande. - 3
Ejecute una pequeña tarea de Copilot
Empieza con un brief lo suficientemente pequeño para juzgar todo el ciclo, incluida una revisión.
Briefing inicialConstruya una pantalla de configuración con un formulario de perfil y una confirmación de guardado. Use mis reglas de diseño. Compruébela en anchos de escritorio y móvil.
PUNTO DE CONTROLAbre el resultado, prueba el estado de guardado y solicita un cambio específico. Un archivo generado abre la revisión; no la cierra.
Para ejecutar OpenDesign desde el código fuente, siga la guía de inicio técnica en su lugar.
El flujo de trabajo de diseño de Copilot
Cinco pasos para una tarea de diseño con Copilot CLI
Una página de lanzamiento, trazada desde el primer brief hasta un archivo que has revisado. Cada paso expone tu entrada, el trabajo de Copilot CLI, la parte de OpenDesign y la comprobación que aún debes hacer.
- 1
Briefing de diseño
Escribe el brief en lenguaje sencillo, de tres a seis líneas. Di para quién es, qué debe hacer la pantalla y qué plataformas importan.
- UstedTú escribes el brief y adjuntas una captura de pantalla de referencia cuando existe.
- CopilotCopilot CLI lee el brief y los archivos de instrucciones del repositorio —instrucciones personalizadas y AGENTS.md— y pregunta cuando algo es ambiguo.
- OpenDesignOpenDesign proporciona el proyecto, la superficie de prompt y la skill para el tipo de artefacto.
- ComprobarTú confirmas que el brief nombra los criterios de aceptación. Establecerlos antes de la generación cuesta menos que añadirlos después.
- 2
Restricciones de diseño
Un sistema de diseño y reglas firmes son lo que evita que Copilot CLI recurra a una apariencia predeterminada.
- UstedTú eliges un sistema de diseño, nombras los breakpoints y señalas cualquier componente que deba aparecer.
- CopilotCopilot CLI incorpora los tokens y las reglas de postura de DESIGN.md al contexto antes de escribir una línea.
- OpenDesignOpenDesign incluye la biblioteca del sistema de diseño y vincula el sistema elegido a la plantilla de la skill.
- ComprobarComprueba que los tokens coincidan con tu marca: un acento, las fuentes previstas, el radio previsto.
- 3
Generar la interfaz
Copilot CLI escribe un artefacto HTML autocontenido: diseño, estilos, interacciones y hooks estables.
- UstedTú esperas o respondes a una pregunta aclaratoria. Aquí no hay nada que configurar.
- CopilotCopilot CLI planifica las secciones, escribe el HTML, CSS y JavaScript, ejecuta el archivo y repara lo que falla.
- OpenDesignOpenDesign almacena el artefacto en la carpeta del proyecto y lo indexa para la vista previa.
- ComprobarNada todavía. Juzga el archivo una vez que se renderice, no desde el código fuente.
- 4
Vista previa
El archivo se renderiza en OpenDesign con los anchos que solicitaste. Aquí es donde se juzga el diseño.
- UstedTú cambias los anchos, pruebas las interacciones y dejas comentarios en los elementos.
- CopilotCopilot CLI lee tus comentarios en la vista previa y prepara la siguiente revisión.
- OpenDesignOpenDesign renderiza la vista previa y expone objetivos
data-od-idpara comentarios y ediciones. - VerificaciónTú compruebas la jerarquía, el contraste, el desbordamiento a 390px, los estados de foco y si el acento se usa con moderación.
- 5
Revisar y verificar
Solicita cambios señalando elementos en la vista previa. Cada revisión llega como un archivo nuevo; nada se sobrescribe sin aviso.
- UstedTú conviertes los comentarios en solicitudes y decides cuándo está terminada la tarea.
- CopilotCopilot CLI aplica los cambios en el lugar y vuelve a ejecutar el archivo.
- OpenDesignOpenDesign mantiene las versiones una al lado de la otra y exporta una imagen o el HTML cuando terminas.
- VerificaciónTú vuelves a comprobar solo el área modificada y luego toda la página una vez en cada breakpoint.
Recursos
Recursos de diseño para Copilot
Skills Explorar skills Sistemas de diseño Explorar sistemas Plantillas Explorar plantillas
Skills de diseño
Los tipos de artefacto que Copilot produce en OpenDesign, con una skill para cada tipo.
Sistemas de Diseño
Tokens de marca y componentes para vincular antes de que Copilot genere un archivo.
Plantillas
Plantillas para iniciar presentaciones, landing pages y pantallas de producto.
Limitaciones
Límites de Copilot, las comprobaciones que ejecutas y alternativas
- AlcanceCopilot CLI lee automáticamente los archivos de instrucciones personalizadas y AGENTS.md, y puedes cambiar entre modelos de vanguardia de Anthropic, OpenAI y Google según la tarea. Esta página trata sobre Copilot como agente conectado a OpenDesign, no sobre todas las funciones de Copilot.
- Límites de usoLos límites de uso y el coste dependen de la credencial que utilices — una suscripción a GitHub Copilot. Esta página no hace ninguna afirmación sobre cuotas gratuitas.
- RedLos archivos de proyecto locales no implican inferencia sin conexión. Revisa la configuración del proveedor de tu agente y las políticas de datos antes de compartir entradas confidenciales.
- La salida es HTMLLos artefactos llegan como archivos HTML, no como archivos de diseño vectorial.
- Revisión manualTú revisas la accesibilidad, el contenido real, la adecuación a la marca y la corrección de la interacción en la vista previa. Considera la autocomprobación del agente solo como una primera pasada.
- AlternativaSi el agente no está disponible o una tarea falla, consulta las instrucciones de conexión y la autenticación para la versión instalada. Conserva el error y el último artefacto funcional antes de cambiar la configuración.
Preguntas frecuentes
Preguntas frecuentes sobre Copilot y OpenDesign
¿Puede GitHub Copilot CLI realmente hacer 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 UI responsiva de calidad de producción, y usted puede elegir el modelo que mejor verifique el resultado frente a las referencias. Sin ese contexto tiende a caer en un aspecto genérico, que es la brecha que OpenDesign cubre.
¿Necesito una suscripción para diseñar con Copilot CLI?
Sí — Copilot CLI funciona con una suscripción activa de GitHub Copilot (Pro, Pro+, Business o Enterprise); no es de tipo bring-your-own-key. Usted se autentica con su cuenta de GitHub. OpenDesign nunca actúa como proxy de sus credenciales: su agente usa su suscripción directamente.
¿Qué hace que Copilot CLI sea tan adecuado para el diseño?
Dos cosas: lee las instrucciones del repositorio y AGENTS.md automáticamente, de modo que sus convenciones de diseño viajan con el repositorio; y le permite cambiar entre modelos de frontera de Anthropic, OpenAI y Google según la tarea. Ambas ayudan, pero el gusto sigue proviniendo del sistema de diseño, el skill y las referencias que usted proporcione.
Para diseño frontend: ¿Copilot CLI o Claude Code?
Ambos son sólidos. Claude Code es conocido por decisiones de diseño específicas y con conocimiento del código base; la ventaja de Copilot CLI es la elección de modelo entre proveedores y una integración profunda con GitHub en una suscripción que quizá ya tiene. Muchos equipos usan ambos: OpenDesign le permite cambiar de agente sin cambiar su flujo de trabajo de diseño.
Conectar Copilot CLI con Figma
Añada el servidor MCP de Figma con el comando /mcp add; los ajustes se guardan en mcp-config.json dentro de ~/.copilot. Copilot puede entonces obtener contexto de diseño real —componentes, variables, datos de layout— de modo que el código generado coincida con el original en lugar de aproximarlo.
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. Funciona con la misma infraestructura agéntica que el agente de programación Copilot de GitHub, por lo que planifica tareas complejas e itera en lugar de limitarse a completar líneas. Alcanzó su disponibilidad general en febrero de 2026, tras una vista previa pública que se abrió en septiembre de 2025.
Para el trabajo de diseño, dos propiedades destacan. Lee archivos de instrucciones personalizadas —reglas para todo el repositorio en .github/copilot-instructions.md además de AGENTS.md—, de modo que tus convenciones de diseño se incluyen automáticamente en cada ejecución. Y admite múltiples proveedores de modelos fundacionales, así que puedes cambiar el modelo por tarea con el comando /model al que mejor razone 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 bajo .github/instructions y AGENTS.md, el lugar natural para codificar tus convenciones de diseño, tokens y listas de verificación de revisión.
Herramientas integradas + MCP: incluye el servidor MCP de GitHub ya integrado y ejecuta herramientas de archivos y de shell, y puedes añadir servidores MCP personalizados con /mcp add (guardados en mcp-config.json bajo ~/.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 por tarea, todo con tu suscripción de Copilot existente.
Credencial: una suscripción activa de GitHub Copilot (Pro, Pro+, Business o Enterprise)
Instalación: npm install -g @github/copilot, y luego ejecuta copilot
Proveedor: GitHub
Para el trabajo de diseño, dos propiedades destacan. Lee archivos de instrucciones personalizadas —reglas para todo el repositorio en .github/copilot-instructions.md además de AGENTS.md—, de modo que tus convenciones de diseño se incluyen automáticamente en cada ejecución. Y admite múltiples proveedores de modelos fundacionales, así que puedes cambiar el modelo por tarea con el comando /model al que mejor razone 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 bajo .github/instructions y AGENTS.md, el lugar natural para codificar tus convenciones de diseño, tokens y listas de verificación de revisión.
Herramientas integradas + MCP: incluye el servidor MCP de GitHub ya integrado y ejecuta herramientas de archivos y de shell, y puedes añadir servidores MCP personalizados con /mcp add (guardados en mcp-config.json bajo ~/.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 por tarea, todo con tu suscripción de Copilot existente.
Credencial: una suscripción activa de GitHub Copilot (Pro, Pro+, Business o Enterprise)
Instalación: npm install -g @github/copilot, y luego ejecuta copilot
Proveedor: GitHub
Por qué las instrucciones de repositorio y la elección de modelo encajan con el diseño
La ventaja de Copilot CLI para el 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 una apariencia predeterminada.
Elige el modelo adecuado para cada tarea: poder elegir entre Anthropic, OpenAI y Google significa que puedes recurrir al modelo que mejor razone sobre una disposición dada y luego cambiar para la siguiente tarea, sin modificar tu flujo de trabajo.
Especificaciones reales vía MCP: el servidor MCP de GitHub integrado más un servidor MCP de Figma orientan al agente hacia tus tokens, componentes y especificaciones reales, de modo que construye a partir de la fuente en lugar de aproximar.
El buen gusto proviene de tres insumos que tú aportas: un sistema de diseño, una skill y imágenes de referencia reales.
La lección es la misma que enseña todo agente: Copilot CLI no tiene buen gusto por defecto. Produce buen diseño cuando le das restricciones: un sistema de diseño, una skill estética y referencias concretas. OpenDesign empaqueta exactamente esos insumos, y por eso ambos encajan (más abajo).
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 una apariencia predeterminada.
Elige el modelo adecuado para cada tarea: poder elegir entre Anthropic, OpenAI y Google significa que puedes recurrir al modelo que mejor razone sobre una disposición dada y luego cambiar para la siguiente tarea, sin modificar tu flujo de trabajo.
Especificaciones reales vía MCP: el servidor MCP de GitHub integrado más un servidor MCP de Figma orientan al agente hacia tus tokens, componentes y especificaciones reales, de modo que construye a partir de la fuente en lugar de aproximar.
El buen gusto proviene de tres insumos que tú aportas: un sistema de diseño, una skill y imágenes de referencia reales.
La lección es la misma que enseña todo agente: Copilot CLI no tiene buen gusto por defecto. Produce buen diseño cuando le das restricciones: un sistema de diseño, una skill estética y referencias concretas. OpenDesign empaqueta exactamente esos insumos, y por eso ambos encajan (más abajo).
Configurar Copilot CLI para trabajo de diseño desde cero
La secuencia de configuración: instalar → autenticar → elegir un modelo → escribir instrucciones → habilitar la verificación en navegador.
Codifica tus reglas de diseño: coloca tus tokens, primitivas y convenciones en .github/copilot-instructions.md o AGENTS.md, para que la salida coincida con una marca en lugar de caer en una apariencia genérica.
Añade verificación en navegador: conecta un MCP de Playwright o de navegador para que Copilot renderice en un navegador real y compruebe su salida en distintos breakpoints en lugar de limitarse a confirmar que la compilación pasa.
Usa la sección de configuración actual para los comandos y los detalles específicos de versión, que pueden cambiar.
Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Codifica tus reglas de diseño: coloca tus tokens, primitivas y convenciones en .github/copilot-instructions.md o AGENTS.md, para que la salida coincida con una marca en lugar de caer en una apariencia genérica.
Añade verificación en navegador: conecta un MCP de Playwright o de navegador para que Copilot renderice en un navegador real y compruebe su salida en distintos breakpoints en lugar de limitarse a confirmar que la compilación pasa.
Usa la sección de configuración actual para los comandos y los detalles específicos de versión, que pueden cambiar.
# 1. Instala Copilot CLI (se requiere Node.js)
npm install -g @github/copilot
# 2. Inícialo en tu proyecto y autentícate en la primera ejecución
cd your-project
copilot # ejecuta /login y sigue las indicaciones para iniciar sesión
# 3. Elige un modelo para la tarea
# dentro de la sesión:
/model # elige un modelo de frontera de Anthropic, OpenAI o Google
# 4. Añade instrucciones personalizadas y el servidor MCP de Figma (opcional)
# escribe .github/copilot-instructions.md o AGENTS.md
/mcp add # añade el servidor MCP de Figma para el traspaso de diseñoEjemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
El flujo de trabajo de captura de pantalla a interfaz
El bucle de diseño de mayor apalancamiento con Copilot CLI es convertir una imagen de referencia en una interfaz funcional y responsiva e iterar hasta que coincida, apoyándote en un modelo multimodal potente para comparar la salida con la referencia.
Parte de las referencias visuales más claras que tengas, e incluye varios estados (escritorio y móvil, hover, vacío, carga), no solo una toma principal.
Sé específico en el prompt; los prompts vagos producen interfaces genéricas incluso con un modelo potente.
Mantén tu sistema de diseño y tus convenciones en .github/copilot-instructions.md o AGENTS.md, y dile a Copilot dónde viven los tokens y las primitivas canónicas.
Ejecuta un servidor de desarrollo y haz que Copilot renderice en un navegador real, redimensionando a distintos breakpoints para comprobar el resultado.
Itera haciendo que Copilot compare su implementación con las capturas de pantalla, en lugar de solo confirmar que compila.
Orienta a Copilot hacia tus imágenes de referencia y dale restricciones concretas; previsualiza cada edición de archivo o comando para tu aprobación antes de ejecutarlo:
Mantén los prompts pequeños y enfocados; haz commit de las buenas iteraciones y revierte las malas (avisándole a Copilot cuando reviertas), para que cada pasada parta de una base limpia.
Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Parte de las referencias visuales más claras que tengas, e incluye varios estados (escritorio y móvil, hover, vacío, carga), no solo una toma principal.
Sé específico en el prompt; los prompts vagos producen interfaces genéricas incluso con un modelo potente.
Mantén tu sistema de diseño y tus convenciones en .github/copilot-instructions.md o AGENTS.md, y dile a Copilot dónde viven los tokens y las primitivas canónicas.
Ejecuta un servidor de desarrollo y haz que Copilot renderice en un navegador real, redimensionando a distintos breakpoints para comprobar el resultado.
Itera haciendo que Copilot compare su implementación con las capturas de pantalla, en lugar de solo confirmar que compila.
Orienta a Copilot hacia tus imágenes de referencia y dale restricciones concretas; previsualiza cada edición de archivo o comando para tu aprobación antes de ejecutarlo:
Mantén los prompts pequeños y enfocados; haz commit de las buenas iteraciones y revierte las malas (avisándole a Copilot cuando reviertas), para que cada pasada parta de una base limpia.
copilot
# en el prompt:
> Implementa el diseño de reference-desktop.png y reference-mobile.png
en React + Vite + Tailwind + TypeScript.
Reutiliza mis componentes y tokens del sistema de diseño existentes descritos en
.github/copilot-instructions.md.
Iguala el espaciado, la disposición y la jerarquía; hazlo responsivo.
Renderízalo en el navegador e itera hasta que coincida con las referencias
en todos los breakpoints.Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Instrucciones personalizadas, MCP y extensiones
Tres puntos de extensión hacen que Copilot CLI sea práctico para el 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 bajo .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 incluye el servidor MCP de GitHub ya integrado y te permite añadir servidores personalizados mediante /mcp add (guardados en mcp-config.json bajo ~/.copilot), la forma portátil de incorporar contexto de diseño, de manera más relevante el servidor MCP de Figma, que funciona en distintos 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—, junto con sus herramientas de archivos y de shell, le permiten reunir referencias y ejecutar el bucle de verificación sin salir de la terminal.
Son capacidades portátiles y multiagente, justo el tipo de cosa que OpenDesign está diseñado para orquestar, en lugar de recrearla en cada proyecto.
Instrucciones personalizadas: las reglas del repositorio viven en .github/copilot-instructions.md (con archivos específicos por ruta bajo .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 incluye el servidor MCP de GitHub ya integrado y te permite añadir servidores personalizados mediante /mcp add (guardados en mcp-config.json bajo ~/.copilot), la forma portátil de incorporar contexto de diseño, de manera más relevante el servidor MCP de Figma, que funciona en distintos 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—, junto con sus herramientas de archivos y de shell, le permiten reunir referencias y ejecutar el bucle de verificación sin salir de la terminal.
Son capacidades portátiles y multiagente, justo el tipo de cosa que OpenDesign está diseñado para orquestar, en lugar de recrearla 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:
Copilot CLI — Elección multimodelo (Anthropic, OpenAI, Google) e integración profunda con GitHub en tu suscripción de Copilot — Elegir el mejor modelo para cada tarea y trabajo guiado por instrucciones vinculado a tu repositorio de GitHub
Codex — Fuerte acabado visual con una skill de frontend; compilaciones asíncronas en sandbox — Compilaciones asíncronas delegadas y reglas portátiles de AGENTS.md
Claude Code — Decisiones de diseño específicas (hex, espaciado, tipografía) y UX consciente de la base de código — Razonamiento de frontend y refactorizaciones de contexto amplio
Cursor — Bucle visual de construir y ver con vista previa en vivo y ediciones en línea — Trabajo de interfaz de iterar y observar, ajustado, dentro de un IDE
Gemini CLI — Fuerte comprensión multimodal de imágenes y un contexto de 1M de tokens; código abierto con un nivel gratuito — Trabajo con muchas capturas de pantalla y mantener todo un sistema de diseño en contexto
El veredicto recurrente de la comunidad es que el buen gusto viene de los humanos: todos ellos caen por defecto en 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.
Agente — Fortaleza de diseño — Ideal para
Copilot CLI — Elección multimodelo (Anthropic, OpenAI, Google) e integración profunda con GitHub en tu suscripción de Copilot — Elegir el mejor modelo para cada tarea y trabajo guiado por instrucciones vinculado a tu repositorio de GitHub
Codex — Fuerte acabado visual con una skill de frontend; compilaciones asíncronas en sandbox — Compilaciones asíncronas delegadas y reglas portátiles de AGENTS.md
Claude Code — Decisiones de diseño específicas (hex, espaciado, tipografía) y UX consciente de la base de código — Razonamiento de frontend y refactorizaciones de contexto amplio
Cursor — Bucle visual de construir y ver con vista previa en vivo y ediciones en línea — Trabajo de interfaz de iterar y observar, ajustado, dentro de un IDE
Gemini CLI — Fuerte comprensión multimodal de imágenes y un contexto de 1M de tokens; código abierto con un nivel gratuito — Trabajo con muchas capturas de pantalla y mantener todo un sistema de diseño en contexto
El veredicto recurrente de la comunidad es que el buen gusto viene de los humanos: todos ellos caen por defecto en 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.
Agente — Fortaleza de diseño — Ideal para
Errores comunes y cómo evitar el aspecto de “AI slop”
La queja más común sobre el diseño generado por IA es que parece genérico: degradados suaves, paneles flotantes, esquinas redondeadas sobredimensionadas, sombras dramáticas, una vibra de Inter y morado que “grita que lo hizo una IA”. Otros problemas reportados incluyen diseños móviles rotos e instrucciones que se filtran en los textos de la interfaz. Nada de esto es exclusivo de Copilot CLI; es lo que ocurre cuando cualquier agente trabaja sin un contexto de diseño curado.
Añade una skill estética: una skill de diseño curada obliga al agente a comprometerse con una dirección real en lugar de la apariencia predeterminada.
Verifica en un navegador real: renderiza y autocomprueba en distintos breakpoints con un MCP de navegador para que las disposiciones no se rompan en silencio en móvil.
Aporta tokens y referencias: los tokens de diseño reales y las capturas de pantalla de referencia son la palanca más grande para la calidad de la salida.
Codifica reglas en instrucciones personalizadas: pon reglas del estilo “sin tarjetas hero, máximo dos tipografías, jerarquía con la marca primero” 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 darle al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto por proyecto, es la carga de trabajo que OpenDesign elimina.
Añade una skill estética: una skill de diseño curada obliga al agente a comprometerse con una dirección real en lugar de la apariencia predeterminada.
Verifica en un navegador real: renderiza y autocomprueba en distintos breakpoints con un MCP de navegador para que las disposiciones no se rompan en silencio en móvil.
Aporta tokens y referencias: los tokens de diseño reales y las capturas de pantalla de referencia son la palanca más grande para la calidad de la salida.
Codifica reglas en instrucciones personalizadas: pon reglas del estilo “sin tarjetas hero, máximo dos tipografías, jerarquía con la marca primero” 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 darle al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto por proyecto, es la carga de trabajo que OpenDesign elimina.
Diseñar con Copilot CLI dentro de OpenDesign
OpenDesign 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 parte 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, y no se arma a mano cada vez. OpenDesign 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.
Instala OpenDesign y selecciona GitHub Copilot CLI como tu agente.
Autentícate con tu suscripción de GitHub Copilot: las credenciales permanecen en tu máquina y nunca pasan por un proxy nuestro.
Elige un sistema de diseño y una skill, y luego genera presentaciones, prototipos y landing pages con un gusto consistente.
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. OpenDesign es local-first y Apache-2.0, así que nada de tu trabajo ni de tus credenciales sale de tu máquina.
Instala OpenDesign y selecciona GitHub Copilot CLI como tu agente.
Autentícate con tu suscripción de GitHub Copilot: las credenciales permanecen en tu máquina y nunca pasan por un proxy nuestro.
Elige un sistema de diseño y una skill, y luego genera presentaciones, prototipos y landing pages con un gusto consistente.
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. OpenDesign es local-first y Apache-2.0, así que nada de tu trabajo ni de tus credenciales sale de tu máquina.
¿OpenDesign está afiliado a GitHub o Microsoft?
No. OpenDesign es independiente; GitHub Copilot es una marca registrada de GitHub, Inc. y Microsoft.