使用Hyperframes的HTML模板制作复古像素风格的三场景视频，替换标题、标签和配色，同时保留场景转换节奏及可重复的动画时序。
- 制作像素风格的介绍视频
- 替换三场景视频中的内容
- 通过HTML预览场景转换
nexu-io/open-design10.3万2026年10月20日 更新
免费在 GitHub 公开中文介绍
frame-flowchart-sticky
将业务流程或系统流程绘成白板风格图，用彩色便利贴和曲线箭头展示步骤、分支与合并，输出可用于入门引导或运营说明的单个HTML文件。
原文查看原文说明
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
适用场景
- 图解开始使用的步骤
- 说明运营流程
- 介绍系统结构
- 展示业务流程的分支与合并
中文介绍
功能
frame-flowchart-sticky 将业务步骤或系统流程整理成白板风格的图，用彩色便利贴和曲线箭头连接各个环节。图中放置5至12个节点，可表现分支、合并和循环。手写风格文字、略微倾斜的便利贴与浅色网格，让画面呈现出在白板上贴出想法的效果。输出为单个 HTML 文件。
适用场景
适合介绍开始使用步骤的视频、运营流程说明及系统结构讲解。需要列出各环节的名称和简短说明，同时展示环节之间的关系时，可以使用。还可按需加入悬停时便利贴上浮的效果，或添加让人联想到协作场景的光标装饰。
使用示例
- “请把这些开始使用的步骤画成白板风格图，使用六张便利贴。”
- “请用曲线箭头展示这个运营流程的条件分支和合并。”
注意事项
默认画面尺寸为1920×1080。图中使用用户提供的真实步骤名称与说明，因此需要准备原始流程内容。图标以 SVG 形式直接写入 HTML，不使用外部图标库。
本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。
客观评估
AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。
- 指令清晰度能否看出何时使用、做什么
- A良好明确说明用便利贴和曲线绘制流程图，用于入门引导和运营说明。
- 步骤具体性步骤、输入输出和示例是否具体
- A良好具体规定了画布尺寸、节点数量、配色、SVG连接线和单文件HTML输出。
- 安全性发送数据、删除文件、执行命令等是否有说明
- A良好内容限于创建HTML，未记载外部发送、删除或读取凭据的操作。
- 安装难易度所需工具和 API 密钥是否少且有说明
- A良好指定单文件HTML和内联SVG，不要求外部图标库或API密钥。
总分按每项 A=25 分、B=15 分、C=5 分相加。 由 AI（OpenAI Codex）于 2026年10月20日 评估。仅供参考，安装前请同时查看原文。
如果您认为评估有误，请申请复核
包含的文件（3）
- SKILL.md3.6 KB
- example.html5.8 KB
- example.md580 B
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
【模板: 便利贴流程图帧 (Sticky Flowchart)】 【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。
【画布】1920×1080。背景: 米黄白板纸 #f4ede1 或冷灰白板 #f0f2f4; 加非常浅的 hex grid rgba(0,0,0,0.04) 让它有白板感。
【节点 (Sticky Notes)】
- 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄
#fcd34d/ 桃#fca5a5/ 薄荷#a7f3d0/ 天#a5b4fc。 - 便利贴有轻微旋转
transform: rotate(±2deg)不一致, 投影drop-shadow(0 6px 14px rgba(0,0,0,0.12)), 顶部胶带linear-gradient(...)装饰。 - 节点内容: 1 个 emoji 或单线 SVG icon + 大字标题 (16-20px) + 一行描述 (12px)。
- 节点字体:
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, 黑色三角小箭头。 - 复杂节点可有循环或分支: 同一节点连出 2 条 (分叉) 或 2 条进入一节点 (合并)。
【可选交互】
- 顶部 caption (sans, 12px uppercase): "FLOW · MIGRATION · 2026"。
- 鼠标 hover 节点: 抬起阴影 + scale 1.05, 用 CSS transition。
- 一个"光标"装饰 (
<svg>arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。
【设计细节】
- 至少 5 个节点, 最多 12 个。
- 节点排布不要全部居中对齐, 要有一点白板风的"随手贴"感, 但保证连接线清晰不交叉。
- 严禁: 全屏深色背景、霓虹色、企业 dashboard 风格。
- 字体不能用 Inter / 衬线, 必须手写感。
- 单文件 HTML, 不要外部图标库 (用 inline SVG)。
- 必须用用户的真实流程内容; 节点文字直接来自用户输入。
评价
还没有评价。欢迎分享你的使用感受。
评论
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
同一仓库的技能
为社交媒体广告和搜索广告撰写标题、说明及正文，并反复调整措辞。可用于准备广告文案备选版本，以及检查现有文案并考虑修改方案。
- 撰写社交媒体广告标题
- 准备搜索广告说明
- 修改广告正文措辞
nexu-io/open-design10.3万2026年10月20日 更新
以深色背景和衬线字体制作时尚杂志风格的三页动态展示，结合文字逐步显现与章节转场，最终生成内嵌CSS和JavaScript的单个HTML文件。
- 制作时尚杂志风格的动态介绍
- 用三页展示简短故事
- 将现有品牌风格融入深色版面
nexu-io/open-design10.3万2026年10月20日 更新
通过浏览器查看页面，执行点击、输入、截图和信息提取。主要用于检查OpenDesign的本地预览，以及核查网页应用的运行情况与质量。
- 检查OpenDesign本地预览
- 测试网页应用的点击和输入
- 截取页面或元素图像
nexu-io/open-design10.3万2026年10月20日 更新
用于AI音乐专辑制作，涵盖概念构思、歌词初稿、曲目排序和导出，适合独立专辑实验或品牌音乐企划；完整制作流程需另行安装上游资源包。
- 策划独立制作的专辑
- 围绕专辑主题起草歌词
- 安排专辑曲目顺序
nexu-io/open-design10.3万2026年10月20日 更新
使用p5.js，根据计算规则与随机数创作生成艺术。固定随机种子即可重现相同画面，适合制作海报、表现动感的静态图像和艺术构图草案。
- 根据规则制作海报
- 创作具有动感的静态图像
- 试验艺术作品的构图
nexu-io/open-design10.3万2026年10月20日 更新