デベロッパーCLI / ターミナル風 デザインインスピレーション
ターミナルの美学をGUIに。iTerm2のタブが並ぶ画面、Warpのモダンなターミナル、VS Codeのサイドバー -- 開発者が「ホーム」と感じるインターフェイスを構築する。Catppuccin/Tokyo Night のパステルカラーとモノスペースフォントが織りなす、情報密度の高いダッシュボード。このスタイルはコード、ログ、ステータスが一目で把握できる「開発者の管制塔」を目指す。
このページの使い方
各セクションにインラインHTMLのビジュアル例を配置しています。フォントはすべてモノスペース、カラーはCatppuccin/Tokyo Nightインスパイアです。
デザイン哲学 -- ターミナルの管制塔
コードが主役。テキストとステータスで語る。モノスペースが秩序を保つ。
開発者向けUIの世界観では、画面は「高機能なターミナル」だ。すべてのテキストはモノスペースで整列し、ステータスは色付きドットで一瞬で把握できる。情報密度は高いが、セクション間の区切りとカラーコーディングで混沌を防ぐ。
カラーパレット -- Catppuccin Mocha
ターミナルの色はCatppuccin Mochaをベースとする。パステルトーンのアクセントが暗い背景に浮かぶ。
// Background Layers
// Accent Colors
| Token | 値 | 役割 |
|---|---|---|
| bg-crust | #11111b | 最深部 |
| bg-base | #1e1e2e | メイン背景 |
| bg-surface | #313244 | カード |
| text | #cdd6f4 | メインテキスト |
| blue | #89b4fa | メインアクセント |
| green | #a6e3a1 | 成功 |
| red | #f38ba8 | エラー |
| yellow | #f9e2af | 警告 |
コンポーネント -- ターミナルの部品群
ボタン
ステータスバッジ
コードブロックカード
ステータスカード
特殊要素
ウィンドウドット
コードブロックカードのヘッダーに赤・黄・緑の3つの小さな円（10px）を配置することで、「ターミナルウィンドウ」の質感を演出する。これはmacOSのウィンドウコントロールを模した装飾で、開発者にとって親しみのある視覚要素となる。
ターミナルプロンプト
コマンド入力UIには $ や > のプレフィクスを表示し、ターミナルライクな操作感を演出する。プレフィクスの色はアクセントカラー（緑 #a6e3a1 やシアン #89b4fa）で、入力テキストと視覚的に区別する。
左ボーダーアクセント
ステータスカードには左側に3pxの色付きボーダーを配置し、成功（緑）・失敗（赤）・警告（黄）の状態を瞬時に伝える。この「左ボーダーパターン」はGitHub、Linear、Sentry等の開発者ツールで広く採用されている。
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/DEVELOPER_CLI.mdをプロジェクトのDESIGN.mdにコピー- アクセントカラーをプロジェクトのブランドに合わせて調整
- Stitch に「この DESIGN.md に従ってダッシュボードを作成してください」と指示
- ターミナル装飾（プロンプト、ウィンドウドット等）は後から追加
適したプロジェクト
- DevOpsダッシュボード・CI/CDツール
- 開発者向けドキュメントサイト
- CLIツールのWebインターフェイス
- サーバー監視・ログビューア
- 技術ブログ・テック系ポートフォリオ
不向きなプロジェクト
- 一般消費者向けのサービス
- ECサイト・マーケティングLP
- 子供向け・カジュアルなアプリ
- 写真中心のメディアサイト
情報密度の管理に注意
開発者は情報密度に慣れていますが、「何もかも1画面に詰め込む」のは避けてください。セクション間の明確な区切り（ボーダー、背景色の段階）でグルーピングを表現することが重要です。