Kilo Code para diseño.

Qué es realmente Kilo Code

Kilo Code es un agente de programación con IA de código abierto creado por Kilo Code, Inc. Se ejecuta como una extensión de VS Code, en los IDE de JetBrains y como interfaz de línea de comandos, leyendo tu repositorio, editando archivos, ejecutando comandos y planificando y verificando el trabajo a partir de tareas en lenguaje natural en lugar de limitarse a completar líneas. Su rasgo definitorio es que es agnóstico al modelo: tú eliges qué modelo lo gobierna y traes tus propias claves de proveedor.

Para el trabajo de diseño destacan dos propiedades. Como es agnóstico al modelo, puedes apuntarlo al modelo potente con visión que mejor lea una captura de referencia y razone sobre la maquetación. 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 del 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 obtener contexto persistente y admite servidores MCP (con un mercado de MCP), así que puedes añadir contexto externo como un archivo de Figma en vivo o utillaje de diseño.
• Trae 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 más de 500 modelos a coste de proveedor.

• Fabricante: Kilo Code, Inc. (código abierto)
• Credencial: tu propia clave de API de proveedor (BYOK: Anthropic, OpenAI, Google, OpenRouter y más) o la propia pasarela de Kilo
• Licencia: código abierto

Por qué un agente abierto y agnóstico al modelo encaja con el diseño

La ventaja de Kilo Code para el diseño viene de su apertura y de la elección de modelo, pero, como ocurre con todo agente, el criterio estético hay que aportarlo igualmente.

• Agnóstico al modelo por diseño: Como tú eliges el modelo, puedes gobernar Kilo con el modelo con visión que mejor lea las capturas de referencia, y cambiarlo cuando aparezca uno mejor, sin alterar tu flujo de trabajo.
• Abierto e inspeccionable: Kilo es de código abierto, así que puedes ver exactamente qué contexto y qué prompts se envían, útil cuando quieres que el agente reutilice tus primitivos 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) apuntan al agente hacia tus tokens, componentes y especificaciones reales, para que trabaje contra una marca en lugar de un aspecto por defecto.

La lección es la misma que enseña todo agente: Kilo Code no tiene criterio estético por defecto. Produce buen diseño cuando le das restricciones: un sistema de diseño, una skill estética y referencias concretas. Open Design empaqueta exactamente esos insumos, por lo que ambos encajan (más abajo se explica).

Configura Kilo Code para el trabajo de diseño, desde cero

Este es el recorrido completo, desde una máquina limpia hasta un Kilo Code capaz de construir y verificar interfaces.

# 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 settings

• Codifica tus reglas de diseño: Coloca tus tokens, primitivos y convenciones en las reglas personalizadas de Kilo y apunta el agente hacia ellas, para que el resultado se ajuste a una marca en lugar de caer en un aspecto genérico por defecto.
• Añade verificación en el navegador: Conecta un Playwright o un MCP de navegador para que Kilo renderice en un navegador real y compruebe su resultado en los distintos breakpoints, en lugar de limitarse a confirmar que el build pasa.

El flujo de captura de pantalla a interfaz

El bucle de diseño de mayor rendimiento con Kilo Code consiste en convertir una imagen de referencia en una interfaz funcional y adaptable e iterar hasta que coincida, apoyándose en un modelo con visión para comparar el resultado 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 imagen 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 tus convenciones en las reglas personalizadas de Kilo, e indícale al agente dónde viven los tokens y los primitivos canónicos.
4. Levanta un servidor de desarrollo y haz que Kilo renderice en un navegador real, redimensionando a los distintos breakpoints para comprobar el resultado.
5. 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:

# 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.

Mantén los prompts breves y enfocados, confirma las buenas iteraciones y revierte las malas (avisando a Kilo cuando reviertas), para que cada pasada parta de una base limpia.

Modos, reglas personalizadas y MCP

Tres puntos de extensión hacen que Kilo Code sea práctico para un trabajo de diseño sostenido, y los tres encajan limpiamente en un flujo 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 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, primitivos y listas de revisión— leídas en cada ejecución para que el agente trabaje contra tu marca.
• Servidores MCP: Kilo admite servidores MCP mediante su mercado: la forma portátil de incorporar contexto de diseño y herramientas externas —lo más relevante, un servidor MCP de Figma— que funcionan en distintos agentes, no solo en Kilo.

