スキル自身の言葉で
ブランドアイデンティティ、デザイントークン、shadcn/uiとTailwindによるUIスタイリング、ロゴ生成（Gemini、Atlas Cloud、またはMuAPIによる55スタイル）、50点の納品物によるコーポレートアイデンティティプログラム、Chart.jsを用いたHTMLプレゼンテーション、バナーデザイン（ソーシャル、広告、Web、印刷向けの22のアートディレクションスタイル）、アイコンデザイン（Gemini 3.1 Proによる15スタイル、SVG出力）、そしてFacebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threadsにわたるソーシャルメディア用フォトデザインをカバーする統合デザインスキルです。ブランド、design-system、ui-stylingについては外部サブスキルにルーティングし、ロゴ、CIP、スライド、バナー、アイコン、ソーシャルフォトについては、Pythonスクリプト、AI生成、HTMLからスクリーンショットへのエクスポートを備えた組み込みワークフローを提供します。
生成されるもの
- chrome-devtoolsを介してエクスポートされる、プラットフォームの正確な寸法によるバナーPNGスクリーンショット
- 15スタイルのSVGアイコンファイル。複数サイズでのエクスポートとバッチバリエーションをオプションで対応
- 整理されたアセットディレクトリに保存される、プラットフォーム固有の寸法によるソーシャルメディア画像
仕組み
- 01タスクタイプ別のルーティング
このスキルは、ブランドアイデンティティとボイスをbrandサブスキルに、トークンと仕様をdesign-systemに、shadcn/uiとTailwindのコードをui-stylingにディスパッチし、ロゴ、CIP、スライド、バナー、アイコン、ソーシャルフォトについては組み込みワークフローで処理します。
- 02AIプロバイダーでロゴを生成する
Pythonスクリプトを実行して55のスタイル、30のカラーパレット、25の業種ガイドを検索し、その後Gemini Nano Banana、Atlas Cloud、またはMuAPIを介して白背景のロゴを生成します。
- 03モックアップ付きのCIP納品物を作成する
Gemini FlashまたはProモデルを使用して50点の納品物向けにコーポレートアイデンティティプログラムのモックアップを生成し、必要に応じてロゴオーバーレイを加え、その後出力のHTMLプレゼンテーションをレンダリングします。
- 04戦略的な HTML プレゼンテーションを構築する
スライド作成ワークフローのリファレンスを読み込み、Chart.js との連携、デザイントークン、コピーライティングの公式を用いてプレゼンテーションを作成します。
- 05HTML/CSS でバナーをデザインする
要件をヒアリングし、ui-ux-pro-max 経由で Pinterest をリサーチし、frontend-design と ai-artist/ai-multimodal でビジュアルを用いて HTML/CSS バナーをデザインし、chrome-devtools 経由で正確な寸法で書き出します。
- 06スクリーンショットを書き出して検証する
chrome-devtools または Playwright を使用して、デバイススケールファクター 2x で正確なピクセル寸法でデザインのスクリーンショットを取得し、最終的な書き出しの前に目視でレイアウトの問題を確認・修正します。