Frame Flowchart Sticky
Turn real onboarding or ops flow content into a 16:9 sticky-note flowchart video frame with SVG curves and whiteboard brainstorm styling.
Overview
frame-flowchart-sticky is an agent skill most often used in Build (also Validate, Grow) that renders content as a sticky-note flowchart video frame with SVG curves and whiteboard styling.
Install
npx skills add https://github.com/nexu-io/open-design --skill frame-flowchart-stickyWhat is this skill?
- Sticky Flowchart Frame with SVG curve connectors and sticky-note nodes plus cursor interaction
- Default 1920×1080 (16:9) aspect with whiteboard-brainstorm visual signature
- Example covers a six-node user onboarding flow with four sticky colors and handwritten tone
- OpenDesign metadata hooks HTML preview with debounced reload for iterative frame editing
- Explicit prompt to use real content and data—no lorem ipsum or placeholder images
- 1920×1080 (16:9) aspect hint
- Example onboarding flow with six nodes and four sticky colors
Adoption & trust: 668 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a real process or onboarding story but only bland bullets or placeholders, not a recognizable whiteboard flowchart frame for video or demos.
Who is it for?
Indie builders documenting onboarding, SOPs, or product flows who want a signature sticky-whiteboard video frame fast.
Skip if: Teams needing live collaborative whiteboards, data-driven auto-layout from APIs, or non-video static app UI mockups.
When should I use this skill?
You want the Sticky Flowchart Frame template applied to real content with SVG curves, sticky nodes, and whiteboard-brainstorm interaction.
What do I get? / Deliverables
You get a Hyperframes-style sticky flowchart composition with real nodes, connectors, and branding-consistent stickies ready for preview or export.
- Sticky flowchart video frame with labeled nodes and curve connectors
- HTML preview surface aligned to the template visual signature
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build/docs because the skill produces a structured visual artifact (flowchart frame) from your narrative content. It fits docs and explainers: diagrammatic deliverables for teammates or users, not backend code or distribution automation.
Where it fits
Sketch a six-step onboarding story as stickies before committing to in-app copy.
Publish an internal ops runbook as a curated sticky flowchart frame for the team wiki video.
Repurpose lifecycle email sequences into a visual support path for social or help-center video.
Drop a branded process graphic into a launch teaser without rebuilding diagram chrome.
How it compares
A branded video frame template—not a general diagram MCP server or Figma plugin workflow.
Common Questions / FAQ
Who is frame-flowchart-sticky for?
Solo builders and small teams producing explainer or ops videos who want sticky-note flowcharts without hand-drawing every connector.
When should I use frame-flowchart-sticky?
In Build when documenting flows; in Validate when prototyping narrative prototypes; in Grow when turning lifecycle or support paths into shareable visual content.
Is frame-flowchart-sticky safe to install?
Treat it like any third-party design skill: check the Security Audits panel on this Prism page and review upstream html-anything assets before production use.
SKILL.md
READMESKILL.md - Frame Flowchart Sticky
【模板: 便利贴流程图帧 (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)。 - 必须用用户的真实流程内容; 节点文字直接来自用户输入。