board

プロジェクトボード生成 Skill

トリガー条件

ユーザーが「プロジェクトボードを作成」「ボードを作る」「プロジェクト板」「ボード生成」「board」と言ったときにトリガーされます。

ユーザーは以下のいずれかの形式で内容を提供します：

• 口述・断片的な思考（会話中のチャットテキスト）
• 論理的なアウトライン（すでに構造化されたプロジェクト記述）
• 混合モード：アウトラインと口述の補足の両方

SVG アイコンリソース

ボードでブランド・ツール・プラットフォーム名を扱う場合、手描きのプレースホルダーではなく、thesvg MCP を使って高品質なブランド SVG アイコンを取得します。

MCP ツール呼び出し

search_icons(query: "github")     → 搜索图标，返回 slug + variants
get_icon(slug: "github", variant: "mono")  → 获取原始 SVG 代码
get_icon_url(slug: "github")      → 获取 CDN 嵌入 URL
list_categories()                 → 浏览所有分类

使用ルール

シーン	対応
ブランド名が登場（GitHub、Notion、飛書など）	search_icons を呼び出して対応する slug を探し、get_icon で mono または default variant を取得
人物・ロールのプレースホルダーアイコン	ブランドアイコンは使わず、純粋な CSS の円形ドット・カラーブロックを使用
装飾的な小アイコン（矢印、チェックマークなど）	インライン SVG プリミティブ（<svg> + <path>）を使用し、単一ファイル・ゼロ依存を維持

埋め込み方法

<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
  
</svg>


<img src="https://cdn.thesvg.org/icons/{slug}.svg" alt="{name}" width="18" height="18" style="opacity:0.7" />

variant の選択：ダークモードでは default または light variant を優先；ライトモードでは default または dark を優先。mono variant はどちらのモードでも使用でき、CSS filter または直接 fill/stroke を調整してテーマに適応させます。

適用しないシーン

• 人名・ロール → カラーブロックのドットを使用し、アイコンは使わない
• 抽象的な概念（「壁」「タイムウィンドウ」など）→ セマンティックカラーでマークし、アイコンは使わない
• アイコンライブラリに見つからないもの → 簡潔なインライン SVG プリミティブを使用し、無理に合わせない

ステップ1：構造の整理

ユーザーの内容を受け取ったら、すぐにコードを書かないでください。まず構造を整理し、「ボードブループリント」を出力してユーザーに確認します：

分析フレームワーク

ユーザーが提供した内容から以下の次元を抽出します：

1. 決定事項（Decided）：すでに確定し、これ以上議論しない決定・事実
2. 未決事項（Open Questions）：回答が必要な質問。緊急度（must / can-wait / confirm）を明記
3. 依存チェーン（Dependencies）：どの事柄が他の事柄の前提となっているか、上流下流の関係
4. アクションロードマップ（Actions）：具体的にやるべきこと。時間・フェーズごとにグループ化
5. 成果物（Deliverables）：完了後に手元にあるべきもの

ブループリントの出力形式

## 看板蓝图：{项目名}

### 板块规划
1. {板块名} — {一句话说明}
2. {板块名} — {一句话说明}
...

### 信息密度
- 已决项：{数量} 条
- 待决项：{数量} 条（must: X / can-wait: X）
- 依赖链：{层级数} 层
- 行动项：{数量} 条
- 交付物：{数量} 项

### 缺失信息
- {指出用户内容中模糊或缺失的地方，一次性列出}

→ 确认后开始生成看板。

ユーザーがブループリントを確認したらステップ2へ進みます。ユーザーが「これでいい」「そのままやって」「問題ない」と言えば確認とみなします。

ステップ2：ボード生成

技術的制約

• 形式：単一の .html ファイル、ゼロ依存、ブラウザで直接開ける
• フォント：MiSans ローカル + Outfit Google Fonts + CJK システムフォールバック
• テーマ：ダーク・ライトのデュアルテーマ、localStorage でユーザー選択を永続化
• サイズ：max-width 1200px、レスポンシブ（< 960px で単一列に折りたたみ）
• 印刷：@media print で footer/toggle を非表示、カードは break-inside: avoid

Design System（必須）

以下の設計システムに厳密に従う必要があります。これは taste-skill でキャリブレーションされたパラメータ化仕様です：

カラー体系

:root 変数（ダークモードがデフォルト）：

