feishu-cli-htmlbox
在飞书云文档里画会动的图 / 可交互图表 / 数据大屏——妙笔BOX 是飞书文档里唯一能真实跑 CSS/JS 的载体 （iframe 沙箱）。能画：ECharts 全家桶（折线/柱/饼/雷达/散点/热力/桑基/漏斗/仪表/K线/箱线/平行坐标/旭日/treemap/ 力导向关系图/时序/甘特）、真实地图与经纬度飞线、echarts-gl 3D（map3D/3D柱/3D散点/3D曲面）、Three.js 真 3D 场景、 词云、水球、纯 CSS 动画、Canvas 粒子、SVG 矢量动画、KPI 滚动大屏。 当用户要"在飞书文档里画图/做动画/能动的图/可交互图表/数据大屏/Dashboard/折线图/柱状图/地图/飞线图/3D图/ 关系图/流程动画/ECharts/可视化"，或要做能调 AI / 读写多维表 / 持久化状态 / 拿用户身份的交互式文档小程序， 或提到"妙笔BOX/HTML 小组件/让飞书文档里的图动起来/嵌入网页到飞书文档/window.magic"时， 必须用本技能。注意：要"动"只能用妙笔BOX；画板（feishu-cli-board）的 SVG 节点会被服务端栅格化成静态图、不会动。
- Installs
- 111
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/riba2534/feishu-cli --skill feishu-cli-htmlbox- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads feishu-cli-htmlbox automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
在飞书文档里画会动的图（妙笔BOX）
你拿到「在飞书文档里画一个 X 图 / 做个能动的可视化 / 做数据大屏」这类任务时用本技能。
妙笔BOX 是飞书文档里唯一能真实执行 CSS/JS 的载体（iframe 沙箱），所以一切动画、ECharts、Three.js、Canvas
都能动。流程就三件事：照配方写一页自包含 HTML → 本地浏览器验证它真渲染 → 用 doc htmlbox 落库。
要"动"只能用妙笔BOX。画板（
feishu-cli-board）的 SVG 节点会被飞书服务端栅格化成静态图、永远不动； 代价是妙笔BOX 是整体 iframe，内部元素不能像画板节点那样在飞书里单独点选编辑（鱼与熊掌不可兼得）。
第一步永远是选型：你要画什么 → 用什么 → 配方在哪
先在下表对号入座，再去对应 reference 抄骨架 + 配方。不要从零手搓 ECharts option——配方都验证过、能直接 create。
| 你要画的图 | 引擎 / 方案 | 配方位置 |
|---|---|---|
| 折线 / 面积 / 柱状 / 堆叠柱 / 柱状竞赛 BarRace / 玫瑰饼 / 雷达 | ECharts（换 series.type） | references/gallery.md › 数据对比 |
| 散点气泡 / 热力 / 日历热力 / 箱线 / K线蜡烛 / 平行坐标 | ECharts | references/gallery.md › 分布统计 |
| 饼 / 漏斗 / 桑基 Sankey / 主题河流 / 仪表盘 gauge / 水球 liquidFill | ECharts(+扩展) | references/gallery.md › 构成流向 |
| 力导向关系图（可拖拽）/ 组织树 tree / 旭日 sunburst / 矩形树图 treemap | ECharts | references/gallery.md › 关系层级 |
| 时序 / 状态机 / 甘特 / CI流水线 / 看板流动 | ECharts custom / CSS | references/gallery.md › 流程时序 |
| 词云 wordCloud | echarts-wordcloud | references/gallery.md › 构成流向 |
| 纯 CSS 动画（旋转/脉动/进度条/打字机/变色） | CSS @keyframes（最稳，不依赖外网） | references/gallery.md › 创意动画 |
| 粒子流 / 星空 / 自绘动画 | Canvas + requestAnimationFrame | references/gallery.md › 创意动画 |
| 矢量路径自绘 / morphing / 维恩图 | 内联 <svg> + SMIL/CSS | references/gallery.md › 创意动画 |
| KPI 数据大屏（数字滚动 + 迷你趋势） | HTML/CSS/JS | references/gallery.md › 创意动画 |
| 真实地图着色 choropleth / 经纬度 geo 飞线 | ECharts geo + registerMap | references/geo-3d.md |
| 3D 立体地图 map3D / 3D 柱 / 3D 散点 / 3D 曲面 | echarts-gl | references/geo-3d.md |
| 真 3D 场景（旋转星球 / GPU 粒子 / 几何体） | Three.js（WebGL） | references/geo-3d.md |
不确定用哪个？默认 ECharts（覆盖绝大多数统计/关系图）；只有要真实地理、可旋转 3D、或 ECharts 给不出的自由视觉，才上 geo-3d / Canvas / SVG。
不确定画什么形式（柱还是线？要不要干脆一个大数字？）→ 先看 feishu-cli-dataviz 技能
（任务→形式启发式 + 反模式清单）。系列配色统一取该技能色板 dark 列（约定见
references/gallery.md 开头），不自创色值。
不止画图：window.magic 文档小程序运行时
妙笔BOX 的 iframe 里，飞书注入了一个 window.magic 运行时——OpenAPI 建的块也有（已实测，注入认 component_type_id 不认来源）。所以它不只是画图，还能做会读数据、能交互、有状态的文档小程序。当任务需要下面任一项，看 references/window-magic.md：
| 需求 | 能力 |
|---|---|
| 当前用户身份（名字 / open_id，用于个性化或写人员字段） | window.magic.user |
| 读当前文档全文 / 元信息（喂 AI、统计、生成目录） | getDocAsMarkdown / getPageMeta |
| 持久化状态（计数器 / 抽奖 / 祝福墙 / 已读列表） | window.magic.redis / store（禁 localStorage，见 pitfalls） |
| 图表接真实数据源（活数据 Dashboard） | base_records_search 拉多维表 → ECharts |
| 文档内调 AI（摘要 / 问答 / 文案，无需自带 key） | window.magic.ai（豆包） |
⚠ window.magic 只在飞书文档端注入，本地 file:// 预览必为 undefined——所有用法都要判存兜底，否则本地白屏。
绘制工作流（每张图都照做）
- 照配方写一页自包含 HTML 到
/tmp/x.html。从gallery.md/geo-3d.md取对应骨架 + 配方；统一深色背景、容器固定高度（如#chart{height:360px}）、width:100%、监听resize调chart.resize()。系列色按gallery.md开头的配色约定取用；换了色就先跑一遍色板校验（命令在同一段）。 - 本地浏览器验证它真渲染、真在动——这步不能跳。iframe 里任何顶层 JS 错误会让整张图白屏且不报错（未捕获异常走 pageerror、不进 console），光读代码看不出来。直接跑封装好的验证脚本——它用全新浏览器 session 打开页面、抓 page error / console、数 canvas/svg 节点、截图，并据此给通过/未过判定：
退出码 0 才算初步通过；但「画对没画对、在不在动」机器判不了，务必再肉眼看它打印的那张截图。排查白屏见
scripts/verify.sh /tmp/x.html # 地图/CDN 重的加等待秒数：scripts/verify.sh /tmp/x.html 5references/pitfalls.md。 - 落库：
feishu-cli doc htmlbox create <doc_id> --html-file /tmp/x.html。 - 改图：
feishu-cli doc htmlbox update <doc_id> <block_id> --html-file /tmp/x2.html（block_id 会变，后续用返回的new_block_id）。
命令速记
| 操作 | 命令 |
|---|---|
| 插入 | feishu-cli doc htmlbox create <doc_id> --html-file x.html（--index 控位置，默认末尾） |
| 替换 | feishu-cli doc htmlbox update <doc_id> <block_id> --html-file x2.html（返回 new_block_id） |
| 读回 | feishu-cli doc htmlbox get <doc_id> <block_id> --raw > cur.html |
| 删除 | feishu-cli doc htmlbox delete <doc_id> <block_id> |
输入也支持 --html '<...>' 或 --html-file -（stdin）。四个命令都支持 --format / --jq；写类 create/update/delete 另有 --dry-run 预览和 -o 写文件，get 用 --raw 出纯 HTML（get 无 --dry-run/-o）。默认 Bot 身份（操作 feishu-cli 自建文档无需登录）；改他人/手建文档传 --user-access-token。
画图必避的 5 个坑（详见 references/pitfalls.md）
- 白屏不报错 → 落库前本地浏览器必验（见工作流第 2 步）。这是最高频的坑。
- CDN
<script>是异步的 → 用前轮询等库就绪（if(typeof echarts==='undefined') return setTimeout(boot,150)），每个<script src>加onerror兜底。飞书沙箱实测能联 jsdelivr。 - 真实地图 → ECharts 5 不带地图数据，直接
type:'map'空白；先fetchGeoJSON（借echarts@4.9.0/map/json/china.json）再registerMap。 - 极坐标 polar bar 不按值上色 →
visualMap对它无效，给每个 data 项显式itemStyle.color。 - 批量画多张 → 每次
create之间sleep 0.5s，否则触发飞书写限流99991400；多图配标题用doc content-update --mode append --markdown "## 标题"与 create 交替追加。
创建后交付（按需）
文档要交给用户时：按 feishu-cli-write 的 owner 授权流程（perm add full_access + 视配置 perm transfer-owner），并按全局规则发一张飞书卡片通知。
参考文档与脚本
scripts/verify.sh <html> [等待秒数]— 落库前验证脚本（工作流第 2 步用它）：全新 session 打开 → 抓 page error/console → 数 canvas/svg → 截图 → 给通过判定；退出码 0 才算初步通过，仍须肉眼看截图references/gallery.md— 主力配方库：4 种通用骨架（ECharts/Canvas/Three.js/SVG-CSS）+ 按图表类型的可直接用配方references/geo-3d.md— 地图 / echarts-gl 3D / Three.js 的完整可跑模板（这几类有 CDN/registerMap/坐标系/着色坑）references/window-magic.md— 文档小程序运行时：window.magic能力配方（用户身份 / 读文档 / 持久化 / 多维表 / AI），含判存兜底范式与活数据 Dashboard、文档内 AI 卡等组合配方references/pitfalls.md— 画图避坑与白屏排查（来自真实创建一篇 47 图大文档）references/mechanism.md— 块机制 / 身份 / update 速查（只在排查 token、组件 ID、update 行为时才需要）
FAQ
What does the feishu-cli-htmlbox skill do?
在飞书云文档里画会动的图 / 可交互图表 / 数据大屏——妙笔BOX 是飞书文档里唯一能真实跑 CSS/JS 的载体 （iframe 沙箱）。能画：ECharts 全家桶（折线/柱/饼/雷达/散点/热力/桑基/漏斗/仪表/K线/箱线/平行坐标/旭日/treemap/ 力导向关系图/时序/甘特）、真实地图与经纬度飞线、echarts-gl 3D（map3D/3D柱/3D散点/3D曲面）、Three.js 真 3D 场景、 词云、水球、纯 CSS 动画、Canvas 粒子、SVG 矢量动画、KPI 滚动大屏。 当用户要"在飞书文档里画图/做动画/能动的图/可交互图表/数据大屏/Dashboard/折线图/柱状图/地图/飞线图/3D图/ 关系图/流程动画/ECharts/可视化"，或要做能调 AI / 读写多维表 / 持久化状态 / 拿用户身份的交互式文档小程序， 或提到"妙笔BOX/HTML 小组件/让飞书文档里的图动起来/嵌入网页到飞书文档/window.magic"时， 必须用本技能。注意：要"动"只能用妙笔BOX；画板（feishu-cli-board）的 SVG 节点会被服务端栅格化成静态图、不会动。
How do I install feishu-cli-htmlbox?
Run npx skills add https://github.com/riba2534/feishu-cli --skill feishu-cli-htmlbox in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/feishu-cli-htmlbox/ (personal) or .claude/skills/feishu-cli-htmlbox/ (project).
Which AI agents can use feishu-cli-htmlbox?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is feishu-cli-htmlbox safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains feishu-cli-htmlbox?
It is published by riba2534 in riba2534/feishu-cli. It has 111 recorded installs.
More from riba2534/feishu-cli
feishu-cli-toolkit
riba2534/feishu-cli
飞书轻量工具箱与分诊入口。仅在没有更专用 skill 时使用，主要覆盖普通电子表格、 日历/日程、任务/任务清单、基础文件/素材/评论、知识库、用户和部门查询、审批查询。 文档读写导入导出、云盘增强、多维表格、画板、消息/群聊、邮箱、搜索、权限、OAuth、 视频会议/妙记均优先使用对应 feishu-cli- 专用技能。 sheet filter-view/dropdown 优先用 feishu-cli-sheet；calendar suggestion/room-find/rsvp 优先用 feishu-cli-calendar。
feishu-cli-read
riba2534/feishu-cli
只读操作，不修改文档内容。读取飞书云文档、知识库内容或电子表格，分析文档结构。 支持普通 docx、普通 sheet、知识库 docx 和知识库 sheet。当用户请求"查看"、"阅读"、"分析"、"读取"、 "打开"、"read"、"view" 飞书文档、知识库或电子表格时使用。支持通过文档 ID、知识库 Token 或 URL 读取。 Markdown 仅作为分析中间态存放在 /tmp（不主动落地为用户文件）；如需主动导出到本地路径请用 feishu-cli-export， 写入请用 feishu-cli-write。
feishu-cli-msg
riba2534/feishu-cli
飞书消息发送。发送消息（text/post/interactive 卡片等 10 种类型：text/post/image/file/audio/media/sticker/interactive/sharechat/shareuser；system 分割线 CLI 暂未直接支持，需用 feishu-cli api 透传）、回复消息、 转发/合并转发、消息加急、消息书签（flag 收藏/list/cancel）、下载消息资源（图片/文件）。 发送/回复/转发/加急默认 App Token（Bot 身份）；msg flag 收藏/书签必需 User Token（im:feed.flag:read/write）； msg resource-download 已登录时优先 User Token，未登录回落 App Token。 当用户明确请求通过飞书即时消息/Bot 消息发送、回复、转发、合并转发、加急、消息收藏/书签、 下载消息图片或文件时使用。邮件走 feishu-cli-mail；文档评论/共享权限走对应 skill。 注意：Reaction/Pin/获取消息详情/批量获取消息/话题回复/消息历史/搜索群聊/群聊管理， 以及消息删除（默认 App Token 用于 Bot 自撤回，可选 User Token 让管理员撤回他人） 请使用 feishu-cli-chat 技能。 发送 interactive 卡片时，先用 feishu-cli-card 构造 v2 JSON， 再回到本技能用 --msg-type interactive --content-file 发送。
feishu-cli-write
riba2534/feishu-cli
向飞书文档写入内容、创建新文档、新建空白文档。支持 doc import 从 Markdown 创建、 doc content-update 精准追加/覆盖/替换/插入/删除，doc add/update/delete 低层块操作， 以及图片/文件插入。当用户请求创建文档、写文档、更新文档、替换章节、插入章节、 删除章节、追加内容、覆盖文档、插入图片或文件时使用。
feishu-cli-export
riba2534/feishu-cli
将飞书文档、知识库文档或电子表格导出到本地。支持 docx/wiki/sheet 导出 Markdown， doc export 内嵌电子表格自动展开，图片/画板素材下载，以及 doc export-file 异步导出 PDF/Word/Excel。当用户请求导出文档、保存为 Markdown、导出 PDF/Word/Excel、下载文档图片、 导出表格或表格转 Markdown 时使用。本地导入请用 feishu-cli-import 或 feishu-cli-drive。
feishu-cli-import
riba2534/feishu-cli
从 Markdown 文件导入创建飞书文档。支持嵌套列表、Mermaid/PlantUML 图表自动转画板、 大表格智能处理（超过 9 行用 inserttablerow API 追加保持单 block，超过 9 列拆分保留首列）、公式、Callout 高亮块。 内置飞书侧渲染规范（references/doc-guide.md + references/mermaid-spec.md）， 覆盖图表花括号/par 等语法限制、表格 9 行/列阈值、Callout 6 种颜色映射等飞书兼容性规则。 当用户请求"导入 Markdown"、"从 md 创建文档"、"从 md 文件创建文档"、"把 Markdown 转换到飞书"、 "上传 Markdown"、"Markdown 转飞书"、"md 导入"、"批量导入"，或排查"飞书 Mermaid 渲染失败"、 "Callout 颜色不对"、"飞书表格被拆"、"飞书文档导入兼容性"等问题时使用。 注意：仅支持 Markdown 源文件导入为飞书文档。Markdown 表格创建电子表格请用 feishu-cli-toolkit 的 sheet import-md； DOCX/XLSX 导入为云文档请使用 feishu-cli-drive 的 drive import。
Popular productivity & automation skills
agent-browser
vercel-labs/agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.
lark-doc
open.feishu.cn
飞书云文档（Docx / Wiki）内容操作：读取、创建、编辑文档，插入或下载图片附件，以及操作思维笔记。用户提供文档 URL/token（包括 doubao.com 的 /docx/、/wiki/）时使用；按 URL 路径/token 而非域名路由；/page/ 是妙搭应用，非飞书云文档。文档内嵌资源按读取参考中的统一规则分流。独立评论操作走 lark-drive；随正文读取评论使用 docs +fetch。表格或 Base 内部数据操作不在本 skill。
lark-base
open.feishu.cn
飞书多维表格（Base）操作：建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、应用模式（BaseApp/AppMode 页面与组件）、Workspace 目录、workflow、角色权限、模板中心（多维表格模板分类/列表/搜索）；遇到 Base/多维表格/bitable、BaseApp/AppMode、/base/ 或 /app/ 链接时使用。BaseApp 不走 lark-apps；文件导入/导出转 lark-drive，认证/授权转 lark-shared。
lark-drive
open.feishu.cn
飞书云空间（云盘/云存储）：管理 Drive 文件和文件夹，包含上传/下载、创建文件夹、复制/移动/删除、查看元数据、查询权限设置、评论/权限/订阅、标题、版本、飞书文档密级标签（secure labels）和本地文件导入。用户需要整理云盘目录、处理云空间资源 URL/token、判断链接类型/真实 token/标题，或导入 Word/Markdown/Excel/CSV/PPTX/.base 为 docx/sheet/bitable/slides 时使用；doubao.com 云空间 URL/token 也按资源路径和 token 路由，不回退 WebFetch。不负责：文档内容编辑（走 lark-doc）、表格/Base 表内数据操作（走 lark-sheets/lark-base）、知识空间节点/成员管理（走 lark-wiki）、原生 Markdown 文件读写/patch/diff（走 lark-markdown）。
lark-shared
open.feishu.cn
Use for lark-cli setup/auth tasks: auth login/status/logout, user vs bot identity, business-domain permissions (--domain, including all/docs/drive), missing scopes, revoking authorization, or handling notice JSON.
lark-im
open.feishu.cn
飞书即时通讯：收发消息和管理群聊。发送和回复消息、搜索聊天记录、管理群聊成员、上传下载图片和文件、管理表情回复、发送应用内/短信/电话加急、发送和处理交互卡片（Interactive Card）、监听卡片按钮回调（card.action.trigger）。当用户需要发消息、查看或搜索聊天记录、下载聊天中的文件、查看群成员、搜索群、创建群聊或话题群、管理标记数据、管理 Feed 置顶（添加/移除/查询置顶会话）、管理标签数据、处理卡片回调时使用。