visual-style

ビジュアルスタイル

ポータブルなビジュアルデザインシステムを作成、抽出、適用します。visual-style.md ファイルには、カラー、タイポグラフィ、レイアウト、モーション、ムードが1つのファイルに定義されており、あらゆる AI ツールで利用できます。

クイックリファレンス

モード	トリガー	内容
作成	「visual-style.md を作成して…」	ガイド付きプロンプトでスタイルを一から作成します
抽出	「[URL/画像/動画] から visual-style.md を抽出して」	ソースを分析し、スタイルファイルを生成します
適用	「この visual-style.md を [ツール] に適用して」	特定のコネクターでスタイルを使用します
ギャラリー	「利用可能なビジュアルスタイルを見せて」	サンプルスタイルを閲覧して使用します

デフォルトのワークフロー

作成

1. 雰囲気を把握する — ムード、時代、参考資料、インスピレーションについて尋ねます
2. カラーを定義する — プライマリーカラー（2色以上）、アクセントカラー、ニュートラルカラーを、HEX 値と用途とともに定めます
3. タイポグラフィを設定する — ディスプレイ、本文、キャプションのフォントファミリーと、ウェイトやスタイルのルールを定めます
4. レイアウトとモーション — グリッドシステム、トランジション、テンポを定めます
5. 生成する — references/templates/minimal.visual-style.md または references/templates/full.visual-style.md を使って、完全な visual-style.md を出力します
6. プレビューする — 小さな HTML スウォッチを表示するか、ビジュアルの仕上がりを説明します
7. 任意で適用する — ユーザーにコネクターで使用するか尋ねます

まとめて尋ねる質問：

1. どのような雰囲気ですか？（ムードを表すキーワード、時代、参考資料）
2. 特定のカラーはありますか？（または雰囲気から導き出しますか？）
3. タイポグラフィの好みはありますか？（すっきりしたもの、エディトリアル、テクニカル、遊び心のあるものなど）
4. どのツールで使用しますか？（HeyGen、スライド、paper.design、Figma など）

抽出

1. ソースを受け取る — URL、画像、動画、または PDF
2. 抽出機能を読み込む — 該当する抽出機能のリファレンスファイルを読みます
3. 分析する — カラー、タイポグラフィ、レイアウト、モーション、ムードを特定します
4. 生成する — source_url を設定した完全な visual-style.md を出力します
5. 検証する — 必須フィールドがすべて含まれていることを確認します

適用

1. スタイルを読む — visual-style.md ファイルを読み込みます
2. コネクターを尋ねる — または、コンテキストから判断します
3. コネクターを読み込む — 該当するコネクターのリファレンスファイルを読みます
4. 変換する — スタイルのフィールドをツール固有の形式に変換します
5. 出力を生成する — ツールですぐ使える指示またはコードを作成します

ギャラリー

1. スタイルを一覧表示する — references/gallery/ にある利用可能なスタイルを表示します
2. プレビューする — 選択したスタイルのビジュアル上の特徴を説明します
3. 読み込む — 完全な visual-style.md を読みます
4. 適用する — コネクターで使用します

形式のクイックリファレンス

必須フィールド

name: "Style Name"
version: "1.0"
style_prompt_short: "1-2 sentence elevator pitch"
style_prompt_full: "Detailed generation prompt — THE most important field"
colors:
  primary:
    - name: "Color Name"
      hex: "#000000"
      role: "how this color is used"

style_prompt_full が最も重要です。 ツールが1つのフィールドしか読み取れない場合は、このフィールドを読み取ります。それ以外は、より細かい制御を必要とするツール向けの構造化データです。

完全な仕様：references/spec.md

リファレンスファイル

コネクター（適用モード）

コネクター	用途	ファイル
HeyGen Video Agent	AI 動画生成	references/connectors/heygen-video-agent.md
HTML Slides	ウェブプレゼンテーション	references/connectors/html-slides.md
paper.design	デザインドキュメント	references/connectors/paper-design.md
Figma	デザインツールのスタイル	references/connectors/figma.md

抽出機能（抽出モード）

ソース	ファイル
ウェブサイトの URL	references/extractors/from-website.md
動画のキーフレーム	references/extractors/from-video.md
PDF / ブランドガイド	references/extractors/from-pdf.md

ギャラリー（作成済みスタイル）

スタイル	時代	ファイル
ミュラー＝ブロックマンのスイス様式	1950年代～70年代	references/gallery/mueller-brockmann-swiss.visual-style.md
ネヴィル・ブロディのインダストリアル様式	1980年代後半～90年代	references/gallery/neville-brody-industrial.visual-style.md
ソール・バスのシネマティック様式	1950年代～60年代	references/gallery/saul-bass-cinematic.visual-style.md
ゲームボーイカラー	1998～2003年	references/gallery/game-boy-color.visual-style.md
HeyGen AI 動画	2020年代	references/gallery/heygen-ai-video.visual-style.md

テンプレートと仕様

• references/templates/minimal.visual-style.md — 最小限のテンプレート
• references/templates/full.visual-style.md — すべてのフィールドを含む完全なテンプレート
• references/spec.md — フォーマットの完全な仕様

ベストプラクティス

1. style_prompt_fullが最重要です — 常に単独の生成プロンプトとして使用できます
2. 1つのスタイルにつき1ファイル — 複数のスタイルをまとめないでください
3. アセットはURLで指定します — バイナリデータを埋め込まないでください
4. 説明するより見せましょう — スタイルを作成するときはプレビューを生成してください
5. 独自のデフォルト設定と柔軟な拡張 — コアスキーマは固定で、ツール固有の設定にはx_*を使用します