Skip to main content
デザインガイドラインを使用すると、スタンディングルール(色、タイポグラフィ、スペーシング、コンポーネント規則)を設定して、Flowstepがファイル内のすべてのAI生成と編集に適用することができます。すべてのプロンプトで「青いテーマを使用する」と繰り返す代わりに、一度書き込むと、AIはそれ以降それに従います。

デザインガイドラインを編集する

1

デザインガイドラインモーダルを開く

チャットパネルのヘッダーで、Edit design guidelinesボタンをクリックします。Design guidelinesモーダルが開き、DESIGN.mdテキストエディタが表示されます。
2

ガイドラインを作成またはインポートする

ガイドラインを直接入力するか、.mdファイルをエディタにドラッグアンドドロップしてインポートします。形式はGoogleのオープンdesign.md標準に従います — オプションのYAML front matter(認識されるキー:versionnamedescriptioncolorstypographyroundedspacingcomponents)の後にMarkdownセクションが続きます。
3

保存

Save changesをクリックします。その後、このファイル内のすべての生成と編集はガイドラインを必須コンテキストとして使用します。
ガイドラインは将来の出力のみに適用されます — 既存のデザインはそのまま残ります。ガイドラインは現在のファイルにスコープされており、他のファイルには引き継がれません。

知っておくと良いこと

  • 長さの制限 — ガイドラインは最大50,000文字です。その限度を超えたインポートされたファイルは切り詰められます。
  • 検証 — 構造上のエラー(閉じられていないYAML front matter、重複する##セクション見出し)は保存をブロックします。認識されていないYAMLキーや有効な16進色コードではない色などのより柔軟な問題は、警告を表示しますが、それでも保存されます。
  • エクスポート — モーダルのCopy raw fileボタンとDownloadボタンを使用して、DESIGN.mdをコピーまたはダウンロードします。
  • ガイドラインの削除 — テキストフィールドをクリアして保存すると、そのファイルのガイドラインが削除されます。

Flowstepがガイドラインを更新します

プロンプトにスタンディングスタイル指示を出すと — たとえば、「今後は青いテーマを使用する」— Flowstepがそれを検出し、デザインガイドラインを自動的に更新し、チャットで確認します:“Updated your design guidelines to use [style] for future generations.”(デザインガイドラインを [スタイル] を将来の生成に使用するように更新しました)。「青くする」などの1回限りのリクエストはガイドラインを変更しません。その生成にのみ影響します。

MCPを介したデザインガイドライン

MCP serverを使用して作業する場合、get-design-guidelinesupdate-design-guidelines、およびdelete-design-guidelinesツールは同じガイドラインを読み書きします。このため、IDEワークフローとウェブアプリが同期されます。ツール参照を参照してください。