概要
GoogleのAIデザインツール「Stitch」が採用する、AIにデザイン意図を正確に伝えるためのMarkdown形式の仕様書「DESIGN.md」の役割と活用法を解説した記事。
詳細内容
Google Stitchで導入された「DESIGN.md」は、AIエージェントがプロジェクト全体で一貫したUIを生成するための「AI用デザイン説明書」です。従来のFigma等のビジュアルツールとは異なり、カラー、タイポグラフィ、コンポーネントルールをMarkdown形式のテキストとして定義することで、AIがデザイナーの意図を論理的に理解できるようになります。
記事では以下の特徴とワークフローが紹介されています：
- **AIとの共通言語**: プロンプト、既存URL、画像からDESIGN.mdを自動生成可能。
- **エンジニア連携の効率化**: CursorやClaude CodeなどのAI駆動コーディングツールに読み込ませることで、デザインルールを遵守した実装が即座に行えます。
- **実践例**: 既存サイトのURLからデザインシステムを抽出し、それに基づいたリニューアル案の作成や、アニメーションを含む動作可能なコード（モックアップ）の生成手順を解説。
AIが「なんとなく」生成するのではなく、デザイナーが定義したルールを厳守させるための架け橋として、DESIGN.mdの重要性を説いています。