:root {
  --bg: #0e0e14;
  --surface: rgba(255,255,255,0.04);
  --surface-hover: rgba(255,255,255,0.06);
  --surface-elevated: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.14);
  --text-primary: #e8e6e1;
  --text-secondary: #8a8680;
  --text-tertiary: #4a4744;
  --accent: #4ade80;
  --accent-dim: rgba(74,222,128,0.15);
  --accent-glow: rgba(74,222,128,0.08);
  --amber: #f59e0b;
  --amber-dim: rgba(245,158,11,0.12);
  --rose: #f43f5e;
  --rose-dim: rgba(244,63,94,0.12);
  --blue: #60a5fa;
  --blue-dim: rgba(96,165,250,0.12);
  --purple: #a78bfa;
  --purple-dim: rgba(167,139,250,0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --font: 'MiSans', 'Outfit', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --mono: 'MiSans', 'SF Mono', 'Fira Code', ui-monospace, monospace;
  --transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-tinted: 0 8px 32px -8px rgba(14,14,20,0.6);
  --shadow-elevated: 0 20px 60px -12px rgba(14,14,20,0.8);
}

ライトモードは html[data-theme="light"] で上書きします。詳細はリファレンス実装を参照してください。

セマンティックカラーマッピング

セマンティク	カラー	dim	用途
完了/通過/ポジティブ	accent（緑）	accent-dim	決定事項、完了済み、成果物
警告/進行中	amber	amber-dim	進行中、確認待ち、要注意
緊急/未決/ブロック	rose	rose-dim	未決、must 案件、ブロック項目
情報/正常/参考	blue	blue-dim	一般情報、参考、リンク
補足/特殊	purple	purple-dim	カテゴリタグ、日付マーク

タイポグラフィ階層

• ページタイトル：1.8rem; font-weight: 700; letter-spacing: -0.04em
• セクションタイトル：1.1rem; font-weight: 600; letter-spacing: -0.01em
• カードタイトル：1rem; font-weight: 600; letter-spacing: -0.01em
• 本文：0.88rem; color: var(--text-secondary); line-height: 1.6
• 補助テキスト：0.82rem; color: var(--text-secondary)
• タグ/メタデータ：0.72rem; font-weight: 700; font-family: var(--mono); letter-spacing: 0.05em
• 列ヘッダータグ：0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase

太字の補正

strong, b { font-weight: 600; font-size: 0.92em; letter-spacing: -0.01em; }

Surface 階層

階層	処理	用途
標準カード	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px; backdrop-filter: blur(20px)	主要な内容コンテナ
コンパクト項目	padding: 14px 16px; border-radius: var(--radius-sm)	決定事項、成果物の小カード
インラインバー	padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border)	成果物、注釈バー

インタラクション状態

• カード hover：border-color: var(--border-hover); box-shadow: var(--shadow-tinted)
• ボタン/タグ :active：transform: scale(0.96)（触覚フィードバック）
• ハイライトカード：border-color: rgba(accent,0.25) またはセマンティックカラーに対応する値
• テーマ切替：右上の円形ボタン、SVG の太陽/月アイコン

セクションコンポーネントライブラリ

ブループリントの計画に応じて、以下のコンポーネントから選択・組み合わせます：

1. Header（必須）

<header class="header">
  <div class="header-left">
    <h1>{项目名}</h1>
    <p>{一句话定位}</p>
  </div>
  <div class="header-meta">
    <span class="meta-badge amber">{周期标记}</span>
    <button class="theme-toggle" onclick="toggleTheme()">
      
    </button>
  </div>
</header>

2. Section コンテナ（必須）

各セクションは <section class="section"> を使用し、内部構造は：

<section class="section">
  <div class="section-header">
    <span class="section-num" style="color:var(--{语义色})">{序号}</span>
    <span class="section-title">{板块名}</span>
    <span class="section-sub">{一句话说明}</span>
  </div>
  
</section>

3. 決定事項グリッド

3列グリッド、各項目に緑のチェックドット + メインテキスト + グレーの補足説明：

<div class="decided-grid">
  <div class="decided-item">
    <div>{主文字}<div class="decided-detail">{补充说明}</div></div>
  </div>
</div>

4. 依存チェーン

階層的なノード + 矢印接続、ノードはセマンティックカラーで階層化：

<div class="dep-chain">
  <div class="dep-row">
    <div class="dep-node {critical|important|normal|output}">
      <span class="dep-num">{序号}</span>{名称}
      <span class="dep-sub">{补充}</span>
    </div>
  </div>
  <div class="dep-arrow-down">↓</div>
  
</div>

5. スイムレーン比較表（Swim Lane）

多次元比較カード、左側に ID タグ + メイン内容 + 複数列の属性：

<div class="lane-thead">
  <div class="lane-th">#</div>
  <div class="lane-th">{列1标题}</div>
  <div class="lane-th">{列2标题}</div>
  <div class="lane-th">{列3标题}</div>
</div>
<div class="lane-grid">
  <div class="lane-card">
    <div class="lane-id" style="background:var(--{色}-dim);color:var(--{色})">{ID}</div>
    <div class="lane-main">
      <div class="lane-name">{名称}</div>
      <div class="lane-desc">{描述}</div>
    </div>
    <div class="lane-cell">
      <div class="lane-cell-label">{列标签}</div>
      <div class="lane-cell-value {strong|warn|weak|neutral}">{值}</div>
    </div>
    
  </div>
