デザインのための Qwen Code。

Qwen Code とは実際に何か

Qwen Code は Alibaba がターミナル向けに提供するオープンソース（Apache-2.0）の AI エージェントです。リポジトリを読み取り、ファイルを編集し、シェルコマンドを実行し、ウェブを操作します。行を補完するだけでなく、自然言語のタスクから計画し作業を検証します。Google の Gemini CLI を基に、パーサーレベルとプロンプトの適応を加え、エージェント型コーディングタスクで Qwen3-Coder モデルを解き放つようにチューニングされています。

デザイン作業では二つの特性が際立ちます。有能なエージェント型コーダーであるため、参照素材と明確なブリーフを受け取れば、レスポンシブな UI を構築・実行・自己修正できること。そして Qwen3-Coder モデルは大きなコンテキストウィンドウを備え、デザインシステム、コンポーネントライブラリ、参照セット全体を要約して切り捨てるのではなく一度に保持できるほど大きいことです。

• コンテキストファイル: Qwen Code は永続的なプロジェクトコンテキストとして QWEN.md ファイルを読み取ります。ここがデザイン規約・トークン・レビューチェックリストをエンコードする自然な場所です。個人設定とプロジェクト設定がその上に重なります。
• 組み込みツール＋MCP: ファイル、シェル、ウェブのツールを標準で備え、MCP サーバー（~/.qwen/settings.json の mcpServers 配下で設定）をサポートして、ライブの Figma ファイルのような外部コンテキストを追加できます。
• BYOK で開始: 自分のキーを持ち込みます。DashScope（Alibaba Cloud Model Studio）API キー、もしくは任意の OpenAI 互換エンドポイントや ModelScope を、settings.json で設定します。

• ベンダー：Alibaba
• 認証情報：DashScope / Qwen API キー（BYOK）、または OpenAI 互換エンドポイント / ModelScope
• ライセンス：Apache-2.0、オープンソース（Gemini CLI を基に適応）

なぜ強力なコーダーモデルと大きなコンテキストがデザインに合うのか

Qwen Code のデザイン上の強みは二つの特性から来ます。ただし、どのエージェントでも同じく、センスは人間が供給しなければなりません。

• 強力なエージェント型コーディング: Qwen3-Coder モデルはエージェント型タスク向けにチューニングされているため、エージェントは計画し、編集し、ビルドを実行し、自己修正します。明確な参照素材とブリーフを、一発の当て推量ではなくレスポンシブなマークアップへ変えます。
• 大きなコンテキストウィンドウ: Qwen3-Coder の大きなコンテキストは、デザインシステム全体、トークン、多数の参照状態を一度に収められることを意味します。そのためエージェントは一回限りのスタイルを発明せず、あなたの本物のプリミティブを再利用します。
• QWEN.md の規約: QWEN.md（に加えて Figma MCP サーバー）がエージェントをあなたのトークン・コンポーネント・本物の仕様へ向けるので、既定の見た目ではなくブランドに沿って作業します。

教訓はどのエージェントも示すものと同じです。Qwen Code は既定ではセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照素材 — を与えたときに、良いデザインを生み出します。Open Design はまさにそれらの入力をパッケージ化しており、だからこそ両者は噛み合います（詳しくは後述）。

デザイン作業のために Qwen Code をゼロからセットアップする

まっさらなマシンから、UI を構築・検証できる Qwen Code までの全行程はこちらです。

# 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

• デザインルールをエンコードする: トークン・プリミティブ・規約を QWEN.md に入れ、Qwen Code をそこへ向けます。そうすれば出力が平凡な既定の見た目に落ちるのではなく、ブランドに合致します。
• ブラウザ検証を追加する: Playwright またはブラウザ MCP を接続し、Qwen Code が本物のブラウザで描画してブレークポイント横断で出力を確認するようにします。ビルドが通ることを確認するだけで終わらせないために。

参照から UI へのワークフロー

Qwen Code で最もレバレッジの高いデザインループは、参照素材を動作するレスポンシブな UI に変え、一致するまで反復することです。エージェントに構築・描画させ、出力を参照と照らし合わせさせます。

