スキル自身の言葉で
このスキルは、ブランドアイデンティティ、トーン、メッセージングフレームワーク、ビジュアルアイデンティティの基準、およびアセットの一貫性を管理します。docs/brand-guidelines.mdに単一の信頼できる情報源を維持し、それをdesign-tokens.jsonおよびdesign-tokens.cssに同期させます。このスキルは、プロンプトにブランドコンテキストを注入するスクリプト、アセットの命名や形式を検証するスクリプト、カラーパレットに対して色を抽出・比較するスクリプト、そしてブランドの一貫性を監査するスクリプトを提供します。
トーン、ビジュアルアイデンティティ、メッセージング、カラー管理、タイポグラフィ、ロゴの使用方法、承認ワークフローに関する参照フレームワークが含まれています。ユーザーはブランドアイデンティティを更新し、その変更をすべてのデザインシステムに反映させることができます。また、アセットやコンテンツがブランド基準に準拠しているかをレビューすることもできます。
生成されるもの
- assets/design-tokens.cssにあるCSS変数ファイル
仕組み
- 01ブランドガイドラインのソースを編集する
すべてのブランド定義の単一の信頼できる情報源であるdocs/brand-guidelines.mdを修正します。
- 02デザイントークンへ同期する
sync-brand-to-tokens.cjsを実行して、ガイドラインの変更をassets/design-tokens.jsonとassets/design-tokens.cssに反映します。
- 03プロンプトにコンテキストを注入する
inject-brand-context.cjsを使用してブランドコンテキストを抽出し、エージェントのプロンプトに挿入します（任意でJSON形式にできます）。
- 04アセットを検証する
アセットパスを指定してvalidate-asset.cjsを実行し、命名規則、サイズ、フォーマットの準拠を確認します。
- 05カラーを抽出して比較する
extract-colors.cjsを使用して画像からカラーを抽出したり、パレットを表示したりし、ブランド標準と比較します。