dark-tech について
開発者ツールや技術製品向けに、暗色で精密なインターフェースを設計するスキルです。黒に近い背景、データ中心のレイアウト、書体、控えめな操作のルールを定めます。
主な機能
- 01黒に近い配色と単一アクセント色
- 02グロテスク体の見出しと等幅ラベル
- 03細い境界線のパネルと表
- 04視覚要素としての指標とコード
- 05動きを抑える設定に配慮した操作ルール
活用シーン
- 01開発者ツールのインターフェース設計
- 02指標やステータスデータの表示
- 03暗色の技術製品ページの構築
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/dark-techを入力して読み込まれたか確認します。
詳細
ダークテック
ひとつのアイデンティティ：信頼できるマシン — 正確で、静かで、高速。
1. パレット（固定）
- 背景：
#08090A（ほぼ黒）。パネル：#0E0F11と#131417。ホバー時のサーフェス：#181A1D。 - テキスト：
#F7F7F8（プライマリ）、#9CA3AD（セカンダリ）、#5C6370（ターシャリ／ミュート）。 - 枠線：
rgba(255, 255, 255, 0.08)の細線。インタラクティブ要素では、より強いrgba(255, 255, 255, 0.16)。 - アクセントカラー — ひとつだけ：インディゴ
#5E6AD2、バイオレット#7C7CF0、または安全なエメラルド#34D399— ブランドや意味に応じて選択します。アクセントカラーはリンク、単一のプライマリボタン、アクティブ状態、データ系列ひとつに使用します。 - グラデーションは禁止（フラットなサーフェスのみ）。背景全体を覆う色付きの領域も禁止します。グローはアクセントカラーのみに使用可能です。プライマリボタンには
box-shadow: 0 0 0 1px rgba(accent, .35), 0 0 24px rgba(accent, .25)を適用します。
2. タイポグラフィ（固定）
- ディスプレイ： 個性のあるニュートラルなグロテスク体 — Space Grotesk、またはウェイト 500〜600 のシステムサンセリフ。サイズは
clamp(2.2rem, 5vw, 4rem)、字間は −0.03em、行の高さは 1.05。ダークテックは抑制的に。力強く、しかし声高にならないようにします。 - 本文： 14〜15px。ほとんどのテキストにはセカンダリカラーの
#9CA3ADを使用します。純白の#F7F7F8は見出し、重要な値、インタラクティブなラベルに限って使用します。行の高さは 1.55。 - ラベル／メタデータ： 等幅フォント（
IBM Plex Mono／ui-monospace）、11〜12px、#5C6370。字間を誇張しないでください（0〜0.02em）。バージョン番号、キー、ステータスはここに表示します。 - UI の密度：12〜14px が標準です。これは計器コンソールであり、看板ではありません。
3. 構成（固定）
- 細い枠線を徹底： すべてのパネル、行、テーブルセルを、1px の
rgba(255,255,255,0.08)の枠線で区切ります。内部の塗りは色調を揃えたもの（#0E0F11／#131417）とし、黒地に白いカードは使いません。 - ヒーロー： 小さな大文字の等幅キッカー、中サイズの見出し（最大 4rem）、セカンダリカラーの補足テキスト、CTA の行 — アクセントカラーのプライマリボタンとゴーストボタン。任意で、その下に枠線付きの指標ストリップや製品パネルを配置します。
- データを主役に： 指標、コードブロック、ターミナルのスニペット、ステータステーブルは、見た目を構成する要素です。装飾的なイラストより、等幅数字を配した枠線付きパネルが適しています。
- 角丸： パネルは 6〜10px（このスタイルパックでは唯一、やや角丸が適切です — 機械部品のように）、ボタンは 4〜6px。影はホバー時のみ：
0 4px 20px rgba(0,0,0,0.5)。 - 価格表示：枠線付きの行、または 3 パネルのグリッド。注目プランのパネルには、1px のアクセントカラーの枠線と、アクセントカラーの点またはチェックリストを付けます。
4. コンテンツの扱い
- アイコンに絵文字を使いません。アイコンは、1.5px のストローク、丸い端、16〜20px のグリッドで描きます。通常時は
#9CA3AD、アクティブ時はアクセントカラーにします。 - 特に理由がなければ写真は使いません。ダークテックのサーフェスは、細線、等幅ラベル、指標だけのシンプルな見た目が適しています。
- ステータス表現：
status: healthy、v2.4.1、99.99% SLA— マーケティング上の主張より、製品の信頼性を重視します。 - CTA テキストは「今すぐデプロイする」「ベンチマークを実行」のように具体的にし、「今すぐ始めよう！！」のような表現は避けます。
5. モーション（精密に）
- 継続時間は 120〜240ms。イージングは
cubic-bezier(0.4, 0, 0.2, 1)（Material スタイル）、またはホバー時のease-out。 - ホバー時はサーフェスの色調を変化させ（
#0E0F11→#131417）、枠線を明るくします。枠線とグローのみを 150ms で変化させます。 - 許容される演出はひとつだけ：アクセントカラーの要素ひとつ（「ライブ」を示す点など）に、2〜4 秒周期でゆっくりとしたステータスのパルスを加えます。変化させるのは不透明度のみです。
prefers-reduced-motionを尊重し、すべてのモーションを無効にします。
6. チェックリスト（次のいずれかに当てはまる場合はページを不合格とする）
- 白または明るい背景のサーフェスがある（メインの背景はほぼ黒にする必要があります）。
- 複数のアクセントカラーを使用している。
- グラデーションの塗りがある。
- 見出しが 4rem を超えている、またはディスプレイ用のセリフ体になっている。
- 通常の段落に純白のテキストを使っている。
- パネルの角丸が 10px を超えている、またはボタンの角丸が 6px を超えている。
- 絵文字のアイコン、または鮮やかなマーケティング写真がある。
- 開発者向けツールに存在し得ないセクションがある。
コメント
Markdown 対応