tldraw-ui-skills

Tldraw UI スキル

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

適用するタイミング

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

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

色

• 主要なサーフェスには明るい背景を使用することを推奨します
• ページの背景（surface-base）には#E7EBEEを使用しなければなりません
• 主要なアクションとフォーカス状態（accent）には#0E54F0を使用しなければなりません
• カラーパレットは9色以内に抑えることを推奨します
• アクセシビリティのため、テキストのコントラスト比を少なくとも4.5:1に保たなければなりません

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#E7EBEE	rgb(231,235,238)	ページの背景
surface-raised	#F8F9FB	rgb(248,249,251)	カード、モーダル、盛り上がったサーフェス
surface-overlay	#0E54F0	rgb(14,84,240)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#A3A4A6	rgb(163,164,166)	見出し、本文テキスト
text-secondary	#64686B	rgb(100,104,107)	セカンダリテキスト、控えめなテキスト
text-tertiary	#535353	rgb(83,83,83)	補足テキスト
border-default	#CBCCCE	rgb(203,204,206)	控えめな境界線、区切り線
accent	#0E54F0	rgb(14,84,240)	主要なアクション、リンク、フォーカス

タイポグラフィ

• プライマリフォントファミリーとしてInterを使用しなければなりません
• 一貫性を保つため、単一のフォントファミリーを使用することを推奨します
• 主要な見出しには14px / 500を使用しなければなりません
• 本文テキストには12px / 400を使用しなければなりません
• フォントウェイトは regular、medium に限定しなければなりません
• 見出しにはtext-balanceを、本文テキストにはtext-prettyを使用しなければなりません
• 数値データにはtabular-numsを使用することを推奨します
• 明示的な要望がない限り、letter-spacing を変更してはなりません

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	数
heading-1	Inter	14px	500	#5C5C5C	1
heading-2	Inter	13px	500	#4E4F51	1
heading-3	Inter	12px	500	#6A6A6A	1
body	Inter	12px	400	#535353	1
body-secondary	Inter	12px	400	#616161	1
body-secondary	Inter	12px	400	#96C4F4	1
text-10px	Inter	10px	400	#A3A4A6	1
caption	Inter	9px	400	#64686B	1
label	Inter	7px	400	#A6A7A9	1

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

フォントファミリー：

• Inter（9回使用）

フォントサイズ： 7px、9px、10px、12px、13px、14px

間隔

• 間隔には4pxグリッドを使用しなければなりません
• 次のスケールから間隔を使用することを推奨します：1px、2px、3px、4px、5px、6px、18px、22px
• 要素間のデフォルトの間隔には2pxを使用することを推奨します
• 任意の間隔値を使用してはなりません（デザインスケールを使用してください）
• コンテナー内のパディングを一貫して保つことを推奨します

境界線

• 次のスケールから border-radius を使用しなければなりません：0px、3px、4px、6px、7px、9px
• 境界線の幅は一貫して1pxにしなければなりません
• デフォルトの border-radius には6pxを使用することを推奨します
• 任意の border-radius 値を使用してはなりません（デザインスケールを使用してください）
• 要素の分離には控えめな境界線（1px）を使用することを推奨します

Border Radius の参照情報

スケール： 0px、3px、4px、6px、7px、9px

レイアウト

• 基準ビューポート幅1920pxを想定してデザインしなければなりません
• 要素の幅には一貫した値を使用することを推奨します：16px、12px、96px、13px、32px
• h-screenは使用せず、ビューポート全体の高さにはh-dvhを使用してください
• 固定要素ではsafe-area-insetを考慮しなければなりません
• 正方形の要素にはw-*とh-*の代わりにsize-*を使用することを推奨します

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

• メインコンテンツ：幅：1920px、高さ：965px
• メインコンテンツ：幅：1920px、高さ：593px

コンポーネント

ボタン

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

インタラクティブ状態

フォーカス

• アクセントカラー（#0E54F0）の2pxアウトラインを使用しなければなりません
• 2pxの outline-offset を使用しなければなりません
• フォーカスインジケーターを削除してはなりません

ホバー

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

無効状態

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