Summary
当用户要求“画架构图/流程图/泳道图/时序图/组织架构图/状态机/漏斗/甘特/里程碑/矩阵象限/链路架构/手绘风格架构/复杂业务泳道图/ER 图/思维导图”等任一类型并落地到飞书,或用户给出飞书文档 URL 要求在其中画图,或用户说“同步到飞书/写到飞书画板”时,必须使用本技能。除上述 17…
fuxiaoai/lark-chart-skill · Archived
当用户要求“画架构图/流程图/泳道图/时序图/组织架构图/状态机/漏斗/甘特/里程碑/矩阵象限/链路架构/手绘风格架构/复杂业务泳道图/ER 图/思维导图”等任一类型并落地到飞书,或用户给出飞书文档 URL 要求在?
npx skills add fuxiaoai/lark-chart-skill --skill design-lark-chart
当用户要求“画架构图/流程图/泳道图/时序图/组织架构图/状态机/漏斗/甘特/里程碑/矩阵象限/链路架构/手绘风格架构/复杂业务泳道图/ER 图/思维导图”等任一类型并落地到飞书,或用户给出飞书文档 URL 要求在其中画图,或用户说“同步到飞书/写到飞书画板”时,必须使用本技能。除上述 17…
This repository is archived — consider an actively maintained alternative.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…
866.4K installsReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…
617.3K installsCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use …
105.8K installsRelated neighbors and high-traction skills in the same topics — useful to compare before installing.
Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…
810.4K installsBuild, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …
576.5K installsDebug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …
568.9K installsExecute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deploymen…
568.2K installsPre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure…
567.7K installsDeclared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
main
Parsed from SKILL.md frontmatter.
Files included with this skill beyond the listing page.
SKILL.md
13,921 B
SUMMARY.md
1,246 B
把用户输入转化为合规、可读、可上传的飞书画板图。本 skill 不是一个模板集,而是一条内容驱动 + 样式注入 + 闭环质检的管道。
data/design-lark-chart/<session>/- DSL 路径:board.json(@larksuite/whiteboard-cli DSL v2) - SVG 高保真路径:diagram.svg + board.openapi.json(由 whiteboard-cli -f svg --to openapi 生成) - 代码原生路径:diagram.mmd / diagram.puml - 二者都必须附带飞书真实导出图与质量门证据
本 skill 会同时接触 代码语法 与三种 JSON,但它们不是同一层东西:
diagram.mmd / diagram.puml:Mermaid / PlantUML 源码。仅用于飞书原生支持代码图的场景,例如时序图、状态机图、标准流程图。assets/raw/<id>.json:从参考飞书画板导出的官方原始结构,信息最全,含节点细节与底层字段;只用于审查和抽取风格,禁止直接传给 Planner。assets/style-tokens/<id>.json:从 raw 抽出来的风格指纹,只保留色板 / 字号 / 形状 / 连线偏好;这是 Planner 结算 style_budget 的依据。<session>/board.json:@larksuite/whiteboard-cli 支持的 DSL v2,是 Render 阶段写出的声明式画板描述;它不是飞书 raw 协议本身,而是一个更高层、对布局更友好的输入格式。关系如下:
参考飞书画板
-> raw/<id>.json
-> style-tokens/<id>.json
用户语义输入
+ style-tokens/<id>.json
-> plan.json
-> board.json (DSL v2)
-> whiteboard-cli --to openapi
-> board.openapi.json / 飞书可写入的原始结构
-> lark-cli whiteboard +update
必须明确:
whiteboard-cli 支持的一层高阶输入格式,我们在本 skill 里又只使用其中一个最小可验证子集(见 references/05-render-dsl.md)。diagram.mmd / diagram.puml -> lark-cli whiteboard +update --input_format mermaid|plantuml -> 飞书回读代码与导图验收。对于 system-architecture / matrix-quadrant / sketch-architecture 这类强依赖 preview 气质的图型,优先走 SVG 高保真路径,再转 OpenAPI 写入画板。whiteboard-cli --check;SVG 路径必须过 whiteboard-cli -f svg --check、OpenAPI 转换和专项 lint;代码路径必须过 +query --output_as code round-trip 和真实飞书导图验收。| 触发信号 | 说明 |
|---|---|
| 用户明说"画 XX 架构图 / 流程图 / 时序图 / 泳道图 / 状态机 / ER 图 / 思维导图..." | 命中 02-chart-taxonomy.md 17 种固定图型之一即触发 |
| 用户要求"自由画 / 产品原型 / 游戏页面 / 桑基图 / 路线图 / 插画",且固定图型覆盖不到 | 触发 freeform-drawing,走 SVG -> OpenAPI -> 飞书画板 |
| 用户提供飞书 docx / wiki URL 并要求"配图 / 画个图 / 给我画出来" | 先读文档,抽语义,再走完整管道 |
| 用户说"同步到飞书 / 写到画板 / 生成飞书画板" | 最后一步走 lark-cli whiteboard +update |
当前已补齐结构验证样例的固定图型(共 17 种):
business-architecturesystem-architectureflowchartswimlanesequencemindmaporg-chartstate-machineer-diagramfunnelganttmilestonematrix-quadrantlink-architecturelark-style-architecturesketch-architecturecomplex-swimlane另外支持 1 个非模板化自由模式:
freeform-drawing:当用户需求不属于上述固定图型,但明确需要飞书画板中的视觉表达、产品原型、复杂信息图、图解插画或自定义图表时触发。该模式必须走 svg-openapi,用 SVG 作为设计源,再转 OpenAPI 写入飞书画板;不得新增硬编码渲染器或把某个验收样例固化成模板。注意:17 类图型都已补齐可复用 examples,但不再要求全部是 JSON。其中:
sequence / state-machine / 标准 flowchart 优先使用 .mmdmindmap / er-diagram 优先使用 .mmd(必要时可切换 .puml)funnel 继续使用 DSL JSON,但必须满足颜色分层与去外框约束02-chart-taxonomy.md 与 05-render-dsl.md 的路由规则为准发布状态与覆盖面定义见 [references/COVERAGEREPORT.md](references/COVERAGEREPORT.md)。
这些约束优先级高于"画得好看":
whiteboard-cli 的 flex / dagre 布局引擎决定,或由 Layout 阶段的纯函数根据节点数计算。不允许代码里出现 x=340 这种魔法常量。assets/style-tokens/<id>.json。新颜色 / 新字号不允许在 Render 阶段临时引入。auto-added。whiteboard-cli --check errors > 0 或 VQA 任一评分 < 9 或出现 blocker,不得交付。见 [references/01-pipeline.md](references/01-pipeline.md)。
Normalize → Select → Plan → Layout → Render → StaticCheck → VQA → Deliver
每一步的输入/输出/失败回退都在 01 里给了表格,按里面做。
从飞书官方"飞书画板.skill"文档(Lww3d2rfwoE1SYxHtHicurYUn5d)拉下来的 15 张标准画板作为风格参考,三件套沉淀:
assets/
├── previews/<id>.png # 视觉锚,给多模态 LLM 看
├── raw/<id>.json # 原始节点结构,审查时查阅;禁止传给 LLM
└── style-tokens/<id>.json # 抽取出的风格指纹(色板/字号/形状/连线)
_catalog.json # 跨图聚合的 house_style
只参考样式(色板、字号、圆角、连线偏好),不套模板、不抄业务文案、不抄坐标。详见 [references/02-chart-taxonomy.md](references/02-chart-taxonomy.md) 与 [references/03-style-system.md](references/03-style-system.md)。
按职责组织,按需读取:
| 文件 | 什么时候读 |
|---|---|
references/01-pipeline.md |
每次生成都必读,熟悉八步管道与回退矩阵 |
references/02-chart-taxonomy.md |
Select 阶段选图型时读 |
references/03-style-system.md |
Plan 阶段挑 style_budget、Render 阶段落色时读 |
references/04-planner-contract.md |
Plan 阶段产 plan.json 时必读(schema 严格) |
references/05-render-dsl.md |
Render 阶段选 DSL / Mermaid / PlantUML 路由时读;走 DSL 时必读 |
references/06-quality-gates.md |
Gate A/B 执行 + 按路由校验 + VQA rubric + 熔断规则 |
references/07-premium-style-contracts.md |
生成 system-architecture / matrix-quadrant / sketch-architecture,或用户要求“更高级 / 贴近示例图 / 飞书画板风格”时必读 |
references/08-freeform-svg-mode.md |
固定图型覆盖不到,或用户要求产品原型、游戏页面、桑基/路线图/插画等自由视觉表达时必读 |
| 脚本 | 作用 | 什么时候跑 |
|---|---|---|
scripts/fetchreferenceboards.sh |
从官方 docx 拉 15 张参考画板到 assets/ | 首次部署 / 参考更新时 |
scripts/extractstyletokens.py |
从 assets/raw/ 抽出 style tokens 到 assets/style-tokens/ |
参考画板变更后 |
scripts/check_board.sh |
whiteboard-cli --check,Gate A 门禁 |
Render 后每次都跑 |
scripts/lintlarkstyle_architecture.py |
检查飞书高级架构图是否退化成简单分层盒子 | lark-style-architecture 的 DSL Render 后 |
scripts/lintpremiumstyle.py |
检查系统架构图 / 矩阵象限图 / 手绘风格架构图是否退化成普通盒子图 | 三类图的 SVG 或 DSL Render 后 |
scripts/lintsvgquality.py |
检查自由 SVG 的平台兼容性、图型指纹、颜色来源和视觉密度。可选 --style-seed <id> 借用某张固定 token 的色板,可选 --plan <path> 优先采用 plan.style_budget 作为允许色集,并带 --strict-budget 拒绝超集 |
freeform-drawing 和强视觉 SVG Render 后 |
scripts/render_freeform.sh |
自由模式端到端门禁包装器:校验 freeformbrief.json schema → whiteboard-cli -f svg --check(按 brief.allowedcheckwarnings 白名单判定)→ lintsvgquality.py --plan/--style-seed → --to openapi 一体化产出 board.openapi.json 和 renderfreeform.report.json |
freeform-drawing 路径必须跑(替代手动串接 check + lint + convert) |
scripts/render_preview.sh |
本地渲染 PNG | Gate A 通过后、VQA 前 |
所有脚本默认把产物写到 data/design-lark-chart/<session>/,不入 git(data/ 已在 .gitignore)。
references/examples/smokeboard.json:最小可运行 DSL v2 文件,用于验证 checkboard.sh 和 render_preview.sh 在本机可用。不是模板,不要照抄业务。references/examples/<chart-type>.json:DSL 路径图型的端到端验证样例。references/examples/<chart-type>.mmd / references/examples/<chart-type>.puml:代码原生图型的端到端验证样例。data/design-lark-chart/reference_boards.json。scripts/fetchreferenceboards.sh 拉 png/raw。scripts/extractstyletokens.py 生成新 <id>.json 和刷新 catalog。references/02-chart-taxonomy.md 的表里,补 signals/structure/fallback。<session>/board.json 的所有颜色能在 plan.style_budget 里回查<session>/check.json 的 errors=0, warnings=0, issues=[]<session>/svgcheck.json 无 issue,且对应 lint 通过(强视觉固定图型跑 lintpremiumstyle.py;自由模式必须跑 scripts/renderfreeform.sh <session>,由它统一产出 render_freeform.report.json 且 ok=true,禁止只手跑其中一步)<session>/roundtrip.code.json 可回读源码,且 syntax_type 与预期一致任一未满足:停止交付,返回对应阶段修复(见 06-quality-gates.md 的回退矩阵)。
发布前覆盖面见 [references/COVERAGEREPORT.md](references/COVERAGEREPORT.md)。每次新增或降级图型,必须同步更新覆盖面定义;若仍存在 Gate B blocker,则不能对外发布。