goose-graphics

1. 概要

goose-graphics は、Agent Skills エコシステム向けのポータブルなビジュアルスキルパックです。スタイルとフォーマットは中央の Gooseworks ライブラリに保存されており、このリポジトリに同梱されるのではなく、必要に応じて npx gooseworks 経由で取得されます。このスキルは、そのカタログに、参照画像からスタイルを抽出するワークフロー、Unsplash と ASCII アートを活用した画像調達レイヤー、Playwright ベースの HTML から PNG へのエクスポートパイプラインを組み合わせています。

SKILL.md を読み込むあらゆるホストで利用できます。たとえば、自動レンダリングのために呼び出す Claude Code エージェント、コンテンツ生成に組み込む Goose パイプライン、.cursor/rules/ または ~/.codex/skills/ 経由で読み込む Cursor／Codex プロジェクトなどです。各スタイルには、npx gooseworks styles get <slug> で取得できる簡潔な DESIGN.md 仕様が用意されています。この仕様は、デザインシステムのひな型として Claude Design に直接アップロードすることもできます。

フォーマットテンプレート、画像調達ヘルパー、スクリーンショットパイプラインは、このスキルパックに含まれています。スタイル、フォーマット、レンダリング例は中央ライブラリから必要に応じて取得されます。スラッグは固定で組み込まれていません。

2. 呼び出し方法

このスキルには、全引数、部分引数、対話型の 3 つの呼び出しモードがあります。依頼に応じて、最も速い方法を選んでください。

2.1 全引数での呼び出し（最速）

/goose-graphics --style <slug> --format <format> [--brief "..."] [--ref <image-path>]

• --style <slug> — コミュニティが公開している任意のスタイルのスラッグです。npx gooseworks styles list ／ search で確認できます。スタイルを選択して生成する場合は必須です。省略すると、ユーザーが対話形式で選べます。
• --format <format> — コミュニティが公開している任意のフォーマットのスラッグです（例：carousel、story、infographic、slides、poster、chart、tweet、およびコミュニティによる追加分）。npx gooseworks formats list で確認できます。フォーマットを選択して生成する場合は必須です。
• --brief "..." — トピック／コンテンツの説明です。コンテンツの確認フェーズを省略できます。
• --ref <image-path> — 指定すると、プリセットを使う代わりに、この 1 回のレンダリング用として参照画像からその場でスタイルを抽出します。--ref が指定されている場合、--style は無視されます。他のエージェントが見つけられる永続的な公開スタイルを作成するには、専用の /goose-graphics-create-style スキルを使用してください。

3 つの分岐：

1. 必須の引数がすべて指定されている（--style + --format + --brief、または --ref + --format + --brief）→ 発見フェーズとスタイル選択を省略し、§7（出力先の設定）と §8（HTML の生成）に直接進みます。
2. 引数が一部のみ指定されている → 不足している項目だけを尋ねます。--style は指定されていて --format が指定されていない場合は、フォーマットだけを尋ねます。--brief が指定されていない場合は、トピック／コンテンツだけを尋ねます。
3. 引数が指定されていない → §3 以降の対話型フローを実行します。

2.2 例

# Full args — one-shot generate
/goose-graphics --style matt-gray --format carousel --brief "How founders find their first 100 customers in 2026"

# Reference-driven — extract a one-off style from an image and build with it
/goose-graphics --ref ~/Desktop/mood.png --format poster --brief "Summer studio open house, August 14"

# Partial — Claude asks for the missing brief
/goose-graphics --style deep-ocean --format slides

# No args — full interactive flow
/goose-graphics

永続的な公開スタイル（簡潔な仕様書 + ヒーローレンダリング + 追加例数点を作成し、他のエージェントが見つけられるよう中央ライブラリにプッシュする）を作成するには、専用の /goose-graphics-create-style スキルを使用してください。

2.3 引数が一部のみ指定されているものの、内容が明確な場合のデフォルト

