このブログは「Introducing Qt's GUI Design Skill: Design for Developers in Agentic Workflows」の抄訳です。
すべての UI 開発者が UX デザイナーのサポートを受けられるわけではありません。中小企業の R&D チームの多くは、UI デザインの専門家なしにUIを構築しなければならない状況にあります。
現在のフロンティア LLM は Qt Quick や QML のコードを生成する能力が非常に高い一方、特に組込みデバイス向けには UI デザインの観点で最適とは言えないインターフェースを生成する傾向があります。理想は専門のデザイナーと協力することですが、それが難しいチームも少なくありません。 Qt GUI デザインスキルは Qt の AI 活用開発ツールの一部として、コーディングを始める前に AI エージェントへ確かなデザイン知識を提供し、そのギャップを解消します。
スキルは AI エージェントに対して、UI 開発作業を行う前に UX デザイン原則を検討するよう指示します。体系的なヒアリングプロセスを定義し、広く知られている UX の法則のライブラリをエンコードし、デスクトップと組込みターゲット向けのプラットフォーム固有の制約テーブルを提供し、アクセシビリティチェックリストを含み、構造化されたデザイン監査の実施方法を説明しています。エージェントがこのスキルに従うことで、生成される QML はただ動作するだけでなく、階層構造、タッチターゲット、タイポグラフィ、モーション、ローカリゼーション、エラーハンドリングについての意図的な判断が反映されたものになります。
動画：VS Code の GitHub Copilot における画像の UI デザインレビューの様子（一部シーケンスは短縮・加速されています）
大規模言語モデルは多くの人間のデザイナーが生涯に読む量を超えるデザインドキュメントを学習していますが、構造化されたプロンプトがなければその知識を一貫して適用することができません。「フィットネスマシンのコントロールパネルを作って」と依頼されたエージェントは、一度に表示するメトリクスの数、タッチターゲットのサイズ、状態の区別に色だけを使うかどうか、480×272 の組込みディスプレイと 1920×1080 のデスクトップモニターへの対応方法など、多くの暗黙的な判断を行います。これらの判断はランダムではありませんが、指針がなければ UX 原則の意識的な適用ではなく、学習データの統計的なパターンマッチングによって行われます。
Qt GUI デザインスキルはこれらの判断を明示的でレビュー可能なものにします。エージェントがスキルファイルを持つ場合、そのデザイン上の判断は具体的な原則に紐づけて説明できます。オプションの同時表示数の削減はヒックの法則（Hick's Law）によるもの、グループ化戦略はミラーの法則（Miller's Law）に基づくもの、48 px のタッチターゲット最小値は組込み制約テーブルから、カラー＋アイコンのアプローチは WCAG アクセシビリティルールから、といった具合です。この違いが実際にどう現れるかは目に見えてわかります。
ジムのステッパーマシンの UI 実装をインタラクティブなプロトタイプで比較してみましょう。どちらも同じデザインブリーフ（ワークアウトメトリクス、プログラム選択、傾斜制御、タイマーを備えたジムのステッパーマシンのコントロールパネル）から生成され、入力プロンプトは同一です。唯一の違いは Qt GUI デザインスキルが読み込まれているかどうかです。
汎用的な「ジムのステッパーマシンの UI を作って」というプロンプトで生成した UI です。AI エージェントはレイアウト、カラー、階層のすべての判断を LLM の事前学習知識に基づいて行いました。
問題点 :
同じデザインブリーフで、エージェントに Qt GUI デザインスキルを先に与えました。ヒアリングを実施し、明確なコンテンツ階層を確立し、組込み制約テーブルを適用し、すべてにテキストラベルを伴う意味的なカラーを使用しています。
改善点 :
スキルは、ユーザーが AI エージェントに Qt、QML、その他の組込みデバイスの UI・アプリケーション・プロジェクトの作成、レビュー、または監査を依頼するときに起動します。エージェンティックハーネスが自らの作業を計画する性質上、ヒアリングが確実に実施されるようにするには、プロンプトの冒頭で /qt-gui-design コマンドを使用することをお勧めします。
スキルは以下の6つのステップで構成されています。
UI デザイン監査（レビュータスクのオプション）： 新規作成ではなく既存のデザインをレビューする場合、エージェントはこのステップに直接進み、すべての発見事項を「クリティカル」「警告」「機会」に分類します。これは Qt 独自のツールで使われている重大度モデルに合わせています。
画像：Claude Desktop における Qt コーヒーマシンサンプルアプリケーションの UI デザインレビューのスクリーンキャプチャ
スキルが持つ UX 法則の一部を以下に示します。これらは単なる参考情報ではありません。それぞれがエージェントの従うべき具体的な指示に紐づいています。
組込みデバイスの制約とそれが UI デザインに与える影響を理解することは、AI エージェントによる UI 実装を成功させる上で不可欠です。デスクトップを前提としたデザインの考え方（フルードグリッド、グラデーション塗り、ドロップシャドウ、ホバー状態、ツールチップによる情報開示）は、GPU のないハードウェア上では気づかないうちに機能しなくなります。スキルはこうした前提を固定ピクセルの考え方に置き換えます。エージェントがデザインの対象が組込みデバイスであると判断または指示された場合、他の作業より先に組込みデバイス向け UI の推奨事項を適用します。
Qt GUI デザインスキルは、UI/UX デザイナーではなく UI 開発者を対象としています。Figma to Qt や Qt Design Studio などの UI/UX デザイナー向けツールは、UI/UX デザイナーが優れたエクスペリエンスを作成するためのものです。
Figma to Qt は、UI/UX デザイナーが Figma で GUI デザインを作成し、プレビューし、問題を早期に発見・修正し、検証済みのデザインをデベロッパーが Qt Creator、Visual Studio Code、または Qt Design Studio で扱える QML コードに変換できる Figma プラグインです。
Qt Design Studio は、Figma では不十分な場面（3D 要素を含む GUI の構築や高度なアニメーションやトランジションの作成など）に UI/UX デザイナーが使用できるスタンドアロンの UI デザインツールです。
Figma to Qt と Qt Design Studio は大規模チームや複雑なプロジェクト向けです。Qt は組込みデバイス上でエクスペリエンスを構築する際にプロがそれぞれ好みのツールとワークフローを使えるよう取り組んでおり、デザインサポートなしの中小企業の UI 開発者を支援するために Qt GUI デザインスキルを今回リリースします。
Qt Creator 20 を使用している開発者は、Claude、Codex、その他のエージェンティックハーネス向けの AI エージェント拡張機能を通じて Qt GUI デザインスキルを活用できます。
スキルは Qt エージェントスキルプラグインの一部です。プラグインは Qt の GitHub リポジトリからダウンロードするか、Claude マーケットプレイスのプラグイン「qt-development」からインストールできます。
エージェントスキルプラグインには qt-qml コーディングスキルも含まれており、QML 固有の実装パターンをカバーしています。両スキルが有効な場合、エージェントはまずデザインのヒアリングを実施し、その判断を反映した QML を生成します。
スキルはさまざまな出発点に自然に適合します。言葉による説明やスケッチしかない状態から始める場合でも、スキルは固定のエントリポイントを要求するのではなく、あなたのワークフローに合わせて動作します。
ビジュアルデザインツールは一切使用しません：プロダクトオーナーまたは開発者が画面を言葉で説明します（例：「言語セレクターと次へボタンを持つ Qt アプリケーションの Windows デスクトップ向けインストーラーウェルカムスクリーンを作成して」）。スキルなしでは、エージェントは1つの妥当なレイアウトを生成して終了し、すべての構造的な判断をサイレントに行います。
エージェントはまずヒアリングを実施し、階層構造（主要なアクションは何か？）、ロケール要件（RTL サポートは必要か？）、タイポグラフィのベースラインを確立します。
次に、構造的に異なる2〜3つの提案を生成できます。プログレッシブ・ディスクロージャーで言語セレクターを前面に出すもの、Z型の視線誘導で CTA へ目を導くもの、情報密度の高いインストーラーフローに最適化したモジュラースケールを適用するものです。
主なメリット： 複数のソリューションを恣意的に組み合わせるのではなく、インテリジェントに統合できます。
開発者またはデザイナーが大まかなワイヤーフレーム（描画ツールまたは紙のスケッチ）を用意し、構造的な出発点としてアップロードします。ワイヤーフレームはゾーンの配置とコンテンツ領域の大まかな位置を示しますが、カラー、タイプスケール、スペーシング、インタラクションモデルについてのデザイン判断は含みません。スキルなしでは、エージェントはそのギャップを任意に埋め、完成しているように見えるが測定されていないタッチターゲットと恣意的な階層を持つものを生成します。
ワイヤーフレームは構造の土台、スキルはそこにデザインの詳細を加えます。
エージェントはワイヤーフレームのゾーンを読み込み、近接性と類似性（Proximity and Similarity）を適用してグループ化を確認し、すべてのインタラクティブゾーンがプラットフォームのタッチターゲット最小値を満たしているかチェックし、ヒアリングで指定された視聴距離からタイプスケールを導出し、装飾的なカラーではなく意味的なカラーロールを割り当てます。
ワイヤーフレーム作成者の構造的な意図が保持され、スキルの原則に基づく制約が測定可能な品質基準を満たすことを保証します。
ローファイなデザイン言語で素早くコードに移行するチームにとって、このアプローチは特に効果的です。
主なメリット：構造的な意図を保持しながら、測定可能な品質のギャップが自動的に補完されます。
UI 開発者が既存の UI 実装を改善したい場合、スキルなしでエージェントに「このデザインをレビューして」と頼むと、一貫した重大度モデルのない一般的な印象のリストが返ってきます。
AI エージェントは監査モードに切り替わり、構造化された3段階分類を適用します。クリティカルな問題（WCAG 違反、組込みターゲットでの安全キューの欠如、最小値以下のタッチターゲット）は出荷前に必ず修正が必要です。
警告は、認知負荷の上昇、一貫性のないアフォーダンス、ユーザーの操作を妨げるパターンの不一致 を示します。
AI 搭載機能のストリーミング出力インジケーターや、ピーク・エンドの法則を適用した完了状態など、改善の余地を特定します。
監査は Figma ファイル、スクリーンショット、既存の QML コンポーネント、または実行中のアプリケーションに対して実施できます。
出力は、開発チームがそのままトリアージして担当者に割り当てられる優先順位付きのアクションリストです。
主なメリット：監査の発見事項は優先順位が付けられ、実行可能で、名前付きの標準に紐づいています。主観的な意見ではありません。