Slack MCP Agent — DESIGN.md¶

v1.1 / 2026-04-18

AI が管理画面を実装する際のデザイン指示書。
トークン・コンポーネント・レイアウトの規約を定義し、一貫した UI を保つ。
参考: DESIGN.md アプローチ

1. デザイン原則¶

#	原則	説明
D-1	シンプル & 機能的	装飾より情報を優先。運用管理ツールとして必要十分な UI
D-2	ステータスを色で即座に識別	パイプラインの状態を色とアイコンで一目で把握できる
D-3	情報密度は高く、認知負荷は低く	テーブル・カード・バッジを活用し、スクロールを最小化しつつ読みやすさを確保
D-4	ダークモード対応	運用者が長時間利用する前提でダーク/ライト切替を実装
D-5	Caster 既存 UI を踏襲	caster-division-ai の DashShell レイアウト思想を継承
D-6	絵文字（Emoji）使用禁止	UI 上のラベル・ボタン・ナビ・見出し・説明文にUnicode 絵文字を使わない。状態表現は Lucide Icons + ステータスカラーで行う。ワイヤーフレーム等ドキュメント内の記号的使用も避ける

2. 技術スタック¶

領域	選定	備考
フレームワーク	Next.js 16+ (App Router)	Server Components 主体
スタイリング	Tailwind CSS v4	ユーティリティファースト
コンポーネント	shadcn/ui	コピペ型、カスタマイズ可能
アイコン	Lucide Icons	shadcn/ui のデフォルト
フォント	Inter (sans-serif)	Tailwind デフォルト
カラー管理	CSS Variables + Tailwind	ダーク/ライト切替

3. デザイントークン¶

3.1 カラーパレット¶

ブランドカラー¶

トークン	ライト	ダーク	用途
`--primary`	`hsl(221 83% 53%)`	`hsl(217 91% 60%)`	プライマリアクション、アクティブナビ
`--primary-foreground`	`hsl(210 40% 98%)`	`hsl(222 47% 11%)`	プライマリ上のテキスト

セマンティックカラー¶

トークン	ライト	ダーク	用途
`--background`	`hsl(0 0% 100%)`	`hsl(222 47% 11%)`	ページ背景
`--foreground`	`hsl(222 47% 11%)`	`hsl(210 40% 98%)`	標準テキスト
`--card`	`hsl(0 0% 100%)`	`hsl(222 47% 11%)`	カード背景
`--card-foreground`	`hsl(222 47% 11%)`	`hsl(210 40% 98%)`	カード上テキスト
`--muted`	`hsl(210 40% 96%)`	`hsl(217 33% 17%)`	補助背景
`--muted-foreground`	`hsl(215 16% 47%)`	`hsl(215 20% 65%)`	補助テキスト
`--border`	`hsl(214 32% 91%)`	`hsl(217 33% 17%)`	ボーダー
`--input`	`hsl(214 32% 91%)`	`hsl(217 33% 17%)`	入力フィールド枠
`--ring`	`hsl(221 83% 53%)`	`hsl(224 76% 48%)`	フォーカスリング

ステータスカラー¶

パイプライン状態を即座に識別するための色。Slack カードの attachment color と一致させる。

ステータス	トークン	ライト	ダーク	Slack 対応
生成中	`--status-generating`	`hsl(45 93% 47%)`	`hsl(45 93% 57%)`	`#f2c744`
承認待ち	`--status-pending`	`hsl(207 90% 54%)`	`hsl(207 90% 64%)`	`#2196f3`
承認済み / 完了	`--status-success`	`hsl(142 71% 45%)`	`hsl(142 71% 55%)`	`#36a64f`
却下 / 失敗	`--status-error`	`hsl(348 83% 47%)`	`hsl(348 83% 57%)`	`#e01e5a`
実行中	`--status-running`	`hsl(210 79% 36%)`	`hsl(210 79% 46%)`	`#1264a3`
中止	`--status-cancelled`	`hsl(0 0% 53%)`	`hsl(0 0% 63%)`	`#888888`

3.2 タイポグラフィ¶

要素	サイズ	ウェイト	行間	用途
Page title	`text-2xl` (1.5rem)	`font-semibold`	1.33	ページタイトル
Section heading	`text-lg` (1.125rem)	`font-semibold`	1.5	セクション見出し
Card title	`text-base` (1rem)	`font-medium`	1.5	カードタイトル
Body	`text-sm` (0.875rem)	`font-normal`	1.43	本文・テーブルセル
Caption	`text-xs` (0.75rem)	`font-normal`	1.33	タイムスタンプ・補助情報
Mono	`text-sm font-mono`	`font-normal`	1.5	ID・JSON・コード

3.3 スペーシング¶

トークン	値	用途
`--space-page`	`p-6` (1.5rem)	ページコンテンツのパディング
`--space-card`	`p-4` (1rem)	カード内パディング
`--space-section`	`space-y-6` (1.5rem)	セクション間マージン
`--space-inline`	`gap-2` (0.5rem)	インライン要素間