• --brief が指定されていなくても、後続のユーザーテキストから明らかに推測できる場合は、処理を止めずに続行します。
• --format が指定されていない場合は、フォーマットを尋ねるのがデフォルトです（フォーマット全般に適用できる安全なデフォルトはありません）。
• --style と --ref のどちらも指定されていない場合は、スタイルが重要なため、尋ねてください。

3. スタイルとフォーマットの確認

スタイルとフォーマットは、このスキルパックではなく中央の Gooseworks ライブラリに保存されています。**スラッグの存在を決めつけず、必ず一覧表示または検索してください。**カタログはコミュニティによって管理され、時間とともに変化します。

# List or search styles
npx gooseworks styles list
npx gooseworks styles search "warm editorial"
npx gooseworks styles list --mood "Organic & Warm" --tag warm

# Fetch a specific style's DESIGN.md (the slim spec) — pipe into Claude Design,
# or include in the agent context for HTML generation
npx gooseworks styles get <slug>

# Same shape for formats
npx gooseworks formats list
npx gooseworks formats search "vertical"
npx gooseworks formats get <slug>

ユーザーがスタイルまたはフォーマットを指定したら、まず list ／ search を実行し、選択したスラッグの仕様を get で取得してください。記憶を頼りにスラッグの存在を決めつけてはいけません。スラッグは、コミュニティによる項目の公開や廃止に伴って変化します。

4. スタイルの公開

ユーザーが extract-style.md（または専用の /goose-graphics-create-style スキル）を使って新しい美的スタイルを作成し、仕上がりに満足したら、ほかのエージェントやユーザーが見つけられるよう、コミュニティライブラリに公開します。

cd <directory-with-rendered-examples>
npx gooseworks styles publish

CLI は、作業ディレクトリ内に gooseworks-style.json マニフェストと、参照先の PNG ファイルがあることを想定しています。正確な形式については §13 マニフェスト形式 を参照してください。

4.1 説明文の作成ガイドライン（重要）

説明文は、カタログを検索する AI エージェントがスタイルを見つけるための手がかりになります。雰囲気を伝えるだけの文章ではなく、検索インデックスとして扱ってください。

• 50〜200 語で、キーワードを多く含めてください。
• ムードと用途から始めます。 「製品のローンチやイベントポスターに使える、大胆な雑誌の表紙のような雰囲気。」
• タイポグラフィの特徴を記載します。 「繊細な本文用セリフ体と組み合わせた、大きく圧縮されたサンセリフ体の見出し。」
• 配色の特徴を記載します。 「さび色のオレンジ＋クリーム色＋ほぼ黒。」
• 関連する場合は、業界や対象読者への適合性を記載します。 「DTC ビューティー、インディー出版、イベントチラシ。」
• 汎用的な形容詞だけを使うのは避けてください。 「美しい」「モダン」「クリーン」だけでは具体性がありません。配色、タイポグラフィ、業界の文脈と組み合わせてください。

4.2 タグ作成ガイドライン

• 小文字のタグを3〜10個付けます。
• 次の要素を含めます。ムード（warm、dark、energetic）、密度（sparse、dense）、フォーマル度（corporate、editorial、playful）、時代（mid-century、y2k、retro）、業界との適合性（saas、dtc、beauty、finance）。
• 名前を言い換えただけのタグは付けないでください。

4.3 サンプル数のガイドライン

• ヒーローは必須です — isHero: true を指定したサンプルを、必ず1つだけ用意します。スタイルを最もよく紹介できる形式を選んでください。
• 追加の形式を2〜3種類用意することをおすすめします。 ディレクトリのタイルに多様性が生まれます。
• 複数をレンダリングできる場合のヒーローの優先順位： poster > carousel > infographic > slides > chart > story > tweet。

5. 形式の公開

