用 AI 或 coding agent 做 HTML 已经不难了。真正麻烦的往往是下一步：文件在自己电脑里能打开，但发给同事后，对方可能打不开、不知道看哪个版本，也不好像云文档一样放进项目资料里继续讨论。
现在，飞书已支持上传并预览 HTML！主要有两种方式：轻量单页 HTML 可以上传到云空间，用于内部预览和权限管理；更复杂的 HTML 页面，可以发布到妙搭，获得适合分享和访问的页面链接。
这篇文章，我们不把 HTML 当成“网页开发”来讲，而是从办公场景出发，看看它能替代或补充哪些常见产物：PPT、Excel 看板、产品原型、日报页面，以及视频里的可视化画面。
飞书 HTML 文件在线预览两种模式：云空间上传与妙搭发布
选择哪一种方式，取决于 HTML 的使用范围和页面复杂度。
需求 | 推荐方式 |
内部评审、团队分享、轻量单页 HTML | 飞书云空间 |
希望像云文档一样预览、转发、控制权限 | 飞书云空间 |
对外分享、长期访问、需要稳定网页链接 | 飞书妙搭 |
页面有复杂前端效果、组件状态或更多代码逻辑 | 飞书妙搭 |
如果你已经有 HTML 文件，可以直接上传到飞书云空间。
如果你在用 agent 生成 HTML，可以在需求里说明最终交付方式：
生成 HTML 后，请按以下方式交付：
- 内部轻量预览：上传到飞书云空间
- 对外分享或复杂托管：发布到飞书妙搭
发布到妙搭通常需要已有妙搭应用或创建新的妙搭应用，并具备相应发布权限。如果希望由 agent 代为发布，需要提前接入飞书 CLI 的妙搭发布能力并完成授权；否则，可以先生成 HTML，再由使用者在妙搭中完成发布。
要安装飞书CLI，把这段话发给你的agent即可：
帮我安装飞书 CLI：https://open.feishu.cn/document/no_class/mcp-archive/feishu-cli-installation-guide.md
飞书 HTML 场景展示：演示、看板、原型、内容页和视频可视化
HTML 上传和预览的价值，通常会在具体办公场景里体现出来。下面几个例子，分别对应演示、数据分析、产品评审、内容分发和视频制作。
场景一：HTML slides，用来做演讲和方案展示
HTML slides 适合那些用 PPT 表达会有点“压扁”的内容：需要全屏视觉、网页式叙事、动效、视频素材，或者希望把演示做得更像一个可访问页面。
250px|700px|reset
用AI做HTML slides的技巧：
- 推荐用 Frontend Slides skill：https://github.com/zarazhangrui/frontend-slides
- 或者归藏PPT skill：https://github.com/op7418/guizang-ppt-skill
- 如果想要提升视觉效果，海外模型建议用Claude，国内模型建议用Kimi/GLM 5.2
制作前，可以先用飞书文档整理故事版：每页讲什么、需要什么素材、视觉上希望怎么呈现。飞书文档承载需求和素材，HTML 承载最终展示效果。
页数 | 文字内容 | 富媒体 |
1 | 代码是一种讲故事的媒介 | |
2 | 我从来没有把自己当成一个 coder 但我已经做了 10+ 个项目，现在在 GitHub 上有 30k+ stars | 视觉上做左右对比：
250px|700px|reset 
250px|700px|reset  |
可以把需求写成这样：
用frontend slides https://github.com/zarazhangrui/frontend-slides 帮我做一个HTML slides，然后【上传到飞书云空间/部署到飞书妙搭】。
Slides内容：【补充每页大纲和文字内容】
素材：【图片、视频等素材所在的文件夹名称/path】
如果对视觉效果要求更高，可以把参考图、字体倾向、配色偏好、禁止使用的风格也写进同一份飞书文档里。素材和审美边界越明确，HTML slides 的产出越接近可用稿。
场景二：交互式数据看板，用来讨论变量变化
静态表格适合记录结果。预算规划、经营预测、增长测算、销售目标拆解这类问题，还需要讨论“如果变量变了，结果会怎么变”，交互式 HTML 看板会更直观。
比如一份预算沙盘，可以把起始资金、月营收、增长率、月度预算分配做成可拖动参数，让团队实时看到现金流、支出、盈亏平衡点和预算去向。
250px|700px|reset
可以把需求写成这样：
帮我把这个 Excel 文件做成一个可交互的 HTML。
要求：
1. 可视化呈现核心数据。
2. 支持拖动关键因素，实时查看它对结果的影响。
3. 重点展示【补充你最关心的指标或判断】。
交付方式：
【上传到飞书云空间 / 发布到飞书妙搭】
这类页面的作用，是让讨论从“看一组数字”变成“现场调整假设并看结果”。
场景三：HTML 产品原型，用来提前跑通用户路径
产品早期讨论里，静态截图经常不够用。入口是否明显、点击路径是否顺、异常状态是否完整，很多问题只有点起来才会暴露。
HTML 原型不承担正式设计稿的全部职责。它主要用于需求澄清、方案评审、跨团队对齐，让用户路径在早期就能被完整走一遍。
注：下图可不是飞书内云文档界面的真实截图，而是Agent做出来的Demo！拿着这张图，和设计/研发沟通会更加顺畅～
250px|700px|reset
可以把需求写成这样：
帮我做一个可交互的 HTML 产品原型。
参考：
【产品截图】
需要实现：
【功能列表】
用户路径：
【描述用户从进入页面到完成任务的操作路径】
交付方式：
【上传到飞书云空间 / 发布到飞书妙搭】
这类原型的价值，主要体现在评审者能否真的走一遍流程，并发现静态稿里看不出来的问题。
场景四：HTML 内容页，用来承载日报、简报和专题内容
行业简报、AI 动态、竞品追踪、内部日报这类内容更新频率高，如果只发在群消息里，很快会被新的聊天覆盖。做成 HTML 页面后，内容更容易被阅读、收藏和回看。
250px|700px|reset
可以把需求写成这样：
设置一个自动化工作流。
每天早上 10 点，把当日 AI 日报做成一个极简杂志风格的 HTML。
要求：
1. 内容结构清楚，适合快速阅读。
2. 每条内容保留原始链接。
3. 生成后发布到飞书妙搭。
4. 通过飞书 CLI bot 把链接发到飞书里。
这类内容通常需要一个稳定链接，方便每天分发和回看，因此可以作为妙搭页面发布。
场景五：HTML 可视化，用来做视频下半屏画面
HTML 还可以进入视频制作流程。
比如做一条竖屏 video essay：上半屏是口播视频，下半屏是配套的 HTML 可视化。下半屏可以是数字滚动、流程图、观点卡片、对比图、飞轮图、时间线，用来解释口播里抽象或信息密度高的部分。
完整流程可以拆成 6 步：
- 写好视频逐字稿。
- 让 agent 创建飞书文档 storyboard，把“脚本原文”和“下半屏可视化内容”放进表格。
- 在文档里评论修改，并补充图片、录屏或参考素材。
- 让 agent 按每一幕制作 HTML，并把截图或录屏回填到 storyboard。
- 录制上半屏口播视频。
- 让 agent 按 storyboard 节奏合成上下半屏视频。
视频里的 HTML 可视化不必每句话都换一张画面。一个画面可以撑住好几句话，每个画面只做一个主要动作，然后保持静止，观众更容易看懂。
可以先让 agent 做 storyboard：
我要基于这个逐字稿做一个 video essay。
视频尺寸是 3:4。画面上半部分是我面对镜头口播，下半部分需要一系列 HTML visualizations，帮助观众理解我正在讲的内容。
先用飞书文档做一个 storyboard。文档里插入表格：
第一列是脚本原文；
第二列是适合可视化的内容描述；
第三列是下半屏画面 Demo。
要求：
1. 不要切太碎，一个画面可以撑住多句话。
2. 所有 visualization 都要能用 HTML/CSS/JS 实现。
3. 不要引入生图模型或生视频模型。
确认 storyboard 后，再让它生成画面：
按照我的反馈，把每一幕对应的 HTML 做出来，然后截屏或录屏，放到“下半屏画面 Demo”这一列里。
不要修改文档其他部分，不要删除我的评论。
录完口播后，再进入合成：
我已经录好了上半部分口播视频，文件是【插入文件路径】。
请基于最新版飞书文档和评论，把下半部分 HTML 画面按脚本节奏和口播合成在一起，输出一个 3:4 的新视频。
在这个流程里，飞书文档承载脚本、分镜、反馈、素材和 HTML demo；最终视频则由口播画面和下半屏 HTML 可视化合成。
飞书 HTML 上传预览常见问题
哪些 HTML 建议发布到妙搭？
如果 HTML 具备下面这些特点，建议作为妙搭页面发布，而不是只作为云空间文件预览。
- 需要长期对外访问。
- 需要稳定公开链接。
- 页面依赖复杂前端逻辑或多个资源。
- 后续会持续迭代成一个正式网页或轻应用。
- 访问对象不只是内部团队成员。
云空间偏向内部轻量预览，妙搭偏向网页托管和对外分发。
只能上传 AI 生成的 HTML 吗？
不是。只要是 HTML 文件，都可以进入这个流程。AI 或 agent 的价值，是把文档、表格、脚本、截图和想法更快转成 HTML。
HTML 适合替代 PPT 吗？
适合替代一部分演示场景。常规汇报继续用 PPT 没问题；如果内容需要网页式叙事、动效、交互或更强视觉表现，HTML slides 更值得尝试。
HTML 看板会不会比表格复杂？
如果只是记录数据，表格更简单；如果要拖动参数、模拟结果、展示变化，HTML 看板更直观。选择表格还是 HTML 看板，取决于团队是在记录数据，还是在讨论假设。
用飞书管理 HTML 文件，让交互内容进入团队协作
飞书支持 HTML 上传和预览后，HTML 可以补足传统文档不容易表达的场景，成为演示、交互、原型和可视化内容的新交付选项。
演示需要更强叙事，就做 HTML slides；数据需要动态讨论，就做交互看板；产品路径需要先跑一遍，就做 HTML 原型；内容需要沉淀和分发，就做 HTML 内容页；视频需要解释画面，就用 HTML 做可视化素材。
尝试AI时代更高效的在线协作体验吧！从安装飞书CLI开始。
