mcpField
D
design-brief

design-brief

github.com/adeonirデザイン・UI839 回インストール1 日前に更新
リポジトリ

design-brief について

design-briefは、ルートのDESIGN.mdを通じてプロジェクトのビジュアルアイデンティティを策定・検証するスキルです。タスクに応じて操作を読み込み、既存プロジェクトでは作成前に現状を評価します。

主な機能

  1. 01ビジュアル方向性の探索と策定
  2. 02既存アイデンティティの評価
  3. 03DESIGN.mdの作成・更新
  4. 04ビジュアルのプレビューと確認
  5. 05設計ファイルの検証とトークン出力
  6. 06バージョン差分と回帰の比較

活用シーン

  1. 01新規プロジェクトのビジュアルスタイルを探索・決定
  2. 02既存デザインの一貫性や変化を監査
  3. 03ブランドのビジュアル指針を更新して検証
  4. 04デザインのプレビュー、トークン出力、バージョン比較

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/adeonir/agent-skills --skill design-brief

インストール後、Claude Code で/design-briefを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
agents/
openai.yaml
assets/
design.template.md
instructions/
design.md
diff.md
direction.md
export.md
identity-assessment.md
preview.md
validate.md
references/
aesthetics.md
anti-patterns.md
anti-slop.md
brand.md
cli.md
color-craft.md
discovery.md
product.md
style-directions.md
typography.md
scripts/
check-contrast.py
preview-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

すべての操作は、探索情報の読み込みから始まります。ユーザーが監査のみを依頼した場合、既存のデザインがあるプロジェクトの評価は、調査結果の提示をもって終了することがあります。

コメント