Communitygithub.com

デザインディレクション策定エキスパート

新しいUIの独自性のあるビジュアルディレクションを確立したり、意図的なリデザインを行う際に使用します。

デザインディレクション策定エキスパート とは?

このスキルは、UIデザインにおいて明確で独自性のあるビジュアルディレクションを確立するためのプロセスを提供します。新しいプロダクトのデザインや既存UIの意図的なリデザインにおいて、単なる配色変更に留まらず、オーディエンス、コンテンツ、ジョブに基づいた2つの異なる方向性を提案します。比較基準は、配色だけでなく、階層、構図、タイポグラフィ、強調表現など多岐にわたります。決定された方向性は`direction.md`に記録され、選択の委譲があった場合はその旨と根拠が明記されます。このスキルはClaude CodeなどのAIエージェントプラットフォーム上で動作し、含まれているフロントエンドデザインガイダンスと連携することで、より一貫性のあるデザイン判断が可能です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/art-direction

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

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

ドキュメント

アートディレクション

Português (Brasil)

方向性を選択する前に、含まれているフロントエンドデザインガイダンス を読んでください。その具体的なビジュアル原則を、ブリーフやプロジェクトの制約とともに使用します。

brief.mdと既存の制約を読みます。新製品/リデザインでは、オーディエンス、コンテンツ、ジョブに基づいた、実質的に異なる2つの方向性を提案します。単なるパレットの変更ではなく、階層、構図、タイポグラフィ、強調表現を比較します。

選択された方向性、その根拠、決定ステータス/ソースをdirection.mdに記録します。選択が委譲された場合は、最適なものを選び、委譲されたことを記録します。それ以外の場合は、新しい方向性を実装する前に、重要な決定を解決します。

元の2パスプロセスに従います:

  1. 4~6個の名前付き16進数カラー、タイプフェイスとその役割、レイアウトコンセプト、整列を示すASCIIワイヤーフレーム、および特徴的な原則を計画します。
  2. ブリーフおよび類似した考えられる製品と比較します。無関係なテーマで同一に見える選択肢は修正します。変更とその理由を記録します。

明示的なユーザーの指示が優先されます。これには、ソースによってクリシェとして言及されたスタイルも含まれます。既存のアイデンティティがあるプロジェクトは、通常それを再利用します。

実際のコンテンツを使用してください。表現を1つの記憶に残る要素に集中させ、規律ある階層でそれを支えます。不足しているフォントやアセットを説明し、サービスが利用可能であると仮定するのではなく、意図的なフォールバックを使用します。

Individual skills in this repo

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

関連スキル