feishu-whiteboard-themes

飞书画板主题库

为飞书画板 SVG/DSL 创作提供可复用的视觉风格系统。覆盖 32 种风格，从极简到华丽，从商务到技术，一键切换。

前置依赖

本 skill 是 lark-cli 的配套主题库，必须配合 lark-cli 使用。触发本 skill 时，先检查依赖是否就绪：

1. 检查 `lark-cli` 是否可用：运行 lark-cli --version

- 如果命令存在 → 继续 - 如果命令不存在 → 提示用户安装： > 本主题库需要配合 lark-cli 使用。请先安装： > ``bash > # 在 Claude Code 中直接说： > 帮我安装这个工具: https://github.com/larksuite/cli > `` > 安装完成后，我就可以帮你用各种风格画图了。

1. 检查 `whiteboard-cli` 是否可用：运行 npx -y @larksuite/whiteboard-cli@^0.2.11 -v

- 如果可用 → 继续 - 如果不可用 → 同样提示用户先完成 lark-cli 安装

不要在依赖缺失时继续执行后续工作流，必须等用户完成安装。

触发时机

当以下任一条件满足时，主动读取本 skill 并应用：

1. 用户画图时指定了风格（"用 Vercel 风格"、"画个 Excalidraw 风格的"）
2. 用户提到品牌名（Notion、Figma、Apple 等）作为设计参考
3. 用户要求"美化"、"优化"、"换风格"、"好看一点"
4. 用户提供了参考截图要求复刻风格
5. 你在创建 SVG/DSL 画板时需要决定视觉风格

工作流

Step 1：确定风格

按优先级从高到低判断使用哪个风格：

风格匹配关键词表（不区分中英文、大小写）：

Step 2：读取风格参数

从 references/style-catalog.md 中找到对应风格，提取以下参数应用到 SVG 代码中：

• •配色方案（palette）：主色、背景色、边框色、文字色、强调色
• •形状参数（shape）：圆角 rx、边框宽度、阴影
• •字体规范（typography）：字号层级、字重、字间距、大小写
• •连线风格（connector）：颜色、宽度、虚线/实线
• •装饰规则（decoration）：是否允许渐变、图标风格、额外点缀

Step 3：注入图标

在写 SVG 节点时，根据节点文本语义自动匹配并注入图标。详细映射和渲染策略见 references/icon-mapping.md。

注入流程：

1. 检查 `decoration.icons` 值 — 如果是 none，跳过图标注入
2. 语义匹配 — 从节点的标题/标签中提取关键词，在 icon-mapping.md 的语义表中查找匹配的 FontAwesome 图标

- 优先匹配更具体的关键词（如"Redis"优先于"数据库"） - 无匹配时不强制注入，保持纯文字节点

1. 确定渲染参数 — 根据 decoration.icons 的策略值，确定图标尺寸、颜色、模板
2. 注入 SVG 元素 — 在节点中插入图标 <text> 元素，文字右移为图标腾出空间

必须注入图标的场景：

• •技术架构图：每个组件节点都应尝试匹配
• •流程图：关键处理节点（审批、发送、存储等）
• •组织架构图：人员节点应有用户图标

可以省略图标的场景：

• •思维导图叶子节点（语义泛化的"其他"、"备注"等）
• •饼图/柱状图等数据图表
• •甘特图普通时间条（里程碑除外）

FontAwesome CDN 引入（在 SVG <style> 中）：

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

基础图标模板：

<text font-family="'Font Awesome 6 Free'" font-weight="900" font-size="ICON_SIZE" fill="ICON_COLOR"
      x="PADDING" y="BASELINE">&#xf0e0;</text>
<!-- 文字右移：x = ICON_X + ICON_SIZE + 6 -->

Step 4：应用到 SVG/DSL

在写 SVG 代码时，严格使用 Step 2 提取的参数替换以下默认值：

背景填充 → palette.background
节点填充 → palette.card / palette.primary
文字颜色 → palette.text / palette.textSecondary / palette.textMuted
边框颜色 → palette.border
连线颜色 → connector.color
圆角半径 → shape.borderRadius
边框宽度 → shape.borderWidth
标题字重 → typography.titleWeight
正文字号 → typography.bodySize
图标注入 → Step 3 的语义匹配结果

重要约束（来自飞书画板限制）：

• •禁止使用 <radialGradient>、<filter>、<pattern>、<clipPath>、<mask>
• •线性渐变 <linearGradient> 可谨慎使用（确保画板兼容）
• •阴影效果用叠加半透明矩形模拟，不用 <filter>
• •文字必须用 <text>，不用 <path>

Step 5：混合与定制

用户可以在基础风格上叠加定制：

• •"Vercel 风格但用蓝色主题" → 用 vercel 的布局规则，但 palette.primary 改为蓝色系
• •"Excalidraw 风格但要专业感" → 用 excalidraw 的手绘线条，但配色改深色系
• •"Notion 风格 + 深色模式" → 用 notion 的布局 + dark-mode 的配色

与 lark-whiteboard skill 的协作

本 skill 是 lark-whiteboard 的辅助 skill，不替代其渲染流程。协作方式：

1. lark-whiteboard 负责画板创建、渲染、上传
2. 本 skill（feishu-whiteboard-themes）负责在 SVG/DSL 写入阶段提供视觉参数
3. 当本 skill 被触发时，同时读取 lark-whiteboard 的 routes/svg.md 确保不违反画板限制

风格一览

详细参数见 references/style-catalog.md。

参考文件

• •`references/style-catalog.md` — 完整风格参数库（配色、形状、字体、连线）
• •`references/scene-style-mapping.md` — 图表类型 × 场景 × 推荐风格映射
• •`references/icon-mapping.md` — 语义关键词 → FontAwesome 图标映射 + 32 种图标渲染策略 + SVG 注入模板