デザインは QoderWork のカスタムワークベンチで最初に提供される領域特化モードです。AI ネイティブの「デザイン as コード」キャンバス上で、自然言語（あるいは音声）で要件を記述するだけで、無限キャンバスに 実行可能・編集可能・引き渡し可能 なデザイン成果物を得られます。 クラウド協調のベクター編集を中心に据えた従来のデザインツールと異なり、デザインは成果物をチームで共同管理するコード資産として扱います。最初の一歩からデザイナーとエンジニアが同じ実行可能ファイルを操作し、成果物はワンクリックで Qoder IDE に引き渡せます。デザインからコードへの「ロスのある引き渡し」を排除します。Documentation Index
Fetch the complete documentation index at: https://docs.qoder.com/llms.txt
Use this file to discover all available pages before exploring further.
ユースケース
デザイナー — 局所的なイテレーションと複数面のコラボレーション
従来のフローでは、修正のたびに切り出し、再エクスポート、注釈の更新、エンジニアとの同期、最終ピクセルの検証が発生します。デザインではこれらをキャンバス内に圧縮します：領域を選択し意図を注釈すれば、Agent がキャンバス文脈に基づいて即座に調整します。Nudge を使えば配色・余白の微調整を満足するまでリアルタイムに行えます。成果物は読みやすく、引き継ぎ可能なエンジニアリング構造を保ちます。プロダクトマネージャー — 必要なタイミングで高忠実度プロトタイプを更新
ハイファイプロトタイプは設計の方向性を直感的に伝えられますが、通常はデザインチームの工数に依存します。デザインは PM に第三の選択肢を提供します：構造化された Questions で意図を擦り合わせ、Design Plan で方向性を確認したうえで、デザインクオリティを備えた操作可能なプロトタイプをキャンバス上で得られます。レビューや関係者向けデモにそのまま使えます。マーケティング・運営 — 多方向の素材を並行生成
1 つのキャンペーンでもキービジュアル、バナー、ランディングページなど多数の成果物が必要ですが、デザインリソースが限られると単一方向しか出せません。デザインでは並行生成が現実的です：テーマとトーンを入力し、Design Plan で方向性を確認すれば、Auto Style Reference でリファレンスを切り替えるだけでポスター、バナー、ランディングページなど高頻度の成果物を多方向にカバーできます。仕組み
デザインは 3 つのメカニズムで AI のデザイン生成プロセスを再構築します：- Questions — 入力が不十分なときは Agent が推測で進めず、構造化された質問で意図を擦り合わせ、無駄な反復を最小化します。
- Design Plan — 生成前に Agent が Plan タブに構造化されたデザイン計画（レイアウト、スタイル、コンテンツ階層）を提示し、確認後に実行します。
- Nudge — 生成後、配色・余白・角丸など重要な決定事項は調整可能なパラメータとして公開され、ブリーフを書き直さずに微調整できます。
ワークスペース
右側のキャンバスには 5 つのタブがあります：| タブ | 役割 |
|---|---|
| Canvas | 無限キャンバス。Agent はここで生成と編集を行います |
| Design Files | キャンバスの裏にあるエンジニアリングファイル |
| Preview | 実際の UI として動作プレビュー |
| Style References | デザインで使用中のスタイルリファレンスを確認・切り替え |
| Plan | Agent が生成前に拠り所とする構造化デザインプラン |
デザインを作成する
要件を記述する
入力欄に自然言語または音声で要件を記述します。目的、主要セクション、トーンを具体的に指定してください。例：「ブランドナビゲーション、力強い見出し、製品価値提案、メイン CTA、サブ CTA、製品 UI プレビューを含む高忠実度の AI プロダクトホームページをデザインして。」スクリーンショットやリンクは入力欄に直接ペーストできます。マイクアイコンで 音声入力 も利用できます。
（任意）スタイルリファレンスを選ぶ
入力欄の下にある Auto Style Reference ドロップダウンをクリックして、生成前に全体トーンを固定します。Auto Style Reference のままにすると Canvas が 161 のリファレンスから最適なものを自動選択します。Airbnb、Apple、Carbon、Cloudscape などの特定スタイルを指定することもでき、上部の検索ボックスで名前で絞り込めます。
Design Plan を確認する
Agent はまず Plan タブに構造化された計画（レイアウト、スタイル、コンテンツ階層）を提示します。確認したうえで進めるか、必要なら描画前の段階で修正させてください。
反復する
ブリーフを最初から書き直す必要はありません。同じキャンバスで反復できます。- Add to the queue：下部の入力欄に追加指示を投げると、現在のステップ完了後に処理されます。
- 生成を停止：入力欄横のストップボタンで生成を中断できます。
- キャンバス上での選択と注釈：領域を選んで変更内容を伝えると、Agent はキャンバス文脈に基づいて調整します。フレーム全体を再生成しません。
- Nudge による微調整：生成後は配色、余白、角丸などが調整可能なパラメータとして公開されます。
- モデルの切り替え：入力欄横のモデル切替（例：Standard / Premium）で次のステップのモデルを変更できます。
- エンジニアリングファイルを直接編集：コードレベルで触りたいときは Design Files から直接編集できます。