MÁS INFORMACIÓN
Más lecturas sobre Kilo
Guías, documentación y recorridos guiados para el trabajo de diseño con Kilo, como se enumeran en la guía publicada.
Kilo 
OpenDesign Diseñar con
Kilo en
OpenDesign.
Cómo diseñar interfaces con Kilo Code en OpenDesign: el modelo que elija, sus propias reglas y modos, una tarea de página de producto desde la captura de pantalla hasta el archivo revisado, y los límites que debe conocer antes de empezar.
TRES RUTAS HACIA LA GUÍA DE KILO
Decide tu punto de partida para Kilo
ESTA GUÍA · DISEÑO DE UI
Lleva una interfaz de producto desde el brief hasta HTML en Kilo
Esta página cubre el brief, las referencias, las reglas de diseño y un resultado HTML revisado.
Lea esta guía CONFIGURACIÓNConfigure Kilo desde cero
La ruta completa desde una máquina limpia hasta que Kilo Code construye y verifica la UI.
Ir a la configuración COMPARACIÓNCompare Kilo con otros agentes
Dónde Kilo se diferencia de Codex, Claude Code y Cursor en el trabajo de diseño, y cuándo otro flujo de trabajo es la mejor opción.
Ver la comparaciónEn esta página Ejemplo
Una tarea de diseño completa con Kilo
Una tarea de diseño con Kilo: del brief a la interfaz
La tarea va desde el brief y las restricciones que entregas, pasando por el artefacto que devuelve Kilo, hasta las comprobaciones que aún ejecutas antes de darla por terminada. La interfaz de abajo es un ejemplo ilustrativo creado para esta página, no una ejecución grabada de Kilo.
1Briefing de diseño y restricciones
BriefingUsando la captura de pantalla adjunta, diseña una página de detalle de producto de una marca de exteriores: galería, precio, opciones de talla y color, añadir a la bolsa, productos relacionados. Escritorio y teléfono.
- Sistema de diseñoAlbert Sans y un acento verde sobre el lienzo de papel de OpenDesign
- Breakpoints1440px en escritorio y 390px en móvil, sin desplazamiento horizontal
- InteraccionesMiniaturas de galería, selección de opciones, añadir a la bolsa, desplazamiento de productos relacionados
- ResultadoUn único archivo HTML autocontenido que lleva ganchos estables
data-od-id
2Quién hace qué: tú, Kilo, OpenDesign
- Usted
Tú escribes el brief, eliges el sistema de diseño y estableces los criterios de aceptación.
- Kilo
Kilo planifica el diseño, escribe HTML, CSS y JavaScript, y luego revisa a petición.
- OpenDesign
OpenDesign proporciona el sistema de diseño y la skill, renderiza la vista previa y guarda cada versión como un archivo de proyecto.
- Revisión
Antes de la entrega, compruebas la jerarquía visual, el espaciado de la cuadrícula de 8px, ambos puntos de interrupción y cada interacción.
3El artefacto de Kilo: página de producto a 1440px y 390px
4Revisión antes de la entrega
Diseño
Cuadrícula y espaciado
La galería y la información se alinean a la cuadrícula de 8px; a 1440, la columna de información se mantiene dentro de la altura de la galería.
Jerarquía
Jerarquía visual
El nombre y el precio van primero, luego las opciones; el acento se reserva para el botón de añadir a la bolsa.
Responsivo
Diseño para móvil
Orden móvil: galería, nombre y precio, opciones, un botón de ancho completo; desplazamiento de productos relacionados.
Interacción
Comprobaciones de interacción
Interacciones a probar: cambiar miniatura, elegir talla, añadir a la bolsa, desplazar elementos relacionados.
Ajuste
Dónde encaja Kilo — y dónde no
Kilo es adecuado cuando
- Elección de modelo para captura de pantalla → UI. Apunta Kilo al modelo con capacidad de visión que mejor convierta una imagen de referencia en marcado responsivo, luego compara el resultado con esa imagen.
- BYOK entre proveedores. Usa tus propias claves para Anthropic, OpenAI, Google, OpenRouter y otros, o la pasarela de Kilo, manteniendo el coste y las credenciales en tus manos.
- Modos, reglas personalizadas, MCP. Modo Architect para planificar, modo Code para construir, reglas personalizadas para convenciones y el servidor MCP de Figma para contexto de diseño real.
- Código abierto. Los prompts y las cargas útiles de contexto son inspeccionables, nada está oculto, y Kilo se ejecuta en tu IDE o CLI.
Elija otro workflow cuando
- Necesitas archivos vectoriales editables. Lo que devuelve es HTML, no un documento de diseño editable. Busca un flujo de trabajo vectorial separado para el formato de recurso que necesitas.
- No hay referencia ni restricción. Sin sistema de diseño ni ejemplos, la salida se vuelve genérica; escribe primero el brief.
- Falta la credencial requerida. Kilo necesita tu propia clave API del proveedor (BYOK) o la pasarela de Kilo. OpenDesign no proporciona ni actúa como proxy de credenciales.
- Tu equipo trabaja en OpenCode o Aider. Esos agentes tienen sus propias páginas; el espacio de trabajo se mantiene mientras la configuración difiere. Consulta agentes relacionados.
Compatibilidad
Requisitos de Kilo antes de empezar
Esta página cubre Kilo conectado a través de la aplicación de escritorio OpenDesign. Las referencias se verificaron el 6 de septiembre de 2026.
Alcance de la herramientaKilo, de Kilo Code, Inc.
Kilo Code, de Kilo Code, Inc., es un agente de programación con IA de código abierto. Funciona en VS Code, IDE de JetBrains y la terminal: lee tu base de código, edita archivos y ejecuta comandos. El tema aquí es diseñar interfaces con Kilo a través de OpenDesign, no la interfaz propia de Kilo. Las notas de configuración de OpenDesign enumeran los agentes disponibles.
Cuentas y autenticaciónUna clave API del proveedor que tú proporcionas (BYOK), o la de Kilo
Tu propia clave API del proveedor (BYOK) o la pasarela de Kilo. Autentícate con tu propia clave de proveedor (BYOK) o la pasarela de Kilo; las credenciales permanecen en tu máquina. No se promete cuota ni precio aquí.
Sistema y versionesApp de escritorio o código fuente
Las compilaciones de escritorio están en la página de descargas. Los requisitos de Node.js y pnpm del inicio rápido del código fuente se aplican al ejecutar desde el código fuente, no al instalar un paquete de escritorio. Versión mínima compatible de Kilo: no verificada en esta página.
Verificación de conexiónLa señal de éxito
Usa las instrucciones de conexión que muestra tu versión instalada, luego prueba una tarea pequeña. Comprueba que Kilo la completó y que el artefacto se abre. Descargar por sí solo no demuestra una conexión funcional.
Empiece con la app de escritorio
Configuración de Kilo en tres pasos
Comienza con la descarga, completa la configuración de Kilo para tu versión instalada, luego prueba un resultado pequeño. Seguir esta ruta no requiere compilar OpenDesign desde el código fuente.
- 1
Descargue la app de escritorio de OpenDesign
Elige el paquete para tu máquina, instálalo y abre la aplicación.
Descargar OpenDesignPUNTO DE CONTROLLa aplicación de escritorio se abre. Si ya la tienes, continúa con el siguiente paso; no se necesita una segunda descarga. - 2
Prepare su conexión con Kilo
Usa las instrucciones de Kilo que coincidan con tu versión instalada. Inicia sesión con tu propia clave de proveedor (BYOK) o la pasarela de Kilo; las credenciales permanecen locales en tu máquina.
Documentación de Kilo Code# 1. Install the Kilo Code extension from the VS Code # (or JetBrains) marketplace, or install the CLI. # 2. Open your project and sign in / add a provider key cd your-project kilo # connect your provider (BYOK) or Kilo's gatewayTomado de las notas de configuración de Kilo en la guía publicada; para el comando actual, consulta la documentación del proveedor.
PUNTO DE CONTROLAsegúrate de que el agente y la cuenta son los que pretendías. Si no están disponibles, revisa la compatibilidad antes de intentar una tarea más grande. - 3
Ejecute una pequeña tarea con Kilo
Comienza con un brief lo suficientemente pequeño para juzgar todo el ciclo, incluida una revisión.
Briefing inicialCrea una pantalla de configuración con un formulario de perfil y confirmación de guardado. Sigue mis reglas de diseño. Compruébala en anchos de escritorio y móvil.
PUNTO DE CONTROLAbre el resultado, prueba el estado de guardado, luego pide un cambio específico. El archivo generado inicia la revisión; no la finaliza.
Para ejecutar OpenDesign desde el código fuente en su lugar, consulta el inicio rápido técnico.
El flujo de trabajo de diseño de Kilo
Cinco pasos para una tarea de diseño con Kilo
Una página de producto, seguida desde el brief inicial hasta un archivo que realmente hayas verificado. Cada paso nombra tu entrada, lo que hace Kilo, lo que aporta OpenDesign y la comprobación que lo cierra.
- 1
Briefing de diseño
Mantenlo simple y breve: de tres a seis líneas. Di para quién es la pantalla, qué debe hacer y qué plataformas importan.
- UstedTú escribes el brief y adjuntas una captura de pantalla de referencia cuando exista.
- KiloLee tu brief y el archivo de instrucciones del proyecto, y pregunta en lugar de adivinar cuando un detalle es ambiguo.
- OpenDesignProporciona el proyecto, la superficie de prompts y la skill que coincide con el tipo de artefacto.
- ComprobarComprueba que el brief detalle los criterios de aceptación. Escribirlos ahora cuesta menos que arreglar el archivo después.
- 2
Restricciones de diseño
Un sistema de diseño más un puñado de reglas firmes: la diferencia entre una salida que lleva tu marca y una salida que podría pertenecer a cualquiera.
- UstedElige un sistema de diseño, luego nombra tus puntos de interrupción y cualquier componente que deba aparecer.
- KiloCarga los tokens y las reglas de postura de DESIGN.md en el contexto antes de escribir cualquier marcado.
- OpenDesignEntrega la biblioteca del sistema de diseño y vincula tu sistema elegido en la plantilla de skill.
- ComprobarVerifica que los tokens coincidan con tu marca: un acento, fuentes correctas, radio correcto.
- 3
Generar la interfaz
Kilo escribe un único archivo HTML autocontenido: diseño, estilos, interacciones, hooks estables.
- UstedTu trabajo aquí es esperar o responder a una pregunta aclaratoria. No hay nada que configurar.
- KiloPlanifica las secciones, escribe el HTML, CSS y JavaScript, ejecuta el archivo y repara lo que falla.
- OpenDesignGuarda el artefacto en la carpeta del proyecto y lo indexa para que se pueda previsualizar.
- ComprobarNada todavía — evalúalo renderizado, no leyendo el código fuente.
- 4
Vista previa
OpenDesign renderiza el archivo con los anchos que especificaste. El juicio ocurre aquí, en la vista previa.
- UstedCambia los anchos, prueba las interacciones y haz comentarios sobre elementos específicos.
- KiloLee los comentarios que dejaste en la vista previa y prepara la siguiente revisión.
- OpenDesignRenderiza la vista previa y expone los destinos
data-od-idpara que los comentarios y las ediciones puedan asociarse a ellos. - VerificaciónComprueba la jerarquía, el contraste, el desbordamiento a 390px y los estados de foco, y pregunta si el acento se mantiene comedido.
- 5
Revisar y verificar
Pide cambios señalando elementos en la vista previa. Cada revisión llega como un archivo nuevo; nada se sobrescribe en silencio.
- UstedConvierte los comentarios en solicitudes y decide cuándo termina la tarea.
- KiloAplica los cambios in situ y vuelve a ejecutar el archivo.
- OpenDesignMantiene las versiones en paralelo y, al final, exporta una imagen o el HTML.
- VerificaciónVuelve a comprobar solo el área modificada y, después, la página completa una vez por breakpoint.
Recursos
Recursos de diseño de Kilo
Skills Explorar skills Sistemas de diseño Explorar sistemas Plantillas Explorar plantillas
Skills de diseño
Los tipos de artefacto que Kilo puede producir dentro de OpenDesign — una skill por tipo.
Sistemas de Diseño
Tokens de marca y componentes que hay que vincular antes de que Kilo genere algo.
Plantillas
Puntos de partida para presentaciones, landing pages y pantallas de producto.
Limitaciones
Dónde se detiene Kilo: límites, comprobaciones manuales, alternativas
- AlcanceKilo es agnóstico respecto al modelo y BYOK en muchos proveedores, con modos Architect/Code/Debug/Ask y compatibilidad con MCP, así que la elección del modelo y las credenciales siguen siendo tuyas. Esta página trata de Kilo como un agente integrado en OpenDesign, no de todas las funciones de Kilo.
- Límites de usoLos límites de coste y uso se rigen por la credencial con la que te autentiques — tu propia clave de API del proveedor o la pasarela de Kilo. Aquí no se afirma que haya una cuota gratuita.
- RedQue los archivos residan en tu proyecto no hace que la inferencia sea offline. Antes de compartir entradas sensibles, revisa la configuración del proveedor y las políticas de datos del agente.
- La salida es HTMLEl artefacto es un archivo HTML; no es un archivo 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. Cualquier autocomprobación que realice el agente es una primera pasada, no una aprobación final.
- AlternativaCuando el agente no esté disponible o falle una tarea, consulta las instrucciones de conexión y autenticación para tu versión instalada. Antes de modificar la configuración, guarda el error y el último artefacto que funcionó.
Preguntas frecuentes
Preguntas frecuentes sobre Kilo y OpenDesign
¿Kilo Code realmente hace trabajo de diseño?
Sí — con un skill estético, un design system y referencias visuales reales en contexto, Kilo Code produce UI responsive de calidad de producción, y un modelo con capacidad de visión verifica el resultado contra las referencias. Sin ese contexto, tiende a caer en un aspecto genérico, que es precisamente el vacío que OpenDesign cubre.
¿Tiene algún costo diseñar con Kilo Code?
Kilo Code es de código abierto y gratis de instalar. Usted aporta su propia clave de API de proveedor (BYOK) y paga directamente a ese proveedor, o usa el gateway propio de Kilo al costo del proveedor. OpenDesign nunca actúa como proxy de sus credenciales en ninguno de los casos.
¿Qué hace que Kilo Code sea adecuado para el diseño?
Es independiente del modelo y de código abierto, por lo que puede ejecutarlo con el modelo con capacidad de visión que mejor lea las capturas de referencia, inspeccionar exactamente qué contexto se envía y mantener el costo y las credenciales bajo su control. El buen gusto sigue proviniendo del design system, el skill y las referencias que usted proporcione.
¿Kilo Code o Claude Code para diseño frontend?
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 Kilo Code es ser de código abierto e independiente del modelo con BYOK, de modo que usted elige el modelo. Muchos equipos usan ambos — OpenDesign le permite cambiar de agente sin cambiar su workflow de diseño.
¿Cómo se conecta Kilo Code a Figma?
Agregue un servidor MCP de Figma desde el marketplace de MCP de Kilo o desde la configuración de MCP. Kilo puede entonces obtener contexto de diseño real — componentes, variables, datos de layout — de modo que el código generado coincida con la fuente en lugar de aproximarla.
Qué es Kilo Code
Kilo Code es un agente de codificación con IA de código abierto creado por Kilo Code, Inc. Se ejecuta como una extensión de VS Code, en IDE de JetBrains y como interfaz de línea de comandos: lee tu repositorio, edita archivos, ejecuta comandos y planifica y verifica trabajo a partir de tareas en lenguaje natural, en lugar de limitarse a completar líneas. Su rasgo definitorio es que es agnóstico respecto al modelo: tú eliges qué modelo lo impulsa y aportas tus propias claves de proveedor.
Para el trabajo de diseño, destacan dos propiedades. Como es agnóstico respecto al modelo, puedes apuntarlo al modelo potente con capacidad de visión que mejor lea una captura de pantalla de referencia y razone sobre el layout. Y como es de código abierto y BYOK, puedes inspeccionar exactamente qué contexto se envía y mantener las credenciales y el coste bajo tu propio control.
Modos de agente: Kilo incluye modos especializados —Architect para planificar, Code para construir, Debug para corregir y Ask para preguntas— además de modos personalizados, así que puedes planificar un diseño y luego implementarlo en pasadas separadas y enfocadas.
Reglas personalizadas + MCP: lee reglas personalizadas a nivel de proyecto para tener contexto persistente y admite servidores MCP (con un marketplace de MCP), de modo que puedes añadir contexto externo como un archivo de Figma en vivo o herramientas de diseño.
Aporta tus propias claves: Kilo es BYOK con muchos proveedores —Anthropic, OpenAI, Google, OpenRouter y más— o puedes usar la propia pasarela de Kilo, que expone 500+ modelos al coste del proveedor.
Credencial: tu propia clave de API de proveedor (BYOK —Anthropic, OpenAI, Google, OpenRouter y más) o la propia pasarela de Kilo
Proveedor: Kilo Code, Inc. (código abierto)
Licencia: código abierto
Para el trabajo de diseño, destacan dos propiedades. Como es agnóstico respecto al modelo, puedes apuntarlo al modelo potente con capacidad de visión que mejor lea una captura de pantalla de referencia y razone sobre el layout. Y como es de código abierto y BYOK, puedes inspeccionar exactamente qué contexto se envía y mantener las credenciales y el coste bajo tu propio control.
Modos de agente: Kilo incluye modos especializados —Architect para planificar, Code para construir, Debug para corregir y Ask para preguntas— además de modos personalizados, así que puedes planificar un diseño y luego implementarlo en pasadas separadas y enfocadas.
Reglas personalizadas + MCP: lee reglas personalizadas a nivel de proyecto para tener contexto persistente y admite servidores MCP (con un marketplace de MCP), de modo que puedes añadir contexto externo como un archivo de Figma en vivo o herramientas de diseño.
Aporta tus propias claves: Kilo es BYOK con muchos proveedores —Anthropic, OpenAI, Google, OpenRouter y más— o puedes usar la propia pasarela de Kilo, que expone 500+ modelos al coste del proveedor.
Credencial: tu propia clave de API de proveedor (BYOK —Anthropic, OpenAI, Google, OpenRouter y más) o la propia pasarela de Kilo
Proveedor: Kilo Code, Inc. (código abierto)
Licencia: código abierto
Por qué un agente abierto y agnóstico respecto al modelo es adecuado para el diseño
La ventaja de Kilo Code en diseño proviene de su apertura y de la elección de modelo, pero, como con cualquier agente, el buen gusto aún hay que aportarlo.
Agnóstico respecto al modelo por diseño: como tú eliges el modelo, puedes impulsar Kilo con el modelo con capacidad de visión que mejor lea capturas de pantalla de referencia, y cambiar cuando aparezca uno mejor, sin modificar tu flujo de trabajo.
Abierto e inspeccionable: Kilo es de código abierto, así que puedes ver exactamente qué contexto y prompts se envían, lo cual es útil cuando quieres que el agente reutilice tus primitivas de diseño reales en lugar de inventar estilos puntuales.
Convenciones en reglas personalizadas: las reglas personalizadas del proyecto (más un servidor MCP para Figma) orientan al agente hacia tus tokens, componentes y especificaciones reales, de modo que trabaja a favor de una marca en lugar de un aspecto predeterminado.
El buen gusto proviene de tres entradas 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: Kilo Code no tiene buen gusto de forma predeterminada. Produce buen diseño cuando le das restricciones: un sistema de diseño, una skill estética y referencias concretas. OpenDesign empaqueta exactamente esas entradas, y por eso los dos encajan (más abajo).
Agnóstico respecto al modelo por diseño: como tú eliges el modelo, puedes impulsar Kilo con el modelo con capacidad de visión que mejor lea capturas de pantalla de referencia, y cambiar cuando aparezca uno mejor, sin modificar tu flujo de trabajo.
Abierto e inspeccionable: Kilo es de código abierto, así que puedes ver exactamente qué contexto y prompts se envían, lo cual es útil cuando quieres que el agente reutilice tus primitivas de diseño reales en lugar de inventar estilos puntuales.
Convenciones en reglas personalizadas: las reglas personalizadas del proyecto (más un servidor MCP para Figma) orientan al agente hacia tus tokens, componentes y especificaciones reales, de modo que trabaja a favor de una marca en lugar de un aspecto predeterminado.
El buen gusto proviene de tres entradas 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: Kilo Code no tiene buen gusto de forma predeterminada. Produce buen diseño cuando le das restricciones: un sistema de diseño, una skill estética y referencias concretas. OpenDesign empaqueta exactamente esas entradas, y por eso los dos encajan (más abajo).
Configurar Kilo Code para diseño, desde cero
La secuencia de configuración: instalar → conectar un proveedor → añadir reglas personalizadas → añadir una skill → habilitar la verificación en el navegador.
Codifica tus reglas de diseño: pon tus tokens, primitivas y convenciones en las reglas personalizadas de Kilo y dirige al agente hacia ellas, para que el resultado coincida con una marca en lugar de recurrir a un aspecto genérico.
Añade verificación en el navegador: conecta Playwright o un MCP de navegador para que Kilo se renderice en un navegador real y compruebe su resultado 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 detalles específicos de la 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: pon tus tokens, primitivas y convenciones en las reglas personalizadas de Kilo y dirige al agente hacia ellas, para que el resultado coincida con una marca en lugar de recurrir a un aspecto genérico.
Añade verificación en el navegador: conecta Playwright o un MCP de navegador para que Kilo se renderice en un navegador real y compruebe su resultado 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 detalles específicos de la versión, que pueden cambiar.
# 1. Install the Kilo Code extension from the VS Code
# (or JetBrains) marketplace, or install the CLI.
# 2. Open your project and sign in / add a provider key
cd your-project
kilo # connect your provider (BYOK) or Kilo's gateway
# 3. Add project context
# create custom rules for this project's design conventions
# 4. Wire the Figma MCP server (optional, for design handoff)
# add it from the MCP marketplace / MCP settingsEjemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
El bucle de captura de pantalla a interfaz de usuario
El bucle de diseño de mayor impacto con Kilo Code consiste en convertir una imagen de referencia en una UI funcional y responsive e iterar hasta que coincida, apoyándote en un modelo con capacidad de visión para comparar el resultado 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 imagen hero.
Sé específico en el prompt; los prompts vagos producen UI genérica incluso con un modelo potente.
Mantén tu sistema de diseño y tus convenciones en las reglas personalizadas de Kilo, y dile al agente dónde están los tokens y las primitivas canónicas.
Ejecuta un servidor de desarrollo y haz que Kilo se renderice en un navegador real, redimensionando a distintos breakpoints para comprobar el resultado.
Itera haciendo que Kilo compare su implementación con las capturas de pantalla, no solo que confirme que compila.
Usa el modo Architect para planificar la construcción, luego cambia al modo Code y adjunta tus referencias con restricciones concretas:
Mantén los prompts pequeños y enfocados, haz commit de las buenas iteraciones y revierte las malas (diciéndole a Kilo cuándo reviertes), para que cada pasada se base en 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 imagen hero.
Sé específico en el prompt; los prompts vagos producen UI genérica incluso con un modelo potente.
Mantén tu sistema de diseño y tus convenciones en las reglas personalizadas de Kilo, y dile al agente dónde están los tokens y las primitivas canónicas.
Ejecuta un servidor de desarrollo y haz que Kilo se renderice en un navegador real, redimensionando a distintos breakpoints para comprobar el resultado.
Itera haciendo que Kilo compare su implementación con las capturas de pantalla, no solo que confirme que compila.
Usa el modo Architect para planificar la construcción, luego cambia al modo Code y adjunta tus referencias con restricciones concretas:
Mantén los prompts pequeños y enfocados, haz commit de las buenas iteraciones y revierte las malas (diciéndole a Kilo cuándo reviertes), para que cada pasada se base en una base limpia.
# Plan in Architect mode, then build in Code mode:
> Implement this design from @reference-desktop.png and
@reference-mobile.png in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens
from the custom rules.
Match spacing, layout, and hierarchy; make it responsive.
Render it in the browser and iterate until it matches the
references across breakpoints.Ejemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
Modos, reglas personalizadas y MCP
Tres puntos de extensión hacen que Kilo Code sea práctico para el trabajo de diseño sostenido, y los tres se integran limpiamente en un flujo de trabajo de diseño abierto.
Modos (Architect → Code): Planifica la estructura de una pantalla en el modo Architect, luego impleméntala en el modo Code y corrige los problemas en el modo Debug — separando la intención de diseño de la implementación. Los modos personalizados te permiten codificar una pasada de revisión de diseño propia.
Reglas personalizadas: Las reglas personalizadas del proyecto son el hogar duradero de tus convenciones de diseño — tokens, primitivas y listas de verificación de revisión — que se leen en cada ejecución para que el agente trabaje según tu marca.
Servidores MCP: Kilo admite servidores MCP a través de su mercado — la forma portátil de incorporar contexto de diseño y herramientas externas, de manera más relevante un servidor MCP de Figma, que funcionan entre agentes, no solo en Kilo.
Estas son capacidades portátiles y multiagente — exactamente el tipo de cosa que OpenDesign está diseñado para orquestar, en lugar de recrear por proyecto.
Modos (Architect → Code): Planifica la estructura de una pantalla en el modo Architect, luego impleméntala en el modo Code y corrige los problemas en el modo Debug — separando la intención de diseño de la implementación. Los modos personalizados te permiten codificar una pasada de revisión de diseño propia.
Reglas personalizadas: Las reglas personalizadas del proyecto son el hogar duradero de tus convenciones de diseño — tokens, primitivas y listas de verificación de revisión — que se leen en cada ejecución para que el agente trabaje según tu marca.
Servidores MCP: Kilo admite servidores MCP a través de su mercado — la forma portátil de incorporar contexto de diseño y herramientas externas, de manera más relevante un servidor MCP de Figma, que funcionan entre agentes, no solo en Kilo.
Estas son capacidades portátiles y multiagente — exactamente el tipo de cosa que OpenDesign está diseñado para orquestar, en lugar de recrear por proyecto.
Kilo Code frente a Codex, Claude Code, Cursor y Gemini CLI para diseño
No hay un único ganador para el trabajo de diseño — cada agente tiene una fortaleza diferente, y los equipos experimentados los combinan. Un resumen justo:
Kilo Code — De código abierto y agnóstico de modelo con BYOK en muchos proveedores; modos Architect/Code y MCP — Elegir tu propio modelo por tarea y mantener el costo y las credenciales bajo tu control
Codex — Fuerte pulido visual con una habilidad 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 UI de iterar y observar de cerca dentro de un IDE
Gemini CLI — Fuerte comprensión de imágenes multimodal y un contexto de 1M de tokens — 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 gusto viene de los humanos: todos recurren a una estética genérica por defecto sin habilidades, 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 — Mejor para
Kilo Code — De código abierto y agnóstico de modelo con BYOK en muchos proveedores; modos Architect/Code y MCP — Elegir tu propio modelo por tarea y mantener el costo y las credenciales bajo tu control
Codex — Fuerte pulido visual con una habilidad 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 UI de iterar y observar de cerca dentro de un IDE
Gemini CLI — Fuerte comprensión de imágenes multimodal y un contexto de 1M de tokens — 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 gusto viene de los humanos: todos recurren a una estética genérica por defecto sin habilidades, 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 — Mejor 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, un aire 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 el texto de la interfaz. Ninguno de estos es exclusivo de Kilo Code; son lo que ocurre cuando cualquier agente se ejecuta sin un contexto de diseño curado.
Añade una habilidad estética: una habilidad de diseño curada obliga al agente a comprometerse con una dirección real en lugar del aspecto predeterminado.
Verifica en un navegador real: usa un modelo con capacidad de visión para renderizar y autocomprobar en distintos breakpoints, de modo que los diseños no se rompan silenciosamente en móvil.
Proporciona tokens y referencias: los tokens de diseño reales y las capturas de referencia son la mayor palanca sobre la calidad del resultado.
Codifica reglas en reglas personalizadas: pon reglas del estilo “sin tarjetas hero, máximo dos tipografías, jerarquía que prioriza la marca” donde el agente las lea en cada ejecución.
Fíjate en que cada mitigación consiste en darle al agente un contexto de diseño curado. Mantener ese contexto a mano, por proyecto, es la carga que elimina OpenDesign.
Añade una habilidad estética: una habilidad de diseño curada obliga al agente a comprometerse con una dirección real en lugar del aspecto predeterminado.
Verifica en un navegador real: usa un modelo con capacidad de visión para renderizar y autocomprobar en distintos breakpoints, de modo que los diseños no se rompan silenciosamente en móvil.
Proporciona tokens y referencias: los tokens de diseño reales y las capturas de referencia son la mayor palanca sobre la calidad del resultado.
Codifica reglas en reglas personalizadas: pon reglas del estilo “sin tarjetas hero, máximo dos tipografías, jerarquía que prioriza la marca” donde el agente las lea en cada ejecución.
Fíjate en que cada mitigación consiste en darle al agente un contexto de diseño curado. Mantener ese contexto a mano, por proyecto, es la carga que elimina OpenDesign.
Diseñar con Kilo Code en OpenDesign
OpenDesign es la capa de diseño de código abierto que el flujo de trabajo anterior no deja de pedir. Trata a Kilo Code como un adaptador de primera parte y lo envuelve en una habilidad curada y una biblioteca de sistemas de diseño, un pipeline de renderizado estructurado y una interfaz de escritorio local, de modo que el contexto de diseño que hace que Kilo sea bueno esté ahí desde la primera ejecución, no se arme a mano cada vez. Ambos son de código abierto y local-first, lo que hace que la combinación encaje de forma natural.
Autentícate con tu propia clave de proveedor (BYOK) o con la pasarela de Kilo: las credenciales permanecen en tu máquina y nunca se enrutan a través de nosotros.
Elige un sistema de diseño y una habilidad, 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 de Kilo Code, las mismas claves, más un flujo de trabajo de diseño real, portátil y de código abierto a su alrededor. Es local-first y de código abierto, así que nada de tu trabajo o tus credenciales sale de tu máquina.
Instala OpenDesign y selecciona Kilo Code como tu agente.
Autentícate con tu propia clave de proveedor (BYOK) o con la pasarela de Kilo: las credenciales permanecen en tu máquina y nunca se enrutan a través de nosotros.
Elige un sistema de diseño y una habilidad, 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 de Kilo Code, las mismas claves, más un flujo de trabajo de diseño real, portátil y de código abierto a su alrededor. Es local-first y de código abierto, así que nada de tu trabajo o tus credenciales sale de tu máquina.
Instala OpenDesign y selecciona Kilo Code como tu agente.
¿Está OpenDesign afiliado a Kilo Code?
No. OpenDesign es un proyecto independiente; ambos son de código abierto, pero son proyectos separados.