HTML替代Markdown?20个可视化案例,飞书CLI和飞书画板给出新解法! - 飞书官网

HTML替代Markdown?20个可视化案例,飞书CLI和飞书画板给出新解法!

以下内容由 AI 匹配目标关键词,结合飞书知识库智能生成,若对内容有疑问可联系我们

📑第一弹:基本图表展示​
✨第二弹:跨领域SVG视觉作品​
🚀第三弹:挑战极限的复杂SVG作品​
🌌第四弹:完全意想不到的画板内容​
结语​
近期,「HTML 会不会替代 Markdown」突然成了 AI 圈的一个小爆点。
导火索之一,是 Anthropic 在 Claude Blog 上发布了团队成员 Thariq Shihipar 的文章:他认为 Markdown 曾经是 Agent 和人沟通的默认格式,但当 Agent 开始生成上百行方案、报告、PRD、代码解读时,纯文本就有点看不动、传不动、改不动了;HTML 则可以把表格、CSS、SVG、图片、链接甚至交互控件都装进去,更像一个真正可阅读、可分享、可操作的界面。
当然,反方声音也很明确:HTML 通常更费 token,生成更慢,diff 和 review 也不如 Markdown 清爽。
这其实不是一场简单的“格式之争”,而是在提醒我们:AI 生成内容的阶段目标,正在从“能不能写出来”,变成“人愿不愿意看、能不能快速理解、能不能继续操作”。
飞书目前虽然不能直接预览 HTML,但提供另一种很有意思的解法:通过 Agent + 飞书CLI ,把复杂提示词直接转化为画板里的结构化图像、流程图、信息架构图、视觉看板和创意海报。
换句话说,我们不一定要等一个 HTML 页面被渲染出来,不用费大量的 token 去写 HTML 代码,也可以把“HTML 式的复杂表达”搬到飞书云文档里!
下文将展示 20 种由简到繁的飞书画板案例,并附上对应提示词,看看 Agent 如何把一段想法变成可视化成果;你也可以直接复制这些提示词,亲手试试飞书画板还能被玩出多少种新花样。
复制下方提示词,即可让 Agent 从 0 到 1 生成一张同主题、同风格方向的飞书画板;如果希望更接近本文示例效果,可继续让 Agent 根据效果图片,迭代 1-2 轮。
复杂画板一张约消耗1万+token和10次以内的飞书API调用。
📑 第一弹:基本图表展示
增长飞轮 · Growth Flywheel
主题:SaaS 业务增长的自驱动闭环模型。
展示飞轮的四个相互推动的阶段,每个阶段的提升都会加速下一阶段,形成正循环。
250px|700px|reset
💡
设计要点:利用 <circle> 嵌套形成圆环结构,用带角度的 <path> 切割分段,每个阶段卡片通过极坐标 (cx + r·cosθ, cy + r·sinθ) 均匀分布在外围。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度较高:至少 40 个可编辑节点。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:SaaS 增长飞轮。
请生成一张横向信息图,标题为“SaaS 增长飞轮 / Growth Flywheel”。中心是一个大圆形飞轮,里面写“增长飞轮”,外圈由 4 个彩色扇区组成,按顺时针方向分别是:① 用户增长、② 数据沉淀、③ 产品迭代、④ 体验提升。每个扇区都要有箭头方向,表达正循环。
布局要求:
- 画布背景用浅灰白,中心飞轮在画面中部,占画面约 45% 宽度。
- 四个阶段在飞轮外围各放一个卡片,卡片带圆角、浅色填充和同色边框。
- 每个卡片包含标题、2 行关键词和一个小图标感符号。
- 左上角放“关键指标”小面板,列出 NPS、LTV、留存、自然增长。
- 右上角放“飞轮启动期”小面板,写“初始动能源自首批种子用户”。
文案建议:
- 用户增长:免费试用 / 推荐裂变 / 内容营销 / 品牌信任
- 数据沉淀:行为日志 / 业务数据 / 反馈样本 / 场景理解
- 产品迭代:AI 模型优化 / 新功能 / 个性化 / 留存提升
- 体验提升:响应更快 / 结果更准 / 智能化推荐 / 工作流
视觉要求:使用蓝、紫、绿、橙四个主色;外圈扇区可以用 path 的圆弧实现,卡片用 rect,箭头用 path 或 polygon。整体要像官网博客里的高质量商业增长模型图,而不是简陋流程图。
鱼骨分析 · Fishbone Diagram
主题:线上系统延迟过高的根因分析(4M1E 法)。
从「人、机、料、法、环」五个维度展开,每个维度下列出可能的具体原因。
250px|700px|reset
🔍
设计要点:主骨水平居中,分支按奇偶交替分布在上下两侧;每个分类的小骨用三角函数计算等距挂载点,色系区分不同分类。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度较高:至少 40 个可编辑节点。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:线上系统延迟过高的鱼骨分析。
请生成一张专业事故复盘风格的鱼骨图,标题为“P95 延迟飙升至 800ms · Fishbone Root Cause”。主骨从左到右水平延伸,右侧箭头指向结果卡片“P95 延迟 800ms”。鱼骨分为 5 个维度:人 Man、机 Machine、料 Material、法 Method、环 Environment。
布局要求:
- 主骨居中,5 个大分支上下交替接入主骨。
- 每个维度用不同颜色,并有圆形或圆角标签。
- 每个维度至少列 3 个小原因,原因用短横线连接到分支。
- 底部添加一个“分析方法”说明条:4M1E 法 · 由果索因 · 自上而下分解 · 闭环验证。
原因示例:
- 人:缺乏性能意识、排障经验不足、跨团队响应慢
- 机:CPU 抢占、连接池过小、磁盘 IO 瓶颈
- 料:脏数据重试、请求峰值突增、大对象传输
- 法:缓存策略不当、同步阻塞调用、Code Review 缺位
- 环:机房网络抖动、DNS 解析延迟、第三方接口慢
视觉要求:主线和分支使用 connector/line/path,标签用圆角卡片,整体要清爽、对称、信息密集。
价值金字塔 · Value Pyramid
主题:AI 应用的价值层级模型。
从底层基础设施到顶层不可替代的差异化价值,揭示 AI 产品的竞争壁垒。
250px|700px|reset
💡
设计要点:每层梯形宽度按斜率系数严格递减,左侧梯形右侧附描述;色彩从冷色(底层)渐变到暖色(顶层),暗示价值密度递增。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度较高:至少 40 个可编辑节点。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:AI 应用价值金字塔。
请生成一张“AI 应用价值金字塔 / AI Application Value Pyramid”。画面左侧是五层金字塔,越往上越窄;右侧是每层的解释卡片。标题下方加一句副标题:“越往上越稀缺,越接近真正的产品护城河”。
五层从下到上:
1. L1 基础设施:GPU 集群、推理优化、向量数据库、监控、鉴权
2. L2 模型能力:通用大模型、推理、多模态、代码能力
3. L3 工程能力:RAG、Function Calling、Agent、长程记忆、评估
4. L4 产品体验:交互范式、任务流程、多人协作、实时反馈
5. L5 差异化壁垒:专有数据、行业工作流、品牌信任、分发渠道
布局要求:
- 金字塔每层用梯形 polygon,底部宽、顶部窄。
- 每层左侧显示 L1-L5 和层名,右侧卡片写一句价值解释。
- 用从蓝到紫到橙红的渐变式配色,表达价值密度提升。
- 旁边加竖向箭头“价值密度 ↑”。
视觉要求:商务咨询风,排版精确,至少包含 30 个 text 元素和 15 个形状元素。
流量归因桑基图 · Traffic Sankey
主题:电商流量从「来源 → 落地页 → 用户行为」的三层流动。
通过流条宽度直观展示各渠道贡献、落地页分发、最终行为转化比例,避免漏斗图只能表达单链条递减的局限。
250px|700px|reset
📊
设计要点:三列节点矩形高度按 UV 量等比例缩放,节点间用cubic-bezier 平滑曲线连接,曲线宽度精确等于流量值,并按对端 y 排序减少交叉;同色系流条让来源贡献一目了然。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度较高:至少 40 个可编辑节点。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:电商流量归因桑基图。
请生成一张“Traffic Attribution Sankey · 85,000 UV”的三层桑基图,展示“流量来源 → 落地页 → 用户行为”。图中必须用不同宽度的贝塞尔曲线表示流量大小,不要画成普通流程图。
三层数据:
- 来源:搜索引擎 35,000 UV,信息流广告 20,000 UV,社交媒体 15,000 UV,推荐裂变 9,000 UV,直接访问 6,000 UV
- 落地页:首页 30,000 UV,商品页 28,000 UV,活动页 17,000 UV,内容页 10,000 UV
- 行为:浏览 50,000 UV,加购 18,000 UV,购买 8,000 UV,流失 9,000 UV
布局要求:
- 三列节点从左到右排列,每个节点高度与 UV 大致成比例。
- 曲线用 path cubic-bezier,stroke-width 与流量成比例。
- 同一来源的流条保持同色系,透明度 0.35-0.55。
- 在商品页附近放“⭐ 最强落地页”,在流失附近放“⚠ 优化重点”,在购买附近放“💰 价值转化”。
- 底部放洞察条:商品页 28,000 UV,39% 转化为加购+购买。
视觉要求:至少 4 种来源色,流线减少交叉,节点标签包含百分比。
产品路线图 · Product Roadmap
主题:Claude 模型家族迭代里程碑(2024 - 2026)。
横向时间轴串联关键发布节点,体现版本演进节奏。
250px|700px|reset
💡
设计要点:水平时间轴 + 上下交替的事件卡片,避免视觉拥挤;每个节点圆点 + 引导线连接到对应卡片,时间标签贴轴显示。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:Claude 模型路线图 2024-2026。
请生成一张横向产品路线图,标题为“Claude 模型路线图 · 2024 → 2026”。时间轴从左到右,节点卡片上下交替,体现模型能力持续演进。
里程碑:
- 2024.03:Sonnet 3.5,工具使用增强,200K 上下文
- 2024.10:Sonnet 3.6 + 3.7,多模态推理,端侧轻量级
- 2025.06:Claude Skills,智能体平台,任务时长从分钟到小时
- 2025.11:Opus 4.5,长上下文与复杂推理
- 2026.01:Opus 4.7 ★ Current,1M 上下文,推理 + Agent 双 SOTA
布局要求:
- 主时间轴是一条粗线,节点用圆点或六边形。
- 每个里程碑卡片包含时间、型号、3 个 bullet。
- 右侧或底部加“关键趋势”面板:上下文窗口 200K → 1M、Agent 任务时长分钟 → 小时、工具使用 → Skills 生态。
- 当前版本卡片要有高亮光晕或星标。
视觉要求:科技路线图风格,使用蓝、紫、绿、橙、红区分阶段。
SaaS 仪表盘 UI · Analytics Dashboard
主题:现代 SaaS 产品的核心数据仪表盘界面。
包含 KPI 卡片、流量趋势曲线、渠道环形图、排行榜表格、深色侧边导航等完整 Web UI 元素。
250px|700px|reset
🎯
设计要点:用矩形+圆角模拟卡片质感,path 绘制平滑数据曲线和环形图弧段,深色侧边栏 + 浅色主区的经典 Dashboard 配色,色块和图标点缀提升视觉层次。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:现代 SaaS Analytics Dashboard。
请生成一个真实 Web 产品感的 SaaS 数据仪表盘 UI,而不是抽象示意图。画布为 1440×900。左侧是深色侧边栏,右侧是浅色主内容区。
必须包含:
- 左侧导航:Analytics Suite、Overview、Traffic、Revenue、Users、Settings,并显示 Admin · 在线
- 顶部栏:标题“增长分析看板”,右侧用户“谢欣 ▾”
- 4 张 KPI 卡片:总营收 GMV ¥891,200、活跃 UV 8,432、转化率 11.8%、待复核 5 个;每张卡片显示 vs 上周
- 主图:按小时聚合的趋势折线图,横轴包含 00:00、06:00、12:00、18:00
- 右侧图:渠道贡献占比的环形图,标注搜索、广告、社媒、推荐
- 下方:渠道排行榜表格,至少 5 行
视觉要求:
- 卡片有圆角和轻微阴影感,深色侧边栏与浅色主区对比明显。
- 折线图用 path,环形图用 stroke-dasharray 或 path 弧段。
- 至少 150 个可编辑元素,细节要像真实后台 UI。
✨ 第二弹:跨领域 SVG 视觉作品
🌈
不只是图表!SVG 是真正的通用矢量画布,能驾驭 UI 设计、平面设计、建筑制图、交通信息图、艺术插画等完全不同的视觉领域。
房屋平面图 · Floor Plan
主题:85㎡ 一居室公寓平面图。
等比例展现房间布局、家具摆放、门窗位置,含尺寸标注和图例。
250px|700px|reset
🏠
设计要点:用嵌套 <rect> 表达墙体厚度,<path> 弧线表达门的开启范围,统一色板区分功能区(客厅 / 卧室 / 厨房 / 卫浴),右侧附图例和面积统计。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:85㎡ 一居室公寓平面图。
请生成一张建筑平面图风格的 SVG,标题为“一居室公寓平面图 · 85㎡”。画布建议 1400×900。左侧是户型图,右侧是图例和面积统计。
空间布局:
- 客厅 Living:约 21.5㎡,包含三人沙发、茶几、电视柜
- 主卧 Bedroom:1.8m 大床、衣柜、书桌、工作区
- 厨房 Kitchen:冰箱、灶台、水槽、操作台
- 卫浴 Bath:浴缸、淋浴、马桶、洗手台
- 书房 Study:书桌椅
- 阳台 Balcony:绿植和晾晒区
制图要求:
- 用粗黑线或深灰线表示承重墙,用浅色填充区分房间。
- 门必须用直线+弧线表示开启方向,窗户用蓝色短线表示。
- 标注几个尺寸,例如 7.4m、3.2m、2.0×1.8m。
- 右侧图例包含:承重墙、窗户、门、家具、绿植。
视觉要求:看起来像真实室内设计平面图,节点数至少 200,家具细节要丰富。
宣传海报 · Event Poster
主题:「AI Builder Summit 2026」活动海报。
大胆的视觉构图,主标题 + 副标题 + 嘉宾矩阵 + 时间地点 + 二维码区域。
250px|700px|reset
🎨
设计要点:采用「斜切几何 + 强对比色块 + 大字标题」的现代海报风格,使用渐变线条和图形堆叠营造张力,留出底部 QR 区域和赞助方位置。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:AI Builder Summit 2026 活动海报。
请设计一张竖版活动海报 SVG,画布约 960×1200。风格是科技大会海报:深色背景、斜切几何、高对比霓虹色块、大标题。
必须包含:
- 顶部小字:主办方:FEISHU
- 主标题:AI BUILDER SUMMIT 2026
- 副标题:Agents · MCP 生态 · 商业化
- 日期:2026.06.18
- 地点:国际会议中心 · 1F 主会场
- SPEAKERS 嘉宾区:Dario A.、Yann L.、OpenAI CEO、Feishu AI Lead 等 4 个头像占位卡片
- 数据亮点:2,000+ 参会者、50+ 演讲、44+ 工作坊
- 底部二维码占位区、网站、版权信息
视觉要求:
- 用大块 polygon 做斜切背景,用圆角矩形做嘉宾卡片。
- 二维码用小方块矩阵模拟,不要外链图片。
- 色彩以深蓝、紫、亮黄、霓虹蓝为主。
- 海报要有强视觉张力,适合官网博客展示。
移动 App 界面 · Mobile App UI
主题:健康追踪类 App 主界面(iPhone Pro 尺寸)。
真实的移动端 UI mockup,含状态栏、卡片、底部导航、数据图表。
250px|700px|reset
📱
设计要点:遵循 iOS 设计规范,圆角卡片 + 阴影模拟 + 圆形进度环 + 数据条形图叠加,色调采用健康类 App 常见的「清新蓝绿 + 深色文字」。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:健康追踪类移动 App UI。
请生成一张移动 App UI 展示图,画布约 1400×900,横向并列展示 3 个 iPhone 屏幕:主屏幕、详情页、记录页。主题是健康追踪。
主屏幕包含:
- 状态栏、问候语、今日步数 10,000 步目标、当前 72%
- 圆形进度环、卡路里、距离 km、运动时间
- 心率卡片和睡眠卡片
详情页包含:
- 心率波动 · 过去 24 小时
- 折线图,横轴 06:00、12:00、18:00
- 当前心率 72 bpm、峰值 14:23
记录页包含:
- 运动类型:跑步、游泳、冥想
- 周统计柱状图
- 今日建议卡片
视觉要求:
- 每个手机框要有圆角、黑色机身、刘海/灵动岛。
- UI 使用清新蓝绿主色,搭配白色卡片和柔和阴影。
- 至少 120 个可编辑元素,像真实 iOS 产品原型。
地铁线路图 · Subway Map
主题:虚构城市「云栖城」轨道交通线路图。
多条线路交汇、换乘站标注、终点站方向、图例和比例尺。、
250px|700px|reset
🚇
设计要点:多色 <polyline> 表达线路(仅水平 / 垂直 / 45° 折角,模仿伦敦地铁图风格),<circle> 表达站点,换乘站用双圈或长椭圆标识。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:虚构城市“云栖城”地铁线路图。
请生成一张现代地铁线路图,画布 1600×900。使用抽象线路图风格,不按真实地理比例,线路只能使用水平、垂直和 45° 折线。
线路设计:
- 1 号线 红色:北港 → 美术馆 → 市政厅 → 金融街 → 东湖 → 机场
- 2 号线 蓝色:大学城 → 市政厅 → 中央公园 → 南站 → 科技园
- 3 号线 绿色:西谷 → 体育馆 → 中央公园 → 剧院 → 会展 → 云湾
- 4 号线 橙色:旧城 → 博物馆 → 市政厅 → 新城 → 海岸
- 环线 紫色:围绕核心城区形成闭环,连接美术馆、金融街、剧院、博物馆
布局要求:
- 普通站用白心圆,换乘站用双圈或长椭圆,并标注站名。
- 右下角放线路图例,左上角放标题“云栖城轨道交通图”。
- 加终点方向箭头和比例尺装饰。
视觉要求:参考伦敦/东京地铁图的信息设计风格,清晰、规整、颜色鲜明。
插画 · illustration
主题:「雨后山林清晨」插画风景。
纯 SVG 矢量插画 — 山脉、树木、太阳、雾气、飞鸟,展示 Agent 对色彩层次和构图美学的把控。
250px|700px|reset
🌄
设计要点:多层 <polygon> 营造远近山脉的层次感,<circle> + 半透明叠加表现太阳光晕,简化的几何树木和飞鸟点缀画面,体现极简插画风格。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:雨后山林清晨矢量插画。
请生成一张自然风景 SVG 插画,标题小字为“Morning Mist · After the Rain”,画布 1400×900。画面是雨后山林清晨:远山、中景山体、近景树木、太阳光晕、薄雾、飞鸟。
构图要求:
- 天空是浅蓝到米白的柔和背景。
- 至少 4 层山脉:远山低透明度、近山更深。
- 太阳在右上,带两层半透明光晕。
- 山腰有横向雾带,用半透明 path 或 ellipse 表现。
- 近景有大量几何树木,至少 40 棵,大小错落。
- 画面下方可加入一条溪流或草地。
视觉要求:
- 低饱和自然色:雾蓝、松绿、暖黄、土褐。
- 使用 polygon、path、circle、ellipse,不要用图片。
- 插画要有层次和空气感,适合官网文章首图。
🚀 第三弹:挑战极限的复杂 SVG 作品
🔥
下面 3 张作品挑战 SVG 表现力的极限:超高信息密度、复杂机械结构、艺术级氛围渲染。
化学元素周期表 · Periodic Table
主题:完整 118 个化学元素周期表。
按 IUPAC 标准布局,含 7 个周期 + 18 个族 + 镧系/锕系单独列出。每个元素方格内含原子序数 / 元素符号 / 中文名 / 原子质量 四要素,按金属/非金属/稀有气体/类金属分色。
250px|700px|reset
💡
设计要点:118 个元素 × 4 个信息项 = 472 个 text 节点 + 118 个 rect 容器。脚本化生成精准位置,按元素类别(碱金属/卤素/惰性气体/过渡金属等)配色,标题区附图例和分类说明。这种信息密度对 SVG 解析器是一次极限压测。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:完整化学元素周期表。
请生成一张信息密度很高的周期表 SVG,画布建议 1640×1000。标题为“化学元素周期表 · Periodic Table of Elements”。必须包含 118 个元素,不要省略。
布局要求:
- 按 IUPAC 标准:18 族、7 周期,镧系和锕系单独放在主表下方。
- 每个元素方格包含 4 个信息:原子序数、元素符号、中文名、原子质量。
- 元素类别用颜色区分:碱金属、碱土金属、过渡金属、后过渡金属、类金属、非金属、卤素、稀有气体、镧系、锕系。
- 左上角或右上角放“元素方块说明 · How to Read”,解释每个小格的四项信息。
- 下方放颜色图例。
实现要求:
- 用脚本化/循环思路生成 118 个元素格,不要手画几个示意格。
- 每个元素格是 rect + 多个 text,整体至少 500 个可编辑节点。
- 字号要分层:符号最大,中文名和质量较小但可读。
机械时钟内部 · Mechanical Watch Movement
主题:瑞士机芯解剖图(俯视视角)。
展示发条盒、传动齿轮组、擒纵叉、摆轮、游丝等核心组件,搭配标注线和零件说明。
250px|700px|reset
💡
设计要点:多个嵌套圆 + path 绘制齿轮齿牙(每个齿轮可达 24 个齿),同心圆模拟轴承层次,引出线连接零件标注。挑战在于精确表达机械传动结构,让外行也能"看懂"机芯。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:机械时钟机芯内部解剖图。
请生成一张瑞士机械机芯俯视图 SVG,标题为“Mechanical Watch Movement · 17 Jewels”。画布 1400×900,风格是黄铜机械工程图。
必须包含:
- 外层圆形机芯底板,黄铜/金色质感
- Mainspring Barrel 发条盒
- Center Wheel 中央轮、Second Wheel 二轮、Third Wheel 三轮、Fourth Wheel 秒针轮
- Escapement 擒纵轮、Pallet Fork 擒纵叉
- Balance Wheel + Hairspring 摆轮与游丝
- 17 Jewels 红宝石轴承,用红色小圆点表示
- 虚线节圆,展示齿轮啮合关系
- 多条引出线和零件标注
实现要求:
- 齿轮要有真实齿牙:用 polygon/path 循环生成 16-32 个齿,不要只画圆。
- 至少 5 个齿轮互相咬合,大小不同。
- 右下角放参数条:CALIBRE 4.7 · 25.6mm · 39h power reserve · Hand-wound。
- 整体像高级机械解剖图,细节丰富。
赛博朋克城市夜景 · Cyberpunk Cityscape
主题:2077 年的霓虹都市天际线。
多层建筑剪影 + 高密度霓虹灯牌 + 飞行器 + 全息广告投影,强氛围感插画。
250px|700px|reset
🌃
设计要点:深色基底 + 大量小矩形模拟建筑窗户的霓虹灯光(每栋楼上百个发光点),多层视差建筑剪影营造深度感,polygon 绘制全息投影的光锥效果。色彩饱和度拉满,紫粉蓝青对撞。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:赛博朋克城市夜景。
请生成一张高密度赛博朋克城市夜景 SVG,画布 1600×900。标题或招牌中出现“NEO-上海 2077”“CYBER 2077”。整体氛围是凌晨 4 点、雨后霓虹、未来都市。
画面元素:
- 深色夜空背景,多层城市楼群剪影,前中后三层有视差
- 每栋楼有大量霓虹窗户,小矩形随机分布,至少 500 个发光点
- 招牌:NEON BAR、未来 · 已抵达、极乐迪斯科
- 飞行器 2-3 个,带光轨
- 全息广告投影,用半透明 polygon 光锥表现
- HUD 状态面板:TEMP 18°C、RAIN、AIR QUALITY 87 AQI、VISIBILITY 1.2 KM、SYSTEM STATUS
视觉要求:
- 主色:黑紫背景、青色 #0ee6f5、粉色 #d946ef、亮黄 #ffd93d、热粉 #ff1493。
- 使用大量 rect、polygon、path 做高密度细节;节点数目标 800+。
- 画面要饱和、炫、复杂,不能只是几栋简单楼。
🌌 第四弹:完全意想不到的画板内容
🤯
大多数人以为画板就是图表工具。下面 6 张作品挑战这种认知——艺术、科学、游戏、运动、奇幻……SVG 能画的远不止图表。
五线谱乐谱 · Music Notation
主题:贝多芬第五交响曲开篇(c 小调 · 命运动机)。
完整的五线谱呈现:高低音谱号、调号、拍号、四小节"嗒嗒嗒哒"主题动机,外加钢琴键位对照。
250px|700px|reset
🎼
设计要点:五条平行线构成的谱表,ellipse 画音符头,line 画符干和符尾;连音线用 path 弧线表达;钢琴键位通过黑白矩形组合精确还原 88 键布局,高亮当前演奏的音。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:五线谱乐谱可视化。
请生成一张音乐教学风格 SVG,画布 1600×900,主题是贝多芬第五交响曲第一乐章的“命运动机”。标题为“c 小调第五交响曲 · 第一乐章”。
必须包含:
- 高音谱表和低音谱表,各 5 条平行线
- 高音谱号、低音谱号、调号 ♭、拍号 2/4 或 4/4
- 四小节主题动机:三短一长,用音符头 ellipse、符干 line、符尾 path 表示
- 标注“三短一长 · 节奏型”“G→E♭→F→D · 全曲反复发展”
- 下方钢琴键位对照,白键+黑键,至少 2 个高亮音
- 右侧说明卡片:全曲基础、音程、下行模进 sequence、整部交响曲的发展核心
视觉要求:
- 乐谱线条要精确平行,音符排列有节奏感。
- 背景用温和米白,主体黑色,重点音用红/蓝高亮。
- 所有音符、谱线、键盘必须是可编辑 SVG 元素。
中国山水画 · Chinese Landscape
主题:《溪山行旅图》风格水墨意境。
远山近水构图:远山淡墨、近石浓墨、松树盘曲、亭台楼阁、孤舟蓑笠,配题诗与红印。
250px|700px|reset
🎨
设计要点:polygon 重叠叠加表现山的层次(远山透明度低,近山浓重),path 不规则曲线表达松枝皴法;右侧留白配竖排题诗 + 红色方形印章;整体构图遵循"三远法":高远、深远、平远。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:中国山水画风格 SVG。
请生成一张《溪山行旅图》意境的水墨山水画 SVG,画布 1400×900。不是照片,不是位图,用矢量元素模拟水墨。
构图要求:
- 远山淡墨,透明度低;中山层叠;近石浓墨,边缘不规则。
- 山间有瀑布或溪流,前景有孤舟蓑笠、亭台、松树。
- 右侧留白,竖排题诗,文字可拆成单字竖排,例如“万山飞瀑 / 孤舟独行 / 寒江径灭”。
- 右下或右侧放红色方形印章,写“画”或“印”。
- 松树用不规则 path 表示枝干,用小短线/曲线模拟皴法。
视觉要求:
- 色彩以墨黑、深褐、灰绿、宣纸米白为主。
- 使用 polygon/path 叠加制造水墨层次。
- 画面要有留白,不要塞满;但关键元素要丰富,至少 100 个可编辑节点。
量子力学可视化 · Quantum Mechanics
主题:原子轨道形状 + 能级跃迁 + 波粒二象性。
包含 s/p/d 轨道形状、氢原子能级图、波函数 sin 曲线,以及双缝干涉条纹示意。
250px|700px|reset
💡
设计要点:多个 ellipse 不同角度旋转拼出 d 轨道四叶形;正弦波 path + 数据点表达波函数;能级图用横线 + 跃迁箭头 + 光子频率标注;双缝干涉用周期性条纹模拟概率分布。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:量子力学科普可视化。
请生成一张横向科学信息图,标题为“Quantum Mechanics · 量子力学可视化”。画布 1600×900,分成 4 个模块。
模块 1:原子轨道 Atomic Orbitals
- 画 s 轨道球形、p 轨道哑铃形、d 轨道四叶形。
- 使用 ellipse 旋转叠加和半透明填充。
模块 2:能级跃迁
- 画 n=1 到 n=5 的水平能级线。
- 用箭头表示跃迁,标注 E = hν,光子能量与频率成正比。
模块 3:波函数
- 画正弦曲线,标出 λ 波长、振幅、概率点。
模块 4:双缝干涉
- 左侧画挡板和两条缝,右侧画明暗条纹概率分布。
额外元素:
- 底部放核心公式卡片:E_n = −13.6 eV / n²,Δx · Δp ≥ ℏ / 2,h = 6.626×10⁻³⁴ J·s。
- 使用深蓝背景或白色科学风背景均可,但要清晰专业。
超级玛丽 · Super Mario
主题:FC 红白机 8-bit 像素风经典场景。
玛丽奥角色、问号砖块、库巴、绿水管、终点旗、云朵山脉,完整还原 1985 年初代马里奥关卡。
250px|700px|reset
🎮
设计要点:用大量小 rect 拼出像素图——每个角色由几十个 8×8 像素方块组成;色板严格使用 NES 调色板(限定色 paliette);地面用平铺砖块,天空保留经典的天蓝色。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:8-bit 复古平台游戏场景。
请生成一张 8-bit 像素风平台游戏 SVG,画布 1540×932。风格参考 1980s NES 平台游戏,但不要使用任何外链图片。所有像素都用小 rect 绘制。
画面元素:
- 顶部 HUD:MARIO、000400、COINS、WORLD 1-1、TIME 368、×03
- 天蓝背景、白云、远山
- 地面由重复砖块铺满,砖块要有像素纹理
- 至少 3 个问号砖块
- 绿色水管
- 终点旗杆和旗帜
- 一个像素主角,红帽、蓝裤、棕色鞋
- 至少一个敌人或蘑菇
实现要求:
- 使用固定像素网格,例如 8×8 或 10×10 小矩形。
- 主角由至少 60 个小矩形拼成,地面和背景由大量重复小矩形构成。
- NES 风格限定色板:天蓝、砖棕、红、蓝、绿、黑、白、黄色。
- 节点数目标 500+,不要偷懒画成大色块。
健身动作图解 · Workout Guide
主题:6 个黄金复合动作 — 力量训练必备。
深蹲、硬拉、卧推、引体向上、平板支撑、弓步,每个动作配火柴人示意 + 主要肌肉高亮 + 要点提示。
250px|700px|reset
💪
设计要点:简化人体为圆形头 + line 关节连接的火柴人;用色块高亮目标肌群(如卧推时高亮胸大肌区域);每个动作配 3-4 条要点(呼吸、姿势、常见错误);底部加组数/次数推荐表。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:健身动作图解。
请生成一张“The Big Six · 复合动作图解”的训练海报 SVG,画布 1800×1180。展示 6 个复合动作,每个动作一张卡片。
六个动作:
1. BACK SQUAT 深蹲
2. DEADLIFT 硬拉
3. BENCH PRESS 卧推
4. PULL-UP 引体向上
5. PLANK 平板支撑
6. LUNGE 弓步
每张卡片必须包含:
- 动作英文名 + 中文名
- 火柴人姿势示意:头部 circle,躯干和四肢 line,关节点 circle
- 杠铃、长凳、单杠或地面辅助元素
- 主要肌群高亮:胸大肌、股四头肌、腘绳肌、竖脊肌、背阔肌、核心等
- 3 条要点 TIPS,例如“保持腰背挺直”“膝盖对齐脚尖”“肩胛后缩下沉”
底部增加训练建议条:每周 2-3 次 · 组间休息 90-120 秒。
视觉要求:暖色运动海报风,肌群高亮用橙红色半透明块,节点数 300+。
奇幻世界地图 · Fantasy Map
主题:虚构大陆「埃尔德雷亚」(Eldreya)。
羊皮纸底色 + 手绘风山脉 + 茂密森林 + 河流湖泊 + 王国城邦 + 海怪 + 玫瑰罗盘 + 装饰边框。
250px|700px|reset
💡
设计要点:底色用大色块模拟陈旧羊皮纸;多边形 + 锯齿描绘海岸线;山脉用堆叠三角形(近大远小);森林用小树阵列;老式衬线字体写城市名;右下放装饰罗盘 + 比例尺;周围加海怪、帆船等点缀。
你是一个可以使用飞书 CLI 和飞书画板的 Agent。请新建一个飞书云文档,或在我提供的文档里生成一个新的飞书画板;如果我没有提供文档链接,就直接新建。生成方式请使用 SVG 作为源内容:先用 lark-cli 在文档中插入空白画板,再把你生成的自包含 SVG 转成飞书画板可编辑节点写入该画板。完成后导出预览图检查,若出现文字溢出、遮挡、空白过多、比例失衡或元素过少,请修改后重新写入。
通用硬性要求:
1. 不要生成截图、位图或外链图片;所有视觉元素必须来自自包含 SVG。
2. 文字使用 text 节点,形状使用 rect、circle、ellipse、line、polyline、polygon、path 等基础 SVG 元素,保证写入飞书画板后可编辑。
3. 画布建议 1400×900 或 1600×900,复杂图可更大,但最终预览要完整。
4. 先规划布局、配色和节点清单,再生成 SVG;不要只给概念说明。
5. 信息密度要高:简单图至少 40 个可编辑节点,复杂图/像素图/地图/仪表盘应明显超过 150 个节点,可用脚本循环生成重复元素。
6. 最后在回复中给出:文档链接、画板所在位置、预览是否通过、你使用的主要 SVG 构图方法。
本次画板主题:奇幻世界地图。
请生成一张高密度奇幻地图 SVG,画布 1800×1200,标题为“KINGDOM OF ELDREYA”。风格是羊皮纸古地图,带手绘海岸线、山脉、森林、河流、城邦和装饰边框。
地图元素:
- 大陆轮廓:不规则海岸线,用 path 或 polygon 绘制
- 山脉:Drakespine Mts.、Dawnpeaks,多组小三角山,近大远小
- 森林:大量小树图标,至少 80 棵
- 河流与湖泊:蓝灰色 path,从山脉流向海岸
- 城邦/港口:Sunspire、Sandwick、Saltcliff、Mireshallow,使用城堡/港口小图标和文字标注
- 海上元素:帆船、海怪、⚓ 锚标记
- 右下角或左下角:玫瑰罗盘 N/E/S/W、比例尺 0-100、图例
- 边框:双层装饰边框,角落有花纹
- 副标题:a chart of the realm of Eldreya, drawn in the 4th age
实现要求:
- 羊皮纸底色,墨褐色线条,山脉和森林大量重复但位置要自然。
- 节点数目标 800+;地图要有探索感和世界观,不要只是几块区域。
结语
20 张作品,20 种完全不同的视觉语言。
看完这 20 个案例,你会发现,飞书画板并不只是古早观念中那个“原型/流程图工具”。
从严肃的业务图表到艺术、科学、游戏、运动、奇幻世界——SVG + 飞书画板的组合证明了:只要能在脑中想象出来的视觉,几乎都能画出来。每个节点都是可编辑、可二次创作的真实元素,不是图片,不是截图,是活的矢量数据
过去,我们常常需要在 word文档、PPT、设计工具之间来回切换;现在,在 Agent + 飞书CLI 的协作方式下,用户只需要描述目标、结构和风格,Agent 就能把抽象想法转化成更直观的流程图、架构图、信息看板、概念插画甚至创意海报。
对个人来说,它能降低可视化表达的门槛;对团队来说,它能让复杂信息更快被看见、理解和共创。
这和「HTML or Markdown」的讨论,本质上指向的是同一个问题:AI 生成的内容,如何从“文本结果”走向“可视成果”。而飞书 CLI + 飞书画板,提供了一条很轻量、也很有想象力的路径。
如果你也想试试,不妨从本文中的提示词开始,把自己的产品方案、技术架构、运营计划、创意灵感交给 Agent,让它通过飞书 CLI 生成一张属于你的飞书画板。也许下一次,你要的不是一篇 Markdown 文档,也不是一段 HTML 代码,而是一张能直接放进团队协作流里的可视化画布。
预约飞书企业效能顾问 深度诊断企业痛点,定制专属 AI 办公方案

字节跳动旗下 AI 工作平台

关联文章推荐

优质内容,精华实践

飞书知识问答

飞书智能会议纪要

飞书多维表格

飞书 aily

飞书妙搭

最懂企业知识 AI 有问必答

🔍

如何有效管理每日任务?

💰

五险一金的缴纳标准是什么?

🔥

飞书知识问答是什么?

💻

如何用AI提高我的工作效率?

✍🏻

怎样高效整理工作笔记?

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题

字节跳动旗下 AI 工作平台

联系我们立即试用