1. 手元にある最も明確なビジュアル参照から始めましょう。そして 1 枚のヒーロー画像だけでなく、複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を記述します。
2. プロンプトでは具体的に。曖昧なプロンプトは、強力なモデルでも平凡な UI を生みます。
3. デザインシステムと規約を QWEN.md に保持し、トークンと正規のプリミティブがどこにあるかを Qwen Code に伝えます。
4. 開発サーバーを起動し、Qwen Code に本物のブラウザで描画させ、ブレークポイントへリサイズして結果を確認させます。
5. Qwen Code に実装を参照と照らし合わせさせて反復します。単にビルドが通ることを確認するだけにしません。

@ でファイルを参照してプロンプトに添付し、具体的な制約を与えます：

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.

プロンプトは小さく焦点を絞り、良い反復はコミットし、悪い反復はリバートして（リバートした際は Qwen Code に伝えて）、各パスがきれいなベースの上に積み上がるようにします。

QWEN.md、MCP、拡張機能

三つの拡張ポイントが Qwen Code を継続的なデザイン作業に実用的にし、そのいずれもオープンなデザインワークフローへきれいに対応します。

• QWEN.md のコンテキスト: プロジェクトのルールはリポジトリのルートにある QWEN.md に存在します（グローバル層とプロジェクト層あり）。これはあなたのデザイン規約の永続的な置き場であり、実行のたびに読まれます。
• MCP サーバー: ~/.qwen/settings.json の mcpServers 配下で MCP サーバーを設定します。これはデザインコンテキストや外部ツール、最も関連が深いものとしては Figma MCP サーバーを持ち込むためのポータブルな手段で、Qwen Code に限らず複数のエージェント間で機能します。
• スキルと組み込みツール: Qwen Code のスキルと、組み込みのファイル・シェル・ウェブツールにより、ターミナルを離れずに参照素材を集め、検証ループを回せます。

これらはポータブルでマルチエージェント対応の機能であり、まさに Open Design がプロジェクトごとに作り直すのではなくオーケストレーションするために作られたものです。

デザインにおける Qwen Code 対 Codex 対 Claude Code 対 Cursor 対 Gemini CLI

デザイン作業に唯一の勝者はいません。各エージェントには異なる強みがあり、経験豊富なチームはそれらを重ねて使います。公平にまとめると：

コミュニティで繰り返される結論は、センスは人間から来るというものです。スキル・参照素材・制約がなければ、どれも平凡な美的傾向に落ちます。それこそが解くべき本当の課題であり、それはモデルの形ではなくデザインツールの形をしています。

落とし穴と「AI スロップ」感を避ける方法

AI 生成デザインに対する最も一般的な不満は、平凡に見えるというものです。ぼんやりしたグラデーション、浮いたパネル、過大な角丸、大げさな影、「AI が作ったと叫ぶ」ような Inter とパープルの雰囲気。報告されている他の問題には、崩れたモバイルレイアウトや、指示文が UI コピーに漏れ出ることなどがあります。これらはどれも Qwen Code 固有のものではなく、どのエージェントであれキュレーションされたデザインコンテキストなしで動かしたときに起こることです。

• 美的スキルを追加する: キュレーション済みのデザインスキルは、エージェントに既定の見た目ではなく本物の方向性へ踏み込ませます。
• 本物のブラウザで検証する: エージェントにブレークポイント横断で描画・自己チェックさせ、モバイルでレイアウトが静かに崩れないようにします。
• トークンと参照素材を供給する: 本物のデザイントークンと参照スクリーンショットは、出力品質に対する単一で最大のレバーです。
• QWEN.md にルールをエンコードする: 「ヒーローカードは禁止、書体は最大 2 種、ブランド優先の階層」といった様式ルールを、エージェントが実行のたびに読む場所に入れます。

どの緩和策も、エージェントにキュレーションされたデザインコンテキストを与えることに尽きる点に注目してください。そのコンテキストをプロジェクトごとに手作業で維持すること、それこそ Open Design が取り除く骨折り仕事です。

