ドリフトの削減、ミスの最小化、コンテキストの維持、AI生成プロトタイプの品質向上に関する実践ガイド。VitalyによるUXとデザインパターンのフレンドリーなビデオコース、Design Patterns For AI Interfacesがお届けします。

AI生成プロトタイプは、デザインシステム全体に散在する小さな不整合のため、一貫して良好な結果を提供できないことがよくあります。決定が下されたものの文書化されていない、ハードコードされた値がクリーンアップされていない、あるいはAIに過度に依存してモックアップやデザインフローを自分で解釈させていることが原因です。

昨日、私はAtlassianのHardik Pandyaによる有用な実践ガイドに出会いました。これはドリフトを減らす方法、ミスを最小化し、コンテキストを維持し、AI生成プロトタイプの品質を向上させる方法について書かれたものです。どのように機能するのか見てみましょう。

A diagram comparing traditional with LLM-readable design systems by showing their processes and an example file structure.
より良い結果を得るために、AIは仮定を最小限に抑え、曖昧さを減らすより良いガイダンスを必要とします。Hardik Pandyaによるガイド。（Large preview）

1. デザイン決定はインフラストラクチャ

言うまでもなく、より良いAIプロトタイプはより良いデータから生まれますが、より良い人間のガイダンスからも生まれます。AIが正しいコンポーネントを選び、アクセシビリティを考慮してデザインする方法を知っていると仮定すべきではありません。AIには優先順位、意思決定の方法、デザイン原則、例、やってはいけないこと、やってよいことが必要です。

実際、デザイン決定をインフラストラクチャとして扱うべきです。つまり、デザイン決定だけでなく、作業の優先順位付け方法や意思決定の方法に関する決定であっても、それがAIが消費するspecファイルに反映されなければならないということです。

2. 監査：FigmaLint

デザインシステムの品質を監査するための有用なツールの1つがFigmaLintです。これは、トークン、ステート、アクセシビリティ、トークンのバインディング、レイヤーのリネーム、分離されたインスタンスの検出、欠落したインタラクティブステート、ハードコードされた値の検出などを行い、デザイン文書化を準備するための有用な無料のFigmaプラグインです。

A screenshot showcasing FigmaLint, an AI-powered design system auditing and auto-fix tool within Figma, with various UI screens displaying features like component auditing, interactive states, design token usage, and property recommendations.
監査を効率化する便利な小さなヘルパー：FigmaLint。（Large preview）

ベンダーやサードパーティが提供するデザインシステムやコンポーネントライブラリを扱うことが多い場合、特にプロトタイプの品質、AI生成コード、AI作成ドキュメントの改善を目指す場合は、非常に役立つツールです。

3. 3つのレイヤー：Spec Files + Token Layer + Auditing

品質を確保するために、デザイン原則、ガイドライン、ルールを「spec files」の形式で確立します。これは、間隔のルール、色の選択、コンポーネントの使用ガイドライン、優先順位などを含む構造化されたMarkdownファイルです。AIはプロトタイプを生成するたびにこのspecファイルを読み取り、再利用します。

An example of a folder that organizes spec files to be AI-friendly.
AIフレンドリーにspecファイルを整理するフォルダの例。完全な例に移動。（Large preview）

specファイルはテキストファイルであるため、AIがモックアップからパターンを認識またはデコードすることに依存せず、具体的なガイドラインを提供するため、コスト効率が良く、より正確です。実際、モックアップからコードを生成するよりも、コードを拡張する方が効果的な場合が多いです。

トークンレイヤーは、デザインシステム全体で使用されるすべてのトークンをリストアップし、更新を維持します。AIは、その場で妥当な値をでっち上げるのではなく、常に命名された変数の閉じたセットから選択します。

Five levels of context engineering
コンテキストエンジニアリングがすべてです。5つのレベルのコンテキストエンジニアリング：実践的な概要、Matthew Alverson著、Addy Osmani経由。（Large preview）

監査スクリプトは、AIが間違えたものをキャッチします。プロトタイプをスキャンし、ハードコードされた値をすべてフラグ付けします。AIがフィードバックを待つ形で、通常のソフトウェアがそれを実行できます。

最後に、デザインシステムがアップデートを公開すると、同期ルーチンがどのspecファイルを更新する必要があるかをフラグ付けします。AIが常に最新の現在のspecを読み取るようにすることが目標です。

4. AI対応デザインシステムの例

まとめ

結局のところ、AIは適切なガイダンスなしに技術的負債やデザイン負債を魔法のように解決することはできません。明確な決定、確立された優先順位、明確に定義された原則に大きく依存します。

デザイナーがAIをガイドする上で意図的かつ正確であればあるほど、全体的な結果は良くなります。これには、デザインシステムのクリーンアップと改善だけでなく、決定がMarkdownファイルに反映されるよう、時間の経過とともに維持することも必要です。私たちは今後何年も忙しくなるでしょう。

「Design Patterns For AI Interfaces」について

Vitalyの新しいDesign Patterns For AI Interfacesをご紹介します。これは、実際に人々が使用するAI機能を設計するためのUXガイドラインと数百の実際の例を含むビデオコースで、今年後半にライブUXトレーニングも開催されます。無料プレビューに移動。

Design Patterns For AI Interfaces promo picture
VitalyのインターフェースデザインとUXに関するビデオコース、Design Patterns For AI Interfacesをご紹介します。

参考リソース

Smashing Editorial (yk)