design-brief について
design-briefは、ルートのDESIGN.mdを通じてプロジェクトのビジュアルアイデンティティを策定・検証するスキルです。タスクに応じて操作を読み込み、既存プロジェクトでは作成前に現状を評価します。
主な機能
- 01ビジュアル方向性の探索と策定
- 02既存アイデンティティの評価
- 03DESIGN.mdの作成・更新
- 04ビジュアルのプレビューと確認
- 05設計ファイルの検証とトークン出力
- 06バージョン差分と回帰の比較
活用シーン
- 01新規プロジェクトのビジュアルスタイルを探索・決定
- 02既存デザインの一貫性や変化を監査
- 03ブランドのビジュアル指針を更新して検証
- 04デザインのプレビュー、トークン出力、バージョン比較
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ adeonir/ agent-skills --skill design-briefインストール後、Claude Code で/design-briefを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
README.mdagents/openai.yamlassets/design.template.mdinstructions/design.mddiff.mddirection.mdexport.mdidentity-assessment.mdpreview.mdvalidate.mdreferences/aesthetics.mdanti-patterns.mdanti-slop.mdbrand.mdcli.mdcolor-craft.mddiscovery.mdproduct.mdstyle-directions.mdtypography.mdscripts/check-contrast.pypreview-server.ts詳細
デザインブリーフ
ルートの DESIGN.md に反映されるビジュアルアイデンティティを策定し、検証します。
トリガー
| 用語または状態 | 読み込むファイル |
|---|---|
| ビジュアルリファレンスがない、方向性を探す、見た目を見つける、どんな印象にすべきか分からない | direction.md |
| 評価する、現在のアイデンティティを監査する、一貫している点やずれた点を確認する | identity-assessment.md |
| 作成する、抽出する、明文化する、コード化する、更新する、リブランドする、進化させる、同期する | design.md |
| プレビューする、調整する、コメントする、視覚的に確認する | preview.md |
DESIGN.md を検証する、リントする、チェックする | validate.md |
| トークンをエクスポートする | export.md |
| バージョンを比較する、トークンの差分、リグレッション | diff.md |
一度に読み込む操作は1つだけです。プレビュー、検証、エクスポート、差分の確認は直接開始します。既存のデザインがあるプロジェクトでの作成は、まずアイデンティティの評価を行います。
ワークフロー
greenfield, direction absent → direction → design → validate → preview
greenfield, direction given ───────────→ design → validate → preview
brownfield → identity-assessment → confirmed intent → design → validate
すべての操作は、探索情報の読み込みから始まります。ユーザーが監査のみを依頼した場合、既存のデザインがあるプロジェクトの評価は、調査結果の提示をもって終了することがあります。
コメント
Markdown 対応