frame-flowchart-sticky

frame-flowchart-sticky is a design-template skill that renders a process, system, or workflow as a whiteboard-and-sticky-notes diagram. It solves the problem of making flows feel approachable and hand-crafted, suited to onboarding videos, operations explainers, and system-architecture walkthroughs, by encoding a specific brainstorm-board visual signature.

The template specifies a 1920x1080 canvas with a warm or cool whiteboard-paper background and a faint hex grid, nodes rendered as 240x180px sticky notes in four rotating colors with slight random rotation, drop shadows, and tape decorations, each containing an emoji or single-line SVG icon, a heading, and a one-line description in a handwritten font (Kalam, Caveat, Patrick Hand, or CJK equivalents). Nodes are connected by SVG Bezier curve paths with rounded caps, solid or dashed strokes for conditional branches, and arrowhead markers, supporting forks and merges. Optional touches include a top caption, hover lift-and-scale interactions, and a decorative Figma-style collaboration cursor. Design rules require five to twelve nodes, a deliberately casual non-centered layout with clear non-crossing connectors, handwritten (not Inter or serif) fonts, inline SVG with no external icon libraries, and use of the user's real workflow content.

It targets content creators, operations and product teams, and educators who want a friendly, collaborative-whiteboard aesthetic for explaining flows as a single self-contained HTML file. It is part of the html-anything open-design frame catalogue, with an example showing a six-node user onboarding flow. As a static presentational design specification with no scripts, credentials, or system operations, it carries no meaningful security risk.