dense-tool-ui は何をしますか？
「落ち着いた、高密度でキーボードファーストなツールUI」の実測リファレンス：ネストしたコンテンツパネル、44px行高・仕切り線なし、⌘Kコマンドパレット、インライン編集、影の代わりにLCHグレーステップ。さらに、それにマッチするモノクロームのランディングページも含みます。
構造と動作だけをコピーし、ブランドは決してコピーしないでください。ダーク＋Inter＋パープルアクセントは、AIジェネレーターがデフォルトで生成する組み合わせそのものです。プロジェクトごとに必ず --accent-h と --font を変更してください。
ファイル
| パス | どのようなときに読むか |
|---|---|
assets/app-template.html | アプリ/ダッシュボード/バックオフィスを構築するとき。実行可能なシェル：リスト/ボード、詳細、⌘K、作成モーダル、トースト、ダーク/ライト、?selftest。 |
assets/landing-template.html | ランディングページを構築するとき。ブラーヘッダー、ヒーロー＋プロダクトショット、マニフェスト、機能セクション＋スペックドロワー、チェンジログ、お客様の声、価格＋比較表、フッター。?selftest。 |
references/app.md | シェル、サイドバー、リスト、ボード、課題/プロジェクト詳細、モーダル、⌘K、フィルターメニュー、ショートカットの正確なサイズ。 |
references/tokens.md | カラーステップ（ダーク＋ライト）、タイプスケール、半径、シャドウ、イージング。 |
references/landing.md | ランディング、価格・顧客ページの構成、レスポンシブブレークポイント、マーケティングトークン。 |
ワークフロー
- マッチするテンプレートをプロジェクトにコピーします。オリジナルは絶対に編集しないでください。
- リブランド：
--accent-h（例：ティール190、オレンジ50、グリーン150）と--fontを設定し、さらにプロダクト名、データ、コピーを変更します。app-themeのlocalStorageキーをリネームします。 - サンプルデータを置き換えます。DOMの形状は維持してください：
.grp > .row、.col > .card、.detail > .doc + .props。 CMDSにコマンドを[ラベル, [キー], 関数]として追加します。単一キーのショートカットはkeydownリスナーに追加します。このリスナーは入力中の入力をすでに無視しています。- テンプレートにない画面を追加する前に、該当する
references/ファイルを読んでください。 - 確認：
file.html?selftestを開き、タブのタイトルがSELFTEST OK <n>となることを確認します。その後、1280pxと390px、ダークとライトの両方で見てください。
ルール
- 高密度優先：13px本文、44px行高、行の仕切り線なし、装飾的なアイコンなし。色はステータス、ラベル、画面ごとに1つのプライマリボタンのみに使用します。
- 奥行きは背景のステップで表現：グラデーション、グロー、ブラーは使用しません（⌘Kの背後でも使用しません）。境界線は半透明の低アルファリングシャドウで1pxです。
- すべてのアクションにはショートカットがあり、そのショートカットは表示される：ボタン、メニュー、ツールチップに表示します。状況に応じた⌘K。
Ctrl/⌘+Enterで送信します。 - その場で編集、即時保存：保存ボタンはありません。プロパティはピッカーを開くボタンです。作成はリンク付きのトーストで終了します。
- 空の状態はアクションを促す：細い線のイラスト、1文、ショートカットを表示したプライマリボタン。
- 削除はソフト：確認を求め、復元可能な状態を維持し、保持期間を明示します。
- リストとボードは同じデータです。「表示オプション」でユーザーがグループ化、並び順、表示列を選択できます。
- ランディング：ほぼモノクローム、強調用に2つのテキストトーン、ヘッダーとプレフッターに繰り返される1つのライトCTA、ヒーローイメージとして実際のプロダクト。
コピーしてはいけないもの
元のプロダクトのロゴ、プロダクト名、イラスト、アイコンセット、マーケティング画像、コピー。計測値、構造、動作のみを取得してください。