Name: frame-flowchart-sticky
Author: nexu-io

About

Imported from nexu-io/open-design (skills/frame-flowchart-sticky/SKILL.md) via skills.sh. Install upstream with npx skills add nexu-io/open-design --skill frame-flowchart-sticky. Copyright stays with the author.

【模板: 便利贴流程图帧 (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)。
必须用用户的真实流程内容; 节点文字直接来自用户输入。

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/nexu-io-open-design-frame-flowchart-sticky/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

nexu-io-open-design-frame-flowchart-sticky.ocm.jsonjson

{
  "ocm": "1",
  "id": "nexu-io-open-design-frame-flowchart-sticky",
  "kind": "skill",
  "name": "frame-flowchart-sticky",
  "description": "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.",
  "publisher": "nexu-io",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "flowchart",
      "diagram",
      "sticky",
      "whiteboard",
      "frame",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/nexu-io/open-design",
      "path": "skills/frame-flowchart-sticky/SKILL.md",
      "ref": "HEAD",
      "url": "https://www.skills.sh/nexu-io/open-design/frame-flowchart-sticky",
      "key": "nexu-io/open-design/skills/frame-flowchart-sticky/SKILL.md"
    }
  },
  "instructions": "【模板: 便利贴流程图帧 (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 W",
  "cost": {
    "context_tokens": 306
  }
}

Fetch it by URL: GET /api/v1/registry/nexu-io-open-design-frame-flowchart-sticky/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.