القائمة
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/skeletorflet/opencode-supreme-setup --skill frame-flowchart-stickyيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | frame-flowchart-sticky |
| zh_name | 便利贴流程图帧 |
| en_name | Sticky Flowchart Frame |
| emoji | 📝 |
| description | SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm |
| category | video |
| scenario | operations |
| aspect_hint | 1920×1080 (16:9) |
| featured | 45 |
| tags | ["flowchart","diagram","sticky","whiteboard","frame"] |
| example_id | sample-frame-flowchart-sticky |
| example_name | 便利贴流程图 · 用户 onboarding |
| example_format | markdown |
| example_tagline | SVG 曲线 + 4 色便利贴 |
| example_desc | 6 节点 onboarding 流程, 手写体 + 白板纸底 |
| example_source_url | https://hyperframes.heygen.com/catalog |
| example_source_label | hyperframes · flowchart |
| od | {"mode":"video","surface":"video","scenario":"operations","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"} |
【模板: 便利贴流程图帧 (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 协作光标。【设计细节】