{"id":"frame-flowchart-sticky","name":"frame-flowchart-sticky","summary":"SVGの曲線接続+付箋ノード+カーソルの相互作用、ホワイトボードのブレインストーミングのようなもの","body":"【模板: 便利贴流程图帧 (Sticky Flowchart)】\n【意图】把一个流程 / 系统 / 工作流画成\"白板 + 便利贴\"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。\n\n【画布】1920×1080。背景: 米黄白板纸 `#f4ede1` 或冷灰白板 `#f0f2f4`; 加非常浅的 hex grid `rgba(0,0,0,0.04)` 让它有白板感。\n\n【节点 (Sticky Notes)】\n- 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄 `#fcd34d` / 桃 `#fca5a5` / 薄荷 `#a7f3d0` / 天 `#a5b4fc`。\n- 便利贴有轻微旋转 `transform: rotate(±2deg)` 不一致, 投影 `drop-shadow(0 6px 14px rgba(0,0,0,0.12))`, 顶部胶带 `linear-gradient(...)` 装饰。\n- 节点内容: 1 个 emoji 或单线 SVG icon + 大字标题 (16-20px) + 一行描述 (12px)。\n- 节点字体: `Kalam` / `Caveat` / `Patrick Hand` 手写感字体 (中文用 `霞鹜文楷` 或 `LXGW WenKai Screen`)。\n\n【连接线 (SVG)】\n- 用 `<path>` Bezier 曲线连接节点, stroke `#2a2a2a`, width 2.5, `stroke-linecap: round`, `stroke-dasharray: 0` (实线) 或 `8 6` (虚线 = 条件分支)。\n- 箭头终端用 `marker-end`, 黑色三角小箭头。\n- 复杂节点可有循环或分支: 同一节点连出 2 条 (分叉) 或 2 条进入一节点 (合并)。\n\n【可选交互】\n- 顶部 caption (sans, 12px uppercase): \"FLOW · MIGRATION · 2026\"。\n- 鼠标 hover 节点: 抬起阴影 + scale 1.05, 用 CSS transition。\n- 一个\"光标\"装饰 (`<svg>` arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。\n\n【设计细节】\n- 至少 5 个节点, 最多 12 个。\n- 节点排布不要全部居中对齐, 要有一点白板风的\"随手贴\"感, 但保证连接线清晰不交叉。\n- 严禁: 全屏深色背景、霓虹色、企业 dashboard 风格。\n- 字体不能用 Inter / 衬线, 必须手写感。\n- 单文件 HTML, 不要外部图标库 (用 inline SVG)。\n- 必须用用户的真实流程内容; 节点文字直接来自用户输入。","author":"@nexu-io","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/frame-flowchart-sticky","license":"Apache-2.0","category":"video","lang":"multi","tokens":690,"stars":0,"calls30d":0,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"example.html","size":5913,"sha256":"c0152ff2dad05ed7e3f419bf47acffa99afd2c8a07df9a16469e110e5435fd3b"},{"path":"example.md","size":580,"sha256":"1265f167cb0775361be16e3168a27050288be3dd149344715a4f0dabaf309dee"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["cdn.tailwindcss.com"]}}