表示・編集・エクスポート

デザインシステムを表示する

Design System パネルを開くと、任意の画面で有効なデザインシステムを確認できます。パネルには、解決済みのトークン（カラー、フォント、角丸、余白、コンポーネントパターン）が表示されます。

プロジェクトに複数のデザインシステムがある場合、パネルには現在選択中の画面に適用されているものが表示されます。

デフォルトのデザインシステムを設定する

プロジェクト内の今後のすべての画面にデザインシステムを適用するには、プロジェクトのデフォルトとして選択します。この時点以降に生成される新しい画面は、そのトークンを自動的に継承します。

既存の画面は遡って更新されません。既存の画面を揃えるには、それぞれにデザインシステムを個別に適用してください。

Design System パネルで編集する

Design System パネルでは、有効なデザインシステムを直接編集できます。ここでの変更は、構造化トークンと DESIGN.md の要約の両方に反映されます。

編集できるプロパティは次のとおりです：

カラーパレット：primary、secondary、tertiary、neutral の基本カラー
タイポグラフィ：見出し、本文、ラベルのフォントファミリー
角丸：コーナー半径のスケール

より細かい変更（コンポーネントのガイドライン、すべきことと避けること、概要の記述）が必要な場合は、DESIGN.md の markdown を直接編集してください。

プロジェクトと一緒にエクスポートする

プロジェクトをエクスポートすると、生成された画面と一緒に DESIGN.md ファイルが zip に含まれます。これにより、下流の利用者（開発者、他のデザインツール、他のエージェント）は、デザインシステムをポータブルな記録として受け取れます。

エクスポートされた DESIGN.md は単体の文書です。活用するのに Stitch に依存しません。

Stitch の外で作業しますか？

@google/design.md CLI は、あらゆる DESIGN.md ファイルを正式な仕様に照らして検証し、WCAG コントラスト比をチェックし、トークンを Tailwind または W3C Design Token 形式にエクスポートします。Stitch が生成したものでも手書きのものでも、あらゆる DESIGN.md で動作します。