wise-ui-skills

Wise UI スキル

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

適用する場面

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

• ライトモードのインターフェースを構築するとき
• Wiseを参考にしたデザインシステムを作成するとき
• Interフォントと4pxグリッドを使用するUIを実装するとき

色

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

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#91E75E	rgb(145,231,94)	ページの背景
surface-raised	#FEFEFE	rgb(254,254,254)	カード、モーダル、浮き上がったサーフェス
surface-overlay	#E6EAE5	rgb(230,234,229)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#7C7C7C	rgb(124,124,124)	見出し、本文テキスト
text-2	#525B4B	rgb(82,91,75)	追加テキスト
text-tertiary	#4A4A4A	rgb(74,74,74)	追加テキスト
border-default	#EFFEE5	rgb(239,254,229)	控えめな境界線、区切り線
success	#112501	rgb(17,37,1)	成功状態、確認

タイポグラフィ

• 主フォントファミリーには Inter を使用する必要があります
• 一貫性を保つため、フォントファミリーは1種類にすることが望ましいです
• 主見出しには 70px / 700 を使用する必要があります
• 本文テキストには 41px / 700 を使用する必要があります
• フォントウェイトを絞ることが望ましいです（現在、4種類が検出されています）
• 見出しには text-balance、本文テキストには text-pretty を使用する必要があります
• 数値データには tabular-nums を使用することが望ましいです
• 明示的に要求されない限り、文字間隔を変更してはいけません

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	件数
heading-1	Inter	70px	700	#122902	1
heading-2	Inter	70px	700	#142E05	1
body	Inter	41px	700	#1E2F10	1
text-38px	Inter	38px	700	#213213	1
text-20px	Inter	20px	700	#1A3F0B	1
text-19px	Inter	19px	500	#225411	1
text-17px	Inter	17px	400	#2C6418	1
text-16px	Inter	16px	400	#464646	1
text-16px	Inter	16px	400	#7CAF59	1
text-16px	Inter	16px	400	#7BAD57	1

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

フォントファミリー：

• Inter（26回使用）

フォントサイズ： 11px, 12px, 13px, 14px, 15px, 16px, 17px, 19px, 20px, 38px, 41px, 70px

余白

• 余白には4pxグリッドを使用する必要があります
• 次のスケールの余白を使用することが望ましいです：1px, 3px, 4px, 5px, 6px, 7px, 19px, 33px
• 要素間の標準の間隔には5pxを使用することが望ましいです
• 任意の余白値を使用してはいけません（デザインスケールを使用してください）
• コンテナー内のパディングを一貫させることが望ましいです

境界線

• 次のスケールの角丸を使用する必要があります：4px, 15px, 18px, 19px, 20px, 21px, 22px, 37px
• ピル型要素には20px以上の角丸を使用することが望ましいです
• 境界線の幅は次に限定することが望ましいです：1px, 2px
• 標準の角丸には20pxを使用することが望ましいです
• 任意の角丸値を使用してはいけません（デザインスケールを使用してください）
• 要素の区切りには控えめな境界線（1px）を使用することが望ましいです

角丸のリファレンス

スケール： 4px, 15px, 18px, 19px, 20px, 21px, 22px, 37px

レイアウト

• 基準のビューポート幅を1920pxとして設計する必要があります
• 要素の幅を次の値で一貫させることが望ましいです：7px, 66px, 14px, 503px, 48px
• 明確な階層を持つテキスト中心のレイアウトを維持することが望ましいです
• h-screen は使用せず、ビューポート全体の高さには h-dvh を使用してください
• 固定要素では safe-area-inset を考慮する必要があります
• 正方形の要素には w-* と h-* の組み合わせではなく、size-* を使用することが望ましいです

コンポーネント

ボタン

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

インタラクティブ状態

フォーカス

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

ホバー

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

無効状態

• 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 を決して使用しないでください