FURTHER READING
Further Reading for Qwen
Published guide links to tutorials, documentation, and walkthroughs for Qwen design work.
Qwen 
OpenDesign Design With
Qwen in
OpenDesign.
How to design interfaces with Qwen Code in OpenDesign: a reference image as the input, QWEN.md as the rulebook, one team-calendar task from brief to reviewed file, and the limits to know before you start.
From brief to interface01 / Qwen
YOU BRING THE IDEA↗
“A team calendar that matches
the reference, with our tokens.”
THREE WAYS INTO THIS QWEN CODE GUIDE
Where to Begin With Qwen Code
THIS GUIDE · UI DESIGN
Build a Product Interface With Qwen Code
This guide covers a brief, references, design rules, and a reviewed HTML artifact.
Read this guide SETUPSet Up Qwen From Zero
From a clean machine to Qwen Code that builds and verifies UI: the full setup path.
Go to setup COMPARISONCompare Qwen With Other Agents
How Qwen Code compares with Codex, Claude Code, and Cursor for design work, and when another workflow fits better.
See the comparisonOn This Page Example
One Complete Qwen Design Task
A Qwen Code Design Task: Brief to Interface
This walkthrough follows one task: what you hand over as brief and constraints, the artifact Qwen Code returns, and the checks left before sign-off. The interface below is illustrative for this page, not a captured Qwen Code run.
1Design Brief and Constraints
BriefFrom the attached reference, design a team calendar week view: five days, working hours, colour-coded by calendar, plus a day agenda on phone. Cover desktop and phone.
- Design systemOpenDesign paper canvas: Albert Sans, one green accent
- BreakpointsDesktop at 1440px, mobile at 390px, with no horizontal scroll
- InteractionsWeek navigation, opening an event, calendar toggles, and a today jump
- OutputA single self-contained HTML file with stable
data-od-idhooks
2Who Does What: You, Qwen Code, and OpenDesign
- You
You write the brief, choose the design system, and set acceptance criteria.
- Qwen
Qwen Code plans the layout, writes HTML, CSS, and JavaScript, then revises on request.
- OpenDesign
OpenDesign supplies the design system and skill, renders the preview, and saves each version as a project file.
- Review
Before handoff, you check visual hierarchy, 8px-grid spacing, both breakpoints, and every interaction.
3Qwen Code Artifact: Team Calendar at 1440px and 390px
4Review Before Handoff
Layout
Grid and Spacing
Hour rows and day columns sit on the 8px grid; events align to the hour lines.
Hierarchy
Visual Hierarchy
Today and the focused event come first; the accent appears only on that event and today’s header.
Responsive
Mobile Layout
The week collapses to a day strip plus an agenda list; today stays selected.
Interaction
Interaction Checks
Test moving a week, opening an event, toggling a calendar, and jumping to today.
Fit
When Qwen Code Fits, and When It Does Not
Qwen Fits When
- Reference → UI. Strong agentic coding turns a clear reference and brief into responsive markup, then self-checks against that reference.
- Large context. A full design system, component library, and reference set fit together, letting output reuse your actual primitives.
- QWEN.md + MCP. Context files hold your conventions, while the Figma MCP server pulls real design context into code.
- Open and BYOK. Apache-2.0 and flexible on keys — DashScope or Qwen API key, an OpenAI-compatible endpoint, or ModelScope.
Choose Another Workflow When
- You need editable vector files. The output is HTML, not an editable design file. For your required asset format, look at a separate vector workflow.
- You have no reference and no constraints. Without a design system or examples, output drifts generic; start by writing the brief.
- You do not have the credential this agent needs. Required: DashScope / Qwen API key (bring your own key). OpenDesign neither provides nor proxies credentials.
- Your team works in Kimi or Qoder. Each of those agents has its own page and its own setup path. See related agents.
Compatibility
Qwen Requirements Before You Start
This page is about Qwen connected through the OpenDesign desktop app. Published references were checked on 6 September 2026.
Tool ScopeQwen, by Alibaba
Qwen Code is Alibaba’s open-source (Apache-2.0) terminal AI agent, adapted from Google’s Gemini CLI. It reads your codebase, edits files, runs commands, and works the web. This page focuses on designing interfaces with Qwen through OpenDesign, not on Qwen’s own interface. OpenDesign’s setup notes list the available agents.
Accounts and AuthenticationDashScope / Qwen API key (BYOK)
DashScope / Qwen API key (BYOK). Authenticate with your DashScope or Qwen API key (BYOK); credentials remain on your machine. No quota or price promise is made on this page.
System and VersionsDesktop app or source
Look to the download page for desktop builds. The Node.js and pnpm requirements in the source quickstart apply when running from source, not when installing a desktop package. Minimum compatible Qwen version: not verified here.
Connection CheckThe success signal
Use the connection instructions your installed version shows, then run a small task. Confirm Qwen handled it and the artifact opens. A download by itself does not prove a working connection.
Start with the desktop app
Qwen Setup in Three Steps
Start with the download, finish the Qwen setup for your installed version, then verify a small result. This path does not require building OpenDesign from source.
- 1
Download the OpenDesign Desktop App
Pick the package for your computer, install it, and open the app.
Download OpenDesignCHECKPOINTThe desktop app opens. If it is already installed, go to the next step — no second download needed. - 2
Prepare Your Qwen Connection
Follow the Qwen instructions that ship with your installed version. Authenticate with your DashScope or Qwen API key (BYOK); credentials stay on your machine.
Qwen Code documentation# 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.jsonFrom the Qwen setup notes in the published guide; confirm the current command in the vendor documentation.
CHECKPOINTVerify the agent and account you intend to use. If either is unavailable, review compatibility before attempting a larger task. - 3
Run One Small Qwen Task
Keep the brief small enough to judge the full loop, including one revision.
Starter briefBuild a settings screen with a profile form and save confirmation. Use my design rules. Check it at desktop and mobile widths.
CHECKPOINTOpen the result, test the save state, and ask for one specific change. A generated file still needs your review pass.
If you plan to run OpenDesign from source, follow the technical quickstart instead.
The Qwen design workflow
Qwen's Five-Step Design Workflow
Follow one team calendar task from the brief through to a verified file. Each step separates your input, Qwen Code's work, OpenDesign's role, and the check you perform.
- 1
Design Brief
Three to six plain lines are enough. State who the screen serves, what it must do, and which platforms matter.
- YouDraft the brief, and attach a reference screenshot when one exists.
- QwenReads the brief and the project's QWEN.md; asks a question if ambiguity remains.
- OpenDesignSupplies the project, the prompt surface, and the skill matched to the artifact type.
- CheckMake sure the brief names its acceptance criteria. It costs less to add them here than after generation.
- 2
Design Constraints
A design system plus a few firm rules. That combination is what keeps output on-brand instead of generic.
- YouChoose a design system; name the breakpoints and any components that must appear.
- QwenPulls the DESIGN.md tokens and posture rules into context before writing any code.
- OpenDesignProvides the design-system library and binds your selection into the skill template.
- CheckCheck that tokens match the brand: one accent, correct fonts, correct radius.
- 3
Generate the Interface
Qwen Code writes one self-contained HTML file: layout, styles, interactions, and stable hooks.
- YouWait, or answer a clarifying question. There is nothing to configure here.
- QwenPlans the sections, writes HTML, CSS, and JavaScript, runs the file, and fixes failures.
- OpenDesignStores the artifact in the project folder and indexes it for preview.
- CheckHold off. Judge the rendered file, not the source.
- 4
Preview
OpenDesign renders the file at the widths specified in the brief. This is where the design gets judged.
- YouChange widths, exercise the interactions, and leave comments on elements.
- QwenReads preview comments and lines up the next revision.
- OpenDesignRenders the preview and exposes
data-od-idtargets for comments and edits. - CheckCheck hierarchy, contrast, overflow at 390px, focus states, and whether the accent stays sparing.
- 5
Revise and Verify
Ask for changes by pointing at preview elements. Each revision becomes a new file; nothing is overwritten without notice.
- YouConvert comments into requests and decide when the task is complete.
- QwenApplies changes in place and runs the file again.
- OpenDesignKeeps versions side by side, and exports an image or the HTML once you finish.
- CheckRe-check the changed area only, then the full page once per breakpoint.
Resources
Qwen Design Resources
Skills Browse skills Design systems Browse systems Templates Browse templates
Design Skills
Artifact types Qwen Code can produce in OpenDesign, with one skill per type.
Design Systems
Brand tokens and components to bind before Qwen Code generates anything.
Templates
Starting points for decks, landing pages and product screens.
Limitations
Qwen's Limitations, Manual Checks, and Fallbacks
- ScopeThe page covers Qwen Code as an agent connected to OpenDesign, not every Qwen feature.
- Usage LimitsUsage limits and cost follow the credential you supply (DashScope / Qwen API key). No free-quota claim is made here.
- NetworkLocal project files do not equal offline inference. Check your agent's provider settings and data policies before sharing sensitive inputs.
- Output Is HTMLThe artifacts are HTML files; they are not vector design files.
- Manual ReviewYou review accessibility, real content, brand fit, and interaction correctness in the preview. Treat the agent's self-check as a first pass.
- FallbackWhen the agent is unavailable or a task fails, consult the installed version's connection instructions and authentication. Save the error and the last working artifact before altering configuration.
FAQ
Common Questions About Qwen and OpenDesign
Can Qwen Code Genuinely 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 OpenDesign fills.
Must I 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. OpenDesign never proxies your credentials either way.
What Specifically Makes Qwen Code Useful for Design?
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.
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. OpenDesign supports both, so you can switch agents without changing your design workflow.
How Can 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.
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.
Credential: DashScope / Qwen API key (BYOK), or OpenAI-compatible endpoint / ModelScope
License: Apache-2.0, open source (adapted from Gemini CLI)
Vendor: Alibaba
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.
Credential: DashScope / Qwen API key (BYOK), or OpenAI-compatible endpoint / ModelScope
License: Apache-2.0, open source (adapted from Gemini CLI)
Vendor: Alibaba
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.
Taste comes from three inputs you provide: a design system, a skill, and real reference images.
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. OpenDesign packages exactly those inputs, which is why the two fit together (more below).
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.
Taste comes from three inputs you provide: a design system, a skill, and real reference images.
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. OpenDesign packages exactly those inputs, which is why the two fit together (more below).
Set up Qwen Code for design work, from zero
The setup sequence: install → authenticate → configure QWEN.md → add a skill → enable browser verification.
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.
Use the current setup section for commands and version-specific details, which may change.
Historical command example from the previous guide; verify current syntax in the linked vendor documentation.
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.
Use the current setup section for commands and version-specific details, which may change.
# 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.jsonHistorical command example from the previous guide; verify current syntax in the linked vendor documentation.
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.
Start from the clearest visual references you have — and describe multiple states (desktop and mobile, hover, empty, loading), not just one hero shot.
Be specific in the prompt; vague prompts produce generic UI even with a strong model.
Keep your design system and conventions in QWEN.md, and tell Qwen Code where the tokens and canonical primitives live.
Run a dev server and have Qwen Code render in a real browser, resizing to breakpoints to check the result.
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:
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.
Historical command example from the previous guide; verify current syntax in the linked vendor documentation.
Start from the clearest visual references you have — and describe multiple states (desktop and mobile, hover, empty, loading), not just one hero shot.
Be specific in the prompt; vague prompts produce generic UI even with a strong model.
Keep your design system and conventions in QWEN.md, and tell Qwen Code where the tokens and canonical primitives live.
Run a dev server and have Qwen Code render in a real browser, resizing to breakpoints to check the result.
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:
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
# 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.Historical command example from the previous guide; verify current syntax in the linked vendor documentation.
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 OpenDesign is built to orchestrate, rather than re-create per project.
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 OpenDesign 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:
Qwen Code — Strong agentic coding on the open Qwen3-Coder models with a large context; open-source and BYOK — Open-source, key-flexible builds that hold a whole design system in context
Codex — Strong visual polish with a frontend skill; sandboxed async builds — Delegated async builds and portable AGENTS.md rules
Claude Code — Specific design decisions (hex, spacing, type) and codebase-aware UX — Frontend reasoning and large-context refactors
Cursor — Visual build-and-see loop with live preview and inline edits — Tight iterate-and-watch UI work inside an IDE
Gemini CLI — Strong multimodal image understanding and a 1M-token context; the agent Qwen Code is adapted from — Screenshot-heavy work and very large context
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.
Agent — Design strength — Best for
Qwen Code — Strong agentic coding on the open Qwen3-Coder models with a large context; open-source and BYOK — Open-source, key-flexible builds that hold a whole design system in context
Codex — Strong visual polish with a frontend skill; sandboxed async builds — Delegated async builds and portable AGENTS.md rules
Claude Code — Specific design decisions (hex, spacing, type) and codebase-aware UX — Frontend reasoning and large-context refactors
Cursor — Visual build-and-see loop with live preview and inline edits — Tight iterate-and-watch UI work inside an IDE
Gemini CLI — Strong multimodal image understanding and a 1M-token context; the agent Qwen Code is adapted from — Screenshot-heavy work and very large context
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.
Agent — Design strength — Best for
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 OpenDesign removes.
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 OpenDesign removes.
Designing with Qwen Code inside OpenDesign
OpenDesign 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.
Authenticate with your DashScope or Qwen API key (BYOK) — credentials stay on your machine and are never proxied through us.
Pick a design system and a skill, then generate decks, prototypes, and landing pages with consistent taste.
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.
Install OpenDesign and select Qwen Code as your agent.
Authenticate with your DashScope or Qwen API key (BYOK) — credentials stay on your machine and are never proxied through us.
Pick a design system and a skill, then generate decks, prototypes, and landing pages with consistent taste.
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.
Install OpenDesign and select Qwen Code as your agent.
Is OpenDesign affiliated with Alibaba or Qwen?
No. OpenDesign is independent; Qwen is a trademark of Alibaba.
Begin a First Design Task With Qwen
Begin with a small task, judge the round trip, then bring the real brief. Choose the option that matches your setup; the page will not detect it.