planetscale-ui-skills

Planetscale UI Skills

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

適用する場面

次のような場合に、これらのガイドラインを参照してください。

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

色

• プライマリーサーフェスには、必ず明度 20 未満のダークな背景を使用してください（検出された明度：0）
• ページの背景（surface-base）には、必ず #000000 を使用してください
• プライマリーアクションとフォーカス状態（accent）には、必ず #7967D3 を使用してください
• カラーパレットを縮小することを推奨します（現在 23 色を検出）
• アクセシビリティのため、テキストのコントラスト比を必ず 4.5:1 以上にしてください

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#000000	rgb(0,0,0)	ページの背景
surface-raised	#F8F8F9	rgb(248,248,249)	カード、モーダル、持ち上げたサーフェス
surface-overlay	#EC4011	rgb(236,64,17)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#202020	rgb(32,32,32)	見出し、本文テキスト
text-secondary	#787878	rgb(120,120,120)	セカンダリ、控えめなテキスト
text-tertiary	#54565C	rgb(84,86,92)	補足テキスト
border-default	#D44927	rgb(212,73,39)	控えめな境界線、区切り線
destructive	#EC4011	rgb(236,64,17)	エラー状態、削除アクション
success	#41D731	rgb(65,215,49)	成功状態、確認
accent	#7967D3	rgb(121,103,211)	プライマリーアクション、リンク、フォーカス

タイポグラフィ

• プライマリーフォントファミリーには、必ず Inter を使用してください
• 一貫性を保つため、フォントファミリーは 1 つにすることを推奨します
• プライマリー見出しには、必ず 51px / 700 を使用してください
• 本文テキストには、必ず 17px / 400 を使用してください
• フォントウェイトを減らすことを推奨します（現在 5 種類を検出）
• 見出しには必ず text-balance を、本文テキストには必ず text-pretty を使用してください
• 数値データには tabular-nums を使用することを推奨します
• 明示的に要求されない限り、字間を変更しないでください

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	数
heading-1	Inter	51px	700	#DF5C2E	1
text-44px	Inter	44px	700	#36F91F	1
text-40px	Inter	40px	extra_bold	#202020	1
text-39px	Inter	39px	extra_bold	#1A1A1A	1
text-38px	Inter	38px	700	#1E1E1E	1
text-35px	Inter	35px	extra_bold	#1D1D1D	1
text-34px	Inter	34px	700	#1A1A1A	1
text-31px	Inter	31px	700	#141414	1
text-30px	Inter	30px	700	#1A1A1A	1
text-30px	Inter	30px	400	#D76B60	1

タイポグラフィのリファレンス

フォントファミリー：

• Inter（55 回使用）

フォントサイズ： 11px、12px、13px、14px、15px、16px、17px、18px、21px、22px、23px、24px、25px、26px、29px、30px、31px、34px、35px、38px、39px、40px、44px、51px

余白

• 余白には必ず 4px グリッドを使用してください
• 次のスケールの余白を使用することを推奨します：3px、4px、5px、6px、7px、25px、28px、32px
• 要素間のデフォルトの間隔には 38px を使用することを推奨します
• 任意の余白値は使用せず、デザインスケールを使用してください
• コンテナー内のパディングを一貫させることを推奨します

境界線

• 境界線の幅は必ず一貫して 1px にしてください
• 任意の border-radius 値は使用せず、デザインスケールを使用してください
• 要素の区切りには控えめな境界線（1px）を使用することを推奨します

レイアウト

• 必ずビューポート幅 1920px を基準に設計してください
• 要素の幅を一貫させることを推奨します：220px、221px、2px、30px、1px
• 明確な階層を設けた、テキスト中心のレイアウトを維持することを推奨します
• h-screen は使用せず、ビューポート全体の高さには h-dvh を使用してください
• 固定要素では必ず safe-area-inset を考慮してください
• 正方形の要素には、w-* と h-* の組み合わせではなく、size-* を使用することを推奨します

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

• メインコンテンツ：幅：1920px、高さ：1041px
• メインコンテンツ：幅：1114px、高さ：664px
• メインコンテンツ：幅：1104px、高さ：667px
• ヘッダー：高さ：39px

コンポーネント

ボタン

バリエーション	背景	テキスト	境界線	高さ	角丸
Ghost	transparent	#F0B095	なし	-	-

インタラクティブ状態

フォーカス

• アクセントカラー（#7967D3）を使った 2px のアウトラインを必ず使用します
• 2px のアウトラインオフセットを必ず使用します
• フォーカスインジケーターは絶対に削除しません

ホバー

• ボタン（プライマリ）：背景色を10%明るくします
• ボタン（セカンダリ）：背景色に #F8F8F9 を使用します
• リスト項目：背景色に #F8F8F9 を使用します

無効状態

• 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 を絶対に使用しません