Open Design の中で Qwen Code を使ってデザインする

Open Design は、上記のワークフローが繰り返し求めてくるオープンソースのデザイン層です。Qwen Code をファーストパーティのアダプターとして扱い、キュレーション済みのスキルとデザインシステムのライブラリ、構造化されたレンダリングパイプライン、ローカルなデスクトップ UI でそれを包みます。だから Qwen Code を良くするデザインコンテキストが、毎回手作業で組み立てるのではなく、最初の実行から揃っています。両者ともオープンソースでローカルファーストなので、この組み合わせは自然です。

1. Open Design をインストールし、エージェントとして Qwen Code を選びます。
2. あなたの DashScope または Qwen API キー（BYOK）で認証します。認証情報はあなたのマシンに留まり、私たちを経由してプロキシされることはありません。
3. デザインシステムとスキルを選び、一貫したセンスでデッキ・プロトタイプ・ランディングページを生成します。
4. すべての成果物と DESIGN.md ファイルは、ホスト型クラウドではなくあなた自身のリポジトリに存在します。

同じ Qwen Code エージェント、同じキー。そこに本物でポータブルなオープンソースのデザインワークフローが加わります。ローカルファーストで Apache-2.0 なので、あなたの作業や認証情報に関する何も、マシンの外へ出ません。

よくある質問

1. 01 Qwen Code は本当にデザイン作業をこなせますか？ +

   はい。美的スキル、デザインシステム、そして本物の参照画像をコンテキストに入れれば、Qwen Code は本番品質のレスポンシブな UI を生み出し、そのエージェント型ループが出力を参照に対して構築・描画・検証します。そのコンテキストがないと平凡な見た目に落ちがちで、それこそ Open Design が埋めるギャップです。

2. 02 Qwen Code でデザインするのに料金は必要ですか？ +

   Qwen Code は無料でオープンソースですが、BYOK です。DashScope（Alibaba Cloud Model Studio）API キー、OpenAI 互換エンドポイント、または ModelScope を持ち込みます。Alibaba は定額のコーディングプランも提供しています。いずれにせよ Open Design はあなたの認証情報を決してプロキシしません。

3. 03 Qwen Code が特にデザインに向いている理由は？ +

   二つあります。Qwen3-Coder モデルはエージェント型コーディング向けにチューニングされているため、エージェントがレスポンシブな UI を構築・自己修正すること。そしてその大きなコンテキストがデザインシステムと参照セット全体を一度に保持できること。どちらも役立ちますが、センスは依然としてあなたが供給するデザインシステム、スキル、参照素材から生まれます。

4. 04 Qwen Code は Gemini CLI と同じものですか？ +

   いいえ。Qwen Code は Google の Gemini CLI を基にしており — 同じオープンソースの系譜です — パーサーレベルとプロンプトの適応により Qwen3-Coder モデル向けにチューニングされています。Open Design は両方をサポートするので、デザインワークフローを変えずにエージェントを切り替えられます。

5. 05 Qwen Code を Figma に接続するには？ +

   ~/.qwen/settings.json の mcpServers 配下に Figma MCP サーバーを追加します。すると Qwen Code は本物のデザインコンテキスト — コンポーネント、変数、レイアウトデータ — を取り込めるので、生成されるコードは近似ではなくソースに合致します。

6. 06 Open Design は Alibaba や Qwen と提携していますか？ +

   いいえ。Qwen Code は Alibaba の製品です。Open Design は独立したオープンソースプロジェクトで、それをファーストパーティのアダプターとしてサポートします。Qwen は Alibaba の商標です。

7. 07 私のファイルと認証情報は安全ですか？ +

   はい。Open Design はローカルファーストで Apache-2.0 です。あなたのファイル、成果物、DESIGN.md はあなた自身のリポジトリに留まり、DashScope または Qwen の認証情報はあなたのエージェントが直接使い、Open Design のサーバーを経由してルーティングされることは決してありません。