framer-ui-skills

Framer UI スキル

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

適用するタイミング

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

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

色

• 主なサーフェスには、必ず暗い背景（明度 < 20）を使用してください。検出された明度：0
• ページの背景（surface-base）には、必ず #000000 を使用してください
• 色のパレットを減らすことを推奨します（現在 22 色が検出されています）
• アクセシビリティのため、テキストのコントラスト比を少なくとも 4.5:1 に維持してください

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#000000	rgb(0,0,0)	ページの背景
surface-raised	#141415	rgb(20,20,21)	カード、モーダル、浮き上がったサーフェス
surface-overlay	#F8F8F1	rgb(248,248,241)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#89786E	rgb(137,120,110)	見出し、本文テキスト
text-2	#D8AD9D	rgb(216,173,157)	追加のテキスト
text-tertiary	#D1CFD0	rgb(209,207,208)	追加のテキスト
border-default	#494453	rgb(73,68,83)	控えめな境界線、区切り線
destructive	#D8AD9D	rgb(216,173,157)	エラー状態、削除アクション
warning	#F8F8F1	rgb(248,248,241)	警告状態、注意喚起

タイポグラフィ

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

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	数
heading-1	Inter	93px	700	#F4F4F4	1
body	Inter	23px	500	#737373	1
body-secondary	Inter	22px	700	#DCB8B8	1
body-secondary	Inter	22px	400	#B2B2B1	1
text-20px	Inter	20px	300	#777777	1
text-18px	Inter	18px	400	#6D635E	1
text-16px	Inter	16px	400	#929290	1
text-14px	Inter	14px	400	#949493	1
text-14px	Inter	14px	300	#DFDBD7	1
text-14px	Inter	14px	300	#2F2F31	1

タイポグラフィの参考情報

フォントファミリー：

• Inter（62 回使用）

フォントサイズ： 3px, 4px, 5px, 6px, 7px, 8px, 9px, 11px, 13px, 14px, 16px, 18px, 20px, 22px, 23px, 93px

余白

• 余白には必ず 4px グリッドを使用してください
• 以下のスケールの余白を使用することを推奨します：1px, 2px, 3px, 4px, 5px, 6px, 8px, 9px
• 要素間のデフォルトの間隔には 2px を使用することを推奨します
• 任意の余白値は使用しないでください（デザインスケールを使用してください）
• コンテナ内のパディングを一貫させることを推奨します

境界線

• 必ず以下のスケールから境界線の角丸を選んでください：1px, 2px, 3px, 4px, 7px, 8px, 15px, 17px
• 境界線の幅は 1px、2px に制限することを推奨します
• デフォルトの角丸には 4px を使用することを推奨します
• 任意の角丸値は使用しないでください（デザインスケールを使用してください）
• 要素を区切るには控えめな境界線（1px）を使用することを推奨します

角丸の参考情報

スケール： 1px, 2px, 3px, 4px, 7px, 8px, 15px, 17px

レイアウト

• 必ず幅 1920px のベースビューポートを想定してデザインしてください
• 要素の幅には、以下の値を一貫して使用することを推奨します：22px, 21px, 43px, 34px, 10px
• 明確な階層を持つ、テキスト中心のレイアウトを維持することを推奨します
• h-screen は使用せず、ビューポート全体の高さには h-dvh を使用してください
• 固定要素では必ず safe-area-inset を考慮してください
• 正方形の要素には、w-* と h-* の組み合わせではなく、size-* を使用することを推奨します

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

• メインコンテンツ：幅：1920px、高さ：1080px
• メインコンテンツ：幅：1920px、高さ：755px
• ヘッダー：高さ：72px

コンポーネント

ボタン

バリエーション	背景	テキスト	境界線	高さ	角丸
ゴースト	透明	#4D4E4C	なし	-	-

インタラクティブな状態

フォーカス

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

ホバー

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

無効状態

• 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 を使用してはいけません