既存のコミュニティ公開形式がユーザーのキャンバスに合わない場合（例：LinkedIn バナー 1584×396、ストーリーカバー 1080×1920、イベントチラシ 8.5×11in）は、兄弟スキルの /goose-graphics-create-format を使って形式仕様とレンダリング済みサンプルを少なくとも1つ作成してから、公開します。

cd <directory-with-format-bundle>
npx gooseworks formats publish

形式の公開には、レンダリング済みサンプルが少なくとも1つ必要です — examples 配列が空の場合、バックエンドは拒否します。gooseworks-format.json の正確な形式については §13 マニフェスト形式 を参照してください。

形式の説明文とタグのガイドラインはスタイルと同じですが（§4.1、§4.2）、ムードではなく寸法＋コンテンツ密度から始めます。

「Instagram と TikTok のストーリー向けの 1080×1920 の縦長キャンバス。1パネル構成、タイトルは最大5語、大きなヒーロー画像または統計情報。閲覧者が2秒でスクロールして通り過ぎる、手短なお知らせやエンゲージメント投稿に使います。」

6. ホストとの互換性

SKILL.md（このファイル）は、適切なパスにパックをインストールすると、ほとんどの Agent Skills ホストで自動的に読み込まれます。Claude Design はスキルパックを自動読み込みしない唯一のホストです。代わりに、個々のスタイルファイル（DESIGN.md）を手動アップロードで1つずつ読み込みます。スタイルファイルは、npx gooseworks styles get <slug> で必要に応じて取得できます。

ホスト	インストール	備考
Claude Code	npx gooseworks@latest install --claude --with goose-graphics	GooseWorks のスキルとともにインストールします
Claude Desktop	(上記と同じインストール)	Desktop は同じ Claude スキルを読み込みます
Claude Cowork	(上記と同じインストール)	Claude Desktop をベースにしています
Cursor	npx gooseworks@latest install --cursor --with goose-graphics
Codex (OpenAI)	npx gooseworks@latest install --codex --with goose-graphics
Claude Design	npx gooseworks styles get <slug> → 取得した DESIGN.md を CD の「Create new design system」からアップロード	スタイルごとに DESIGN.md をアップロードします。CLI 同期はありません

7. 初回セットアップ

初めて使用する前に、スクリーンショットツールの依存関係がインストールされているか確認します。このスキルファイルを基準に、screenshot/ フォルダー内に node_modules/ ディレクトリがあるか確認してください。

node_modules/ が存在しない場合は、次を実行します。

cd [skill-pack-dir]/screenshot && npm install && npx playwright install chromium

[skill-pack-dir] は、この SKILL.md ファイルが含まれるディレクトリの絶対パスに置き換えてください。

8. インタラクティブなワークフロー

1. Discover Intent   --> What format? What content?
2. Select Style      --> Pick from the catalog or extract from reference image
3. Select Sources    --> Unsplash photos? ASCII art? None?
4. Set Output Path   --> Where to save exports
5. Generate HTML     --> Using format spec + style spec + sources
6. Screenshot        --> Playwright PNG export
7. Deliver           --> Present results with file listing

9. ステップ 1：意図を確認する

ユーザーに作成したいものを尋ねます。npx gooseworks formats list を実行して、現在のカタログを確認します。基本となる 7 つの形式は次のとおりです。

形式	寸法	用途
カルーセル	スライドごとに 1080x1080px	LinkedIn、Instagram の複数スライド投稿
ストーリー	スライドごとに 1080x1920px	Instagram／LinkedIn ストーリーズ、TikTok、Snapchat
インフォグラフィック	幅 1080px、高さ可変	ソーシャルメディア、ブログへの埋め込み
スライド	スライドごとに 1920x1080px	プレゼンテーション、ウェビナー
ポスター	1080x1350px	Instagram 投稿、イベントのチラシ
チャート	1080x1080px	単一のデータチャート画像
ツイート	1080x1080px	ツイートサイズの正方形スクリーンショット

