Qwen Code for design.

What Qwen Code actually is

Qwen Code is an open-source (Apache-2.0) AI agent that Alibaba ships for the terminal. It reads your repository, edits files, runs shell commands, and works the web — planning and verifying work from natural-language tasks rather than just completing lines. It is adapted from Google’s Gemini CLI, with parser-level and prompt adaptations tuned to unlock the Qwen3-Coder models on agentic coding tasks.

For design work, two properties stand out. It is a capable agentic coder, so it can take a reference and a clear brief and build, run, and self-correct responsive UI. And the Qwen3-Coder models carry a large context window, big enough to hold your whole design system, component library, and reference set at once instead of summarizing them away.

• Context files: Qwen Code reads a QWEN.md file for persistent project context — the natural place to encode your design conventions, tokens, and review checklists. Personal and project settings layer on top.
• Built-in tools + MCP: It ships file, shell, and web tools out of the box, and supports MCP servers (configured under mcpServers in ~/.qwen/settings.json) to add external context like a live Figma file.
• BYOK to start: You bring your own key — a DashScope (Alibaba Cloud Model Studio) API key, or any OpenAI-compatible endpoint or ModelScope — and configure it in settings.json.

• Vendor: Alibaba
• Credential: DashScope / Qwen API key (BYOK), or OpenAI-compatible endpoint / ModelScope
• License: Apache-2.0, open source (adapted from Gemini CLI)

Why a strong coder model and a big context fit design

Qwen Code’s design edge comes from two properties — but, as with every agent, taste still has to be supplied.

• Strong agentic coding: The Qwen3-Coder models are tuned for agentic tasks, so the agent plans, edits, runs the build, and self-corrects — turning a clear reference and brief into responsive markup rather than a one-shot guess.
• A large context window: Qwen3-Coder’s big context means the whole design system, tokens, and many reference states fit at once, so the agent reuses your real primitives rather than inventing one-off styles.
• Conventions in QWEN.md: A QWEN.md (plus the Figma MCP server) points the agent at your tokens, components, and real specs, so it works against a brand instead of a default look.

The lesson is the same one every agent teaches: Qwen Code does not have taste by default. It produces good design when you give it constraints — a design system, an aesthetic skill, and concrete references. Open Design packages exactly those inputs, which is why the two fit together (more below).

Set up Qwen Code for design work, from zero

Here is the full path from a clean machine to a Qwen Code that can build and verify 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

• Encode your design rules: Put your tokens, primitives, and conventions in QWEN.md and point Qwen Code at them, so output matches a brand instead of defaulting to a generic look.
• Add browser verification: Wire a Playwright or browser MCP so Qwen Code renders in a real browser and checks its output across breakpoints instead of only confirming the build passes.

The reference-to-UI workflow

The highest-leverage design loop with Qwen Code is turning a reference into working, responsive UI and iterating until it matches — leaning on the agent to build, render, and compare its output back to the reference.

1. Start from the clearest visual references you have — and describe multiple states (desktop and mobile, hover, empty, loading), not just one hero shot.
2. Be specific in the prompt; vague prompts produce generic UI even with a strong model.
3. Keep your design system and conventions in QWEN.md, and tell Qwen Code where the tokens and canonical primitives live.
4. Run a dev server and have Qwen Code render in a real browser, resizing to breakpoints to check the result.
5. Iterate by having Qwen Code compare its implementation back to the references — not merely confirm it builds.

Reference a file with @ to attach it to the prompt, then give concrete constraints:

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.

Keep prompts small and focused, commit good iterations and revert bad ones (telling Qwen Code when you revert), so each pass builds on a clean base.

QWEN.md, MCP, and extensions

Three extension points make Qwen Code practical for sustained design work, and all three map cleanly onto an open design workflow.

• QWEN.md context: Project rules live in a QWEN.md at the repo root (with global and project layers). It is the durable home for your design conventions, read on every run.
• MCP servers: Configure MCP servers under mcpServers in ~/.qwen/settings.json — the portable way to bring in design context and external tools, most relevantly the Figma MCP server, that work across agents, not just Qwen Code.
• Skills and built-in tools: Qwen Code skills and its built-in file, shell, and web tools let it gather references and run the verification loop without leaving the terminal.

