使用Hyperframes的HTML模板制作复古像素风格的三场景视频，替换标题、标签和配色，同时保留场景转换节奏及可重复的动画时序。
- 制作像素风格的介绍视频
- 替换三场景视频中的内容
- 通过HTML预览场景转换
nexu-io/open-design10.3万2026年10月22日 更新
免费在 GitHub 公开中文介绍
frame-logo-outro
将几何部件组装成标志，配合光效依次显示品牌名、短句和行动提示，制作单个HTML文件形式的视频片尾，也可在底部展示网站及社交账号。
原文查看原文说明
Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.
适用场景
- 制作展示品牌的视频片尾
- 在结尾显示标志与短句
- 在片尾添加网站及社交账号
中文介绍
功能
制作适用于视频片尾的画面：标志由多个部件组装成形，随后出现光效、品牌名和简短文案。默认使用1920×1080横向画布，将标志置于中央，底部可展示网站、社交账号及行动提示。整个画面封装在单个HTML文件中，动画结束后保持静止。
适用场景
适合在视频结尾加深品牌印象，或将标志、文案和引导用户前往的渠道集中在同一个结束画面中。可从紫蓝色、琥珀色、薄荷色和浅纸色四种基础配色中选择。
使用示例
- “使用这个品牌名和文案，制作标志逐块组装的视频片尾。”
- “使用薄荷色配色，在底部显示网站和社交账号。”
注意事项
标志不加载外部图片，而是通过CSS或内联SVG绘制成4至8个几何部件，并非直接放置现有标志图片的形式。动画不循环播放，并支持用于减少动态效果的prefers-reduced-motion设置。如果未提供品牌名和文案，将使用模板的默认文字。
本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。
客观评估
AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。
- 指令清晰度能否看出何时使用、做什么
- A良好模板明确说明用于视频片尾，展示标志组装、光效、品牌名及行动提示。
- 步骤具体性步骤、输入输出和示例是否具体
- A良好资料指定1920×1080画布、4至8个标志部件、动画时序和单文件HTML输出。
- 安全性发送数据、删除文件、执行命令等是否有说明
- A良好禁止加载外部标志图片，未指示删除文件、读取凭据或向外发送数据。
- 安装难易度所需工具和 API 密钥是否少且有说明
- A良好使用CSS和内联SVG生成单个HTML文件，未指定API密钥或额外工具。
总分按每项 A=25 分、B=15 分、C=5 分相加。 由 AI（OpenAI Codex）于 2026年10月20日 评估。仅供参考，安装前请同时查看原文。
如果您认为评估有误，请申请复核
包含的文件（3）
- SKILL.md3.8 KB
- example.html3.6 KB
- example.md194 B
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
【模板: Logo 收尾帧 (Logo Outro)】 【意图】视频结尾的品牌 reveal 帧 —— logo 分块拼装 + glow bloom + tagline 上浮 + CTA。Inspired by hyperframes logo-outro。
【画布】1920×1080, 黑色 #08090c 或品牌深色背景; 加微妙 vignette radial-gradient(...) 让中心更亮。
【布局】
- 中心 Logo: 用 CSS / 内联 SVG 绘制; 由 4-8 个几何块 (圆 / 方 / 三角 / hairline) 组成。
- 入场动画: 每个块从屏幕外滑入 (±100px 不同方向) + scale 1.4→1.0 + opacity 0→1, 错峰 80ms; 总时长 1.2s。
- 入场完成后, 整个 logo 加 glow bloom:
filter: drop-shadow(0 0 24px <accent>40); 同时一道 shimmermask-image横扫 logo (500ms)。
- 品牌名: logo 下方 6-8% 位置, 大字 (Inter Tight / SF Pro Display, 48-72px, weight 700, letter-spacing -0.02em), 入场: typewriter or fade-up after logo bloom (1.4s 开始)。
- Tagline: 品牌名下方一行 (24-28px, weight 400, opacity 0.7), fade in (1.8s)。
- 底部 CTA + 元数据: 双行底部 row, 例如
htmlanything.dev · @htmlanything · 2026, 11px uppercase letter-spacing 0.16em, 颜色 opacity 0.4, hairline 分隔。
【调色 — 4 选 1, 不混用】
- 🌌 Midnight Indigo — bg
#08090c, accent#7c5cff(霓虹紫蓝 glow)。 - 🌅 Solar Amber — bg
#0e0a08, accent#ffb547(暖琥珀)。 - 🌿 Forest Mint — bg
#0a1410, accent#5fb38a(薄荷绿)。 - ⚪ Bone & Ink — bg
#f1efea, accent#0a0a0b(无 neon, 走 editorial 风, glow 改成阴影)。
【设计细节】
- 绝不: 用外链 logo 图片; logo 必须用纯 CSS / 内联 SVG 几何绘制。
- 入场动画用
@keyframes+animation-delay; 可被prefers-reduced-motion关闭。 - 字体: 西文
Inter Tight/SF Pro Display/Manrope; 中文Noto Sans SCweight 700。 - 必须用用户提供的品牌名 + tagline; 若没有, 跑 fallback "HTML Anything" / "Anything → beautiful HTML"。
- 单文件 HTML; 整个动画完成后 freeze (不要 loop, 这是视频结尾帧)。
- 顶部可选 5px ribbon (accent 色) 增加品牌识别。
评价
还没有评价。欢迎分享你的使用感受。
评论
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
同一仓库的技能
为社交媒体广告和搜索广告撰写标题、说明及正文，并反复调整措辞。可用于准备广告文案备选版本，以及检查现有文案并考虑修改方案。
- 撰写社交媒体广告标题
- 准备搜索广告说明
- 修改广告正文措辞
nexu-io/open-design10.3万2026年10月22日 更新
以深色背景和衬线字体制作时尚杂志风格的三页动态展示，结合文字逐步显现与章节转场，最终生成内嵌CSS和JavaScript的单个HTML文件。
- 制作时尚杂志风格的动态介绍
- 用三页展示简短故事
- 将现有品牌风格融入深色版面
nexu-io/open-design10.3万2026年10月22日 更新
通过浏览器查看页面，执行点击、输入、截图和信息提取。主要用于检查OpenDesign的本地预览，以及核查网页应用的运行情况与质量。
- 检查OpenDesign本地预览
- 测试网页应用的点击和输入
- 截取页面或元素图像
nexu-io/open-design10.3万2026年10月22日 更新
用于AI音乐专辑制作，涵盖概念构思、歌词初稿、曲目排序和导出，适合独立专辑实验或品牌音乐企划；完整制作流程需另行安装上游资源包。
- 策划独立制作的专辑
- 围绕专辑主题起草歌词
- 安排专辑曲目顺序
nexu-io/open-design10.3万2026年10月22日 更新
使用p5.js，根据计算规则与随机数创作生成艺术。固定随机种子即可重现相同画面，适合制作海报、表现动感的静态图像和艺术构图草案。
- 根据规则制作海报
- 创作具有动感的静态图像
- 试验艺术作品的构图
nexu-io/open-design10.3万2026年10月22日 更新