コミュニティライブラリでは、追加の形式（ストーリーカバー、ポッドキャストカバー、正方形の推薦文など）が公開されている場合があります。基本となる 7 つのスラッグだけだと決めつけず、必ず最初に list を実行してください。コミュニティ形式はすべて、上記 7 つのキャンバスサイズのいずれかを使用する必要があります（レンダラーで許可リストに固定されています）。基本形式との違いは、名前、用途、コンテンツのルールだけです。ユーザーのニーズに合う公開済みの形式がない場合は、/goose-graphics-create-format スキルを提案してください。

ユーザーが形式を選んだら、詳細な仕様を取得します。

npx gooseworks formats get <format-slug>

返された spec.md（またはコンテンツルール）には、レイアウト、コンテンツ密度、セクションごとのコンテンツルールが記載されています。「コンテンツの確認」フェーズに従い、トピック、コンテンツ、その他その形式に固有の入力情報をユーザーから集めてください。

10. ステップ 2：スタイルを選ぶ

ユーザーがスタイルを指定していない場合は、見た目を見ながら選べるよう、カタログ全体を案内してください。

スタイルカタログ（**https://skills.gooseworks.ai/styles**）で、レンダリング済みの例とともに公開済みのすべてのスタイルを確認できます。

次に、npx gooseworks styles list（または search "..." ／ list --mood "..." --tag ...）を実行して、関連する候補をその場で提示します。候補はムード別にまとめ、タグラインとともに表示してユーザーに選んでもらいます。

ユーザーが**「参考画像があります」**と言う場合もあります。その場合は、このスキルパック内の extract-style.md を読み、提供された画像からカスタムスタイルを導き出すワークフローに従ってください。このワークフローでは、公開可能なバンドル（gooseworks-style.json とレンダリング済み PNG）が生成され、ユーザーは npx gooseworks styles publish で公開できます。公開後は、新しいスラッグを使ってステップ 3 からワークフローを続けてください。

ユーザーがスラッグを選んだら、簡易仕様を取得します。

npx gooseworks styles get <slug>

返された DESIGN.md には、生成に必要なものがすべて記載されています。配色、タイポグラフィ、レイアウト、してよいこと／してはいけないこと、およびそのまま貼り付けられる CSS スニペットが含まれます。

11. ステップ 3：画像ソース（任意）

ユーザーに**「グラフィックに画像を含めますか？」**と尋ねます。

選択肢：

• Unsplash の写真 — sources/unsplash.md を読み、検索ワークフローに従って高品質なストック写真を探し、埋め込みます。
• ASCII アートの装飾 — sources/ascii-art.md を読み、ワークフローに従って ASCII アート要素を生成して埋め込みます。
• 両方 — 両方のソースファイルを読み、両方の種類を組み込みます。
• 画像なし — このステップ全体を省略します。グラフィックは CSS／HTML のスタイル設定のみを使用します。

12. ステップ 4：出力先のパス

ユーザーに**「エクスポートしたファイルはどこに保存しますか？」**と尋ねます。

デフォルトの保存先：./goose-graphics-exports/

このディレクトリ内に、次の命名規則でサブフォルダーを作成します。

[YYYY-MM-DD]-[slugified-name]/

例：2026-04-17-q2-product-roadmap/

13. ステップ 5：HTML を生成する

選択した形式仕様の HTML 生成フェーズに従ってください。生成時は、次の点を守ってください。

• 選択したスタイルの CSS 変数、タイポグラフィのルール、カラーパレット、スペーシングシステムを適用します。必要な情報はすべて、styles get が返す DESIGN.md に記載されています。
• ステップ 3 でユーザーが画像ソース（Unsplash URL または ASCII アートのブロック）を選択した場合は、それらを組み込みます。
• 形式仕様のコンテンツ密度の上限と構造要件に厳密に従います。
• HTML ファイルはすべて、ステップ 4 で決定した出力ディレクトリに書き込みます。

