Feishu Whiteboard Pro — Data skill for Claude Code

feishu-whiteboard-pro

一个用于打造真正"经过设计"的飞书 / Lark（飞书）白板的 Claude Code / agent **skill**——不只是配色 好看，而是讲究构图：清晰的视觉焦点、真实的层次、刻意的留白。它产出的是飞书文档里一块**可编辑**的真实白板， 而不是一张截图。

它构建于 [beautiful-feishu-whiteboard](https://github.com/zarazhangrui/beautiful-feishu-whiteboard) （沿用其配色板与 SVG 白板介质的硬性规则）之上，补上了原项目缺失的那一层：**如何构图，以及如何判断结果到底好不好。**

相比一个"配色板库"它多了什么

介质本身被刻意限制——单一字体、只有原生矩形 / 圆 / 连接线，没有渐变、滤镜、透明度、动效。所以这里的"好看" 指的是构图、层次、节奏、配色克制与留白。这个 skill 把两个原本靠临场发挥的软步骤变成了**关卡（gate）**：

理解内容
   │
   ├─▶ 关卡 1 · 设计简报      原型 + 焦点 + 配色策略 + 字号角色 + 反套路检查
   ▼
对照骨架构图               原型坐标 + 固定字号阶梯 + 8px 间距网格
   │
   ▼
渲染前预测缺陷（fit-check）  确定性：标签过宽 / 挤占间距 / 出血，在渲染前就抓出来
   │
   ▼
渲染 → 修正确性             溢出 / 重叠 / 裁切 / 手画箭头
   │
   ▼
关卡 2 · 设计评审           按层次 / 平衡 / 密度 / 对比 / 对齐五轴打分；要交付的板子上独立评审；修最弱项；重复
   ▼
写入飞书 → 看实时效果 → 交付

• fit-check（scripts/fit-check.mjs）—— 估算每个标签的宽度（中文 ≈ 1em， 拉丁字符 ≈ 0.6em），在渲染之前就标出溢出 / 挤占间距 / 出血。确定性，不耗模型。
• 独立评审 —— 对要交付的板子，由一个独立评审者对渲染结果做对抗式打分，把"只靠颜色撑起来"的假焦点和 失衡的构图揪出来，而不是自我合理化。

示例

七张标杆样板，每张都过了双关卡（fit-check 干净、设计评审过关）并在真实飞书白板上渲染过。它们覆盖不同原型 与配色板——其中一张还用的是**现场生成**的配色——但都出自同一条流水线，所以构图与配色是解耦的。把对应的 `.svg`（在 [`examples/`](examples/) 里）当作起手骨架打开，坐标都已经是评审过关的。

**四张复杂板子，四种不同配色：**

放射式系统图 · Riso Brut	对比矩阵 · Riptide Cobalt
时间线 · Coral	层级图 · 现场生成配色

**三张基础板子，共用一套配色（Riso Brut）：**

系统图	流程 + 分叉 / 汇合	泳道时序

配色 —— 精选锚点，或现场生成

这里的配色是**一套设计系统，不是色卡清单**：每套配色都给颜色分配角色（画布、墨色、强调色、面板）并附用途 说明和投放剂量，让 agent 知道每种颜色**该怎么用**，而不只是有哪些 hex。

• 一组精挑的锚点。 `CATALOG.md` 列出从克制到大胆的锚点配色；按气质和正式度挑一套。 每套就是一个 templates//design.md，并且是唯一真相源——目录表由它们经 `scripts/build-catalog.mjs