Skip to content
Get packs

Sticky Flowchart Frame

Turns a process or workflow into a whiteboard-style flowchart with sticky-note nodes and curved connectors

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

When installed, the agent can take a description of a process, system, or workflow and lay it out as a single HTML page that looks like a hand-drawn whiteboard brainstorm: colored sticky notes as steps, curved arrows between them, and a faint paper-like background. It is aimed at onboarding walkthroughs, operations explainers, and system diagrams. The skill is a visual style guide and layout recipe; it does not run any code itself.

Great for

  • Teams making an onboarding or operations walkthrough video or slide-like frame
  • Creators who want a friendly hand-drawn look for a process explainer
  • People who want a flowchart with a whiteboard feel instead of a corporate dashboard look

Skip it if

  • Formal technical architecture diagrams that need strict standards or precise labeling, because the style is deliberately loose and handwritten
  • Anyone needing a data-driven chart; the skill is for flow layouts, not numeric data visualisation
  • Corporate or regulated documents, where the playful sticky-note style may not fit the brand

Try asking

  • “Use the Sticky Flowchart Frame to turn my 6-step customer onboarding process into a whiteboard-style frame”
  • “Make a sticky-note flowchart of our order fulfilment workflow with branches for refunds”
  • “Draw a system architecture overview as sticky notes connected by curved arrows”
Step-by-step guide: how to use Sticky Flowchart FrameInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    frame-flowchart-sticky.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip frame-flowchart-sticky.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip frame-flowchart-sticky.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your real step names and short descriptions so the nodes carry actual content rather than placeholders
  • Specify how many steps you need (the skill expects between 5 and 12 nodes) and any branch or loop points
  • Check the output in a browser, since the layout is generated by hand-written HTML and CSS rather than a tool

What's inside

  • example.html
  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.