Qwen Code cho thiết kế.

Qwen Code thực chất là gì

Qwen Code là một agent AI mã nguồn mở (Apache-2.0) mà Alibaba phát hành cho terminal. Nó đọc repo của bạn, chỉnh sửa file, chạy lệnh shell, và làm việc với web — lập kế hoạch và kiểm chứng công việc từ các tác vụ ngôn ngữ tự nhiên thay vì chỉ hoàn thiện từng dòng. Nó được phỏng theo Gemini CLI của Google, với các điều chỉnh ở tầng parser và prompt được tinh chỉnh để khai thông các mô hình Qwen3-Coder trên các tác vụ lập trình agentic.

Với công việc thiết kế, hai đặc tính nổi bật. Nó là một mô hình lập trình agentic có năng lực, nên nó có thể nhận một tài liệu tham chiếu và một brief rõ ràng để dựng, chạy và tự sửa UI responsive. Và các mô hình Qwen3-Coder mang một cửa sổ ngữ cảnh lớn, đủ để giữ cả hệ thống thiết kế, thư viện component và bộ tham chiếu của bạn cùng lúc thay vì tóm lược chúng đi.

• File ngữ cảnh: Qwen Code đọc một file QWEN.md để có ngữ cảnh dự án bền vững — nơi tự nhiên để mã hóa quy ước thiết kế, token và danh mục rà soát của bạn. Cấu hình cá nhân và cấu hình dự án xếp chồng lên trên.
• Công cụ tích hợp sẵn + MCP: Nó tích hợp sẵn các công cụ file, shell và web, và hỗ trợ MCP server (cấu hình dưới mcpServers trong ~/.qwen/settings.json) để thêm ngữ cảnh bên ngoài như một file Figma trực tiếp.
• BYOK để bắt đầu: Bạn mang khóa của riêng mình — một khóa API DashScope (Alibaba Cloud Model Studio), hoặc bất kỳ endpoint tương thích OpenAI nào hay ModelScope — và cấu hình nó trong settings.json.

• Nhà cung cấp: Alibaba
• Thông tin xác thực: khóa API DashScope / Qwen (BYOK), hoặc endpoint tương thích OpenAI / ModelScope
• Giấy phép: Apache-2.0, mã nguồn mở (phỏng theo Gemini CLI)

Vì sao một mô hình lập trình mạnh và một ngữ cảnh lớn phù hợp với thiết kế

Lợi thế thiết kế của Qwen Code đến từ hai đặc tính — nhưng, như với mọi agent, gu thẩm mỹ vẫn phải do bạn cung cấp.

• Lập trình agentic mạnh: Các mô hình Qwen3-Coder được tinh chỉnh cho các tác vụ agentic, nên agent lập kế hoạch, chỉnh sửa, chạy build và tự sửa — biến một tài liệu tham chiếu và brief rõ ràng thành markup responsive thay vì một phỏng đoán một-lượt.
• Một cửa sổ ngữ cảnh lớn: Ngữ cảnh lớn của Qwen3-Coder nghĩa là cả hệ thống thiết kế, token và nhiều trạng thái tham chiếu vừa khít cùng lúc, nên agent tái sử dụng các primitive thật của bạn thay vì tự bịa ra những kiểu dùng-một-lần.
• Quy ước trong QWEN.md: Một QWEN.md (cùng Figma MCP server) chỉ cho agent đến token, component và spec thật của bạn, nên nó làm việc theo một thương hiệu thay vì một vẻ ngoài mặc định.

Bài học vẫn là điều mà mọi agent đều dạy: Qwen Code mặc định không có gu thẩm mỹ. Nó tạo ra thiết kế tốt khi bạn cung cấp các ràng buộc — một hệ thống thiết kế, một skill thẩm mỹ và các tài liệu tham chiếu cụ thể. Open Design đóng gói chính xác những đầu vào đó, đó là lý do hai bên ăn khớp với nhau (chi tiết bên dưới).

Thiết lập Qwen Code cho công việc thiết kế, từ con số không

Dưới đây là toàn bộ chặng đường từ một máy sạch đến một Qwen Code có thể dựng và kiểm chứng 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

• Mã hóa các quy tắc thiết kế của bạn: Đặt token, primitive và quy ước của bạn vào QWEN.md và chỉ Qwen Code đến chúng, để kết quả khớp với một thương hiệu thay vì mặc định trở về một vẻ ngoài chung chung.
• Thêm kiểm chứng trên trình duyệt: Kết nối một Playwright hoặc browser MCP để Qwen Code render trên trình duyệt thật và kiểm tra kết quả qua các breakpoint, thay vì chỉ xác nhận build thành công.

Quy trình từ tham chiếu sang UI

Vòng lặp thiết kế có đòn bẩy cao nhất với Qwen Code là biến một tài liệu tham chiếu thành UI hoạt động, responsive và lặp lại cho đến khi khớp — dựa vào agent để dựng, render và so sánh kết quả với tài liệu tham chiếu.

