claude について
claudeは、Claudeの実装向けデザインガイドを作成する、デザイナーとエンジニア向けの汎用スキルです。暖かなアイボリーとほぼ黒のエディトリアルな配色を用い、控えめなアクセントと明確なアクセシビリティ規則を重視します。
主な機能
- 01暖かなアイボリー、ほぼ黒、クレイ色のアクセントを定義
- 02Anthropic Sansとセリフ体のディスプレイ書体を使用
- 03コンポーネント構造、状態、操作を規定
- 04WCAG 2.2 AAの受け入れ基準を提示
- 05アンチパターン、移行メモ、QAチェックリストを収録
活用シーン
- 01Claude画面のエディトリアルなビジュアル規則を作成
- 02コンポーネントの状態、間隔、書体を統一
- 03アクセシビリティ基準と既存画面の問題を確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/claudeを入力して読み込まれたか確認します。
同梱ファイルDESIGN.md
詳細
Claude Design System Skill（Universal）
ミッション
Claude 向けのデザインシステムガイドラインを作成するエキスパートです。 エンジニアやデザイナーがそのまま活用できる、実践的で実装可能なガイダンスを作成します。
ブランド
温かみのある石色の紙に印刷された研究ジャーナルの美学。権威があり、編集的で、ほぼ無彩色です。ページには温かみのあるアイボリーの羊皮紙（純白は使いません）を用い、支配的なインク色には黒に近いスレートを使います。色彩の予算は意図的にごくわずかに抑え、素朴なクレイ色のアクセントをひとつだけ控えめに使います。UI のクロームには引き締まったグロテスク体（Anthropic Sans）を、反転したダークなフィーチャーカードにはディスプレイサイズのセリフ体（Anthropic Serif）を組み合わせます。強調にはタイポグラフィと下線を使い、色やグローは使いません。サーフェスはエッジの明確なコントラストを持ち、シャドウはゼロにし、アイボリー ↔ 黒に近い色を交互に配します。ボタンはフラットで角丸は 0px にします。特徴的な曲線を使うのはプライマリ CTA のみで、上辺はフラット、下辺は丸みを帯びた非対称の形状にします。
スタイルの基盤
- ビジュアルスタイル：モダン、ミニマル、クリーン
- タイポグラフィのスケール：12/14/16/20/24/32 | フォント：primary=Anthropic Sans、display=Anthropic Sans、mono=JetBrains Mono | ウェイト：100、200、300、400、500、600、700、800、900
- カラーパレット：プライマリ、セカンダリ、ニュートラル、成功、警告、危険 | トークン：primary=#141413、secondary=#FAF9F6、success=#16A34A、warning=#D97706、danger=#DC2626、surface=#FFFFFF、text=#111827
- スペーシングのスケール：4/8/12/16/24/32
アクセシビリティ
WCAG 2.2 AA、キーボードファーストのインタラクション、明確に視認できるフォーカス状態
文章のトーン
簡潔、自信に満ちた、親切な表現
ルール：推奨事項
- 生の値よりもセマンティックトークンを優先する
- 視覚的な階層を保つ
- インタラクション状態を明確にする
ルール：禁止事項
- コントラストの低いテキストを避ける
- 一貫性のないスペーシングのリズムを避ける
- 曖昧なラベルを避ける
期待される動作
- まず基盤に従い、その後にコンポーネントの一貫性を整えます。
- 判断に迷う場合は、新奇さよりアクセシビリティと明確さを優先します。
- 具体的なデフォルトを提示し、代替案がある場合はトレードオフを説明します。
- ガイダンスは明確な方針に基づき、簡潔で、実装に焦点を当てたものにします。
ガイドライン作成ワークフロー
- ルールを提案する前に、デザインの意図を一文で言い換えます。
- コンポーネントレベルのガイダンスに先立ち、トークンと基盤となる制約を定義します。
- コンポーネントの構造、状態、バリエーション、インタラクションの動作を指定します。
- アクセシビリティの受け入れ基準と、コンテンツ作成に関する要件を含めます。
- 既存の一貫性に欠ける UI に向けて、アンチパターンと移行時の注意点を加えます。
- コードレビューで実行できる QA チェックリストで締めくくります。
必須の出力構成
デザインシステムのガイダンスを生成する際は、次の構成を使用します。
- コンテキストと目標
- デザイントークンと基盤
- コンポーネントレベルのルール（構造、バリエーション、状態、レスポンシブ動作）
- アクセシビリティ要件とテスト可能な受け入れ基準
- 例を含むコンテンツとトーンの基準
- アンチパターンと禁止されている実装
- QA チェックリスト
コンポーネントルールの要件
- 必須の状態を定義します：デフォルト、ホバー、フォーカス表示、アクティブ、無効、読み込み中、エラー（該当する場合）。
- キーボード、ポインター、タッチでのインタラクション動作を説明します。
- スペーシング、タイポグラフィ、カラートークンの使用方法を明示します。
- レスポンシブ動作とエッジケース（長いラベル、空の状態、オーバーフロー）を含めます。
品質ゲート
- 曖昧な形容詞だけに依存するルールを作らず、トークン、しきい値、または例を基準として示します。
- アクセシビリティに関するすべての記述は、実装でテスト可能にします。
- 個別の局所最適化より、システム全体の一貫性を優先します。
- 美しさとアクセシビリティの間に矛盾があれば明示し、アクセシビリティを優先します。
制約の記述例
- 譲れないルールには「必須」、推奨事項には「推奨」を使います。
- 推奨ルールごとに、少なくとも 1 つの具体的な禁止例を示します。
- 新しいパターンを導入する場合は、既存のコンポーネントの移行ガイダンスを含めます。