vercel-ui-skills

Vercel UI スキル

AI エージェントで Vercel 風のインターフェースを構築するための、独自の制約です。

適用する場面

以下の場合に、これらのガイドラインを参照してください。

• ライトモードのインターフェースを構築する場合
• Vercel に着想を得たデザインシステムを作成する場合
• Inter フォントと 4px グリッドを使った UI を実装する場合

色

• 主なサーフェスには明るい背景を使用することを推奨します
• ページの背景（surface-base）には #F9F9F9 を使用する必要があります
• 主なアクションとフォーカス状態（accent）には #000001 を使用する必要があります
• カラーパレットを絞ることを推奨します（現在 12 色が検出されています）
• アクセシビリティのため、テキストのコントラスト比を少なくとも 4.5:1 に保つ必要があります

セマンティックトークン

Token	HEX	RGB	Usage
surface-base	#F9F9F9	rgb(249,249,249)	ページの背景
surface-raised	#111111	rgb(17,17,17)	カード、モーダル、盛り上がったサーフェス
surface-overlay	#000001	rgb(0,0,1)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#797979	rgb(121,121,121)	見出し、本文
text-secondary	#929292	rgb(146,146,146)	セカンダリテキスト、控えめなテキスト
text-tertiary	#1B1B1B	rgb(27,27,27)	追加テキスト
border-default	#C8CDD1	rgb(200,205,209)	控えめな境界線、区切り線
accent	#000001	rgb(0,0,1)	主なアクション、リンク、フォーカス

タイポグラフィ

• プライマリフォントファミリーとして Inter を使用する必要があります
• 一貫性を保つため、フォントファミリーを 1 つにすることを推奨します
• 主見出しには 44px / extra_bold を使用する必要があります
• 本文には 29px / 700 を使用する必要があります
• フォントのウェイトを絞ることを推奨します（現在 5 種類が検出されています）
• 見出しには text-balance、本文には text-pretty を使用する必要があります
• 数値データには tabular-nums を使用することを推奨します
• 明示的に依頼されない限り、letter-spacing を変更してはいけません

テキストスタイル

Style	Font	Size	Weight	Color	Count
heading-1	Inter	44px	extra_bold	#383838	1
body	Inter	29px	700	#1B1B1B	1
body-secondary	Inter	28px	500	#717171	1
text-25px	Inter	25px	500	#828282	1
text-24px	Inter	24px	500	#797979	1
text-24px	Inter	24px	700	#1E1E1E	1
text-23px	Inter	23px	400	#6C6C6C	1
text-20px	Inter	20px	500	#262626	1
text-18px	Inter	18px	400	#797979	1
text-18px	Inter	18px	500	#373737	1

タイポグラフィの参照

フォントファミリー：

• Inter（21 回使用）

フォントサイズ： 10px, 12px, 13px, 14px, 15px, 18px, 20px, 23px, 24px, 25px, 28px, 29px, 44px

スペーシング

• スペーシングには 4px グリッドを使用する必要があります
• 次のスケールからスペーシングを選ぶことを推奨します：4px, 5px, 6px, 10px, 25px, 54px, 59px, 92px
• 要素間のデフォルトの間隔には 5px を使用することを推奨します
• 任意のスペーシング値を使用してはいけません（デザインスケールを使用してください）
• コンテナ内のパディングを一貫させることを推奨します

境界線

• 次のスケールから border-radius を使用する必要があります：5px, 6px, 7px, 22px, 23px
• ピル型の要素には 22px 以上の半径を使用することを推奨します
• 境界線の幅は 1px、3px に限定することを推奨します
• デフォルトの border-radius には 23px を使用することを推奨します
• 任意の border-radius 値を使用してはいけません（デザインスケールを使用してください）
• 要素を区切るには控えめな境界線（1px）を使用することを推奨します

Border Radius の参照

スケール： 5px, 6px, 7px, 22px, 23px

レイアウト

• 基準ビューポート幅 1920px 向けにデザインする必要があります
• 要素の幅には 8px、181px、66px を一貫して使用することを推奨します
• 明確な階層を持つ、テキスト主体のレイアウトを保つことを推奨します
• h-screen は使用せず、ビューポート全体の高さには h-dvh を使用してください
• 固定要素では safe-area-inset を考慮する必要があります
• 正方形の要素には w-* と h-* の組み合わせではなく、size-* を使用することを推奨します

検出されたレイアウトパターン

• メインコンテンツ：幅：1920px、高さ：1080px
• メインコンテンツ：幅：1511px、高さ：790px
• メインコンテンツ：幅：1098px、高さ：735px
• ヘッダー：高さ：59px

コンポーネント

ボタン

Variant	Background	Text	Border	Height	Radius
Ghost	transparent	#545454	none	-	-

インタラクティブ状態

フォーカス

• アクセントカラー（#000001）の2pxのアウトラインを必ず使用してください
• 2pxのアウトラインオフセットを必ず使用してください
• フォーカスインジケーターを削除しないでください

ホバー

• ボタン（プライマリ）：背景色を10％明るくしてください
• ボタン（セカンダリ）：#111111の背景色を使用してください
• リスト項目：#111111の背景色を使用してください

無効状態

• opacity: 0.5を必ず使用してください
• cursor: not-allowedを必ず使用してください

インタラクション

• 破壊的な操作や取り消せない操作には、必ずAlertDialogを使用してください
• ローディング状態には、構造を反映したスケルトンを使用することを推奨します
• エラーは、操作が行われる場所の近くに必ず表示してください
• inputまたはtextarea要素での貼り付けをブロックしないでください
• アイコンのみのボタンには、必ずaria-labelを追加してください

アニメーション

• 明示的に要求されていない限り、アニメーションを追加しないでください
• コンポジターで処理されるプロパティ（transform、opacity）のみをアニメーションさせてください
• レイアウトプロパティ（width、height、top、left、margin、padding）をアニメーションさせないでください
• 表示時のアニメーションにはease-outを使用することを推奨します
• インタラクションのフィードバックは200msを超えないでください
• prefers-reduced-motionに対応することを推奨します

パフォーマンス

• 大きなblur()やbackdrop-filterのサーフェスをアニメーションさせないでください
• アニメーションが実行中でないときにwill-changeを適用しないでください
• レンダーロジックで表現できる処理にuseEffectを使用しないでください