14. ステップ 6：スクリーンショット

スクリーンショットスクリプトを実行して、HTML ファイルを高解像度の PNG にエクスポートします。

node [skill-pack-dir]/screenshot/screenshot.js --format CANVAS --input INPUT_PATH --output OUTPUT_PATH

各項目の意味は次のとおりです。

• [skill-pack-dir] は、このスキルパックのディレクトリの絶対パスです。
• CANVAS は、必ず 7 つの組み込みキャンバススラッグのいずれかを指定します。形式のカタログスラッグは指定できません。レンダラーの許可リストは厳格なため、story-cover や linkedin-banner などのコミュニティ形式のスラッグを渡すと失敗します。
• INPUT_PATH は、生成した HTML が含まれるディレクトリまたはファイルです。
• OUTPUT_PATH は、PNG ファイルの保存先ディレクトリです。

次の表を使って、形式の width／height（npx gooseworks formats get <slug> で取得）をキャンバススラッグに対応付けます。

width × height	Canvas slug
1080 × 1080	carousel
1080 × 1350	poster
1920 × 1080	slides
1080 × 1920	story
1080 × ≥1080 (variable)	infographic

例：

• 組み込みの poster（1080×1350）→ --format poster。
• コミュニティ形式の story-cover（1080×1920）→ --format story（形式は story キャンバスを継承するため）。
• コミュニティ形式の linkedin-quote-card（1080×1080）→ --format carousel（1080×1080 のカタログ形式はすべて carousel キャンバスでレンダリングされます）。

形式の width／height が上記のいずれの行にも一致しない場合、その形式は誤って公開されています。ユーザーに報告し、そこで終了してください。カスタム寸法でのレンダリングは試さないでください。このツールでは対応できません。

15. ステップ 7：納品する

結果をユーザーに提示します。

• 生成したすべてのファイル（HTML ソースファイルと PNG エクスポート）を、ファイルサイズとともに一覧表示します。
• 出力ディレクトリの完全なパスを示します。
• プレビュー方法として、HTML ファイルをブラウザーで開くか、PNG ファイルを直接表示する方法を案内します。
• カルーセルとスライドの場合は、スライドの枚数と順序を明記します。

16. 特別なモード

• 「おまかせ」 — カルーセル形式と、npx gooseworks styles list が返すスタイルからランダムに選んだスタイルを使用します。ユーザーにはコンテンツ／トピックだけを尋ね、そのほかはすべて自動で生成します。
• 複数形式 — ユーザーが「これをカルーセルとインフォグラフィックの両方で作成して」と依頼した場合、同じコンテンツとスタイルを使い、形式スラッグを変えてワークフロー全体を 2 回実行します。出力は別々のサブディレクトリに保存します。
• スタイルのプレビュー — 生成全体を始める前に、ユーザーがビジュアルの方向性を確認できるよう、サンプルのスライドまたはセクションを 1 つ作成します。変更を希望する場合は、残りを生成する前にスタイルを調整するか、別のスラッグに切り替えます。

17. マニフェスト形式

これらのマニフェストは、ユーザーが publish の実行前に自身の作業ディレクトリで作成する CLI 入力です。このリポジトリには保存されません。

17.1 スタイルマニフェスト（gooseworks-style.json）

{
  "name": "Desert Sunset",
  "slug": "desert-sunset",
  "description": "Warm dusk gradients with rust and amber on cream paper. Editorial serif headlines paired with a single sans-serif accent. Built for DTC beauty product launches, lifestyle long-form, and event posters where you want a confident, sun-soaked, high-end magazine feel.",
  "designMd": "# Desert Sunset\n\n…full slim spec markdown — palette table, typography table, layout rules, do/don'ts, optional CSS variables block…",
  "moodGroup": "Organic & Warm",
  "tags": ["warm", "desert", "editorial", "serif", "dtc"],
  "palette": [
    { "hex": "#E06A2C", "role": "primary" },
    { "hex": "#3A1F1A", "role": "ink" },
    { "hex": "#F5EFE7", "role": "paper" }
  ],
  "examples": [
    { "format": "poster", "isHero": true, "file": "./poster.png", "caption": "Hero render" },
    { "format": "carousel", "file": "./carousel.png" },
    { "format": "story", "file": "./story.png" }
  ]
}

