Qwen Code per il design.

Cos'è davvero Qwen Code

Qwen Code è un agente IA open-source (Apache-2.0) che Alibaba distribuisce per il terminale. Legge il tuo repository, modifica i file, esegue comandi shell e lavora sul web — pianificando e verificando il lavoro a partire da attività in linguaggio naturale invece di limitarsi a completare righe. È adattato da Gemini CLI di Google, con adattamenti a livello di parser e di prompt calibrati per sbloccare i modelli Qwen3-Coder sui compiti di coding agentico.

Per il lavoro di design spiccano due proprietà. È un coder agentico capace, quindi può prendere un riferimento e un brief chiaro e costruire, eseguire e auto-correggere una UI responsive. E i modelli Qwen3-Coder hanno un'ampia finestra di contesto, abbastanza grande da tenere in una sola volta l'intero design system, la libreria di componenti e il set di riferimenti invece di riassumerli via.

• File di contesto: Qwen Code legge un file QWEN.md per un contesto di progetto persistente — il posto naturale dove codificare le tue convenzioni di design, i token e le checklist di revisione. Le impostazioni personali e di progetto si sovrappongono sopra.
• Strumenti integrati + MCP: Include pronti all'uso strumenti per file, shell e web, e supporta server MCP (configurati sotto mcpServers in ~/.qwen/settings.json) per aggiungere contesto esterno come un file Figma live.
• BYOK per iniziare: Porti la tua chiave — un'API key DashScope (Alibaba Cloud Model Studio), o un qualsiasi endpoint compatibile con OpenAI o ModelScope — e la configuri in settings.json.

• Fornitore: Alibaba
• Credenziale: API key DashScope / Qwen (BYOK), o endpoint compatibile con OpenAI / ModelScope
• Licenza: Apache-2.0, open source (adattato da Gemini CLI)

Perché un modello coder forte e un grande contesto si adattano al design

Il vantaggio di Qwen Code nel design deriva da due proprietà — ma, come per ogni agente, il gusto va comunque fornito.

• Coding agentico forte: I modelli Qwen3-Coder sono calibrati per compiti agentici, quindi l'agente pianifica, modifica, esegue la build e si auto-corregge — trasformando un riferimento e un brief chiari in markup responsive invece di un'ipotesi one-shot.
• Un'ampia finestra di contesto: Il grande contesto di Qwen3-Coder significa che l'intero design system, i token e molti stati di riferimento entrano in una sola volta, così l'agente riutilizza le tue primitive reali invece di inventare stili una tantum.
• Convenzioni in QWEN.md: Un QWEN.md (più il server MCP Figma) indirizza l'agente verso i tuoi token, componenti e specifiche reali, così lavora su un brand invece che su un aspetto di default.

La lezione è la stessa che insegna ogni agente: Qwen Code non ha gusto di default. Produce un buon design quando gli dai vincoli — un design system, una skill estetica e riferimenti concreti. Open Design impacchetta esattamente quegli input, ed è per questo che i due si combinano bene (più avanti).

Configurare Qwen Code per il lavoro di design, da zero

Ecco il percorso completo da una macchina pulita a un Qwen Code capace di costruire e verificare UI.

# 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 le tue regole di design: Metti i tuoi token, le primitive e le convenzioni in QWEN.md e indirizza Qwen Code verso di essi, così l'output corrisponde a un brand invece di ricadere su un aspetto generico.
• Aggiungi la verifica nel browser: Collega un MCP Playwright o un browser MCP così Qwen Code renderizza in un browser reale e controlla il suo output ai vari breakpoint invece di limitarsi a confermare che la build passa.

Il flusso di lavoro reference-to-UI

Il ciclo di design a maggiore leva con Qwen Code consiste nel trasformare un riferimento in una UI funzionante e responsive e iterare finché non corrisponde — appoggiandosi all'agente per costruire, renderizzare e confrontare il suo output con il riferimento.

1. Parti dai riferimenti visivi più chiari che hai — e descrivi più stati (desktop e mobile, hover, vuoto, caricamento), non solo uno scatto hero.
2. Sii specifico nel prompt; i prompt vaghi producono UI generiche anche con un modello forte.
3. Mantieni il tuo design system e le convenzioni in QWEN.md, e indica a Qwen Code dove vivono i token e le primitive canoniche.
4. Avvia un dev server e fai renderizzare Qwen Code in un browser reale, ridimensionando ai breakpoint per controllare il risultato.
5. Itera facendo confrontare a Qwen Code la sua implementazione con i riferimenti — non limitarti a confermare che fa la build.

Riferisci un file con @ per allegarlo al prompt, poi fornisci vincoli concreti:

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.

Mantieni i prompt piccoli e mirati, fai commit delle buone iterazioni e ripristina quelle cattive (dicendo a Qwen Code quando fai un revert), così ogni passaggio parte da una base pulita.

QWEN.md, MCP ed estensioni

Tre punti di estensione rendono Qwen Code pratico per un lavoro di design continuativo, e tutti e tre si mappano in modo pulito su un flusso di lavoro di design aperto.

• Contesto QWEN.md: Le regole del progetto vivono in un QWEN.md alla radice del repository (con livelli globale e di progetto). È la sede stabile per le tue convenzioni di design, letta a ogni esecuzione.
• Server MCP: Configura i server MCP sotto mcpServers in ~/.qwen/settings.json — il modo portatile per portare contesto di design e strumenti esterni, in particolare il server MCP Figma, che funzionano tra agenti diversi e non solo con Qwen Code.
• Skill e strumenti integrati: Le skill di Qwen Code e i suoi strumenti integrati per file, shell e web gli permettono di raccogliere riferimenti ed eseguire il ciclo di verifica senza lasciare il terminale.

