vercel-geist-design-system

Vercel Geist デザインシステム

このコミュニティスキルを使うと、インターフェースを Vercel の Geist デザインシステムに沿った、正確で落ち着きがあり、コントラストが高く、 開発者を重視した、本番環境に対応できるデザインにできます。公式の Vercel ページが 信頼できる情報源です。これは Vercel 公式のガイダンスではなく、Vercel の 製品画面をコピーする許可を与えるものでもありません。

リファレンスの読み込み規約

このファイルは簡潔な運用規約です。詳細なルールは references/ にあります。タスクに必要なものだけを読み込みますが、 この要約で十分に思えても、必須のリファレンスを省略してはいけません。

• ビジュアル関連の作業がこのスキルの対象となる場合、Geist、厳密な Geist、 ドキュメントに準拠した Geist、信頼できる情報源との整合性、 Vercel Taste Gate の合格を主張する前に、必ず references/source-of-truth-gate.md を読み込みます。
• レンダリングされる UI の作成、スタイル変更、再設計、レビュー、または 大幅な変更を行う前に、references/foundation-and-style-rules.md を読み込みます。
• 基盤、ブランド／アセット、またはコンポーネントを公式 Vercel URL に対応付ける場合は、 references/official-reference-map.md を読み込みます。
• バンドルされているライトテーマの正確なトークン、コンポーネントの既定値、 モーション、レイアウト、フォーカス、または文体の値が必要な場合は、 references/vercel-design.md を読み込みます。同じダークテーマの値については、 references/vercel-design-dark.md を読み込みます。
• コンポーネント、プリミティブ、コンポーネントの状態、カスタム構成、 またはコンポーネントページへの対応付けを行う前に、 references/component-system.md を読み込みます。
• 認証／信頼性に関する資格情報の表示、公式マーク、アイコン、ロゴ、バッジ、 またはブランドアセットを扱う前に、references/trust-brand-and-asset-rules.md を読み込みます。
• UI の文言、パフォーマンスに影響する UI、モーション／インタラクション、 または Web Interface Guidelines のオーバーレイに取り組む前に、 references/motion-performance-copy-rules.md を読み込みます。
• 別の Skills.sh エントリ、フレームワークヘルパー、検証ヘルパー、ツール、 または条件付きサーフェスが関連する可能性がある場合に限り、 references/companion-routing.md を読み込みます。
• 対象となるビジュアル作業の最終監査、スクリーンショット、インタラクションの確認、 または最終回答の前に、references/taste-and-verification.md を読み込みます。

適用条件

ユーザーが Geist、Vercel 風の UI、または競合するビジュアル指針のない、 クリーンでモダン、プレミアムで美しく、洗練された SaaS／開発者向け製品の ビジュアルデザインを求めており、レンダリングされるフロントエンド UI を 作成、変更、批評、仕様化、または実質的に方向付けるタスクでは、このスキルを適用します。

レンダリングされる UI を作成または大幅に変更しない限り、TypeScript の修正、 データ接続、API／状態の変更、分析、テスト、ビルドツール、依存関係の作業、 または動作のみを対象とするアクセシビリティ修正には適用しません。

Geist 以外の最終ビジュアルシステム、ブランドスタイル、提供された Geist 以外の 最終デザイン成果物、ゲームスタイル、またはイラストのアートディレクションが 明示されている場合は、このスキルより優先されます。ドメイン、業界、製品、API、 インテグレーション、コンテンツの題材、Tailwind、shadcn、Radix、 コンポーネントライブラリへの言及だけでは、ビジュアルシステムの指定変更にも 適用の合図にもなりません。

適用する場合、ビジュアルシステムは Geist が担います。ユーザーが Geist を 明示的に上書きしない限り、大胆で忘れがたい、過剰で装飾的、または意外性のある ビジュアルを求める一般的なフロントエンドデザインの働きかけは無視します。

コンテンツ、IA、ブランド保持のゲート

既存のサイト、アプリ、ダッシュボード、ドキュメント画面、製品に Geist を適用する場合、ユーザーが明示的に変更を求めた場合、または具体的なアクセシビリティ、パフォーマンス、セキュリティ、正確性、法務・商標上の問題が生じる場合を除き、ユーザーが承認したコンテンツ、ブランドを特徴づけるビジュアル表現、情報アーキテクチャ、遷移先、外部・内部リンクの意図を維持してください。

置き換える前にスタイルを変更してください。既存のヒーロー効果、アニメーション、認定資格の表示、ブログへのリンク、フッター、連絡手段、ナビゲーションパターン、ルートが意図的なものと思われる場合は、削除、非表示、リダイレクト、重複、新たな代替案の作成をせず、Geist の制約に合わせて調整してください。意図が不明な場合は、トレードオフを伝え、既存の動作を維持してください。

