// SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
| name | frame-flowchart-sticky |
| zh_name | 便利贴流程图帧 |
| en_name | Sticky Flowchart Frame |
| emoji | 📝 |
| description | SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel. |
| zh_description | SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm |
| en_description | SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel. |
| category | video |
| scenario | operations |
| aspect_hint | 1920×1080 (16:9) |
| featured | 45 |
| tags | ["flowchart","diagram","sticky","whiteboard","frame"] |
| example_id | sample-frame-flowchart-sticky |
| example_name | 便利贴流程图 · 用户 onboarding |
| example_format | markdown |
| example_tagline | SVG 曲线 + 4 色便利贴 |
| example_desc | 6 节点 onboarding 流程, 手写体 + 白板纸底 |
| example_source_url | https://hyperframes.heygen.com/catalog |
| example_source_label | hyperframes · flowchart |
| od | {"mode":"video","surface":"video","scenario":"operations","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"Use the Sticky Flowchart Frame template to turn my content into a whiteboard-brainstorm frame with SVG curve connectors, sticky-note nodes, and cursor interaction. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.","example_prompt_i18n":{"zh-CN":"用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"}} |
【模板: 便利贴流程图帧 (Sticky Flowchart)】 【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。
【画布】1920×1080。背景: 米黄白板纸 #f4ede1 或冷灰白板 #f0f2f4; 加非常浅的 hex grid rgba(0,0,0,0.04) 让它有白板感。
【节点 (Sticky Notes)】
#fcd34d / 桃 #fca5a5 / 薄荷 #a7f3d0 / 天 #a5b4fc。transform: rotate(±2deg) 不一致, 投影 drop-shadow(0 6px 14px rgba(0,0,0,0.12)), 顶部胶带 linear-gradient(...) 装饰。Kalam / Caveat / Patrick Hand 手写感字体 (中文用 霞鹜文楷 或 LXGW WenKai Screen)。【连接线 (SVG)】
<path> Bezier 曲线连接节点, stroke #2a2a2a, width 2.5, stroke-linecap: round, stroke-dasharray: 0 (实线) 或 8 6 (虚线 = 条件分支)。marker-end, 黑色三角小箭头。【可选交互】
<svg> arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。【设计细节】