mcpField
D
design-critic-skill

design-critic-skill

github.com/sergekostenchukデザイン・UI3262 回インストール18 週間前に更新
リポジトリ

design-critic-skill について

design-critic-skillは、スクリーンショット、Figmaのフレーム、ソースの文脈を評価し、観察できる視覚上の問題を具体的な修正案にまとめます。証拠の種類を明示し、プライバシーと検証の手順も含みます。

主な機能

  1. 01スクリーンショット、Figma、コードの評価モード
  2. 02観察可能な問題に基づく改善案
  3. 03評価結果から実装向け修正案を作成
  4. 04プライバシーと証拠種別の確認
  5. 05構造化された評価レポートのテンプレート

活用シーン

  1. 01スクリーンショットの視覚的階層の確認
  2. 02実装前のFigmaフレームの評価
  3. 03評価結果をWebアプリの修正案に整理

インストール

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

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill design-critic-skill

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

同梱ファイル

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

agents/
openai.yaml
assets/
critique-report.template.md
evals/
evals.json
references/
anti-slop-patterns.md
hierarchy-rubric.md
reference-products.md
taste-constraints.md

詳細

デザイン批評スキル

実装全体や自動監査ではなく、ビジュアル品質の判断と具体的な仕上げが主なニーズである場合に、この専門スキルを使用します。

動作モード

  • screenshot-critique：スクリーンショットまたは画像をレビューします。
  • figma-critique：提供された Figma フレームまたはコンテキストをレビューします。
  • code-context-critique：ソースとローカルのスクリーンショットから、想定されるビジュアル上の問題を批評します。
  • fix-brief：批評を、ウェブアプリまたはマーケティング用スキル向けの実装指示に変換します。

必須ワークフロー

  1. references/hierarchy-rubric.mdを読みます。
  2. デザインを「洗練されている」と評価する前に、references/anti-slop-patterns.mdを読みます。
  3. 批評を観察可能な事実に基づかせるため、references/taste-constraints.mdを使用します。
  4. Figma、スクリーンショット、外部ツールを使用する前に、../../shared/privacy-policy.mdを適用します。
  5. 構造化された出力にはassets/critique-report.template.mdを使用します。
  6. 根拠の種類として、screenshot、Figma、source、browser、またはManualを明記します。

批評ルール

  • 指摘事項は、階層、グループ化、視線の流れ、コントラストのリスク、余白、文字サイズのスケール、操作の手がかり、一貫性、コンテンツ密度、アクションの優先度など、観察可能な問題に結び付けてください。
  • 修正方針を示さずに、曖昧な好みの主張をしないでください。
  • アクセシビリティ、DOM、パフォーマンス、分析に関する根拠を捏造しないでください。
  • 任意のクラウドツールは、承認後のアイデア出しを補助するためにのみ使用でき、ローカルでの判断に代わるものではありません。

検証

python3 $CODEX_SKILLS_DIR/.system/skill-creator/scripts/quick_validate.py $CODEX_SKILLS_DIR/design-critic-skill
python3 $CODEX_SKILLS_DIR/senior-skill-architect/scripts/lint_production_skill.py $CODEX_SKILLS_DIR/design-critic-skill

出力形式

Input:
Evidence type:
Top findings:
Fix brief:
What not to change:
Verification:
Privacy notes:

コメント

Markdown 対応