用途
xiaoqi-board 是一个面向项目梳理与呈现的看板生成技能。它解决的问题是：把一段口述、一份逻辑大纲或两者混合的项目描述，整理成一张结构清晰、可直接在浏览器打开的项目看板页面。
触发与输入
当用户说出「创建项目看板」「做个看板」「项目板」「看板生成」「board」「xiaoqi-board」时触发。用户提供内容的形式通常为：一段口述或散乱思考（对话中的聊天文字）、一份已有结构的逻辑大纲，或既有大纲又有口述补充的混合模式。
工作流程
第一步：结构梳理
收到内容后不立即写代码，先输出一份「看板蓝图」给用户确认。蓝图基于以下维度提取：
- 已决项（Decided）：已经确定、不再讨论的决策或事实
- 待决项（Open Questions）：需要回答的问题，标注紧急度（must / can-wait / confirm）
- 依赖链（Dependencies）：哪些事是另一些事的前提，上下游关系
- 行动路线（Actions）：具体要做的事，按时间或阶段分组
- 交付物（Deliverables）：做完后手里应该有的东西
蓝图的输出格式包含板块规划、信息密度（已决项数量、待决项数量及 must/can-wait 分布、依赖链层数、行动项数量、交付物数量）以及缺失信息（一次性列出用户内容中模糊或缺失的地方）。用户说「就这样」「直接做」「没问题」即视为确认。
第二步：看板生成
技术约束：单个 .html 文件、零依赖、浏览器直接打开；字体为 MiSans 本地 + Outfit Google Fonts + CJK 系统回退；深色/浅色双主题并以 localStorage 持久化；max-width 1200px，响应式（< 960px 单列折叠）；@media print 隐藏 footer 与 toggle，卡片 break-inside: avoid。
设计系统为强制规范，参数化定义在 :root 变量中，深色模式为默认，浅色模式通过 html[data-theme="light"] 覆盖。语义色彩映射为：完成/通过/积极用 accent（绿），警告/进行中用 amber，紧急/未决/阻塞用 rose，信息/正常/参考用 blue，补充/特殊用 purple，每种均配有对应的 dim 变量。
排版层级区分页面标题、板块标题、卡片标题、正文、辅助文字、标签/元数据与列头标签；Surface 层级区分标准卡片、紧凑项与内联条，并定义了卡片 hover、:active scale(0.96) 触觉反馈、高亮卡片与右上角主题切换等交互态。
板块组件库包含九类：Header（必须）、Section 容器（必须）、已决项网格、依赖链、泳道对比表、状态表格、时间/阶段卡片、交付物网格、Footer（必须）。组件选取规则按蓝图内容自动判断：有已决项则用已决项网格，有待决问题列表则用状态表格，有上下游依赖则用依赖链，有多方案或多维度对比则用泳道对比表，按时间或阶段划分则用时间卡片，需要说明做完后有什么则用交付物网格。板块顺序原则为：已决地基 → 依赖链/全景 → 核心决策 → 开放问题 → 行动路线 → 交付物。
第三步：输出
将完整 HTML 写入 00_专注区/ 目录，文件名格式为 {项目名}.html，告知用户文件位置，并询问是否需要微调。
图标资源
看板中涉及品牌、工具、平台名称时，使用 thesvg MCP 获取高质量品牌 SVG 图标，而非手绘占位符。可调用的 MCP 工具包括：search_icons(query) 搜索图标并返回 slug 与 variants；get_icon(slug, variant) 获取原始 SVG 代码；get_icon_url(slug) 获取 CDN 嵌入 URL；list_categories() 浏览所有分类。
嵌入方式有两种：内联 SVG（推荐，零依赖）或 CDN URL（图标多时减少文件体积）。变体选择上，深色模式优先 default 或 light variant，浅色模式优先 default 或 dark，mono variant 在两种模式下都可使用，可用 CSS filter 或直接调整 fill/stroke 适配主题。人名与角色占位不使用品牌图标，改用纯 CSS 圆点或色块；抽象概念用语义色标记；图标库中找不到的则用简洁内联 SVG 原语，不硬凑。
限制与禁止项
反模式（禁止）：禁止使用 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 等）。
参考实现位于 assets/component-reference.html，包含所有组件的视觉效果与 HTML 结构示例，是权威样式源；生成看板时直接从中复制 CSS 与组件 HTML 结构并替换占位内容，不自行发明 CSS。