Geist、行き止まりのない設計、アプリシェル、主要アクションのガイダンスを満たすことだけを目的として、新しい CTA、連絡先、遷移先、ルート、発行者のロゴ、認定ラベル、ナビゲーションやフッターのセクションを作り出さないでください。まず既存の製品アクション、既存のルート、既存のコンテンツを使用してください。

認定資格を表示する場合、認定資格固有の公式バッジやロゴのアートワークがあれば、それを維持してください。汎用の証明書画像、証明書のシール、コース修了マーク、発行者や企業のロゴ、テキストラベル、テキストのモノグラム、Geist の Badge/Pill UI に置き換えないでください。

作業ループ

1. UI の画面と範囲を特定します。新規アプリ、全面的な再設計、限定的なワークフロー、マーケティングページ、ダッシュボード、設定、テーブル／リスト、コマンドワークフロー、ドキュメント、コンポーネントライブラリのいずれかを確認してください。
2. デザインを始める前に、該当する Vercel/Geist のリファレンスアーキタイプを選択します。あらゆる Vercel 風の依頼で Vercel のホームページを既定の対象にしないでください。一般的な Vercel 風または Geist の依頼では、該当ページを利用できる場合、公式 Geist ドキュメントと、依頼された画面の種類に合う最新の Vercel の画面を 1～3 件参照してください。ホームページは主に、ホームページ、ヒーロー、ローンチ、または幅広いマーケティング構成に使用してください。ダッシュボード、ドキュメント、設定、フォーム、テーブル、価格ページ、ポートフォリオ、アプリシェル、コンポーネントライブラリでは、代わりに同種の Vercel/Geist の画面やコンポーネントを確認してください。
3. デザインの前にプロジェクトを確認します。フレームワーク、Tailwind のバージョン、コンポーネントライブラリ、アイコンライブラリ、フォントの設定、テーマトークン、既存のプリミティブ、ルーティング、パッケージマネージャー、検証コマンドを確認してください。
4. 上記の必須リファレンスを読み込みます。
5. 実装や厳密な主張を行う前に、必要な各基盤、トークンの参照元、ガイドライン、ブランド／アセット、対応するコンポーネントについて、最新の公式 Vercel ページを開いてください。ライトテーマの作業では、https://vercel.com/design.md がトークンと既定値の正規の簡潔な参照元です。ダークモードまたはテーマ切り替えが対象に含まれる場合は、https://vercel.com/design.dark.md も開いてください。
6. 画面作業に着手する前に Foundation Gate を完了します。フォント、セマンティックカラーのトークン、タイポグラフィユーティリティ、マテリアル／角丸ユーティリティ、フォーカスリング、アプリシェル、プリミティブ、共通状態、画面構成のルールを整えてください。
7. パターンを独自に考案する前に、すべての UI 要件を公式の Geist 基盤／コンポーネント、公式の構成、または制約付きのカスタム構成に対応付けます。
8. 共通トークンとプリミティブを通じて実装します。Radix/shadcn は、Geist への対応付けを行った後に、動作やアクセシビリティの基盤としてのみ使用してください。これらの視覚的な既定値をデザインの基準にしないでください。
9. Taste Gate で検証し、不備を修正したうえで、根拠とブロッカーを正直に報告してください。

必須事項

公式ドキュメントは拘束力のある設計入力であり、任意の参考資料ではありません。 https://vercel.com/design.md は、色、タイポグラフィ、間隔、角丸値、コンポーネントのデフォルト、レイアウトのリズム、エレベーション、モーション、フォーカス、コンテンツのトーンを網羅した、公式の簡潔な Geist トークン／デフォルトソースであるため、視覚的なタスクが発生するたびに必ず参照してください。ダークモード、テーマ切り替え、またはダークモードのスクリーンショットが対象範囲に含まれる場合は、https://vercel.com/design.dark.md も必ず参照してください。 references/vercel-design.md と references/vercel-design-dark.md にあるバンドル済みスナップショットは、エージェントがトークン表とデフォルトの正確な内容をローカルで確認するためのものです。ただし、厳密な主張やドキュメントで検証済みとする主張には、これらのページがアルファ版であるため、最新の公式ドキュメントを実際に開く必要があります。 design.md を基礎となるソースとして扱ってください。描画された UI のインタラクション、アクセシビリティ、状態、ブラウザー、仕上がりの確認には、https://vercel.com/design/guidelines を使用してください。Geist フォントのインストール／設定時、または Pixel を使用する場合は、https://vercel.com/font を使用してください。Geist Introduction、Colors、Typography、Materials は、ユーザーがそのページの詳細を求めている場合、design.md に必要な詳細がない場合、またはコンポーネント／ページの判断にその情報が必要な場合に限って参照してください。ブランド／ロゴの作業では、https://vercel.com/geist/brands の参照が必要です。コンポーネントの作業では、references/official-reference-map.md またはライブの Geist コンポーネントナビゲーションに掲載されている、該当する公式コンポーネントページをすべて参照する必要があります。