フィールドの制約：

• name：1～120 文字
• slug：任意、ケバブケース [a-z0-9-]+。省略した場合はバックエンドが自動生成します。衝突が発生した場合は suggestedSlug を含む 409 が返され、CLI が再送信を処理します。
• description：20～1000 文字（必須）
• designMd：最小 50 文字（必須）
• moodGroup：任意。"Dark & Moody"、"Light & Editorial"、"Organic & Warm"、"Bold & Energetic"、"Retro & Cinematic"、"Structural & Technical"、"Friendly Corporate" のいずれか
• tags：文字列の配列（デフォルトは []）
• palette：{ hex: "#RRGGBB", role?: string } の配列
• examples：配列、最低 1 エントリ、ちょうど 1 つに isHero: true を指定
• examples[].format：既存のグラフィックフォーマットの slug（npx gooseworks formats list にある任意のもの）
• examples[].file：作業ディレクトリ内の PNG への相対パス

17.2 フォーマットマニフェスト（gooseworks-format.json）

{
  "name": "Story Cover",
  "slug": "story-cover",
  "description": "1080×1920 vertical cover slide for Instagram and TikTok stories. Single hero panel, 5-word title max, optional brand mark in the lower 10%. Use for product launches and event reminders where the viewer scrolls past in 2 seconds.",
  "width": 1080,
  "height": 1920,
  "contentRulesMd": "## Rules\n\n- Title: 5 words max, large display, centered or top-left\n- One hero element (image, stat, or large icon) in the upper 70% of the canvas\n- Optional brand mark in the lower 10%, ≤8% of canvas height\n…",
  "tags": ["story", "vertical", "social", "instagram", "tiktok"],
  "examples": [
    { "file": "./example-1.png", "styleSlug": "matt-gray", "caption": "Paired with matt-gray" },
    { "file": "./example-2.png", "styleSlug": "neon-dashboard" }
  ]
}

フィールドの制約：

• name：1～120 文字
• slug：任意、ケバブケース
• description：20～1000 文字（必須）
• width / height：7 つの組み込みキャンバスのいずれかと一致する必要があります：1080×1080（カルーセル／チャート／ツイート）、1080×1350（ポスター）、1920×1080（スライド）、1080×1920（ストーリー）、または 1080×≥1080（インフォグラフィック）。レンダラーの許可リストが厳格なため、カスタムサイズは公開時に拒否されます。
• contentRulesMd：最小 50 文字（必須）
• tags：文字列の配列
• examples：配列、最低 1 エントリ（必須 — バックエンドは空を拒否します）
• examples[].styleSlug：任意。その例のレンダリングに使用したスタイルへの参照

18. ファイルリファレンス

このスキルパックには、画像のレンダリングとソース取得に必要なローカルヘルパーのみが含まれています。スタイル、フォーマット、サンプルレンダリングはすべて npx gooseworks を介して中央ライブラリから取得されます。

画像ソース

ファイル	説明
sources/unsplash.md	Unsplash のストックフォトを検索して埋め込みます。
sources/ascii-art.md	ASCII アートの装飾を生成して埋め込みます。

スタイルの抽出

ファイル	説明
extract-style.md	参照画像からカスタムスタイルを導出し、公開可能なバンドル（gooseworks-style.json + レンダリング済み PNG）を生成します。

スクリーンショットツール

ファイル	説明
screenshot/screenshot.js	Playwright ベースの HTML→PNG エクスポートスクリプト。
screenshot/package.json	スクリーンショットツール用の Node.js 依存関係。