[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M77TPEG2NFZJBFRSEWR7S8BA":3,"skill-same:01M77TPEG2NFZJBFRSEWR7S8BA":87},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":55,"commitSha":56,"skillDirectory":57,"forksCount":14,"repositoryHtmlUrl":58,"repositoryHomepageUrl":6,"ownerHtmlUrl":59,"ownerBlogUrl":60,"ownerDescription":61,"updatedAt":62,"install":63,"resources":76},"01M77TPEG2NFZJBFRSEWR7S8BA","frame-flowchart-sticky",null,"SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.","hiktan44\u002Fopen-design-app","hiktan44","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F140920746?v=4","01M77SNV7J2RH7G3TQVS2FXMW9","hikmet tanriverdi","01M77SNV87GR8D3BJ9WJHFMZ9Y",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\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":24,"name":5,"tags":36,"emoji":42,"en_name":43,"zh_name":44,"category":25,"featured":45,"scenario":30,"example_id":46,"aspect_hint":47,"description":7,"example_desc":48,"example_name":49,"en_description":7,"example_format":50,"zh_description":51,"example_tagline":52,"example_source_url":53,"example_source_label":54},{"mode":25,"preview":26,"surface":25,"scenario":30,"upstream":31,"design_system":32,"example_prompt":33,"example_prompt_i18n":34},"video",{"type":27,"entry":28,"reload":29},"html","index.html","debounce-100","operations","https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fhtml-anything",{"requires":20},"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":35},"用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。",[37,38,39,40,41],"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","f403d5b733fab92eab16d13e9baf3ac951afed55","plugins\u002F_official\u002Fexamples\u002Fframe-flowchart-sticky","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app","https:\u002F\u002Fgithub.com\u002Fhiktan44","fasheone.com","Hikmet Tanrıverdi\r\nSTRATEJI DANIŞMANLIK, 2008-2018 İHKİB İSTANBUL HAZIR GİYİM BŞK, İTO MECLİS ÜYESİ, TEXMART DIŞ TİCARET YK STRATEGY CONSULTING, 2008-2018 PRESI","2026-10-11 23:59:08",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add hiktan44\u002Fopen-design-app --skill frame-flowchart-sticky",{"tool":69,"command":70},"bunx","bunx skills add hiktan44\u002Fopen-design-app --skill frame-flowchart-sticky",{"tool":72,"command":73},"pnpm","pnpm dlx skills add hiktan44\u002Fopen-design-app --skill frame-flowchart-sticky","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fframe-flowchart-sticky\u002FSKILL.md",true,[77,83],{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"example.html","REFERENCE","参考文档",5913,"https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fframe-flowchart-sticky\u002Fexample.html",{"path":84,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":85,"sourceHtmlUrl":86},"open-design.json",5618,"https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fframe-flowchart-sticky\u002Fopen-design.json",[88,95,102,109,116,125],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":19},"01M77WGV99HNV3Q6JN3H8Z70JE","Beta Skill","Instruction-only fixture skill.","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Fbeta\u002FSKILL.md",[],[],{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":19},"01M77WGRXNRGHT9J1K929BPV5H","Alpha Skill","First fixture skill with a runnable demo.","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Falpha\u002FSKILL.md",[],[],{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":19},"01M77WGQK7F7R1W6RBFZFEZ53M","Deck One","A small deck template fixture.","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fdesign-templates\u002Fdeck-one\u002FSKILL.md",[],[],{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":19},"01M77WGNPEGTDWMKDX659FS5DT","youtube-clipper","YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-clipper\u002FSKILL.md",[],[],{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":120,"licenseFileUrl":121,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":19},"01M77WGJ9KKT6Q4P10GAV3KC48","writing-guidelines","Review docs\u002Fprose for Writing Guidelines compliance. Use when asked to \"review my docs\", \"check writing style\", \"audit prose\", \"review docs voice and tone\", or \"check this page against the writing handbook\".","MIT","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FSKILL.md",[],[],{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":131,"publishedAt":19},"01M77WGF9P0WT4XBXMM0B9WRGR","wpds","WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fskills\u002Fwpds\u002FSKILL.md",[],[]]