ticktick-ui-skills

Ticktick UI Skills

AI エージェントで Ticktick スタイルのインターフェースを構築する際の、意見を反映した制約です。

適用する場面

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

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

色

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

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#FEFEFE	rgb(254,254,254)	ページの背景
surface-raised	#D8EDF7	rgb(216,237,247)	カード、モーダル、浮き上がったサーフェス
surface-overlay	#3656F8	rgb(54,86,248)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#CACACA	rgb(202,202,202)	見出し、本文テキスト
text-secondary	#8D8D8D	rgb(141,141,141)	セカンダリテキスト、控えめなテキスト
text-tertiary	#B7C0DE	rgb(183,192,222)	補足テキスト
border-default	#9AAFD4	rgb(154,175,212)	控えめな境界線、区切り線
accent	#6E85D9	rgb(110,133,217)	主要なアクション、リンク、フォーカス

タイポグラフィ

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

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	数
heading-1	Inter	51px	700	#282B2C	1
text-20px	Inter	20px	400	#7D8CD9	1
text-19px	Inter	19px	500	#7C7C7C	1
text-19px	Inter	19px	400	#525F66	1
text-18px	Inter	18px	500	#797979	1
text-16px	Inter	16px	400	#A0A0A0	1
text-16px	Inter	16px	400	#999999	1
text-16px	Inter	16px	400	#6E85D9	1
text-15px	Inter	15px	400	#9A9A9A	1
text-15px	Inter	15px	400	#9C9C9C	1

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

フォントファミリー：

• Inter（62 回使用）

フォントサイズ： 9px、10px、11px、12px、13px、14px、15px、16px、18px、19px、20px、51px

余白

• 余白には 4px グリッドを使用する必要があります
• スケールの値（2px、4px、5px、6px、9px、14px、15px、20px）を使用することを推奨します
• 要素間のデフォルトの間隔には 5px を使用することを推奨します
• 任意の余白値を使用してはいけません（デザインスケールを使用してください）
• コンテナ内のパディングを一貫させることを推奨します

境界線

• スケールの値（3px、16px、22px、23px、25px）から境界線の角丸を選ぶ必要があります
• ピル型の要素には 22px 以上の角丸を使用することを推奨します
• 境界線の幅は一貫して 1px にする必要があります
• デフォルトの境界線の角丸には 3px を使用することを推奨します
• 任意の境界線の角丸値を使用してはいけません（デザインスケールを使用してください）
• 要素を区切るには控えめな境界線（1px）を使用することを推奨します

角丸のリファレンス

スケール： 3px、16px、22px、23px、25px

レイアウト

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

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

• メインコンテンツ：幅：1920px、高さ：1080px
• メインコンテンツ：幅：1920px、高さ：1038px
• メインコンテンツ：幅：1001px、高さ：583px
• ヘッダー：高さ：76px

コンポーネント

ボタン

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

インタラクティブ状態

フォーカス

• MUST アクセントカラー（#6E85D9）の 2px アウトラインを使用する
• MUST 2px のアウトラインオフセットを使用する
• NEVER フォーカスインジケーターを削除する

ホバー

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

無効状態

• MUST opacity: 0.5 を使用する
• MUST cursor: not-allowed を使用する

インタラクション

• MUST 破壊的または取り消し不可能な操作には AlertDialog を使用する
• SHOULD 読み込み状態には構造を保ったスケルトンを使用する
• MUST エラーは操作が行われる場所の近くに表示する
• NEVER input または textarea 要素での貼り付けをブロックする
• MUST アイコンのみのボタンに aria-label を追加する

アニメーション

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

パフォーマンス

• NEVER 大きな blur() または backdrop-filter の領域をアニメーションさせない
• NEVER アニメーションがアクティブでないときに will-change を適用しない
• NEVER レンダリングロジックで表現できる処理に useEffect を使用しない