{"id":"dfe39a18-c3ca-4cfb-898b-4e85c01aaae1","shortId":"GQxe7G","kind":"skill","title":"frame-flowchart-sticky","tagline":"SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm","description":"【模板: 便利贴流程图帧 (Sticky Flowchart)】\n【意图】把一个流程 / 系统 / 工作流画成\"白板 + 便利贴\"的样子, 适合 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` / 桃 `#fca5a5` / 薄荷 `#a7f3d0` / 天 `#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` / `Caveat` / `Patrick Hand` 手写感字体 (中文用 `霞鹜文楷` 或 `LXGW WenKai Screen`)。\n\n【连接线 (SVG)】\n- 用 `<path>` 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- 一个\"光标\"装饰 (`<svg>` arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。\n\n【设计细节】\n- 至少 5 个节点, 最多 12 个。\n- 节点排布不要全部居中对齐, 要有一点白板风的\"随手贴\"感, 但保证连接线清晰不交叉。\n- 严禁: 全屏深色背景、霓虹色、企业 dashboard 风格。\n- 字体不能用 Inter / 衬线, 必须手写感。\n- 单文件 HTML, 不要外部图标库 (用 inline SVG)。\n- 必须用用户的真实流程内容; 节点文字直接来自用户输入。","tags":["frame","flowchart","sticky","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design"],"capabilities":["skill","source-nexu-io","skill-frame-flowchart-sticky","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/frame-flowchart-sticky","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 44905 github stars · SKILL.md body (1,224 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:50:14.029Z","embedding":null,"createdAt":"2026-05-15T12:50:29.958Z","updatedAt":"2026-05-18T18:50:14.029Z","lastSeenAt":"2026-05-18T18:50:14.029Z","tsv":"'-20':97 '0':43,44,45,75,79,80,81,129 '0.04':46 '0.12':82 '1':89 '1.05':164 '1080':33 '12':183 '12px':100,154 '14px':77 '16':96 '180px':54 '1920':32 '2':143,147 '2.5':121 '2026':158 '240':53 '2a2a2a':119 '2deg':69 '4':56 '5':180 '6':133 '6px':76 '8':132 'a5b4fc':65 'a7f3d0':63 'arrow':171 'bezier':116 'brainstorm':10 'caption':152 'caveat':103 'css':166 'dasharray':128 'dashboard':194 'drop':73 'drop-shadow':72 'emoji':91 'end':139 'f0f2f4':38 'f4ede1':36 'fca5a5':61 'fcd34d':59 'figma':176 'flow':156 'flowchart':3,14,30 'frame':2 'frame-flowchart-sticki':1 'gradient':86 'grid':41 'hand':105 'hex':40 'hover':160 'html':201 'hyperfram':29 'icon':94 'inlin':204 'inspir':27 'inter':197 'kalam':102 'linear':85 'linear-gradi':84 'linecap':124 'lxgw':110 'marker':138 'marker-end':137 'migrat':157 'name':172 'note':50 'onboard':23 'patrick':104 'px':98 'rgba':42,78 'rotat':68 'round':125 'san':153 'scale':163 'screen':112 'shadow':74 'skill' 'skill-frame-flowchart-sticky' 'source-nexu-io' 'sticki':4,13,49 'stroke':118,123,127 'stroke-dasharray':126 'stroke-linecap':122 'svg':5,93,114,205 'tag':173 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'transform':67 'transit':167 'uppercas':155 'wenkai':111 'width':120 '一个':168 '一张':52 '一行描述':99 '不一致':70 '不要外部图标库':202 '严禁':190 '个':90,184 '个节点':181 '中文用':107 '企业':193 '但保证连接线清晰不交叉':189 '便利贴':20,55 '便利贴有轻微旋转':66 '便利贴流程图帧':12 '便利贴节点':7 '像白板':9 '光标':169 '光标交互':8 '全屏深色背景':191 '分叉':145 '加非常浅的':39 '协作光标':177 '单文件':200 '可选交互':150 '合并':149 '同一节点连出':142 '复杂节点可有循环或分支':141 '大字标题':95 '天':64 '套颜色随机分配':57 '字体不能用':196 '实线':130 '工作流画成':18 '必须手写感':199 '必须用用户的真实流程内容':206 '意图':15 '感':188 '或':109,131,146 '或冷灰白板':37 '或单线':92 '手写感字体':106 '把一个流程':16 '投影':71 '抬起阴影':162 '曲线连接':6 '曲线连接节点':117 '最多':182 '条':144 '条件分支':135 '条进入一节点':148 '桃':60 '模拟':175 '模板':11 '每节点':51 '浮在某节点旁':174 '用':115,165,203 '画布':31 '白板':19 '的样子':21 '箭头终端用':136 '米黄白板纸':35 '系统':17 '系统架构讲解':26 '背景':34 '至少':179 '节点':48,161 '节点内容':88 '节点字体':101 '节点排布不要全部居中对齐':185 '节点文字直接来自用户输入':207 '薄荷':62 '虚线':134 '衬线':198 '装饰':87,170 '要有一点白板风的':186 '视频':24 '让它有白板感':47 '设计细节':178 '运营流程说明':25 '连接线':113 '适合':22 '随手贴':187 '霓虹色':192 '霞鹜文楷':108 '顶部':151 '顶部胶带':83 '风格':195 '黄':58 '黑色三角小箭头':140 '鼠标':159","prices":[{"id":"7130b7fb-75ce-4bc5-8165-bf82bb7e6daa","listingId":"dfe39a18-c3ca-4cfb-898b-4e85c01aaae1","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-15T12:50:29.958Z"}],"sources":[{"listingId":"dfe39a18-c3ca-4cfb-898b-4e85c01aaae1","source":"github","sourceId":"nexu-io/open-design/frame-flowchart-sticky","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/frame-flowchart-sticky","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:29.958Z","lastSeenAt":"2026-05-18T18:50:14.029Z"}],"details":{"listingId":"dfe39a18-c3ca-4cfb-898b-4e85c01aaae1","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"frame-flowchart-sticky","github":{"repo":"nexu-io/open-design","stars":44905,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-18T18:43:11Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"eacc899650d8db63c6761bd8634006240e49691a","skill_md_path":"skills/frame-flowchart-sticky/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/frame-flowchart-sticky"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"frame-flowchart-sticky","description":"SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/frame-flowchart-sticky"},"updatedAt":"2026-05-18T18:50:14.029Z"}}