Sono capacità portatili e multi-agente — esattamente il tipo di cosa che Open Design è costruito per orchestrare, invece di ricrearle per ogni progetto.

Qwen Code vs Codex vs Claude Code vs Cursor vs Gemini CLI per il design

Non c'è un unico vincitore per il lavoro di design — ogni agente ha un punto di forza diverso, e i team esperti li combinano. Un riepilogo onesto:

Il verdetto ricorrente della community è che il gusto viene dagli esseri umani: tutti ricadono su un'estetica generica senza skill, riferimenti e vincoli. Questo è il vero problema da risolvere — ed è a forma di strumento di design, non di modello.

Insidie, e come evitare l'estetica da “AI slop”

La lamentela più comune sul design generato dall'IA è che sembra generico — gradienti morbidi, pannelli fluttuanti, angoli arrotondati sovradimensionati, ombre drammatiche, un'atmosfera Inter-e-viola che “grida che l'ha fatto un'IA”. Altri problemi segnalati includono layout mobile rotti e istruzioni che si infiltrano nei testi della UI. Nessuno di questi è esclusivo di Qwen Code; sono ciò che accade quando un qualsiasi agente gira senza un contesto di design curato.

• Aggiungi una skill estetica: Una skill di design curata costringe l'agente a impegnarsi su una direzione reale invece dell'aspetto di default.
• Verifica in un browser reale: Fai renderizzare e auto-controllare all'agente ai vari breakpoint così i layout non si rompono silenziosamente sul mobile.
• Fornisci token e riferimenti: I token di design reali e gli screenshot di riferimento sono la singola leva più grande sulla qualità dell'output.
• Codifica le regole in QWEN.md: Metti regole di stile come “niente hero card, massimo due caratteri tipografici, gerarchia brand-first” dove l'agente le legge a ogni esecuzione.

Nota che ogni mitigazione consiste nel dare all'agente un contesto di design curato. Mantenere quel contesto a mano, per ogni progetto, è la fatica che Open Design elimina.

Progettare con Qwen Code dentro Open Design

Open Design è il layer di design open-source che il flusso di lavoro qui sopra continua a richiedere. Tratta Qwen Code come un adattatore di prima parte e lo avvolge in una libreria curata di skill e design system, in una pipeline di rendering strutturata e in una UI desktop locale — così il contesto di design che rende bravo Qwen Code è presente dalla prima esecuzione, non assemblato a mano ogni volta. Entrambi sono open-source e local-first, il che rende l'abbinamento un connubio naturale.

1. Installa Open Design e seleziona Qwen Code come tuo agente.
2. Autenticati con la tua API key DashScope o Qwen (BYOK) — le credenziali restano sulla tua macchina e non transitano mai tramite di noi.
3. Scegli un design system e una skill, poi genera deck, prototipi e landing page con un gusto coerente.
4. Ogni artefatto e ogni file DESIGN.md vive nel tuo repository, non in un cloud ospitato.

Stesso agente Qwen Code, stessa chiave — più un flusso di lavoro di design reale, portatile e open-source intorno a esso. È local-first e Apache-2.0, quindi nulla del tuo lavoro o delle tue credenziali lascia la tua macchina.

Domande frequenti

1. 01 Qwen Code può davvero fare lavoro di design? +

   Sì — con una skill estetica, un design system e immagini di riferimento reali nel contesto, Qwen Code produce UI responsive di qualità produttiva, e il suo ciclo agentico costruisce, renderizza e verifica l'output rispetto ai riferimenti. Senza quel contesto tende a ricadere su un aspetto generico, ed è il divario che colma Open Design.

2. 02 Devo pagare per progettare con Qwen Code? +

   Qwen Code è gratuito e open-source, ma è BYOK — porti un'API key DashScope (Alibaba Cloud Model Studio), un endpoint compatibile con OpenAI o ModelScope. Alibaba offre anche un piano di coding a tariffa fissa. Open Design non fa mai da proxy alle tue credenziali in entrambi i casi.

3. 03 Cosa rende Qwen Code adatto specificamente al design? +

   Due cose: i modelli Qwen3-Coder sono calibrati per il coding agentico, quindi l'agente costruisce e auto-corregge una UI responsive, e il loro ampio contesto può tenere in una sola volta un intero design system e set di riferimenti. Entrambe aiutano — ma il gusto viene comunque dal design system, dalla skill e dai riferimenti che fornisci tu.

4. 04 Qwen Code è lo stesso di Gemini CLI? +

   No. Qwen Code è adattato da Gemini CLI di Google — stessa discendenza open-source — con adattamenti a livello di parser e di prompt che lo calibrano per i modelli Qwen3-Coder. Open Design supporta entrambi, così puoi cambiare agente senza modificare il tuo flusso di lavoro di design.

5. 05 Come collego Qwen Code a Figma? +

   Aggiungi il server MCP Figma sotto mcpServers in ~/.qwen/settings.json. Qwen Code può quindi recuperare contesto di design reale — componenti, variabili, dati di layout — così il codice generato corrisponde alla fonte invece di approssimarla.

6. 06 Open Design è affiliato ad Alibaba o Qwen? +

   No. Qwen Code è un prodotto di Alibaba; Open Design è un progetto open-source indipendente che lo supporta come adattatore di prima parte. Qwen è un marchio di Alibaba.

7. 07 I miei file e le mie credenziali sono al sicuro? +

   Sì — Open Design è local-first e Apache-2.0. I tuoi file, gli artefatti e DESIGN.md restano nel tuo repository, e le tue credenziali DashScope o Qwen sono usate direttamente dal tuo agente, mai instradate attraverso i server di Open Design.