Son capacidades portátiles y multiagente: exactamente el tipo de cosa que Open Design está diseñado para orquestar, en lugar de recrearla en cada 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 distinta, y los equipos con experiencia los combinan. Un resumen honesto:

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

Errores comunes y cómo evitar el aspecto de «basura de IA»

La queja más común sobre el diseño generado por IA es que luce genérico: degradados suaves, paneles flotantes, esquinas redondeadas exageradas, 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 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 skill estética: Una skill de diseño curada obliga al agente a comprometerse con una dirección real en lugar del aspecto por defecto.
• Verifica en un navegador real: Usa un modelo con visión para renderizar y autoverificar en los distintos breakpoints para que las maquetaciones no se rompan en silencio en el móvil.
• Aporta 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 las reglas personalizadas: Coloca reglas del estilo «sin tarjetas hero, máximo dos tipografías, jerarquía con la marca primero» donde el agente las lea 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 el trabajo tedioso que Open Design elimina.

Diseñar con Kilo Code dentro de Open Design

Open Design es la capa de diseño de código abierto que el flujo de trabajo anterior reclama una y otra vez. Trata a Kilo Code como un adaptador de primera clase 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, para que el contexto de diseño que hace bueno a Kilo esté presente desde la primera ejecución, no ensamblado a mano cada vez. Ambos son de código abierto y local-first, lo que hace de esta combinación un encaje natural.

1. Instala Open Design y selecciona Kilo Code como tu agente.
2. 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.
3. Elige un sistema de diseño y una skill, y luego genera presentaciones, prototipos y páginas de aterrizaje con un criterio estético consistente.
4. Cada artefacto y archivo DESIGN.md vive en tu propio repositorio, no en una nube alojada.

El mismo agente Kilo Code, las mismas claves, más un flujo 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 ni de tus credenciales sale de tu máquina.

Preguntas frecuentes

1. 01 ¿De verdad puede Kilo Code hacer trabajo de diseño? +

   Sí: con una skill estética, un sistema de diseño e imágenes de referencia reales en contexto, Kilo Code produce interfaces adaptables de calidad de producción, y un modelo con visión verifica el resultado contra las referencias. Sin ese contexto tiende a caer en un aspecto genérico, que es la brecha que Open Design llena.

2. 02 ¿Necesito pagar para diseñar con Kilo Code? +

   Kilo Code es de código abierto y su instalación es gratuita. Traes tu propia clave de API de proveedor (BYOK) y pagas a ese proveedor directamente, o usas la propia pasarela de Kilo a coste de proveedor. En cualquier caso, Open Design nunca enruta tus credenciales.

3. 03 ¿Qué hace que Kilo Code sea bueno para el diseño en concreto? +

   Es agnóstico al modelo y de código abierto, así que puedes gobernarlo con el modelo con visión que mejor lea las capturas de referencia, inspeccionar exactamente qué contexto se envía y mantener el coste y las credenciales bajo tu control. El criterio estético sigue viniendo del sistema de diseño, la skill y las referencias que tú aportes.

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

   Ambos son potentes. Claude Code es conocido por decisiones de diseño concretas y conscientes del código base; la ventaja de Kilo Code es ser de código abierto y agnóstico al modelo con BYOK, así que tú eliges el modelo. Muchos equipos usan los dos: Open Design te permite cambiar de agente sin cambiar tu flujo de diseño.

5. 05 ¿Cómo conecto Kilo Code a Figma? +

   Añade un servidor MCP de Figma desde el mercado de MCP o los ajustes de MCP de Kilo. Kilo 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 ¿Está Open Design afiliado a Kilo Code? +

   No. Kilo Code es un producto de Kilo Code, Inc.; Open Design es un proyecto de código abierto independiente que lo admite como adaptador de primera clase. Ambos resultan ser de código abierto, pero son proyectos separados.

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

   Sí: Open Design es local-first y de código abierto. Tus archivos, artefactos y DESIGN.md permanecen en tu propio repositorio, y tus credenciales de proveedor las usa directamente tu agente, sin pasar nunca por los servidores de Open Design.