Skip to content
Marketplace

frame-flowchart-sticky

by nexu-io

SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.

Overview

SKILL.mdRead at 53231d4

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

Files 3 files

Install it by hand

Deska runs this for you, for every agent you pick. To run it yourself in a terminal:

npx skills add nexu-io/open-design --skill frame-flowchart-sticky

More from nexu-io

  • ui-ux-pro-maxnexu-ioCatalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in OpenDesign.5,200 installs on skills.sh0
  • frontend-designnexu-ioCreate distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.4,600 installs on skills.sh0
  • web-design-guidelinesnexu-ioReview UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.3,700 installs on skills.sh0
  • creative-directornexu-ioAI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.3,200 installs on skills.sh0
  • design-briefnexu-ioParse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief".3,200 installs on skills.sh0
All skills by nexu-io