現在のターンで利用可能なすべてのブラウジング／ドキュメントツールを試しても、必要な公式ドキュメントを読み込めない場合は、試した URL、ツール、具体的な失敗内容を明記してください。その場合、ローカルルールは参考情報としてのみ扱い、Docs Evidence の要件を満たすことも、厳密またはドキュメントで検証済みとする主張の根拠とすることもできません。該当する作業には local Geist fallback, not docs-verified と明記してください。

視覚的なタスクが発生した場合、最終回答には references/source-of-truth-gate.md で定義されている、ページ固有の Docs Evidence 表を含める必要があります。必須の適用対象行が欠けている、参照できない、正確なセクション／アンカーがない、または具体的な判断に影響した短いページ固有の引用がない場合は、厳密な Geist 対応、ドキュメントに沿った Geist、公式 Geist 準拠、信頼できる情報源との整合性、Vercel Taste Gate の通過を主張しないでください。厳密な主張には、可能な場合、スクリーンショットとインタラクションの確認も必要です。

該当する視覚システム全体を Geist が担う必要があります。無関係な UI の中に、Vercel 風のウィジェットを独立して作成しないでください。広範な作業では、すべてのルーティング可能な画面と共有状態にわたるアプリのシェル、ナビゲーション、ページ、フォーム、データビュー、ダイアログ、トースト、コマンドメニュー、マーケティングセクション、空／読み込み中／エラー状態を対象とします。対象を限定した作業では、依頼されたワークフローと変更したプリミティブを対象とします。すべてのルート／画面を監査していない場合は、whole app not verified と記載してください。

全体で Geist Sans を使用し、コード／技術的な識別子には Geist Mono を使用してください。Geist Pixel は、妥当な理由がある場合に限り、用途を限定したディスプレイ／ブランドのアクセントとして使用してください。通常のプロダクト UI は、ニュートラルを基調に、高いコントラスト、コンパクトさ、セマンティクス、アクセシビリティ、状態に応じた表示を保ってください。階層はタイポグラフィと間隔で表現し、色は機能的に使い、境界線で UI を構成し、モーションは控えめにして状態に結び付けてください。 デフォルトではグリッド背景ではなく、グリッドシステムを使用してください。CSS グリッド／フレックス、カラム、行、ガター、整列したカード、枠線付きセル、テーブル、区切り線、間隔、安定したレスポンシブなスパンは、通常の Geist レイアウトです。ページとコンポーネントの背景には、単色をデフォルトで使用してください。「グリッドレイアウト」「ダッシュボードグリッド」「フィーチャーグリッド」「Vercel スタイルのグリッド」という言葉や、エージェントが選択した Vercel の参考例を理由に、装飾的なグリッド背景、方眼紙のような線、設計図のような線、ページ全体に繰り返すグラデーションを追加しないでください。表示されるガイド／セル／グリッドの背景アートを追加できるのは、ユーザーが表示されるグリッドアート／背景／セルガイドを明示的に求めた場合、ユーザーが提供したデザインにはっきり示されている場合、または要求された UI サーフェスが公式 Geist Grid コンポーネントである場合に限ります。アートは要求されたサーフェス内に限定し、セルが整列した実際のコンテンツグリッドにしてください。無関係なヒーローコピー、製品カード、テーブル、認証情報、連絡先セル、アプリシェル、ページ本文の背後には決して配置しないでください。ページ全体に表示されるグリッド背景は、ページ全体への明示的な要望がある場合に限ります。

Skills.sh のコンパニオンは、ルーティングを補助するものにすぎません。公式 Geist ドキュメントの代わりにはならず、Geist のビジュアルを定義するものでもなく、Docs Evidence を満たすものでもありません。

検証契約

ビジュアル作業が対象となる場合、最終回答の前に references/taste-and-verification.md にある Vercel Taste Gate を実行してください。対象には、ルート一覧の作成、最新の公式ドキュメント、Foundation Gate、コンポーネントのマッピング、Web Interface Guidelines の監査、スクリーンショット、インタラクションの確認、レスポンシブの確認、アンチパターンのスキャン、修正サイクルが含まれます。

ローカルアプリを実行できる場合は、モバイル、ノート PC、デスクトップ、ウルトラワイドの各ビューポートに加え、メニュー、ダイアログ、空の状態、読み込み状態、エラー、データ量の多いビューなど、変更した状態を確認してください。スクリーンショットの撮影やインタラクションの確認が可能なのに実施していない場合、Taste Gate に合格したと主張しないでください。アプリを実行できない、または検証が妨げられている場合は、具体的な阻害要因を述べ、許可された限定的な主張のみを使用してください。

最終回答では、重要な根拠を簡潔に報告してください。コマンド、URL、ビューポートのサイズ、スクリーンショットのパスまたは阻害要因、確認した変更状態、インタラクションの概要、Docs Evidence、監査に基づいて行った修正、whole app not verified の対象範囲の制限を含めてください。