MÁS INFORMACIÓN
Lecturas adicionales sobre Kimi
Guías, documentación y tutoriales para diseñar con Kimi, extraídos de la guía publicada.
Kimi 
OpenDesign Diseñar con
Kimi en
OpenDesign.
Cómo diseñar interfaces con Kimi CLI en OpenDesign: una captura de referencia como entrada, AGENTS.md como reglamento, una tarea de preferencias de notificaciones desde el briefing hasta el archivo revisado, y los límites que debe conocer antes de comenzar.
TRES RUTAS POR ESTA PÁGINA DE KIMI
Elige tu punto de partida en la guía de Kimi
ESTA GUÍA · DISEÑO DE UI
Convierte un brief en una interfaz de producto con Kimi
Lo que sigue: un brief, imágenes de referencia, reglas de diseño y un resultado HTML que revisas en la vista previa.
Lea esta guía CONFIGURACIÓNConfigure Kimi desde cero
Todo el recorrido, desde una máquina limpia hasta un Kimi CLI que construye UI y la verifica en un navegador real.
Ir a la configuración COMPARACIÓNCompare Kimi con otros agentes
En qué se diferencian los turnos agénticos de Kimi K2 y su gran contexto de Codex, Claude Code y Cursor en el trabajo de diseño, y cuándo conviene elegir otro agente.
Ver la comparaciónEn esta página Ejemplo
Una tarea de diseño completa con Kimi
Una tarea de Kimi: entra un brief, sale una interfaz
Recorre el trabajo de preferencias de notificaciones por todo el ciclo: el brief y las restricciones que entregas, el artefacto que recibes y las comprobaciones que siguen siendo tuyas. La interfaz de abajo se creó como ilustración para esta página, no se capturó de una sesión de Kimi.
1Briefing de diseño y restricciones
BriefingDiseña una pantalla de preferencias de notificaciones para una app de colaboración: canales (email, push, en la app), horas de silencio, anulaciones por proyecto. Toma el tono de la referencia adjunta, no su diseño. Escritorio y teléfono.
- Sistema de diseñoOpenDesign lienzo paper — Albert Sans, un único acento verde
- Breakpoints1440px de escritorio y 390px de teléfono, sin desplazamiento horizontal
- InteraccionesInterruptores, selectores de hora para las horas de silencio, una fila expandible por proyecto
- ResultadoUn archivo HTML autocontenido cuyos ganchos
data-od-idpermanecen estables
2Quién hace qué: tú, Kimi, OpenDesign
- Usted
Tú escribes el brief, eliges el sistema de diseño y estableces los criterios de aceptación.
- Kimi
Kimi planifica el diseño, escribe el HTML, CSS y JavaScript, y revisa cuando se lo pides.
- OpenDesign
OpenDesign proporciona el sistema de diseño y la skill, renderiza la vista previa y guarda cada revisión como un archivo en el proyecto.
- Revisión
La jerarquía visual, el espaciado en rejilla de 8px, ambos breakpoints y cada interacción se comprueban antes de la entrega.
3El artefacto de Kimi: ajustes de notificaciones a 1440px y 390px
4Revisión antes de la entrega
Diseño
Cuadrícula y espaciado
Las secciones, las filas y la acción de guardar caen en la rejilla de 8px; los selectores de hora se alinean con los interruptores.
Jerarquía
Jerarquía visual
Los nombres de los canales tienen más peso que el texto de ayuda, y el acento aparece solo en los interruptores activados.
Responsivo
Diseño para móvil
Las secciones se contraen a un conmutador segmentado; cada fila mantiene un único interruptor a la derecha.
Interacción
Comprobaciones de interacción
Active o desactive un canal, configure las horas de silencio y expanda una anulación de proyecto.
Ajuste
Dónde encaja Kimi — y dónde no
Kimi es adecuado cuando
- Referencia agéntica → UI. La codificación de largo horizonte de Kimi K2 convierte tus referencias en marcado responsive y luego comprueba el resultado renderizado contra ellas en un navegador real.
- Contexto de 256k tokens. Tu sistema de diseño, biblioteca de componentes y conjunto de referencias caben a la vez, así que la salida reutiliza las primitivas que realmente tienes.
- AGENTS.md + MCP. Tus convenciones viajan en el archivo de contexto; el servidor MCP de Figma introduce contexto de diseño real en el código.
- Abierto y BYOK. Apache-2.0, autenticado mediante un inicio de sesión OAuth o tu propia clave de API de Moonshot, con endpoints compatibles con OpenAI y Anthropic además.
Elija otro workflow cuando
- Necesitas archivos vectoriales editables. Lo que recibes es HTML, no un documento de diseño editable; busca un flujo de trabajo vectorial aparte para el formato de recurso que necesitas.
- No tienes referencia ni restricciones. Sin un sistema de diseño ni ejemplos, la salida tiende a un aspecto genérico; escribe el brief antes de generar.
- No tienes la credencial que este agente necesita. Se requiere una clave de API de Moonshot propia. OpenDesign ni proporciona ni actúa como proxy de credenciales.
- Tu equipo trabaja en Qwen o DeepSeek. Esos agentes tienen sus propias páginas; el espacio de trabajo se mantiene, la configuración no. Consulta agentes relacionados.
Compatibilidad
Requisitos de Kimi antes de empezar
Todo lo que hay aquí se refiere a Kimi conectado mediante la aplicación de escritorio OpenDesign. Referencias publicadas verificadas el 6 de septiembre de 2026.
Alcance de la herramientaKimi, de Moonshot
Kimi CLI es el agente de terminal de código abierto (Apache-2.0) de Moonshot AI, que se ejecuta en la serie de modelos Kimi K2: lee tu base de código, edita archivos, ejecuta comandos, busca archivos y accede a la web. Esta página trata sobre diseñar interfaces con Kimi dentro de OpenDesign, no sobre la propia interfaz de Kimi. Las notas de configuración de OpenDesign enumeran los agentes disponibles.
Cuentas y autenticaciónAPI key de Moonshot (BYOK)
Clave de API de Moonshot (BYOK). Autentícate con ella y la credencial permanece en tu máquina. En esta página no se promete ninguna cuota ni precio.
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 desde código fuente pertenecen 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 Kimi: no verificada aquí.
Verificación de conexiónLa señal de éxito
Sigue las instrucciones de conexión que muestra tu versión instalada y luego ejecuta algo pequeño. Confirma que Kimi lo ha gestionado y que el artefacto se abre; una descarga por sí sola no demuestra que la conexión funcione.
Empiece con la app de escritorio
Configuración de Kimi en tres pasos
Empieza con la descarga, termina la configuración de Kimi para la versión que instalaste y luego comprueba algo pequeño. Compilar OpenDesign desde el código fuente no es necesario para esta ruta.
- 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. ¿Ya la tienes instalada? Salta hacia delante: no hace falta volver a descargarla. - 2
Prepara tu conexión con Kimi
Sigue las instrucciones de Kimi que vienen con tu versión instalada. Autentícate con tu clave de API de Moonshot (BYOK); la credencial permanece en tu máquina.
Documentación de Kimi CLI — Primeros pasos# 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended) curl -LsSf https://code.kimi.com/install.sh | bash # or, if you already have uv: uv tool install --python 3.13 kimi-cli # 2. Start it in your project and authenticate on first run cd your-project kimi # then run /login: OAuth via Kimi Code, or paste a Moonshot API keyTomado de las notas de configuración de Kimi en la guía publicada; confirma el comando actual en la documentación del proveedor.
PUNTO DE CONTROLConfirma el agente y la cuenta previstos. Si no está disponible, comprueba la compatibilidad antes de pasar a una tarea más grande. - 3
Ejecuta una tarea pequeña con Kimi
Dale un brief que puedas mantener en la cabeza, para que todo el ciclo —incluida una revisión— siga siendo evaluable.
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 pide un cambio específico. La generación abre la revisión; no la cierra.
¿Prefieres ejecutar OpenDesign desde el código fuente? Sigue el inicio rápido técnico.
El workflow de diseño de Kimi
Cinco pasos desde el brief hasta un archivo de Kimi revisado
Una pantalla de preferencias de notificaciones, llevada desde tu brief hasta un archivo que has verificado. Cada paso separa tu aportación, el trabajo de Kimi, la contribución de OpenDesign y tu propia comprobación.
- 1
Briefing de diseño
De tres a seis líneas en lenguaje sencillo. Di para quién es la pantalla, qué debe hacer y qué plataformas importan.
- UstedTú escribes el brief y adjuntas una captura de referencia cuando existe.
- KimiKimi lee el brief junto con el archivo de instrucciones AGENTS.md del proyecto, y hace una pregunta cuando la solicitud es ambigua.
- OpenDesignOpenDesign proporciona el proyecto, la superficie de prompt y la skill correspondiente al tipo de artefacto.
- ComprobarComprueba que el brief nombra sus criterios de aceptación. Escribirlos antes de generar cuesta menos que adaptarlos después.
- 2
Restricciones de diseño
Un sistema de diseño más unas pocas reglas estrictas. Esa combinación mantiene la salida fiel a la marca en lugar de genérica.
- UstedSelecciona un sistema de diseño y luego indica los breakpoints y los componentes que deben aparecer.
- KimiKimi carga los tokens y las reglas de postura de DESIGN.md en el contexto antes de escribir cualquier código.
- OpenDesignOpenDesign incluye la biblioteca del sistema de diseño y vincula tu elección en la plantilla de la skill.
- ComprobarTu comprobación: los tokens coinciden con la marca: un solo acento, tipografías correctas, radio correcto.
- 3
Generar la interfaz
Kimi produce un único archivo HTML autocontenido: diseño, estilos, interacciones, ganchos estables.
- UstedTu parte es esperar o responder a una pregunta de aclaración. No se necesita configuración.
- KimiKimi planifica las secciones, escribe HTML, CSS y JavaScript, ejecuta el archivo y repara los fallos.
- OpenDesignOpenDesign almacena el artefacto en la carpeta del proyecto y lo indexa para la vista previa.
- ComprobarNada todavía: evalúa el archivo cuando se renderice, no leyendo el código fuente.
- 4
Vista previa
OpenDesign renderiza el archivo con los anchos que especificaste. Aquí es donde juzgas el diseño.
- UstedTú cambias los puntos de interrupción, ejercitas las interacciones y comentas elementos individuales.
- KimiKimi lee tus comentarios de la vista previa y prepara la siguiente revisión.
- OpenDesignOpenDesign renderiza la vista previa y expone los objetivos
data-od-idpara comentarios y ediciones. - VerificaciónRevisa la jerarquía, el contraste, el desbordamiento a 390px, los estados de foco y si el acento se mantiene comedido.
- 5
Revisar y verificar
Pide cambios señalando elementos en la vista previa. Cada revisión se convierte en un archivo nuevo; nada se sobrescribe sin aviso.
- UstedTú conviertes los comentarios en solicitudes y decides cuándo el trabajo está terminado.
- KimiKimi aplica los cambios en el lugar y vuelve a ejecutar el archivo.
- OpenDesignOpenDesign mantiene las versiones lado a lado y exporta una imagen o el HTML cuando terminas.
- VerificaciónVuelve a revisar solo el área modificada, luego la página completa una vez en cada punto de interrupción.
Recursos
Recursos de diseño de Kimi
Skills Explorar skills Sistemas de diseño Explorar sistemas Plantillas Explorar plantillas
Skills de diseño
Tipos de artefactos que Kimi puede generar en OpenDesign: una habilidad para cada tipo.
Sistemas de Diseño
Tokens de marca y componentes para vincular antes de que comience cualquier generación de Kimi.
Plantillas
Puntos de partida para presentaciones, landing pages y pantallas de producto.
Limitaciones
Límites de Kimi, comprobaciones manuales y alternativas
- AlcanceLos modelos Kimi K2 están ajustados para codificación agéntica y de horizonte largo; la ventana de contexto alcanza hasta 256k tokens, suficiente para contener un sistema de diseño completo a la vez. Nota de alcance: esta página cubre Kimi como un agente integrado en OpenDesign, no todas las funciones de Kimi.
- Límites de usoLos límites de uso y el coste dependen de la credencial que aportas (clave de API de Moonshot). Aquí no se hace ninguna afirmación de cuota gratuita.
- RedTus archivos de proyecto son locales, pero la inferencia no se realiza sin conexión. Revisa la configuración del proveedor y las políticas de datos antes de enviar entradas sensibles.
- La salida es HTMLLo que devuelve es un archivo HTML, no un documento de diseño vectorial.
- Revisión manualTú revisas la accesibilidad, el contenido real, la adecuación a la marca y la corrección de las interacciones en la vista previa. Cualquier autocomprobación que ejecute el agente es solo una primera pasada.
- AlternativaCuando el agente no esté disponible o una tarea falle, consulta las instrucciones de conexión y autenticación de tu versión instalada. Guarda el error y el último artefacto funcional antes de modificar la configuración.
Preguntas frecuentes
Preguntas frecuentes sobre Kimi y OpenDesign
¿Kimi CLI realmente se ocupa del trabajo de diseño?
Sí — con un skill estético, un sistema de diseño y referencias visuales reales en el contexto, Kimi CLI produce interfaces responsivas de calidad de producción, y sus modelos agénticos Kimi K2 pueden renderizar y verificar el resultado frente a las referencias. Sin ese contexto, tiende a producir un aspecto genérico, que es precisamente el vacío que OpenDesign cubre.
¿Tengo que pagar para diseñar con Kimi CLI?
Usted aporta sus propias credenciales: autorícese mediante el inicio de sesión OAuth de Kimi Code o pegue una clave de API de Moonshot (BYOK), facturada por la plataforma de Moonshot. OpenDesign nunca intermedia sus credenciales de ninguna de las dos formas.
¿Qué hace que Kimi CLI sea adecuado para el diseño?
Dos cosas: los modelos Kimi K2 están ajustados para codificación agéntica de largo horizonte y uso de herramientas, de modo que el agente puede construir y refinar hasta lograr un resultado funcional, y la ventana de contexto llega hasta 256k tokens, suficiente para mantener a la vez todo un sistema de diseño y un conjunto de referencias. Ambos factores ayudan, pero el buen gusto sigue proviniendo del sistema de diseño, el skill y las referencias que usted proporcione.
¿Kimi CLI o Claude Code para diseño frontend?
Ambos son sólidos. Claude Code es conocido por decisiones de diseño específicas y conscientes del código base; la ventaja de Kimi CLI son sus modelos agénticos Kimi K2 y un contexto amplio con economía BYOK. Muchos equipos usan ambos — OpenDesign le permite cambiar de agente sin modificar su flujo de trabajo de diseño.
¿Cómo conecto Kimi CLI a Figma?
Ejecute /mcp-config dentro de Kimi CLI para añadir y autenticar el servidor MCP de Figma. Kimi 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 Kimi CLI
Kimi CLI es un agente de IA de código abierto (Apache-2.0) que Moonshot AI distribuye para la terminal. Lee tu repositorio, edita archivos, ejecuta comandos de shell, busca archivos, obtiene páginas web y elige su siguiente paso a partir de la retroalimentación que recibe — planificando y verificando el trabajo a partir de tareas en lenguaje natural en lugar de limitarse a completar líneas. Es una herramienta de Python, se instala con uv y, entre bastidores, impulsa la familia de modelos Kimi K2.
Para el trabajo de diseño, destacan dos propiedades. Los modelos Kimi K2 están ajustados explícitamente para la codificación agéntica de horizonte largo y el uso de herramientas, por lo que el agente puede llevar una construcción de varios pasos hasta un resultado funcional. Y la ventana de contexto alcanza hasta 256k tokens en las versiones recientes de K2, lo bastante grande como para contener a la vez todo tu sistema de diseño, tu biblioteca de componentes y tu conjunto de referencias, en lugar de resumirlos y perderlos.
Archivos de contexto: Kimi CLI lee un archivo AGENTS.md para el contexto persistente del proyecto — el lugar natural para codificar tus convenciones de diseño, tokens y listas de verificación de revisión. Ejecuta /init para generar uno para un proyecto que no lo tenga.
MCP, ACP + subagentes: gestiona servidores MCP de forma conversacional con /mcp-config, expone una sesión a través del Agent Client Protocol (kimi acp) a Zed y JetBrains, y puede despachar los subagentes integrados coder, explore y plan en contextos aislados.
Inicio de sesión o BYOK: en el primer lanzamiento, /login te permite autorizar mediante OAuth (Kimi Code) o introducir tu propia clave de API de Moonshot; la plataforma de Kimi también expone endpoints compatibles con OpenAI y con Anthropic.
Credencial: clave de API de Moonshot (BYOK), o inicio de sesión OAuth mediante Kimi Code
Proveedor: Moonshot AI
Licencia: Apache-2.0, código abierto
Para el trabajo de diseño, destacan dos propiedades. Los modelos Kimi K2 están ajustados explícitamente para la codificación agéntica de horizonte largo y el uso de herramientas, por lo que el agente puede llevar una construcción de varios pasos hasta un resultado funcional. Y la ventana de contexto alcanza hasta 256k tokens en las versiones recientes de K2, lo bastante grande como para contener a la vez todo tu sistema de diseño, tu biblioteca de componentes y tu conjunto de referencias, en lugar de resumirlos y perderlos.
Archivos de contexto: Kimi CLI lee un archivo AGENTS.md para el contexto persistente del proyecto — el lugar natural para codificar tus convenciones de diseño, tokens y listas de verificación de revisión. Ejecuta /init para generar uno para un proyecto que no lo tenga.
MCP, ACP + subagentes: gestiona servidores MCP de forma conversacional con /mcp-config, expone una sesión a través del Agent Client Protocol (kimi acp) a Zed y JetBrains, y puede despachar los subagentes integrados coder, explore y plan en contextos aislados.
Inicio de sesión o BYOK: en el primer lanzamiento, /login te permite autorizar mediante OAuth (Kimi Code) o introducir tu propia clave de API de Moonshot; la plataforma de Kimi también expone endpoints compatibles con OpenAI y con Anthropic.
Credencial: clave de API de Moonshot (BYOK), o inicio de sesión OAuth mediante Kimi Code
Proveedor: Moonshot AI
Licencia: Apache-2.0, código abierto
Por qué los modelos K2 agénticos y un contexto amplio encajan con el diseño
La ventaja de Kimi CLI para el diseño proviene de dos propiedades del modelo — pero, como con todo agente, el gusto todavía hay que aportarlo.
Codificación agéntica de horizonte largo: los modelos Kimi K2 están optimizados para el uso de herramientas y el trabajo de varios pasos, así que el agente puede tomar una referencia y un brief y de verdad construir, ejecutar y refinar la UI en lugar de detenerse en un primer borrador.
Una ventana de contexto amplia: hasta 256k tokens en las versiones recientes de K2 significa que todo el sistema de diseño, los tokens y muchos estados de referencia caben a la vez, de modo que el agente reutiliza tus primitivas reales en lugar de inventar estilos únicos.
Convenciones en AGENTS.md: un AGENTS.md (más un servidor MCP como Figma) orienta al agente hacia tus tokens, componentes y especificaciones reales, así trabaja según una marca en lugar de un aspecto predeterminado.
El 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: Kimi CLI no tiene 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 esas entradas, y por eso los dos encajan (más abajo).
Codificación agéntica de horizonte largo: los modelos Kimi K2 están optimizados para el uso de herramientas y el trabajo de varios pasos, así que el agente puede tomar una referencia y un brief y de verdad construir, ejecutar y refinar la UI en lugar de detenerse en un primer borrador.
Una ventana de contexto amplia: hasta 256k tokens en las versiones recientes de K2 significa que todo el sistema de diseño, los tokens y muchos estados de referencia caben a la vez, de modo que el agente reutiliza tus primitivas reales en lugar de inventar estilos únicos.
Convenciones en AGENTS.md: un AGENTS.md (más un servidor MCP como Figma) orienta al agente hacia tus tokens, componentes y especificaciones reales, así trabaja según una marca en lugar de un aspecto predeterminado.
El 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: Kimi CLI no tiene 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 esas entradas, y por eso los dos encajan (más abajo).
Configurar Kimi CLI para diseño desde cero
La secuencia de configuración: instalar → autenticar → configurar AGENTS.md → añadir una skill → habilitar la verificación en el navegador.
Codifica tus reglas de diseño: pon tus tokens, primitivas y convenciones en AGENTS.md y haz que Kimi las use, 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 del navegador para que Kimi renderice en un navegador real y compruebe su salida en distintos breakpoints en lugar de solo 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 AGENTS.md y haz que Kimi las use, 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 del navegador para que Kimi renderice en un navegador real y compruebe su salida en distintos breakpoints en lugar de solo 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. Instala Kimi CLI (usa uv; Python 3.12–3.14, se recomienda 3.13)
curl -LsSf https://code.kimi.com/install.sh | bash
# o, si ya tienes uv:
uv tool install --python 3.13 kimi-cli
# 2. Inícialo en tu proyecto y autentícate en la primera ejecución
cd your-project
kimi # luego ejecuta /login: OAuth mediante Kimi Code, o pega una clave de API de Moonshot
# 3. Genera el contexto del proyecto
/init # genera un AGENTS.md para este proyecto
# 4. Conecta un servidor MCP (opcional, p. ej. Figma para el traspaso de diseño)
/mcp-config # añade, edita y autentica servidores MCP de forma conversacionalEjemplo de comando histórico de la guía anterior; verifica la sintaxis actual en la documentación del proveedor enlazada.
El bucle de referencia a UI
El bucle de diseño de mayor impacto con Kimi CLI consiste en convertir material de referencia en una UI funcional y responsive e iterar hasta que coincida — dándole al agente tus referencias y haciendo que compare su salida renderizada con ellas en un navegador real.
Parte de las referencias más claras que tengas — e incluye varios estados (escritorio y móvil, hover, vacío, carga), no solo una imagen principal.
Sé específico en el prompt; los prompts vagos producen UI genérica incluso con un agente potente.
Mantén tu sistema de diseño y tus convenciones en AGENTS.md, y dile a Kimi dónde están los tokens y las primitivas canónicas.
Ejecuta un servidor de desarrollo y haz que Kimi renderice en un navegador real, redimensionando a los breakpoints para comprobar el resultado.
Itera haciendo que Kimi compare su implementación con las referencias — no solo que confirme que compila.
Indica a Kimi tus referencias y el servidor de desarrollo, y luego dale restricciones concretas:
Mantén los prompts pequeños y enfocados, haz commit de las buenas iteraciones y revierte las malas (diciéndole a Kimi cuándo reviertes), para que cada pasada se base en una base limpia. Kimi CLI también puede aceptar una grabación de pantalla breve o un clip de demostración cuando un flujo es difícil de describir con palabras.
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 más claras que tengas — e incluye varios estados (escritorio y móvil, hover, vacío, carga), no solo una imagen principal.
Sé específico en el prompt; los prompts vagos producen UI genérica incluso con un agente potente.
Mantén tu sistema de diseño y tus convenciones en AGENTS.md, y dile a Kimi dónde están los tokens y las primitivas canónicas.
Ejecuta un servidor de desarrollo y haz que Kimi renderice en un navegador real, redimensionando a los breakpoints para comprobar el resultado.
Itera haciendo que Kimi compare su implementación con las referencias — no solo que confirme que compila.
Indica a Kimi tus referencias y el servidor de desarrollo, y luego dale restricciones concretas:
Mantén los prompts pequeños y enfocados, haz commit de las buenas iteraciones y revierte las malas (diciéndole a Kimi cuándo reviertes), para que cada pasada se base en una base limpia. Kimi CLI también puede aceptar una grabación de pantalla breve o un clip de demostración cuando un flujo es difícil de describir con palabras.
kimi
# en el prompt:
> Implementa el diseño en ./references (reference-desktop.png,
reference-mobile.png) usando React + Vite + Tailwind + TypeScript.
Reutiliza mis componentes y tokens existentes del sistema de diseño de AGENTS.md.
Iguala el espaciado, la disposición y la jerarquía; hazlo responsive.
Ejecuta el servidor de desarrollo, 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.
AGENTS.md, MCP y subagentes
Tres puntos de extensión hacen que Kimi 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.
Contexto de AGENTS.md: las reglas del proyecto viven en un AGENTS.md en la raíz del repositorio. Es el lugar duradero donde viven tus convenciones de diseño, se lee en cada ejecución — y es el mismo formato portátil que usan otros agentes.
Servidores MCP: Añade servidores MCP de forma conversacional con /mcp-config — la forma portátil de incorporar contexto de diseño y herramientas externas (lo más relevante, el servidor MCP de Figma) que funcionan en varios agentes, no solo en Kimi.
Subagentes y el marketplace de plugins: Despacha los subagentes integrados coder, explore y plan en contextos aislados, e instala habilidades, servidores MCP y fuentes de datos desde el marketplace o cualquier repositorio de GitHub para reunir referencias y ejecutar el bucle de verificación.
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.
Contexto de AGENTS.md: las reglas del proyecto viven en un AGENTS.md en la raíz del repositorio. Es el lugar duradero donde viven tus convenciones de diseño, se lee en cada ejecución — y es el mismo formato portátil que usan otros agentes.
Servidores MCP: Añade servidores MCP de forma conversacional con /mcp-config — la forma portátil de incorporar contexto de diseño y herramientas externas (lo más relevante, el servidor MCP de Figma) que funcionan en varios agentes, no solo en Kimi.
Subagentes y el marketplace de plugins: Despacha los subagentes integrados coder, explore y plan en contextos aislados, e instala habilidades, servidores MCP y fuentes de datos desde el marketplace o cualquier repositorio de GitHub para reunir referencias y ejecutar el bucle de verificación.
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.
Kimi 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 diferente, y los equipos con experiencia los combinan. Un resumen justo:
Kimi CLI — Modelos Kimi K2 agénticos ajustados para programación de largo horizonte y uso de herramientas, con un contexto grande; código abierto y BYOK — Compilaciones de varios pasos y mantener todo un sistema de diseño en contexto de forma asequible
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 grande
Cursor — Bucle visual de construir y ver con vista previa en vivo y ediciones en línea — Trabajo de UI de iterar y observar muy ajustado dentro de un IDE
Gemini CLI — Fuerte comprensión multimodal de imágenes y un contexto de 1M de tokens; nivel gratuito — Trabajo con muchas capturas de pantalla y contexto muy grande
El veredicto recurrente de la comunidad es que el gusto viene de los humanos: todos recurren por defecto a una estética genérica sin habilidades, referencias y restricciones. Ese es el problema real que hay que resolver — y tiene forma de herramienta de diseño, no de modelo.
Agente — Fortaleza de diseño — Mejor para
Kimi CLI — Modelos Kimi K2 agénticos ajustados para programación de largo horizonte y uso de herramientas, con un contexto grande; código abierto y BYOK — Compilaciones de varios pasos y mantener todo un sistema de diseño en contexto de forma asequible
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 grande
Cursor — Bucle visual de construir y ver con vista previa en vivo y ediciones en línea — Trabajo de UI de iterar y observar muy ajustado dentro de un IDE
Gemini CLI — Fuerte comprensión multimodal de imágenes y un contexto de 1M de tokens; nivel gratuito — Trabajo con muchas capturas de pantalla y contexto muy grande
El veredicto recurrente de la comunidad es que el gusto viene de los humanos: todos recurren por defecto a una estética genérica sin habilidades, referencias y restricciones. Ese es el problema real que hay que 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 enormes, sombras dramáticas, un aire de Inter y morado que “grita que esto 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 Kimi CLI; 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 predeterminado.
Verifica en un navegador real: haz que Kimi renderice y se autoverifique en distintos breakpoints para 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 palanca más importante para la calidad del resultado.
Codifica reglas en AGENTS.md: coloca reglas de estilo como “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 cada mitigación consiste en darle al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto por proyecto, es la carga que elimina OpenDesign.
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 predeterminado.
Verifica en un navegador real: haz que Kimi renderice y se autoverifique en distintos breakpoints para 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 palanca más importante para la calidad del resultado.
Codifica reglas en AGENTS.md: coloca reglas de estilo como “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 cada mitigación consiste en darle al agente un contexto de diseño curado. Mantener ese contexto a mano, proyecto por proyecto, es la carga que elimina OpenDesign.
Diseñar con Kimi 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 Kimi CLI como un adaptador de primera parte y lo envuelve en una biblioteca curada de skills y sistemas de diseño, un pipeline de renderizado estructurado y una interfaz de escritorio local — para que el contexto de diseño que hace bueno a Kimi 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 sea natural.
Autentícate con tu clave de API de Moonshot (BYOK) — las credenciales permanecen en tu máquina y nunca se enrutan a través de nosotros.
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 repo, no en una nube alojada.
El mismo agente Kimi CLI, la misma clave — además de un flujo de trabajo de diseño real, portátil y de código abierto a su alrededor. 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 Kimi CLI como tu agente.
Autentícate con tu clave de API de Moonshot (BYOK) — las credenciales permanecen en tu máquina y nunca se enrutan a través de nosotros.
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 repo, no en una nube alojada.
El mismo agente Kimi CLI, la misma clave — además de un flujo de trabajo de diseño real, portátil y de código abierto a su alrededor. 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 Kimi CLI como tu agente.
¿Está OpenDesign afiliado a Moonshot AI?
No. OpenDesign es independiente; Kimi es una marca registrada de Moonshot AI.