Frame Flowchart Sticky
- 1.6k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
frame-flowchart-sticky is an agent skill that svg curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
About
frame-flowchart-sticky is an agent skill from nexu-io/open-design that svg curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel. 【模板: 便利贴流程图帧 (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`。 - 便利贴有 Developers invoke frame-flowchart-sticky during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.
- 【模板: 便利贴流程图帧 (Sticky Flowchart)】
- 【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。
- 【画布】1920×1080。背景: 米黄白板纸 `#f4ede1` 或冷灰白板 `#f0f2f4`; 加非常浅的 hex grid `rgba(0,0,0,0.04)` 让它有白板感。
- 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄 `#fcd34d` / 桃 `#fca5a5` / 薄荷 `#a7f3d0` / 天 `#a5b4fc`。
- 便利贴有轻微旋转 `transform: rotate(±2deg)` 不一致, 投影 `drop-shadow(0 6px 14px rgba(0,0,0,0.12))`, 顶部胶带 `linear-gradient(...)` 装饰。
Frame Flowchart Sticky by the numbers
- 1,639 all-time installs (skills.sh)
- +124 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #215 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
frame-flowchart-sticky capabilities & compatibility
- Capabilities
- 【模板: 便利贴流程图帧 (sticky flowchart)】 · 【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboardi · 【画布】1920×1080。背景: 米黄白板纸 `#f4ede1` 或冷灰白板 `#f0f2f4 · 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄 `#fcd34d` / · 便利贴有轻微旋转 `transform: rotate(±2deg)` 不一致, 投影 `dro
- Use cases
- orchestration
What frame-flowchart-sticky says it does
【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。
【画布】1920×1080。背景: 米黄白板纸 `#f4ede1` 或冷灰白板 `#f0f2f4`; 加非常浅的 hex grid `rgba(0,0,0,0.04)` 让它有白板感。
- 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄 `#fcd34d` / 桃 `#fca5a5` / 薄荷 `#a7f3d0` / 天 `#a5b4fc`。
npx skills add https://github.com/nexu-io/open-design --skill frame-flowchart-stickyAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.6k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
Who is it for?
Developers working on design & ui/ux during build tasks.
Skip if: Tasks outside Design & UI/UX scope described in SKILL.md.
When should I use this skill?
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
What you get
Completed design & ui/ux workflow aligned with SKILL.md steps.
- 1920×1080 flowchart video frame
- SVG connector layout
- sticky-note node animation
By the numbers
- Outputs 1920×1080 (16:9) video frames
- Sample onboarding example defines 6 nodes with 4 sticky colors
- Featured at rank 45 in the open-design catalog
Files
【模板: 便利贴流程图帧 (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)。
- 必须用用户的真实流程内容; 节点文字直接来自用户输入。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Sticky Flowchart · HTML Anything Onboarding</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Patrick+Hand&family=Inter:wght@400;500;600&family=IBM+Plex+Mono&display=swap" rel="stylesheet" />
<style>
body {
font-family:'Patrick Hand','Caveat',cursive;
background:
linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px),
#f4ede1;
background-size: 40px 40px;
color:#2a2a2a;
min-height:100vh;
margin:0;
}
.sticky {
width:200px; min-height:150px;
padding:14px 16px;
box-shadow: 0 6px 14px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
position:absolute;
border-radius: 2px 2px 4px 4px;
}
.sticky::before {
content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-2deg);
width:80px; height:18px; background:rgba(255,255,255,0.6);
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.yellow { background:#fcd34d; transform: rotate(-1.5deg); }
.peach { background:#fca5a5; transform: rotate(1.2deg); }
.mint { background:#a7f3d0; transform: rotate(-0.8deg); }
.sky { background:#a5b4fc; transform: rotate(2deg); }
.sticky h3 { font-family:'Caveat',cursive; font-size:22px; font-weight:700; line-height:1.1; }
.sticky p { font-family:'Patrick Hand',cursive; font-size:14px; line-height:1.3; margin-top:6px; opacity:0.85; }
.num { font-family:'Caveat',cursive; font-weight:700; font-size:28px; line-height:1; }
.mono { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; }
.cursor-tag {
position:absolute; transform: translate(-50%,-100%);
background:#1a1a1a; color:#fff; font-family:'Inter',sans-serif; font-size:10px;
padding:2px 8px; border-radius:10px; font-weight:600;
}
</style>
</head>
<body class="relative overflow-hidden">
<!-- header -->
<header class="px-12 pt-10 flex items-baseline justify-between">
<div class="mono opacity-70">FLOW · ONBOARDING · 2026</div>
<h1 style="font-family:'Caveat',cursive;font-size:36px;font-weight:700">HTML Anything · 新用户上手</h1>
<div class="mono opacity-70">FRAME-FLOWCHART-STICKY</div>
</header>
<!-- canvas -->
<div class="relative" style="height:780px">
<!-- SVG connectors layer -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 1500 780" preserveAspectRatio="none" style="pointer-events:none">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,0 L10,5 L0,10 z" fill="#2a2a2a"/>
</marker>
</defs>
<!-- 1 → 2 -->
<path d="M 240 240 C 320 240, 360 240, 420 240" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
<!-- 2 → 3 -->
<path d="M 620 240 C 700 240, 740 240, 800 240" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
<!-- 3 → 4 -->
<path d="M 1000 240 C 1100 240, 1140 290, 1100 360 S 980 480, 880 480" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
<!-- 4 → 5 -->
<path d="M 680 480 C 580 480, 540 480, 480 480" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
<!-- 5 → 6 -->
<path d="M 280 480 C 200 480, 160 540, 180 600 S 280 700, 380 700" fill="none" stroke="#2a2a2a" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)"/>
<!-- branch: 2 → installer (dashed) -->
<path d="M 520 320 C 520 400, 560 440, 700 440" fill="none" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-dasharray="8 6" marker-end="url(#arrow)"/>
</svg>
<!-- node 1: 打开 -->
<div class="sticky yellow" style="top:160px; left:60px">
<div class="num">01</div>
<h3 class="mt-1">打开 localhost:3456</h3>
<p>浏览器进入主界面</p>
</div>
<!-- node 2: 扫 agent -->
<div class="sticky peach" style="top:160px; left:420px">
<div class="num">02</div>
<h3 class="mt-1">扫描本地 Agent</h3>
<p>列出 17 个 CLI 中已登录的那几个</p>
</div>
<!-- node 3: 选模板 -->
<div class="sticky mint" style="top:160px; left:800px">
<div class="num">03</div>
<h3 class="mt-1">选 75 个模板之一</h3>
<p>按场景 / 关键字搜</p>
</div>
<!-- node 4: 粘内容 -->
<div class="sticky sky" style="top:400px; left:680px">
<div class="num">04</div>
<h3 class="mt-1">粘 MD / CSV / 图</h3>
<p>自动识别格式</p>
</div>
<!-- node 5: 转换 -->
<div class="sticky yellow" style="top:400px; left:280px">
<div class="num">05</div>
<h3 class="mt-1">⌘+Enter 转换</h3>
<p>SSE 流式刷新预览</p>
</div>
<!-- node 6: 复制 -->
<div class="sticky mint" style="top:620px; left:380px">
<div class="num">06</div>
<h3 class="mt-1">一键复制 / 下载</h3>
<p>公众号 / 推特 / PNG / HTML</p>
</div>
<!-- branch: 安装 agent -->
<div class="sticky peach" style="top:400px; left:700px; transform:rotate(3deg); width:200px">
<div class="num">⤳</div>
<h3 class="mt-1">分支: 装个 CLI</h3>
<p>没有? brew install claude</p>
</div>
<!-- cursor tag -->
<div class="cursor-tag" style="top:280px; left:520px;">🟠 you</div>
</div>
<footer class="px-12 pb-6 flex items-baseline justify-between mono opacity-60">
<span>FLOWCHART · WHITEBOARD STYLE · 6 NODES + 1 BRANCH</span>
<span>html-anything.dev/onboarding</span>
</footer>
</body>
</html>
新用户上手流程 · HTML Anything
白板风便利贴流程图, 6 节点, 1 个分支
流程
1. 打开 localhost:3456 — 浏览器进入主界面 2. 自动识别本地 agent — 扫描 PATH, 列出已登录的 CLI 3. 选模板 — 75 个模板按场景分类 4. 粘贴内容 / 上传文件 — Markdown / CSV / Excel 都支持 5. ⌘+Enter 转换 — 流式调用 agent → SSE → 实时刷新预览 6. 一键复制 / 下载 — 公众号 / 推特 / 知乎 / PNG / HTML
分支: 若无本地 agent → 引导安装 (Claude / Cursor / Codex)
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Pick frame-flowchart-sticky over static diagram tools when the deliverable must be an animated whiteboard-style video frame rather than an editable canvas or PNG export.
FAQ
What does frame-flowchart-sticky do?
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
When should I use frame-flowchart-sticky?
During build frontend work for design & ui/ux.
Is frame-flowchart-sticky safe to install?
Review the Security Audits panel on this listing before production use.