davidvictor/merch-brief-skill

merch-brief-skill は何をしますか？

Claude Code向けスキル：ブランド商品（マーチャンダイズ）のクリエイティブブリーフと、ビジュアルテクパック、ヒーロー画像、ブランドサイト、OGカード、ロゴ、オプションのGitHub + Vercelデプロイを含む完璧な成果物を生成します。npx skills add davidvictor/merch-brief-skillでインストール。

説明

このスキルは、Claude Code環境でブランド商品のブリーフィングと成果物生成を自動化するためのものです。ユーザーは自然言語で商品のコンセプトや要件を記述するだけで、スキルが以下を含む一式を作成します：

• ビジュアルテクニカルパック（デザイン仕様書）
• ヒーロー画像（メインイメージ）
• ブランドサイトのコードとデザイン
• OGカード（SNS共有用カード）
• 実際のロゴ
• オプション：GitHubリポジトリとVercelへのデプロイ

インストール方法

npx skills add davidvictor/merch-brief-skill

前提条件

• Claude Codeがインストールされていること
• Node.js（v18以上推奨）
• 必要に応じてGitHubアカウントおよびVercelアカウント

使い方

1. Claude Codeを起動します。

2. スキルをインストールしたら、以下のようにブリーフの内容を自然言語で記述します：

   「新製品「エコ水筒」のブランド商品ブリーフを作成して。持続可能性をテーマに、ボトル本体にはリサイクル素材を使用。カラーはアースグリーンとオーシャンブルー。ロゴは葉っぱをモチーフに。」

3. スキルが自動的に以下の成果物を生成します：

   • テクパック（SVGまたはHTMLとして出力）
   • ヒーロー画像（SVGまたは画像生成用コード）
   • ブランドサイト（HTML/CSSファイル一式）
   • OGカード（HTMLテンプレート含む）
   • ロゴデータ（SVG形式）

4. オプションでデプロイ：

   • gh または github と入力するとGitHubリポジトリが作成されます。
   • vercel または deploy と入力するとVercelに自動デプロイされます。

ファイル構成例

merch-brief-output/
├── tech-pack.svg          # ビジュアルテクパック
├── hero-image.svg         # ヒーロー画像
├── logo.svg               # ロゴ
├── og-card.html           # OGカード
├── site/                  # ブランドサイト
│   ├── index.html
│   ├── style.css
│   └── assets/
├── README.md              # プロジェクト概要
└── package.json           # プロジェクト設定

対応プラットフォーム

• Claude Code（必須）: スキルエンジンとして動作
• GitHub（オプション）: リポジトリ作成機能
• Vercel（オプション）: 自動デプロイ機能

注意事項

• 生成される画像はSVGベースが基本ですが、DALL·EやMidjourneyなどの外部APIと連携することも可能です（環境変数で設定）。
• APIキーなど認証情報は.envファイルに保存し、コードには含めないでください。
• 商用利用の際は、ロゴや画像のライセンスを確認してください。

環境変数（オプション）

GITHUB_TOKEN=your_github_personal_access_token
VERCEL_TOKEN=your_vercel_api_token

トラブルシューティング

• スキルが応答しない場合：npx skills update を実行してみてください。
• デプロイが失敗する場合：Vercelの設定ファイル（vercel.json）が正しく生成されているか確認してください。

ライセンス

MIT