部品カタログ

DecomAIモックアップで使用できる部品の一覧。ここに無い部品が必要な場合は「部品リクエスト」として起案する（勝手に追加しない）。CSS変数名は実装（shadcn/ui系）と同一。

カラートークン（tokens.css）

--primary
#216ebd
--foreground
#111827
--muted-foreground
#6b7280
--border
#e5e7eb
--muted
#f9fafb
--sidebar
#f5f6f8
--destructive
#ef4444

ボタン

通常サイズ主ボタン（btn-primary／SCR-IAE-003）

与件確認カード（review-card／SCR-IAE-003）

分析名
サンプル分析
① 項目ラベル
値テキスト（review-row：ラベル200px＋値、行間罫線）
② 注記付きラベル
※ 注記テキスト（note）
補足説明（rvalue stack＝縦積み）

バッジ

進行中 IDEATE（badge-running） ✓ 完了（badge-done） pro（badge-plan）

入力・セレクト

スイッチ

switch（クリックで切替）

フィルタバー

1 / 1 件

カード（一覧アイテム）

進行中カード（card is-running）

進行中
開始日：2026/7/3担当：サンプル

与件：サンプルテキスト

完了カード（card is-done）

✓ 完了

ステップナビ（stepper／SCR-IAE-002）

.step（完了/クリック可）／.step.is-current（現在・塗り）／.step.is-upcoming（未来・リング、.step-num で番号丸）。区切りは .step-conn。右上アクションは .stepper-excel。

データ選択カード（choice-card）

選択肢A（active）

説明テキスト（choice-desc）

・箇条書き1

・箇条書き2

選択肢B（disabled）

説明テキスト（choice-desc）

・箇条書き1

・箇条書き2

セグメント切替（segmented）

免責フッター帯（disclaimer-bar）

ℹ️ サンプル注意書き（disclaimer-bar）

分析完了：バナー・結果ブロック（result-banner / result-block / md／SCR-IAE-004）

❶DISCOVER インサイト探索　分析完了

説明テキスト（result-banner）

❶ 見出し（result-block）

■ 小見出し

markdown本文の簡易スタイル（md）。強調や段落・箇条書きに対応。

  • 項目1
  • 項目2

N1エピソードカード（n1-card／SCR-IAE-004）

魅力度 22% / 未充足度 61% / 合計 83ID: INS-XXXX
N1

エピソードタイトル

本文サンプル。

❹

気づきの書き出し（muted）

既存路線：…

新路線：…

判定モード表示・lgボタン（mode-chip / btn-lg／SCR-IAE-004）

判定モード：マニュアル（人間判定）

評価スコアチップ（pattern-score／SCR-IAE-005）

❻ パターンA 評価スコア80 / 100

KI&VPデータテーブル（kivp-table／SCR-IAE-005）

採否順位キーインサイトバリュープロポジションスコア合計
採用1

サンプルKI（md）

サンプルVP

80218
採用2

サンプルKI

サンプルVP

72248

アイデア一覧部品（segmented-sm / badge-cut / kivp-detail-link／SCR-IAE-007）

KI忠実 切り口フィルタ（segmented-sm）／表内切り口ラベル（badge-cut）／下線付き詳細ボタン（kivp-detail-link）

与件サマリー/情報ボックス・チェックボックス（SCR-IAE-006）

与件サマリー（要件定義で入力した内容）

③ 項目ラベル

値テキスト

選択中：10 / 10件

オススメ：…（info-box）

checkbox（チェック時primary塗り）

ページネーション・選択サマリーバー（pagination / select-summary／SCR-IAE-005）

選択中: 10 / 10件チェックを外す/追加することで、手動調整できます。（select-summary）

エレベーターピッチカード（pitch-card / badge-outline／SCR-IAE-008）

Impact 7/10 INS-XXXX

ピッチタイトル（pitch-card）

1. 市場の現状　本文サンプル。badge-outline＝枠線のみのバッジ。

アイデア詳細部品（panel / badge-soft / detail-head / clamp3／SCR-IAE-009）

■ 見出し（detail-head）

（補足テキスト）

汎用パネル（panel＝rounded-md・枠・p-4）。説明文やKI/VPの表示に使用。

❶ KI忠実（badge-soft） #1（badge-outline）

clamp3＝本文を3行で省略するユーティリティ。長いテキストはこのように3行を超えた部分が自動的に省略されて末尾が隠れます。カード内の参考文などに使用します。あふれた分は表示されません。

アプリシェル（base.css）

ヘッダー（.topbar）・サイドバー（.sidebar）・メイン（.main > .container）は templates/shell-template.html に組み込み済み。個別ページで再定義しない。