These are portable, multi-agent capabilities — exactly the kind of thing Open Design is built to orchestrate, rather than re-create per project.

Qwen Code vs Codex vs Claude Code vs Cursor vs Gemini CLI for design

There is no single winner for design work — each agent has a different strength, and experienced teams stack them. A fair summary:

The recurring community verdict is that taste comes from humans: all of them default to a generic aesthetic without skills, references, and constraints. That is the real problem to solve — and it is design-tool-shaped, not model-shaped.

Pitfalls, and how to avoid the “AI slop” look

The most common complaint about AI-generated design is that it looks generic — soft gradients, floating panels, oversized rounded corners, dramatic shadows, an Inter-and-purple vibe that “screams an AI made this.” Other reported issues include broken mobile layouts and instructions leaking into UI copy. None of these are unique to Qwen Code; they are what happens when any agent runs without a curated design context.

• Add an aesthetic skill: A curated design skill forces the agent to commit to a real direction instead of the default look.
• Verify in a real browser: Have the agent render and self-check across breakpoints so layouts do not silently break on mobile.
• Supply tokens and references: Real design tokens and reference screenshots are the single biggest lever on output quality.
• Encode rules in QWEN.md: Put “no hero cards, max two typefaces, brand-first hierarchy” style rules where the agent reads them every run.

Notice that every mitigation is about giving the agent a curated design context. Maintaining that context by hand, per project, is the toil Open Design removes.

Designing with Qwen Code inside Open Design

Open Design is the open-source design layer the workflow above keeps asking for. It treats Qwen Code as a first-party adapter and wraps it in a curated skill and design-system library, a structured render pipeline, and a local desktop UI — so the design context that makes Qwen Code good is there from the first run, not assembled by hand each time. Both are open-source and local-first, which makes the pairing a natural fit.

1. Install Open Design and select Qwen Code as your agent.
2. Authenticate with your DashScope or Qwen API key (BYOK) — credentials stay on your machine and are never proxied through us.
3. Pick a design system and a skill, then generate decks, prototypes, and landing pages with consistent taste.
4. Every artifact and DESIGN.md file lives in your own repo, not a hosted cloud.

Same Qwen Code agent, same key — plus a real, portable, open-source design workflow around it. It is local-first and Apache-2.0, so nothing about your work or your credentials leaves your machine.

Frequently asked questions

1. 01 Can Qwen Code really do design work? +

   Yes — with an aesthetic skill, a design system, and real reference images in context, Qwen Code produces production-quality, responsive UI, and its agentic loop builds, renders, and verifies output against references. Without that context it tends to default to a generic look, which is the gap Open Design fills.

2. 02 Do I need to pay to design with Qwen Code? +

   Qwen Code is free and open-source, but it is BYOK — you bring a DashScope (Alibaba Cloud Model Studio) API key, an OpenAI-compatible endpoint, or ModelScope. Alibaba also offers a fixed-fee coding plan. Open Design never proxies your credentials either way.

3. 03 What makes Qwen Code good for design specifically? +

   Two things: the Qwen3-Coder models are tuned for agentic coding, so the agent builds and self-corrects responsive UI, and their large context can hold an entire design system and reference set at once. Both help — but taste still comes from the design system, skill, and references you supply.

4. 04 Is Qwen Code the same as Gemini CLI? +

   No. Qwen Code is adapted from Google’s Gemini CLI — same open-source lineage — with parser-level and prompt adaptations that tune it for the Qwen3-Coder models. Open Design supports both, so you can switch agents without changing your design workflow.

5. 05 How do I connect Qwen Code to Figma? +

   Add the Figma MCP server under mcpServers in ~/.qwen/settings.json. Qwen Code can then pull real design context — components, variables, layout data — so the generated code matches the source instead of approximating it.

6. 06 Is Open Design affiliated with Alibaba or Qwen? +

   No. Qwen Code is a product of Alibaba; Open Design is an independent open-source project that supports it as a first-party adapter. Qwen is a trademark of Alibaba.

7. 07 Are my files and credentials safe? +

   Yes — Open Design is local-first and Apache-2.0. Your files, artifacts, and DESIGN.md stay in your own repo, and your DashScope or Qwen credentials are used directly by your agent, never routed through Open Design servers.