</div>

セル値のセマンティックカラー：strong = accent（強い優位性）、warn = amber（リスクあり）、weak = rose（弱い・短いウィンドウ）、neutral = text-secondary（中立）

6. ステータステーブル

テーブル形式で問題・タスクリストを表示、ステータスカプセル付き：

<div class="card" style="padding:0;overflow:hidden">
  <table class="q-table">
    <thead>
      <tr><th style="width:40%">{列1}</th><th style="width:20%">{列2}</th><th style="width:25%">{列3}</th><th>{列4}</th></tr>
    </thead>
    <tbody>
      <tr>
        <td class="q-name">{问题名}</td>
        <td><span class="q-status {undecided|waiting|progress|minor|已决}">{状态}</span></td>
        <td class="q-urgency {must|can-wait|confirm}">{紧急度描述}</td>
        <td style="color:var(--text-tertiary);font-size:0.82rem">{归属}</td>
      </tr>
    </tbody>
  </table>
</div>

ステータスカプセルのスタイル：

• undecided：rose-dim 背景
• waiting：amber-dim 背景
• progress：blue-dim 背景
• 已決：accent-dim 背景（インライン style）
• minor：surface 背景

7. 時間・フェーズカード

タイムラインまたはフェーズごとにグループ化し、各フェーズに大きなカードを1枚：

<div class="schedule-grid"> 
  <div class="schedule-day">
    <div class="day-header">
      <span class="day-badge {sat|sun|自定义色}">{标签}</span>
      {阶段名}
    </div>
    <div class="session-card">
      <div class="session-header">
        <div class="session-num s{N}">{编号}</div>
        <div class="session-title">{标题}</div>
      </div>
      <div class="session-desc">{描述}</div>
      <div class="session-tasks">
        <div class="session-task">{任务项}</div>
      </div>
      <div class="session-output">{产出物}</div>
    </div>
  </div>
</div>

session-num のカラーサイクル：s1=rose, s2=amber, s3=purple, s4=blue, s5=amber, s6=accent（必要に応じて割り当て可能）

タスク項目は完了マークに対応：

• 完了：style="color:var(--accent)" + ✓ プレフィックス
• 進行中：style="color:var(--amber)" + ◐ プレフィックス
• 未開始：追加スタイルなし + ○ プレフィックス

8. 成果物グリッド

3列の小カード、番号 + 名前 + 出典説明：

<div class="deliverable-grid">
  <div class="deliverable">
    <div class="deliverable-num">{序号}</div>
    <div class="deliverable-name">{名称}</div>
    <div class="deliverable-for">{← 来源}</div>
  </div>
</div>

9. Footer（必須）

<footer class="footer">
  <span>{品牌} · {项目名} · {日期}</span>
  <span>{署名}</span>
</footer>

组件选取规则

根据蓝图自动判断使用哪些组件：

蓝图中有此内容	使用组件
已决项	已决项网格
待决问题列表	状态表格
上下游依赖	依赖链
多方案/多维度对比	泳道对比表
按时间/阶段划分	时间卡片
做完后手里有什么	交付物网格

板块顺序原则：已决地基 → 依赖链/全景 → 核心决策 → 开放问题 → 行动路线 → 交付物

交互特性

• 主题切换：深色/浅色，localStorage 持久化
• 卡片 hover：边框变亮 + 投影浮起
• :active 触觉：scale(0.96) 模拟物理按压
• 可点击行：cursor: pointer + onclick 跳转（如有链接）
• status badge 可点击切换（可选）：点击循环切换状态

第三步：输出

1. 将完整 HTML 写入 00_专注区/ 目录，文件名格式：{项目名}.html
2. 告知用户文件位置
3. 询问是否需要微调

反模式（禁止）

• 禁止使用 emoji，用语义色标记 + 图标替代
• 禁止使用纯黑 #000 或纯白 #fff 文字
• 禁止使用实色灰色卡片背景（必须用 rgba 白色叠加层）
• 禁止使用实色边框（必须用 rgba 透明度边框）
• 禁止使用 Inter 字体
• 禁止使用三列等宽卡片布局（除非是 decided-grid 或 deliverable-grid 的紧凑项）
• 禁止使用 h-screen（必须用 min-height: 100dvh）
• 禁止在深色模式下使用通用 rgba(0,0,0,x) 阴影（必须用色调阴影）
• 禁止泛化 AI 话术（"elevate"、"seamless"、"next-gen"等）

参考实现

完整的 CSS + HTML 组件参考：assets/component-reference.html（包含所有组件的视觉效果和 HTML 结构示例）

生成看板时，直接复制此文件中的 CSS 和组件 HTML 结构，替换占位内容为实际项目内容。这是权威样式源——不要自行发明 CSS，从这个文件里取。