使用Hyperframes的HTML模板制作复古像素风格的三场景视频，替换标题、标签和配色，同时保留场景转换节奏及可重复的动画时序。
- 制作像素风格的介绍视频
- 替换三场景视频中的内容
- 通过HTML预览场景转换
nexu-io/open-design10.3万2026年10月22日 更新
免费在 GitHub 公开中文介绍
deck-open-slide-canvas
在固定的1920×1080画布上，按内容自由编排幻灯片。统一配色、字号和留白，生成支持左右方向键翻页并显示页码的单个HTML文件。
原文查看原文说明
Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.
适用场景
- 制作个人作品集
- 准备艺术或设计课程资料
- 制作以问题或图像为主的演讲资料
- 以统一风格展示数据
中文介绍
功能
在固定的1920×1080画布上，根据内容编排幻灯片。如同组合React组件，可灵活使用封面、提问、引用、分栏、数据卡片和全幅图像等形式。每页只保留一个视觉重点，通过统一的配色、字号和留白规则，让整套资料保持一致。成果为单个HTML文件，包含左右方向键翻页和页码显示。
适用场景
适合个人作品集、有个性的演讲，以及艺术或设计课程资料。当每一页需要不同的表达方式，同时又要保持整套资料的视觉一致性时，可以使用此技能。也适合展示数据，或让问题和图像成为页面重点。
使用示例
- “把这份作品介绍做成以图像和简短文字为主的个人作品集。”
- “使用Sea Indigo配色，制作包含提问和数据卡片的演示资料。”
注意事项
指定输出为使用Tailwind CDN的HTML。每页内容必须容纳在1920×1080范围内，不得出现滚动条。整套资料需从指定的四种配色中选择一种。必须使用实际内容，不得使用占位文字或外部链接图像。
本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。
客观评估
AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。
- 指令清晰度能否看出何时使用、做什么
- A良好明确说明用于作品集、演讲和艺术设计课程，输出固定1920×1080的HTML幻灯片。
- 步骤具体性步骤、输入输出和示例是否具体
- A良好具体规定尺寸、字号、留白、四种配色、页面元素、键盘操作和单个HTML输出。
- 安全性发送数据、删除文件、执行命令等是否有说明
- A良好明确指定单个HTML文件及Tailwind CDN，并禁止外部链接图像。
- 安装难易度所需工具和 API 密钥是否少且有说明
- B部分不足指定了Tailwind CDN和字体，但未提供加载与配置步骤。
总分按每项 A=25 分、B=15 分、C=5 分相加。 由 AI（OpenAI Codex）于 2026年10月20日 评估。仅供参考，安装前请同时查看原文。
如果您认为评估有误，请申请复核
包含的文件（3）
- SKILL.md3.9 KB
- example.html2.3 KB
- example.md192 B
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
【模板: 1920 画布自由 Deck】 【意图】不想被模板束缚的场景 (个人作品集、奇特演讲、艺术 / 设计课 deck)。给一个固定 1920×1080 画布 + 极强的类型 / 调色约束, 让 agent 像写 React 组件一样按内容自由排布每一页。Inspired by 1weiho/open-slide。
【硬性技术规格】
- 画布: 每页严格
width: 1920px; height: 1080px;用transform: scale(...)适配视窗 (默认scale(0.7)居中)。 - 绝对禁止 overflow: 每页内容必须 fit in 1920×1080, 不许滚动条出现。
- 字号 type scale (px):
2xs:18 · xs:22 · sm:28 · md:36 · lg:48 · xl:64 · 2xl:88 · 3xl:120 · 4xl:160 · 5xl:220。 - 边距 padding: 96 / 128 / 160 三档之一。
- 每页有
<section class="slide" data-slide-id="<n>">。
【调色板 — 每个 deck 选 1 套, 全程不改】
- 🌫 Ash & Lime — bg
#f1efea, ink#161616, accent#c5e803。 - 🌌 Sea Indigo — bg
#0a0e1a, ink#f5f5f7, accent#5ac8fa。 - 🧉 Mate Mocha — bg
#1a1411, ink#f5e9d6, accent#d97757。 - 🌸 Pearl Rose — bg
#fdf6f3, ink#1a1015, accent#ff5d8f。
【布局自由度 — 这是核心】
- 不强制模板, 每页根据内容性质自选布局: cover / question / quote / image-text / 三列 / 五列 / 列表 / 数据卡 / 满版图。
- 但每页必须遵守一条规则: 视觉重心 (visual hierarchy) 只有 1 个 — 一句金句、一个数字、一张图, 不要"什么都强调"。
- 不许塞两段平等的文字; 真要并列就上 3 列等权重网格。
【字体】
- 西文:
Inter Tight(display) +Inter(body); 或Source Serif Pro(editorial 风时)。 - 中文:
Noto Sans SC(sans 风) 或Noto Serif SC(editorial 风); 不混 sans + serif。 - mono:
JetBrains Mono给数据 / 时间戳。
【设计细节】
- 严禁 emoji 装饰 (内容里的允许); 严禁多色彩虹; accent 只用一个色。
- 严禁 SVG icon 套用 lucide / feather 等通用库 (自己写 inline SVG)。
- 加键盘 ← / → 切换 + hash 同步; 角标固定: 右下
№N/M, 左下 deck title。 - 必须用用户的真实内容; 严禁 lorem ipsum。
- 单文件 HTML; Tailwind CDN; 不要外链图片。
评价
还没有评价。欢迎分享你的使用感受。
评论
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
同一仓库的技能
为社交媒体广告和搜索广告撰写标题、说明及正文，并反复调整措辞。可用于准备广告文案备选版本，以及检查现有文案并考虑修改方案。
- 撰写社交媒体广告标题
- 准备搜索广告说明
- 修改广告正文措辞
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日 更新