1. Bắt đầu từ các tài liệu tham chiếu trực quan rõ ràng nhất bạn có — và mô tả nhiều trạng thái (desktop và mobile, hover, rỗng, đang tải), không chỉ một ảnh hero.
2. Hãy cụ thể trong prompt; prompt mơ hồ tạo ra UI chung chung ngay cả với một mô hình mạnh.
3. Giữ hệ thống thiết kế và quy ước của bạn trong QWEN.md, và cho Qwen Code biết token cùng các primitive chuẩn nằm ở đâu.
4. Chạy một dev server và để Qwen Code render trên trình duyệt thật, đổi kích thước về các breakpoint để kiểm tra kết quả.
5. Lặp lại bằng cách để Qwen Code so sánh phần triển khai với các tài liệu tham chiếu — chứ không chỉ xác nhận nó build được.

Tham chiếu một file bằng @ để đính kèm nó vào prompt, rồi đưa ra các ràng buộc cụ thể:

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.

Giữ prompt ngắn gọn và tập trung, commit các lần lặp tốt và revert các lần lặp xấu (báo cho Qwen Code biết khi bạn revert), để mỗi lượt được dựng trên một nền sạch.

QWEN.md, MCP và phần mở rộng

Ba điểm mở rộng khiến Qwen Code khả dụng cho công việc thiết kế bền bỉ, và cả ba đều ánh xạ gọn gàng vào một quy trình thiết kế mở.

• Ngữ cảnh QWEN.md: Quy tắc dự án nằm trong một QWEN.md ở gốc repo (với lớp toàn cục và lớp dự án). Nó là nơi lưu giữ bền vững cho quy ước thiết kế của bạn, được đọc ở mỗi lần chạy.
• MCP server: Cấu hình MCP server dưới mcpServers trong ~/.qwen/settings.json — cách di động để đưa ngữ cảnh thiết kế và công cụ bên ngoài vào, tiêu biểu nhất là Figma MCP server, hoạt động xuyên các agent, không chỉ riêng Qwen Code.
• Skill và công cụ tích hợp: Các skill của Qwen Code cùng các công cụ file, shell và web tích hợp cho phép nó thu thập tài liệu tham chiếu và chạy vòng lặp kiểm chứng mà không rời terminal.

Đây là những năng lực di động, đa agent — đúng kiểu điều mà Open Design được xây để điều phối, thay vì tạo lại cho từng dự án.

Qwen Code so với Codex, Claude Code, Cursor và Gemini CLI cho thiết kế

Không có một người thắng duy nhất cho công việc thiết kế — mỗi agent có một thế mạnh khác nhau, và các đội ngũ giàu kinh nghiệm kết hợp chúng lại. Một tóm tắt công bằng:

Phán quyết lặp đi lặp lại của cộng đồng là gu thẩm mỹ đến từ con người: tất cả đều mặc định về một vẻ ngoài chung chung nếu thiếu skill, tài liệu tham chiếu và ràng buộc. Đó mới là vấn đề thực sự cần giải — và nó mang hình hài công cụ thiết kế, không phải hình hài mô hình.

Cạm bẫy, và cách tránh vẻ ngoài “AI làm cho có”

Lời than phiền phổ biến nhất về thiết kế do AI tạo ra là nó trông chung chung — gradient mềm, panel lơ lửng, bo góc quá khổ, đổ bóng kịch tính, một cảm giác Inter-và-tím “hét lên rằng do AI làm.” Các vấn đề khác được phản ánh gồm bố cục mobile vỡ và hướng dẫn lọt vào nội dung UI. Không điều nào trong số này là riêng có ở Qwen Code; chúng là điều xảy ra khi bất kỳ agent nào chạy mà thiếu một ngữ cảnh thiết kế được tuyển chọn.

• Thêm một skill thẩm mỹ: Một skill thiết kế được tuyển chọn buộc agent cam kết theo một hướng đi thực sự thay vì vẻ ngoài mặc định.
• Kiểm chứng trên trình duyệt thật: Để agent render và tự kiểm tra qua các breakpoint để bố cục không âm thầm vỡ trên mobile.
• Cung cấp token và tài liệu tham chiếu: Token thiết kế thật và ảnh chụp màn hình tham chiếu là đòn bẩy lớn nhất với chất lượng kết quả.
• Mã hóa quy tắc trong QWEN.md: Đặt các quy tắc kiểu “không dùng hero card, tối đa hai kiểu chữ, ưu tiên phân cấp theo thương hiệu” vào nơi agent đọc chúng ở mỗi lần chạy.

Hãy để ý rằng mọi biện pháp giảm thiểu đều xoay quanh việc cung cấp cho agent một ngữ cảnh thiết kế được tuyển chọn. Duy trì ngữ cảnh đó bằng tay, cho từng dự án, chính là sự cực nhọc mà Open Design loại bỏ.

