frame-flowchart-sticky
nexu-io/open-design
SVG curve connectors and sticky-note nodes for whiteboard-style flowchart frames.
What is frame-flowchart-sticky?
A template for creating whiteboard-brainstorm style flowcharts with SVG curve connectors, colorful sticky-note nodes, and optional cursor interaction. Use it for onboarding flows, process diagrams, and system architecture explanations in 1920×1080 video frames.
- Renders 5–12 sticky-note nodes with handwriting-style fonts (Kalam, Caveat, Patrick Hand) in four rotating colors (yellow, peach, mint, sky)
- Connects nodes with smooth Bezier curve paths, supporting solid lines and dashed lines for conditional branches
- Applies whiteboard aesthetic with cream or cool-gray background, subtle hex grid, and drop shadows on notes
- Includes optional hover interactions: node elevation, scale-up effect, and floating cursor decoration with name tag
- Supports emoji or inline SVG icons within nodes, with title and description text per node
How to install frame-flowchart-sticky
npx skills add https://github.com/nexu-io/open-design --skill frame-flowchart-sticky- 1920×1080 canvas (16:9 aspect ratio)
- Real content and data for node labels (no lorem ipsum)
- Handwriting-style font support (Kalam, Caveat, Patrick Hand, or LXGW WenKai Screen for Chinese)
How to use frame-flowchart-sticky
- 1.Install the skill via the provided GitHub URL
- 2.Open the template HTML file in a browser or video editor
- 3.Replace node content with your actual flow steps, titles, and descriptions
- 4.Adjust node positions and connection paths to match your workflow logic
- 5.Customize sticky-note colors by modifying the color array if needed
- 6.Enable hover interactions and cursor decoration for interactive presentations
- 7.Export or record the frame as video
Use cases
- Create animated onboarding flow diagrams for product walkthroughs or user journey videos
- Visualize system architecture or migration workflows in operational presentations
- Design brainstorm or process-mapping frames for team collaboration videos
- Illustrate conditional branching logic or decision trees in training or explainer content
- Video producers and content creators building explainer or onboarding videos
- Operations and product teams documenting workflows and processes
- Designers and architects presenting system flows or migrations
- Educators and trainers creating visual process guides
frame-flowchart-sticky FAQ
The template is designed for 1920×1080 video frames, but the HTML can be adapted for static images or interactive web pages.
The template supports 5–12 nodes. More nodes may require layout adjustments to keep connection lines clear and non-overlapping.
Yes. The template uses four preset colors (yellow, peach, mint, sky), but you can modify the color values in the code to match your brand.
Yes. You can create conditional branches (one node connecting to two) or merges (two nodes connecting to one) using dashed lines for conditions.
Handwriting fonts like Kalam, Caveat, and Patrick Hand for English; LXGW WenKai Screen or 霞鹜文楷 for Chinese. Sans-serif and serif fonts are not recommended.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
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)】
- 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄
#fcd34d/ 桃#fca5a5/ 薄荷#a7f3d0/ 天#a5b4fc。 - 便利贴有轻微旋转
transform: rotate(±2deg)不一致, 投影drop-shadow(0 6px 14px rgba(0,0,0,0.12)), 顶部胶带linear-gradient(...)装饰。 - 节点内容: 1 个 emoji 或单线 SVG icon + 大字标题 (16-20px) + 一行描述 (12px)。
- 节点字体:
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, 黑色三角小箭头。 - 复杂节点可有循环或分支: 同一节点连出 2 条 (分叉) 或 2 条进入一节点 (合并)。
【可选交互】
- 顶部 caption (sans, 12px uppercase): "FLOW · MIGRATION · 2026"。
- 鼠标 hover 节点: 抬起阴影 + scale 1.05, 用 CSS transition。
- 一个"光标"装饰 (
<svg>arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。
【设计细节】
- 至少 5 个节点, 最多 12 个。
- 节点排布不要全部居中对齐, 要有一点白板风的"随手贴"感, 但保证连接线清晰不交叉。
- 严禁: 全屏深色背景、霓虹色、企业 dashboard 风格。
- 字体不能用 Inter / 衬线, 必须手写感。
- 单文件 HTML, 不要外部图标库 (用 inline SVG)。
- 必须用用户的真实流程内容; 节点文字直接来自用户输入。
Related skills
More from nexu-io/open-design and the wider catalog.
frame-glitch-title
Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk aesthetics.
frame-light-leak-cinema
Film light leaks, grain, and letterbox framing for cinematic video openings and chapter cards.
frame-liquid-bg-hero
WebGL-style fluid displacement background with quote overlay for video intros and landing heroes.
frame-logo-outro
Segmented logo assembly with glow bloom and tagline reveal for video outros.
frame-macos-notification
Realistic macOS Big Sur notification banner for video overlays and product teasers.
frontend-design
Build production-grade frontend interfaces with strong visual direction, polished typography, and working HTML/CSS/JS code.