frame-flowchart-sticky

Original：🇨🇳 Chinese

Translated

SVG Curve Connections + Sticky Note Nodes + Cursor Interaction, Like Whiteboard Brainstorming

3installs

Sourcenexu-io/open-design

Added on2026-05-16

NPX Install

npx skill4agent add nexu-io/open-design frame-flowchart-sticky

SKILL.md Content (Chinese)

View Translation Comparison →

【Template: Sticky Flowchart】【Purpose】To map a process / system / workflow in a "whiteboard + sticky notes" style, suitable for onboarding videos, operation process explanations, and system architecture introductions. Inspired by hyperframes flowchart.

【Canvas】1920×1080. Background: Beige whiteboard paper

#f4ede1

or cool gray whiteboard

#f0f2f4

; add a very light hex grid

rgba(0,0,0,0.04)

to give it a whiteboard feel.

【Nodes (Sticky Notes)】

Each node = a 240×180px sticky note, randomly assigned 4 color sets: Yellow
```
#fcd34d
```
/ Peach
```
#fca5a5
```
/ Mint
```
#a7f3d0
```
/ Sky Blue
```
#a5b4fc
```
.

Sticky notes have slight inconsistent rotation

transform: rotate(±2deg)

, shadow

drop-shadow(0 6px 14px rgba(0,0,0,0.12))

, and top tape decoration with

linear-gradient(...)

.

Node content: 1 emoji or single-line SVG icon + large title (16-20px) + one line of description (12px).
Node fonts: Handwritten-style fonts like
```
Kalam
```
/
```
Caveat
```
/
```
Patrick Hand
```
(use
```
霞鹜文楷
```
or
```
LXGW WenKai Screen
```
for Chinese).

【Connections (SVG)】

Use
```
<path>
```
Bezier curves to connect nodes, stroke
```
#2a2a2a
```
, width 2.5,
```
stroke-linecap: round
```
,
```
stroke-dasharray: 0
```
(solid line) or
```
8 6
```
(dashed line = conditional branch).
Arrow terminals use
```
marker-end
```
, small black triangular arrows.
Complex nodes can have loops or branches: 2 lines connecting from the same node (fork) or 2 lines entering one node (merge).

【Optional Interactions】

Top caption (sans, 12px uppercase): "FLOW · MIGRATION · 2026".
Mouse hover on node: Lift shadow + scale 1.05, using CSS transition.
A "cursor" decoration (
```
<svg>
```
arrow + name tag), floating next to a node, simulating Figma collaborative cursor.

【Design Details】

At least 5 nodes, maximum 12 nodes.
Nodes should not be fully centered aligned; they should have a slightly "casually stuck" whiteboard style, but ensure connections are clear and non-crossing.
Strictly prohibited: Full-screen dark background, neon colors, enterprise dashboard style.
Fonts cannot be Inter / serif; must be handwritten-style.
Single-file HTML, no external icon libraries (use inline SVG).
Must use the user's actual process content; node text directly comes from user input.

frame-flowchart-sticky

NPX Install

Tags

SKILL.md Content (Chinese)