デザインシステムの同期

すべての画面をまっさらな状態から生成すると、色、フォント、余白が画面ごとにばらついていきます。DESIGN.md は Stitch プロジェクトに視覚的な記憶を与えます。

DESIGN.md ファイルを Stitch キャンバスプロジェクトにバインドすると、生成する画面（stitch generate screen）も編集する画面（stitch edit screen）も、それらのトークンとレイアウトルールに自動的に従います。

/stitch スキルで生成と同期を行う

DESIGN.md を作成して同期する最速の方法は、同梱の /stitch スキル（stitch agent-skills add）を使うことです。トークン定義を手書きする必要はありません。

既存のコードベースで作業している場合は、コーディングエージェントに現在のスタイルを抽出し、Stitch プロジェクトにバインドするよう依頼します。

新しいコンセプトをゼロから始める場合は、雰囲気を説明して、/stitch スキルに仕様を作成させ、アップロードしてもらいましょう。

裏側では、スキルが必要に応じてディレクトリを Stitch プロジェクトにリンクし、./DESIGN.md（または .stitch/DESIGN.md）を作成し、構造を検証して、Stitch キャンバスにアップロードします。

優れた DESIGN.md の条件

エージェントが DESIGN.md を書く場合でも、自分で書く場合でも、ビジュアル生成を最も効果的に導く次の 4 点に焦点を当ててください。

• マテリアリティとサーフェスのメタファー — サーフェスがどう感じられるべきか（温かな紙、ヘアラインアルミ、コントラストの強いインクなど）を説明し、排除すべきもの（不要なステータスドット、浮いたピル型バッジ、入れ子のカードボーダーなど）を明示します。
• 正確な hex コード付きのカラーパレット — 背景サーフェス、構造的なボーダー、主要なアクセント、テキストのインク色を実際の hex 値で定義し、Stitch に推測させないようにします。
• タイポグラフィの階層 — 主要な UI フォント、表形式数字用の等幅フォント、ディスプレイ見出しからキャプションまでの明確なスケールを選びます。
• 空間レイアウトとグリッド — 目標とするビューポート幅、4px/8px のスペーシングリズム、パディングのルールを設定し、画面が風通しよく整列した状態を保ちます。

Stitch キャンバス上に理想の見た目を実現した画面がすでにある場合は、その HTML を取得し（stitch get screen <screen-id> --code）、CSS 変数とフォントの選択をプロジェクトの DESIGN.md に落とし込むようエージェントに依頼できます。

ターミナルから同期する

DESIGN.md を直接編集したときは、stitch upload design で変更を Stitch キャンバスにプッシュします。

stitch upload design DESIGN.md

まだフォルダにデフォルトプロジェクトを固定していない場合（stitch config set project <project-id>）は、-p <project-id> を渡します。アップロードすると Stitch プロジェクトのデザインシステムが作成または更新され、次の生成から新しいルールが使われます。

デザインシステムを既存の画面に適用する

新しい画面は、プロジェクトで有効なデザインシステムを自動的に取り込みます。キャンバス上の古い画面を更新後の DESIGN.md に合わせてスタイルし直したい場合は、プロジェクトのデザインシステムを一覧表示し、stitch edit screen で直接適用します。

stitch find design-systems
stitch edit screen <screen-id> --design-system <design-system-id>