Thiết kế với Qwen Code bên trong Open Design

Open Design là lớp thiết kế mã nguồn mở mà quy trình ở trên liên tục đòi hỏi. Nó coi Qwen Code như một adapter chính thức và bọc nó trong một thư viện skill và hệ thống thiết kế được tuyển chọn, một pipeline render có cấu trúc, và một giao diện desktop cục bộ — để ngữ cảnh thiết kế làm Qwen Code trở nên tốt luôn có sẵn từ lần chạy đầu tiên, chứ không phải lắp ráp bằng tay mỗi lần. Cả hai đều mã nguồn mở và ưu tiên cục bộ, điều khiến sự kết hợp trở nên ăn khớp tự nhiên.

1. Cài Open Design và chọn Qwen Code làm agent của bạn.
2. Xác thực bằng khóa API DashScope hoặc Qwen của bạn (BYOK) — thông tin xác thực ở lại trên máy bạn và không bao giờ được trung chuyển qua chúng tôi.
3. Chọn một hệ thống thiết kế và một skill, rồi tạo ra slide, prototype và landing page với gu thẩm mỹ nhất quán.
4. Mọi sản phẩm và file DESIGN.md sống trong repo của riêng bạn, không phải một đám mây được lưu trữ ở nơi khác.

Vẫn agent Qwen Code đó, vẫn khóa đó — cộng thêm một quy trình thiết kế thực sự, di động, mã nguồn mở bao quanh nó. Nó ưu tiên cục bộ và Apache-2.0, nên không có gì về công việc hay thông tin xác thực của bạn rời khỏi máy bạn.

Câu hỏi thường gặp

1. 01 Qwen Code có thực sự làm được công việc thiết kế không? +

   Có — với một skill thẩm mỹ, một hệ thống thiết kế và các ảnh tham chiếu thật trong ngữ cảnh, Qwen Code tạo ra UI responsive, chất lượng sản xuất, và vòng lặp agentic của nó dựng, render và kiểm chứng kết quả so với tài liệu tham chiếu. Thiếu ngữ cảnh đó, nó có xu hướng mặc định về một vẻ ngoài chung chung, đó chính là khoảng trống Open Design lấp đầy.

2. 02 Tôi có cần trả phí để thiết kế với Qwen Code không? +

   Qwen Code miễn phí và mã nguồn mở, nhưng nó theo kiểu BYOK — bạn mang một khóa API DashScope (Alibaba Cloud Model Studio), một endpoint tương thích OpenAI, hoặc ModelScope. Alibaba cũng cung cấp một gói lập trình phí cố định. Dù theo cách nào, Open Design cũng không bao giờ trung chuyển thông tin xác thực của bạn.

3. 03 Điều gì khiến Qwen Code tốt cho thiết kế nói riêng? +

   Hai điều: các mô hình Qwen3-Coder được tinh chỉnh cho lập trình agentic, nên agent dựng và tự sửa UI responsive, và ngữ cảnh lớn của chúng có thể giữ cả một hệ thống thiết kế và bộ tham chiếu cùng lúc. Cả hai đều có ích — nhưng gu thẩm mỹ vẫn đến từ hệ thống thiết kế, skill và tài liệu tham chiếu mà bạn cung cấp.

4. 04 Qwen Code có giống Gemini CLI không? +

   Không. Qwen Code được phỏng theo Gemini CLI của Google — cùng dòng dõi mã nguồn mở — với các điều chỉnh ở tầng parser và prompt để tinh chỉnh nó cho các mô hình Qwen3-Coder. Open Design hỗ trợ cả hai, nên bạn có thể đổi agent mà không phải thay đổi quy trình thiết kế của mình.

5. 05 Làm sao kết nối Qwen Code với Figma? +

   Thêm Figma MCP server dưới mcpServers trong ~/.qwen/settings.json. Qwen Code khi đó có thể kéo về ngữ cảnh thiết kế thật — component, biến, dữ liệu bố cục — để code được tạo khớp với nguồn thay vì phỏng đoán xấp xỉ.

6. 06 Open Design có liên kết với Alibaba hay Qwen không? +

   Không. Qwen Code là sản phẩm của Alibaba; Open Design là một dự án mã nguồn mở độc lập hỗ trợ nó như một adapter chính thức. Qwen là thương hiệu của Alibaba.

7. 07 File và thông tin xác thực của tôi có an toàn không? +

   Có — Open Design ưu tiên cục bộ và Apache-2.0. File, sản phẩm và DESIGN.md của bạn ở lại trong repo của riêng bạn, và thông tin xác thực DashScope hoặc Qwen của bạn được agent của bạn dùng trực tiếp, không bao giờ định tuyến qua máy chủ Open Design.