3.4 角丸・影¶

要素	角丸	影
カード	`rounded-lg` (0.5rem)	`shadow-sm`
バッジ	`rounded-full`	なし
ボタン	`rounded-md` (0.375rem)	なし
入力	`rounded-md` (0.375rem)	なし
ダイアログ	`rounded-lg` (0.5rem)	`shadow-lg`

4. レイアウト¶

4.1 シェルレイアウト（DashShell）¶

Caster 既存実装を踏襲。固定サイドバー + メインコンテンツエリア。

┌──────────────────────────────────────────────────────┐
│ Sidebar (w-64, 固定)       │ Main Content              │
│                            │                           │
│ ┌────────────────────────┐ │ ┌───────────────────────┐ │
│ │ Logo                   │ │ │ Page Header           │ │
│ │ "HR AI Agent"          │ │ │ Title + Actions       │ │
│ ├────────────────────────┤ │ ├───────────────────────┤ │
│ │ Nav Items              │ │ │                       │ │
│ │  Pipeline パイプライン │ │ │ Page Content          │ │
│ │  Settings 設定         │ │ │                       │ │
│ │  Link 外部連携         │ │ │                       │ │
│ │  ScrollText 監査ログ   │ │ │                       │ │
│ ├────────────────────────┤ │ │                       │ │
│ │ User Menu              │ │ │                       │ │
│ │ Theme Toggle (☀/☽)     │ │ │                       │ │
│ └────────────────────────┘ │ └───────────────────────┘ │
└──────────────────────────────────────────────────────┘

要素	仕様
サイドバー幅	`w-64` (16rem)、モバイルでは折り畳み
サイドバー背景	`--card` / ボーダー右に `--border`
ナビ項目	`text-sm`、アクティブ時 `bg-primary/10 text-primary`
ロゴ	テキストベース「HR AI Agent」、`text-lg font-bold`
テーマ切替	サイドバー下部に ☀/☽ トグル
メインコンテンツ	`flex-1 overflow-auto`、`p-6`

4.2 レスポンシブ¶

ブレークポイント	サイドバー	レイアウト
`lg` (1024px+)	固定表示	サイドバー + メイン
`md` (768px-1023px)	ハンバーガーで開閉	メインのみ
`sm` (<768px)	ハンバーガーで開閉	シングルカラム

5. コンポーネント規約¶

5.1 ステータスバッジ¶

パイプライン状態を表すバッジ。shadcn/ui の Badge を拡張。

// 使用方法
<StatusBadge status="completed" />
<StatusBadge status="running" />
<StatusBadge status="failed" />

status	ラベル	バリアント	色
`extracted`	抽出済み	`outline`	`--muted-foreground`
`generating`	生成中	`default`	`--status-generating`
`pending_approval`	承認待ち	`default`	`--status-pending`
`approved`	承認済み	`default`	`--status-success`
`rejected`	却下	`destructive`	`--status-error`
`running`	実行中	`default`	`--status-running`
`completed`	完了	`default`	`--status-success`
`failed`	失敗	`destructive`	`--status-error`
`cancelled`	中止	`secondary`	`--status-cancelled`

5.2 データテーブル¶

パイプライン一覧・監査ログで使用。shadcn/ui の Table を使用。

要素	スタイル
ヘッダ	`text-xs font-medium text-muted-foreground uppercase tracking-wider`
セル	`text-sm`、パディング `py-3 px-4`
ホバー	`hover:bg-muted/50`
行クリック	`cursor-pointer` (パイプライン一覧のみ)
ページネーション	テーブル下部に `Button` ペア（前/次）

5.3 タイムラインビュー¶

パイプライン詳細で Task → Prompt → Process → Execution を時系列表示。

  ● Task                    ← ドット + ステータスカラー
  │  タイトル、作成日時
  │
  ● Prompt v1 (承認済み)    ← 承認者、時刻
  │  テキスト（アコーディオン展開）
  │
  ● Process v1 (承認済み)
  │  ステップ一覧
  │
  ● Execution (完了)        ← 実行時間
     ツール実行ログ

要素	スタイル
縦線	`border-l-2 border-border ml-3`
ドット	`w-3 h-3 rounded-full`、ステータスカラー
ノード間	`space-y-4`
展開/折りたたみ	shadcn/ui `Collapsible`

5.4 接続カード¶

外部連携画面でプロバイダーの接続状態を表示。

┌─────────────────────────────────────────┐
│ 💼 freee                    [接続済み]  │  ← icon + status badge
│ 勤怠・給与・従業員 API にアクセス      │  ← description
│ スコープ: employees:read, ...          │  ← scopes (mono)
│ 接続日時: 2026-04-15 09:20            │  ← timestamp
│                     [再認証] [切断]     │  ← actions
└─────────────────────────────────────────┘

5.5 フォームコントロール¶

設定画面で使用。

