[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M789AEGA07QS8JREZK2PBYKH":3,"skill-same:01M789AEGA07QS8JREZK2PBYKH":85},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":13,"repositoryHtmlUrl":57,"repositoryHomepageUrl":58,"ownerHtmlUrl":59,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":60,"install":61,"resources":74},"01M789AEGA07QS8JREZK2PBYKH","frame-flowchart-sticky",null,"SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.","bluesman1971\u002Fopen-design","bluesman1971","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F96430007?v=4","01M788AK0TR13JE8ART2WNQZV6","01M788AK1PVB085AS9SP38WWGK",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fframe-flowchart-sticky\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: frame-flowchart-sticky\nzh_name: \"便利贴流程图帧\"\nen_name: \"Sticky Flowchart Frame\"\nemoji: \"📝\"\ndescription: \"SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.\"\nzh_description: \"SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm\"\nen_description: \"SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.\"\ncategory: video\nscenario: operations\naspect_hint: \"1920×1080 (16:9)\"\nfeatured: 45\ntags: [\"flowchart\", \"diagram\", \"sticky\", \"whiteboard\", \"frame\"]\nexample_id: sample-frame-flowchart-sticky\nexample_name: \"便利贴流程图 · 用户 onboarding\"\nexample_format: markdown\nexample_tagline: \"SVG 曲线 + 4 色便利贴\"\nexample_desc: \"6 节点 onboarding 流程, 手写体 + 白板纸底\"\nexample_source_url: \"https:\u002F\u002Fhyperframes.heygen.com\u002Fcatalog\"\nexample_source_label: \"hyperframes · flowchart\"\nod:\n  mode: video\n  surface: video\n  scenario: operations\n  upstream: \"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fhtml-anything\"\n  preview:\n    type: html\n    entry: index.html\n    reload: debounce-100\n  design_system:\n    requires: false\n  example_prompt: \"Use the Sticky Flowchart Frame template to turn my content into a whiteboard-brainstorm frame with SVG curve connectors, sticky-note nodes, and cursor interaction. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.\"\n  example_prompt_i18n:\n    zh-CN: \"用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。\"\n---\n\n【模板: 便利贴流程图帧 (Sticky Flowchart)】\n【意图】把一个流程 \u002F 系统 \u002F 工作流画成\"白板 + 便利贴\"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。\n\n【画布】1920×1080。背景: 米黄白板纸 `#f4ede1` 或冷灰白板 `#f0f2f4`; 加非常浅的 hex grid `rgba(0,0,0,0.04)` 让它有白板感。\n\n【节点 (Sticky Notes)】\n- 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄 `#fcd34d` \u002F 桃 `#fca5a5` \u002F 薄荷 `#a7f3d0` \u002F 天 `#a5b4fc`。\n- 便利贴有轻微旋转 `transform: rotate(±2deg)` 不一致, 投影 `drop-shadow(0 6px 14px rgba(0,0,0,0.12))`, 顶部胶带 `linear-gradient(...)` 装饰。\n- 节点内容: 1 个 emoji 或单线 SVG icon + 大字标题 (16-20px) + 一行描述 (12px)。\n- 节点字体: `Kalam` \u002F `Caveat` \u002F `Patrick Hand` 手写感字体 (中文用 `霞鹜文楷` 或 `LXGW WenKai Screen`)。\n\n【连接线 (SVG)】\n- 用 `\u003Cpath>` Bezier 曲线连接节点, stroke `#2a2a2a`, width 2.5, `stroke-linecap: round`, `stroke-dasharray: 0` (实线) 或 `8 6` (虚线 = 条件分支)。\n- 箭头终端用 `marker-end`, 黑色三角小箭头。\n- 复杂节点可有循环或分支: 同一节点连出 2 条 (分叉) 或 2 条进入一节点 (合并)。\n\n【可选交互】\n- 顶部 caption (sans, 12px uppercase): \"FLOW · MIGRATION · 2026\"。\n- 鼠标 hover 节点: 抬起阴影 + scale 1.05, 用 CSS transition。\n- 一个\"光标\"装饰 (`\u003Csvg>` arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。\n\n【设计细节】\n- 至少 5 个节点, 最多 12 个。\n- 节点排布不要全部居中对齐, 要有一点白板风的\"随手贴\"感, 但保证连接线清晰不交叉。\n- 严禁: 全屏深色背景、霓虹色、企业 dashboard 风格。\n- 字体不能用 Inter \u002F 衬线, 必须手写感。\n- 单文件 HTML, 不要外部图标库 (用 inline SVG)。\n- 必须用用户的真实流程内容; 节点文字直接来自用户输入。\n","【模板: 便利贴流程图帧 (Sticky Flowchart)】\n【意图】把一个流程 \u002F 系统 \u002F 工作流画成\"白板 + 便利贴\"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。\n\n【画布】1920×1080。背景: 米黄白板纸 `#f4ede1` 或冷灰白板 `#f0f2f4`; 加非常浅的 hex grid `rgba(0,0,0,0.04)` 让它有白板感。\n\n【节点 (Sticky Notes)】\n- 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄 `#fcd34d` \u002F 桃 `#fca5a5` \u002F 薄荷 `#a7f3d0` \u002F 天 `#a5b4fc`。\n- 便利贴有轻微旋转 `transform: rotate(±2deg)` 不一致, 投影 `drop-shadow(0 6px 14px rgba(0,0,0,0.12))`, 顶部胶带 `linear-gradient(...)` 装饰。\n- 节点内容: 1 个 emoji 或单线 SVG icon + 大字标题 (16-20px) + 一行描述 (12px)。\n- 节点字体: `Kalam` \u002F `Caveat` \u002F `Patrick Hand` 手写感字体 (中文用 `霞鹜文楷` 或 `LXGW WenKai Screen`)。\n\n【连接线 (SVG)】\n- 用 `\u003Cpath>` Bezier 曲线连接节点, stroke `#2a2a2a`, width 2.5, `stroke-linecap: round`, `stroke-dasharray: 0` (实线) 或 `8 6` (虚线 = 条件分支)。\n- 箭头终端用 `marker-end`, 黑色三角小箭头。\n- 复杂节点可有循环或分支: 同一节点连出 2 条 (分叉) 或 2 条进入一节点 (合并)。\n\n【可选交互】\n- 顶部 caption (sans, 12px uppercase): \"FLOW · MIGRATION · 2026\"。\n- 鼠标 hover 节点: 抬起阴影 + scale 1.05, 用 CSS transition。\n- 一个\"光标\"装饰 (`\u003Csvg>` arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。\n\n【设计细节】\n- 至少 5 个节点, 最多 12 个。\n- 节点排布不要全部居中对齐, 要有一点白板风的\"随手贴\"感, 但保证连接线清晰不交叉。\n- 严禁: 全屏深色背景、霓虹色、企业 dashboard 风格。\n- 字体不能用 Inter \u002F 衬线, 必须手写感。\n- 单文件 HTML, 不要外部图标库 (用 inline SVG)。\n- 必须用用户的真实流程内容; 节点文字直接来自用户输入。\n",{"od":23,"name":5,"tags":35,"emoji":41,"en_name":42,"zh_name":43,"category":24,"featured":44,"scenario":29,"example_id":45,"aspect_hint":46,"description":7,"example_desc":47,"example_name":48,"en_description":7,"example_format":49,"zh_description":50,"example_tagline":51,"example_source_url":52,"example_source_label":53},{"mode":24,"preview":25,"surface":24,"scenario":29,"upstream":30,"design_system":31,"example_prompt":32,"example_prompt_i18n":33},"video",{"type":26,"entry":27,"reload":28},"html","index.html","debounce-100","operations","https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fhtml-anything",{"requires":19},"Use the Sticky Flowchart Frame template to turn my content into a whiteboard-brainstorm frame with SVG curve connectors, sticky-note nodes, and cursor interaction. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",{"zh-CN":34},"用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。",[36,37,38,39,40],"flowchart","diagram","sticky","whiteboard","frame","📝","Sticky Flowchart Frame","便利贴流程图帧",45,"sample-frame-flowchart-sticky","1920×1080 (16:9)","6 节点 onboarding 流程, 手写体 + 白板纸底","便利贴流程图 · 用户 onboarding","markdown","SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm","SVG 曲线 + 4 色便利贴","https:\u002F\u002Fhyperframes.heygen.com\u002Fcatalog","hyperframes · flowchart","main","0467f0e19df12a6994ec7fb20ff6e9e23cd704e7","plugins\u002F_official\u002Fexamples\u002Fframe-flowchart-sticky","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design","https:\u002F\u002Fopen-design.ai","https:\u002F\u002Fgithub.com\u002Fbluesman1971","2026-07-09 04:08:20",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add bluesman1971\u002Fopen-design --skill frame-flowchart-sticky",{"tool":67,"command":68},"bunx","bunx skills add bluesman1971\u002Fopen-design --skill frame-flowchart-sticky",{"tool":70,"command":71},"pnpm","pnpm dlx skills add bluesman1971\u002Fopen-design --skill frame-flowchart-sticky","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fframe-flowchart-sticky\u002FSKILL.md",true,[75,81],{"path":76,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":79,"sourceHtmlUrl":80},"example.html","REFERENCE","参考文档",5913,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fframe-flowchart-sticky\u002Fexample.html",{"path":82,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":83,"sourceHtmlUrl":84},"open-design.json",5578,"https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fframe-flowchart-sticky\u002Fopen-design.json",[86,95,103,110,117,124],{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":90,"licenseFileUrl":91,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":18},"01M78AMRG8NAGKWKNDQE39ZZFQ","web-design-guidelines","Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.","MIT","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-design-guidelines\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-design-guidelines\u002FSKILL.md",[],[],{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":90,"licenseFileUrl":99,"sourceHtmlUrl":100,"categories":101,"keywords":102,"publishedAt":18},"01M78AMKHTFS149JGEYNQM5AXR","web-clone","网站复刻 \u002F 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互\u002FWebGL\u002FCanvas\u002FThree.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 \u002F React-Vue-Next 内容站 \u002F WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fweb-clone\u002FSKILL.md",[],[],{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":109,"publishedAt":18},"01M78AMH25JH2SH3AWTRSDCM9F","venice-video","Video generation and transcription workflows via the Venice.ai API.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fvenice-video\u002FSKILL.md",[],[],{"skillNo":111,"name":112,"nameZh":6,"description":113,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":116,"publishedAt":18},"01M78AMF0M4FFKFWXFJ9NHTF5M","venice-image-generate","Image generation endpoints and available styles via the Venice.ai API.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fvenice-image-generate\u002FSKILL.md",[],[],{"skillNo":118,"name":119,"nameZh":6,"description":120,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":121,"categories":122,"keywords":123,"publishedAt":18},"01M78AMCH68X46SHNZVD284KXS","threejs","Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fthreejs\u002FSKILL.md",[],[],{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":130,"publishedAt":18},"01M78AM7P8WSBZDNZZ42BQHGK7","taste","Brief-time anti-AI-slop taste checklist — read the room and set the\ndesign dials BEFORE generating a landing page, portfolio, or redesign,\nso the first draft doesn't need a post-generation rescue. Use at the\nstart of a visual\u002Fcreative brief, not after the artifact exists.","https:\u002F\u002Fgithub.com\u002Fbluesman1971\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Ftaste\u002FSKILL.md",[],[]]