Turn workflows and system flows into a whiteboard-style diagram with colored sticky notes and curved arrows. The skill produces a single HTML file, with branches, merges, and optional hover effects for onboarding or operational explanations.
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
frame-flowchart-sticky turns business procedures and system flows into whiteboard-style diagrams using colored sticky notes and curved arrows. It arranges 5–12 nodes and can show branches, merges, and loops. Handwritten-style text, slightly tilted notes, and a faint grid create the appearance of ideas posted on a whiteboard. The output is a single HTML file.
Use it for videos explaining how to get started, operational workflow explanations, or presentations of system structure. It suits content where you want to display a name and short description for each stage while also showing how the stages relate. Optional effects can make a note lift when hovered over, or add a decorative cursor suggesting collaborative work.
The default canvas is 1920×1080. Prepare the source flow: the diagram uses actual stage names and descriptions supplied by the user. Icons are written as SVG inside the HTML, without an external icon library.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.
The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
【模板: 便利贴流程图帧 (Sticky Flowchart)】 【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。
【画布】1920×1080。背景: 米黄白板纸 #f4ede1 或冷灰白板 #f0f2f4; 加非常浅的 hex grid rgba(0,0,0,0.04) 让它有白板感。
【节点 (Sticky Notes)】
#fcd34d / 桃 #fca5a5 / 薄荷 #a7f3d0 / 天 #a5b4fc。transform: rotate(±2deg) 不一致, 投影 drop-shadow(0 6px 14px rgba(0,0,0,0.12)), 顶部胶带 linear-gradient(...) 装饰。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, 黑色三角小箭头。【可选交互】
<svg> arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。【设计细节】
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.
Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.
Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.
Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.
Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.
Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.