Communitygithub.com

デザイン(デザインスキル)

製品固有の階層、タイポグラフィ、レイアウト、コンポーネント、コピー、モーション、アクセシビリティを使用して、ビジュアルインターフェースやアーティファクトを設計、洗練、またはレビューします。既存のビジュアル言語は、再設計が要求されない限り保持し、関連するデザインパーツのみを選択します。

デザイン(デザインスキル) とは?

このスキルは、UI/UXデザインのプロフェッショナルやAIエージェント向けに設計されたデザインアシスタントです。製品のビジュアルインターフェースを設計、洗練、レビューするための体系的なアプローチを提供します。主な特徴として、タイポグラフィ、レイアウト、コンポーネント、モーション、アクセシビリティなどの各デザイン領域を個別に参照可能なルーティングテーブルが用意されており、ユーザーは特定のタスクに必要な部分だけを効率的に読み取ることができます。また、独立したデザインエージェント(フロー/コンテンツレビューア、アクセシビリティレビューア、ビジュアルレビューア)を活用した境界のあるレビューも推奨しており、大規模なアーティファクトに対しては、重複のない独立したレビューを許可しています。このスキルは、Cursor、Claude Code、CodexなどのAIエージェントプラットフォームで使用でき、エビデンスベースの検証と優先順位付けされたフィードバックを重視します。実際の成果物のレンダリングや動作確認を可能な限り行い、コード検査やスクリーンショットだけでは証明できないキーボード動作や支援技術のサポートを検証します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Dev-PGVAA/skills/tree/HEAD/design

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

デザイン

アーティファクトがユーザーと主題に役立つようにしてください。ユーザーのブリーフ、既存の製品動作、ブランド、コンテンツ、プラットフォーム、アクセシビリティ要件は、ヒューリスティックな好みよりも優先されます。デザインに関する主張を行う前に、現在のアーティファクトまたは関連するコード/アセットを検査してください。

洗練は確立されたアイデンティティと機能するワークフローを保持します。再設計はユーザーが実際に要求した次元を変更します。既存の選択を自動的にすべて破棄するわけではありません。業務用ツールは、なじみのあるパターンとニュートラルなタイポグラフィの恩恵を受ける場合があります。斬新さは、それがブリーフをサポートする場合にのみ有用です。

ルーティング

このタスクに影響する部分のみを読んでください。狭いスペーシングの修正に、方向性に関するマニフェストや10段階のワークフローは必要ありません。

パートリファレンス使用目的
direction方向性製品の意図、サーフェスモード、既存のビジュアル言語、意図的な新しい方向性
tokensトークンタイプ、スペーシング、色、形状、コンポーネントの役割
typographyタイポグラフィフォント、グリフカバレッジ、メジャー、サイズ、行送り、データ
layoutレイアウト階層、グループ化、グリッド、コンテンツの順序、レスポンシブ動作
componentsコンポーネントコントロール、関連する状態、インタラクションとプラットフォームのパターン
motionモーション動きの抑制をサポートするフィードバックと状態遷移
anti-slop特異性レビュー製品を曖昧にする一般的なビジュアル/コピーパターン
copyコピーラベル、エラー、空の状態、マーケティングの主張
a11yアクセシビリティ該当するWCAG要件と実用的なチェック
reviewレビューエビデンスベースの検証と優先順位付けされた調査結果

各パートからリンクされている詳細なリファレンスは、オプションのドメイン詳細を提供します。数値によるデザインスケールは開始点であり、普遍的な要件やアクセシビリティの証明ではありません。該当する標準、ユーザー要件、実際のユーザビリティがブロッカーを決定します。

独立したデザインエージェント

実質的なアーティファクトについては、有用で許可されている場合に、境界のある独立したレビューまたは重複しない実装を使用してください。

  • フロー/コンテンツレビューア: 実際の画面とユーザータスク。欠落している状態、不明瞭なアクション、ドメインの不正確さ、壊れたジャーニーを特定します。
  • アクセシビリティレビューア: 特定のフロー、レンダリングされたUI、関連するソース。再現可能なバリア、該当する基準、重大度、未テスト領域を返します。
  • ビジュアルレビューア: 現在のアーティファクト、ブリーフ、以前のバージョン。階層、タイポグラフィ、レスポンシブ動作、スクリーンショット/ページの証拠によるアイデンティティの保持を評価します。

実際のブリーフ、アセット、スコープ、入力状態、許可されるアクション、出力形式、および努力の制限を提供します。所望の調査結果でレビューアを誘導しないようにします。親は、方向性、共有トークン、最終実装、および統合を所有します。同時編集には、互いに素なファイルのみを割り当てます。製品全体を再設計するために、複数のデザイナーを送信しないでください。デフォルトでは再帰的な委任は行いません。小規模な作業や利用できないツールには、逐次レビューを使用します。

エビデンスと配信

可能な場合は実際のアーティファクトをレンダリングまたは実行し、関連する状態と代表的なサイズを検査してから、修正を検証します。コード検査とスクリーンショットだけでは、キーボード動作、支援技術のサポート、またはライブ統合を証明できません。何が観察されたか、ソースで何がチェックされたか、何が未検証のままかを述べてください。部分的なチェックリストや自動化されたスキャンからWCAG準拠を主張しないでください。

詳細なリファレンスの帰属は、ソースキットから保持されます。これらは帰属通知であり、現在のプラットフォームドキュメントまたはすべてのライセンス条項が独立して監査されたという主張ではありません。正確なコンプライアンスまたはプラットフォームバージョンの詳細が重要な場合は、公式の最新標準を使用してください。

回答の声

最初に要点を述べてください。段階的なオープナー、「XではなくY」、チャットの残骸、重要性のパディングはありません。短い文を長い文の隣に配置します。事実と修飾語は、証拠と同じ強さを保ちます。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

関連スキル