Qwen Code para diseño.

Qué es realmente Qwen Code

Qwen Code es un agente de IA de código abierto (Apache-2.0) que Alibaba ofrece para la terminal. Lee tu repositorio, edita archivos, ejecuta comandos de shell y trabaja en la web, planificando y verificando el trabajo a partir de tareas en lenguaje natural en lugar de limitarse a completar líneas. Está adaptado de Gemini CLI de Google, con adaptaciones a nivel de parser y de prompt ajustadas para desbloquear los modelos Qwen3-Coder en tareas de programación agéntica.

Para el trabajo de diseño, destacan dos propiedades. Es un programador agéntico capaz, así que puede tomar una referencia y un encargo claro y construir, ejecutar y autocorregir interfaces adaptables. Y los modelos Qwen3-Coder llevan una gran ventana de contexto, lo bastante grande para mantener tu sistema de diseño, biblioteca de componentes y conjunto de referencias enteros a la vez, en lugar de resumirlos.

• Archivos de contexto: Qwen Code lee un archivo QWEN.md como contexto persistente del proyecto, el lugar natural para codificar tus convenciones de diseño, tokens y listas de comprobación de revisión. Los ajustes personales y de proyecto se superponen encima.
• Herramientas integradas + MCP: Viene con herramientas de archivos, shell y web de fábrica, y admite servidores MCP (configurados bajo mcpServers en ~/.qwen/settings.json) para añadir contexto externo, como un archivo de Figma en vivo.
• BYOK para empezar: Traes tu propia clave —una clave de API de DashScope (Alibaba Cloud Model Studio), o cualquier endpoint compatible con OpenAI o ModelScope— y la configuras en settings.json.

• Proveedor: Alibaba
• Credencial: clave de API de DashScope / Qwen (BYOK), o endpoint compatible con OpenAI / ModelScope
• Licencia: Apache-2.0, código abierto (adaptado de Gemini CLI)

Por qué un modelo de programación potente y un gran contexto encajan con el diseño

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

• Programación agéntica potente: Los modelos Qwen3-Coder están ajustados para tareas agénticas, así que el agente planifica, edita, ejecuta la compilación y se autocorrige, convirtiendo una referencia y un encargo claros en marcado adaptable en lugar de una conjetura de un solo intento.
• Una gran ventana de contexto: El gran contexto de Qwen3-Coder significa que todo el sistema de diseño, los tokens y muchos estados de referencia caben a la vez, así que el agente reutiliza tus primitivas reales en lugar de inventar estilos puntuales.
• Convenciones en QWEN.md: Un QWEN.md (más el servidor MCP de Figma) dirige al agente a 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 cada agente: Qwen Code no tiene buen gusto por defecto. Produce buen diseño cuando le das restricciones: un sistema de diseño, un skill estético y referencias concretas. Open Design empaqueta exactamente esos insumos, y por eso ambos encajan (más abajo, con más detalle).

Configura Qwen Code para trabajo de diseño, desde cero

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

# 1. Install Qwen Code (Node 22+)
npm install -g @qwen-code/qwen-code@latest
# or: brew install qwen-code

# 2. Start it in your project and authenticate on first run
cd your-project
qwen              # run /auth, or set a key in ~/.qwen/settings.json

# 3. Configure a DashScope (OpenAI-compatible) key in settings.json
#    baseUrl: https://dashscope.aliyuncs.com/compatible-mode/v1
#    model:   qwen3-coder-plus   (set DASHSCOPE_API_KEY)

# 4. Add a QWEN.md and wire the Figma MCP server (optional)
#    add MCP under "mcpServers" in ~/.qwen/settings.json

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

El flujo de trabajo de referencia a interfaz

El bucle de diseño de mayor impacto con Qwen Code es convertir una referencia en una interfaz funcional y adaptable e iterar hasta que coincida, apoyándose en el agente para construir, renderizar y comparar su salida con la referencia.

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

Referencia un archivo con @ para adjuntarlo al prompt, y luego da restricciones concretas:

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

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

QWEN.md, MCP y extensiones

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

• Contexto de QWEN.md: Las reglas del proyecto viven en un QWEN.md en la raíz del repositorio (con capas global y de proyecto). Es el hogar duradero de tus convenciones de diseño, leído en cada ejecución.
• Servidores MCP: Configura servidores MCP bajo mcpServers en ~/.qwen/settings.json: la forma portátil de incorporar contexto de diseño y herramientas externas, sobre todo el servidor MCP de Figma, que funcionan entre agentes, no solo en Qwen Code.
• Skills y herramientas integradas: Los skills de Qwen Code y sus herramientas integradas de archivos, shell y web le permiten reunir referencias y ejecutar el bucle de verificación sin salir de la terminal.

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

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

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

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

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

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

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

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

Diseñar con Qwen Code dentro de Open Design

Open Design es la capa de diseño de código abierto que el flujo de trabajo anterior no deja de pedir. Trata a Qwen Code como un adaptador de primera categoría y lo envuelve en una biblioteca curada de skills y sistemas de diseño, una canalización de renderizado estructurada y una interfaz de escritorio local, de modo que el contexto de diseño que hace bueno a Qwen Code está ahí desde la primera ejecución, no ensamblado a mano cada vez. Ambos son de código abierto y local-first, lo que hace que la combinación encaje de forma natural.

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

El mismo agente Qwen Code, la misma clave, más 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.

Preguntas frecuentes

1. 01 ¿Puede Qwen Code hacer realmente trabajo de diseño? +

   Sí: con un skill estético, un sistema de diseño e imágenes de referencia reales en contexto, Qwen Code produce interfaces adaptables de calidad de producción, y su bucle agéntico construye, renderiza y verifica la salida frente a las referencias. Sin ese contexto tiende a recurrir a un aspecto genérico, que es la brecha que Open Design rellena.

2. 02 ¿Tengo que pagar para diseñar con Qwen Code? +

   Qwen Code es gratuito y de código abierto, pero es BYOK: traes una clave de API de DashScope (Alibaba Cloud Model Studio), un endpoint compatible con OpenAI o ModelScope. Alibaba también ofrece un plan de programación de tarifa fija. Open Design nunca actúa de intermediario con tus credenciales en ningún caso.

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

   Dos cosas: los modelos Qwen3-Coder están ajustados para programación agéntica, así que el agente construye y autocorrige interfaces adaptables, y su gran contexto puede mantener un sistema de diseño y un conjunto de referencias enteros a la vez. Ambas ayudan, pero el buen gusto sigue proviniendo del sistema de diseño, el skill y las referencias que tú aportas.

4. 04 ¿Qwen Code es lo mismo que Gemini CLI? +

   No. Qwen Code está adaptado de Gemini CLI de Google —el mismo linaje de código abierto— con adaptaciones a nivel de parser y de prompt que lo ajustan para los modelos Qwen3-Coder. Open Design admite ambos, así que puedes cambiar de agente sin cambiar tu flujo de trabajo de diseño.

5. 05 ¿Cómo conecto Qwen Code con Figma? +

   Añade el servidor MCP de Figma bajo mcpServers en ~/.qwen/settings.json. Qwen Code puede entonces extraer contexto de diseño real —componentes, variables, datos de maquetación— para que el código generado coincida con la fuente en lugar de aproximarla.

6. 06 ¿Open Design está afiliado a Alibaba o Qwen? +

   No. Qwen Code es un producto de Alibaba; Open Design es un proyecto independiente de código abierto que lo admite como adaptador de primera categoría. Qwen es una marca comercial de Alibaba.

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

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