コントロール	コンポーネント	用途
トグル	shadcn/ui `Switch`	承認フロー ON/OFF
セレクト	shadcn/ui `Select`	モデル選択
数値入力	shadcn/ui `Input type="number"`	タイムアウト秒数
保存ボタン	shadcn/ui `Button variant="default"`	設定保存

6. アイコン規約¶

ナビゲーションおよびページ内で使用するアイコン。Lucide Icons から選定。

用途	アイコン名	使用場所
パイプライン	`GitBranch`	サイドバーナビ
設定	`Settings`	サイドバーナビ
外部連携	`Link`	サイドバーナビ
監査ログ	`ScrollText`	サイドバーナビ
成功	`CheckCircle2`	ステータス表示
失敗	`XCircle`	ステータス表示
実行中	`Loader2` (animate-spin)	ステータス表示
承認待ち	`Clock`	ステータス表示
フィルタ	`Filter`	テーブルフィルタ
再読み込み	`RefreshCw`	リフレッシュボタン
ライトモード	`Sun`	テーマ切替
ダークモード	`Moon`	テーマ切替

7. ページ別デザインガイド¶

7.1 パイプライン一覧 (`/`)¶

ページヘッダ: タイトル + [リフレッシュ] ボタン
ステータスフィルタ: タブ形式で all / running / completed / failed 等
テーブル: ステータスバッジ | タイトル | 種別 | 作成日時 | 実行時間
行クリック → /pipeline/[id] へ遷移

7.2 パイプライン詳細 (`/pipeline/[id]`)¶

ページヘッダ: タスクタイトル + ステータスバッジ + 作成日時
メタデータ: 優先度、種別（section.fields 的な 2 列表示）
タイムラインビュー: Task → Prompt → Process → Execution
各ノードはアコーディオンで展開/折りたたみ

7.3 設定 (`/settings`)¶

カード内にフォームコントロールを配置
セクション: 基本情報（名前・スラッグ）、承認フロー設定（トグル×2）、実行設定（モデル選択・タイムアウト）
下部に [変更を保存] ボタン

7.4 外部連携 (`/integrations`)¶

プロバイダーごとの接続カードを縦並び
3 プロバイダー: freee / Google Sheets / Slack
各カードに接続状態バッジ + アクションボタン

7.5 監査ログ (`/audit`)¶

フィルタバー: 日付範囲ピッカー + アクション種別セレクト
テーブル: タイムスタンプ | アクター | アクション | リソース | 詳細
詳細列は JSON をインライン展開（Collapsible）

8. 実装時の注意事項¶

8.1 shadcn/ui の使い方¶

npx shadcn@latest add でコンポーネントを追加（ソースコードがコピーされる）
カスタマイズは components/ui/ 内のファイルを直接編集
新規コンポーネントは components/ に配置（ui/ 内は shadcn 管理）

8.2 CSS Variables の定義¶

app/globals.css に定義:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --primary: 221.2 83.2% 53.3%;
    --status-generating: 45 93% 47%;
    --status-pending: 207 90% 54%;
    --status-success: 142 71% 45%;
    --status-error: 348 83% 47%;
    --status-running: 210 79% 36%;
    --status-cancelled: 0 0% 53%;
    /* ... */
  }

  .dark {
    --background: 222.2 47.4% 11.2%;
    --foreground: 210 40% 98%;
    /* ダーク版の値 ... */
  }
}

8.3 コンポーネントファイル構成¶

web/
├── app/
│   ├── globals.css          # CSS Variables + Tailwind
│   ├── layout.tsx           # RootLayout (font, theme provider)
│   ├── (dash)/
│   │   ├── layout.tsx       # DashShell (sidebar + main)
│   │   ├── page.tsx         # パイプライン一覧 (/)
│   │   ├── pipeline/
│   │   │   └── [id]/
│   │   │       └── page.tsx # パイプライン詳細
│   │   ├── settings/
│   │   │   └── page.tsx     # 設定
│   │   ├── integrations/
│   │   │   └── page.tsx     # 外部連携
│   │   └── audit/
│   │       └── page.tsx     # 監査ログ
│   └── login/
│       └── page.tsx         # ログイン
├── components/
│   ├── ui/                  # shadcn/ui コンポーネント
│   ├── dash-shell.tsx       # サイドバーレイアウト
│   ├── status-badge.tsx     # ステータスバッジ
│   ├── pipeline-table.tsx   # パイプラインテーブル
│   ├── timeline-view.tsx    # タイムラインビュー
│   ├── integration-card.tsx # 接続カード
│   └── theme-toggle.tsx     # テーマ切替
└── lib/
    ├── db.ts                # SQLite 接続
    └── utils.ts             # ユーティリティ

変更履歴¶

日付	バージョン	変更内容
2026-04-18	v1.0	初版作成
2026-04-18	v1.1	D-6 絵文字使用禁止を追加、ダッシュボード画面を削除、CSV エクスポート削除