AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载本文以 next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md 为骨架结合同目录示例文件与next/src/lib/templates、cli/src下的加载与提示词装配源码完整拆解这套1920 自由画布 Deck模板的硬性技术规格、四套调色板、布局自由度法则与字体系统并说明它是如何被 html-anything 注册、装载并最终注入 Agent 提示词的。读完你可以直接复刻这套规格来约束自己的 Agent 生成自由排版式幻灯片也能理解向 html-anything 新增一个 Skill 的最小成本路径。模板定位约束画布与风格不约束版面deck-open-slide-canvas是 html-anything 模板体系中一个定位特殊的 Skill。它的中文名是「1920 画布自由 Deck」英文名是「Open-Slide 1920 Canvas Deck」核心设计意图写在其 SKILL.md 正文第一段不想被模板束缚的场景个人作品集、奇特演讲、艺术 / 设计课 deck。给一个固定 1920×1080 画布 极强的类型 / 调色约束让 agent 像写 React 组件一样按内容自由排布每一页。Inspired by 1weiho/open-slide。也就是说它刻意不提供逐页版面模板而是把「画布尺寸、字号阶梯、配色、字体、边距、视觉重心」这些约束锁死把「每一页长什么样」完全交给 Agent 根据内容自由决策——这正是文档中所说「像写 React 组件一样自由排布」。它在仓库中对应的注册元数据frontmatter见 SKILL.md如下字段值说明namedeck-open-slide-canvasSkill 唯一标识kebab-casecategoryslides归入幻灯片品类scenariodesign设计场景在 scenarios.ts 的SCENARIO_KEYS中design位于 picker 场景排序第 2 位aspect_hint1920×1080 (16:9)画布宽高比提示featured35展示排序权重数值越小越靠前recommended9推荐分组排序加入 picker 顶部推荐组数值小则靠前tags[canvas, open-slide, freeform, 1920, react]检索标签example_source_url/example_source_label1weiho/open-slide示例的灵感来源标注硬性技术规格锁死 1920×1080 画布SKILL.md 用「【硬性技术规格】」一节给出了四条 Agent 必须遵守的硬约束这是这套模板的骨架画布每页严格width: 1920px; height: 1080px;用transform: scale(...)适配视窗默认scale(0.7)居中。即内容永远按 1920×1080 的逻辑像素排版页面级缩放只影响显示、不影响布局。绝对禁止 overflow每页内容必须完整 fit 在 1920×1080 内不许出现滚动条。这是自由排版下最容易失控、也最需要被强制约束的点。字号 type scalepx全篇只能使用以下固定字号阶梯保证跨页视觉节奏统一 | 档位 | 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三档中选一档作为页内留白统一值。这几条与 html-anything 顶层提示词装配器的要求是一致且互补的。在 cli/src/prompt-assemble.ts 的SHARED_DESIGN_DIRECTIVES中项目对所有模板统一注入了「8px 基线网格、段落最大宽度 65ch、不使用纯黑纯白改用#0a0a0a/#fafafa」等硬性技术要求而本模板的 1920 画布规格则是在此之上的页级约束。四套调色板每个 deck 只选 1 套全程不改SKILL.md 给出四套经过设计的成套配色要求每个 deck 只选一套、全程不换色套系背景 bg墨色 ink强调 accent Ash Lime#f1efea#161616#c5e803 Sea Indigo#0a0e1a#f5f5f7#5ac8fa Mate Mocha#1a1411#f5e9d6#d97757 Pearl Rose#fdf6f3#1a1015#ff5d8f这四套正好覆盖深底浅字、浅底深字、暖调、冷调四类气质且都遵循「1 个背景 1 个正文墨色 1 个强调色」的三色结构——这与顶层共享指令中「1 个主色 2 个中性色 至多 1 个强调色」的色彩纪律一致见 prompt-assemble.ts。配套的example用的是Sea Indigo套系其色值在 example.html 中直接落地为 CSS 变量式的类.canvas { background:#0a0e1a; color:#f5f5f7; }与.accent { color:#5ac8fa; }。布局自由度与「单一视觉重心」法则模板的核心自由度在这里但自由度不是无纪律版面池自由选每页根据内容性质自选布局文档给出的候选包括 cover / question / quote / image-text / 三列 / 五列 / 列表 / 数据卡 / 满版图。每页只允许 1 个视觉重心一句金句、一个数字、一张图三选一不要什么都强调。不许塞两段平等的文字真正需要并列的内容必须用 3 列等权重网格承载而不是并排两段话。这条「单重心」规则是自由排版 deck 最容易翻车的地方把它写进模板提示词等于给 Agent 一个可判定的排版验收标准。结合顶层指令「先把用户内容按语义切段每一段至少一个独立 slide」来看Agent 的工作流应是切分内容 → 为每段挑选版面 → 保证每页只有一个重心。字体系统中西文两套方案 mono 数据字体SKILL.md 对字体给出了明确的选配组合西文Inter Tightdisplay 标题Inter正文走 editorial 风时改用Source Serif Pro。中文Noto Sans SCsans 风或Noto Serif SCeditorial 风不混排 sans serif。monoJetBrains Mono专用于数据 / 时间戳。这套字体策略与顶层共享指令「中文优先 Noto Sans SC / Noto Serif SC英文 Inter / Manrope / SF Pro 风格」一致。在示例中example.html 的 Google Fonts 引入正是Inter TightInterNoto Sans SCJetBrains Mono四族并在 body 上设置font-family:Inter Tight,Noto Sans SC,system-ui,sans-serif另用.mono类声明JetBrains Mono——与规格逐字对应。设计细节红线SKILL.md 在「【设计细节】」一节划定了若干不可逾越的红线这些直接约束了生成结果的品质下限严禁 emoji 装饰用户内容里的 emoji 允许严禁多色彩虹accent 全程只用一个色。严禁套用 lucide / feather 等通用 SVG 图标库需要图标时自己写 inline SVG。加键盘 ← / → 切换 hash 同步角标固定右下№N/M页码左下 deck title。必须用用户的真实内容严禁 lorem ipsum。单文件 HTML通过 Tailwind CDN 引入样式不要外链图片。其中「单文件 Tailwind CDN 不外链图片」与顶层装配器要求prompt-assemble.ts以!DOCTYPE html开头、CDN 引入 Tailwind v3 Play 与 Google Fonts、优先 CSS/SVG 内联绘制完全同构「真实内容 / 严禁 lorem ipsum」也对应顶层「内容真实性」指令。从规格到成品example.html 与 example.md 逐段拆解同目录的 example.html 是该模板的预渲染预览示例frontmatter 中example_format: markdown、example_name: 1920 自由画布 · Sea Indigo它把一个 SKILL.md 规格反向翻译成了真实可运行的单文件 HTML是理解这套模板的最佳范本画布div classslide-frame canvas grain relative其中.slide-frame实际设为width:1280px; height:720px; transform:scale(0.78); transform-origin:top left——注意这是预览场景下的二次缩放1280×720 内再乘 0.78与 SKILL.md 规定的 1920×1080 逻辑画布 scale(0.7)并不矛盾预览 HTML 为了在 picker 里适配窗口把画布本身也做了等比缩减逻辑上仍是同一套 16:9 画布体系。调色.canvas与.accent直接落地 Sea Indigo 三色见上节并用.grain上的两层radial-gradient做出氛围光晕左下 accent 色 10% 透明 右上紫调 8% 透明。排版页内采用flex flex-col justify-between三段式——顶部 mono 小字 header№05 / 12页码角标、SEA INDIGO套系名、中部主视觉font-size:120px的 3xl 大字标题 text-[28px]的 sm 级副句、底部 mono footer画布规格、键盘提示KBD ← →、时间戳角标位置与 SKILL.md 的右下 №N/M、左下 deck title规格吻合。强调色的使用大字标题中「零」字用.accent着色「品味」一词用Source Serif Proitalic 的 serif 强调——这是 editorial 风在西文字体上的局部应用。配套的 example.md 只有 6 行是给该模板的样例输入一行标题、一行 tagline、一个核心问题。它展示了本模板最典型的输入形态——单句式的 hero question 内容与question 版面 3xl 大字 角标的输出形态形成输入输出对照。这套规格如何被执行SKILL.md 的注册与提示词装配机制deck-open-slide-canvas 之所以能作为模板工作是因为 html-anything 把每个 Skill 组织为一个文件夹并通过磁盘扫描加载见 next/src/lib/templates/loader.tssrc/lib/templates/skills/id/ SKILL.md — frontmatterid / scenario / tags… 提示词正文 example.md —可选样例输入内容 example.html —可选预渲染预览picker 内联展示具体执行链路如下注册零代码往skills/下新增一个文件夹即完成注册无需改动任何 TS 代码开发模式下缓存会被绕过next dev无需重启即可看到新 Skillloader.ts。元数据解析loader 用无依赖的小型 frontmatter 解析器读取---块支持字符串、整数与单行数组字面量tags: [...]并把example_id / example_name / example_format / example_tagline / example_desc / example_source_*组装为SkillExampleMetaloader.ts。API 暴露GET /api/templates返回全部 SkillMeta 列表picker 用且响应带Cache-Control: public, max-age5GET /api/templates/:id/example返回单个 Skill 的content html打包 JSON前端fetchTemplateExample()一次请求即可完成预览加载见 next/src/app/api/templates/route.ts 与 next/src/app/api/templates/[id]/example/route.ts。提示词装配真正驱动 Agent 生成时prompt-assemble.ts 的assemblePrompt()把SHARED_DESIGN_DIRECTIVES顶层通用设计指令与SKILL.md的正文 body 拼接再追加用户内容组成最终提示词。因此本模板的「硬性技术规格 / 调色板 / 布局自由度」等正文段落会原封不动地进入发给 Agent 的上下文作为生成约束。内容驱动数量覆盖顶层指令还规定「模板只定义可用版面 / 风格 / 配色 / 字体 / 组件库不定义 slide 数量输出数量完全由用户内容长度和信息结构决定」所以本模板的版面池是复用池而非页数上限——同一 question 版面可以反复承载不同章节内容。如何获得 / 扩展这类 Skill内置模板仓库已内置 70 套 Skill本模板即其一在应用内通过 picker推荐分组 /design场景筛选即可选用。新增模板复制本目录结构SKILL.md 可选example.md/example.html即可无需改动代码loader 的目录名即 Skill id需符合^[a-z0-9][a-z0-9-]*$loader.ts。Marketplace 安装用户技能包安装在~/.html-anything/skills/可被HTML_ANYTHING_USER_SKILLS_DIR环境变量覆盖见 next/src/lib/skills/paths.ts安装时会做 tar 头预检拒绝符号链接、..路径、超大解压体积见 next/src/lib/skills/install.ts并以pkg-owner__repo--originalId命名空间 id 与内置 Skill 合并进同一注册表。因此如果你在 GitHub 上维护一个含SKILL.md的仓库单技能放根目录或多技能放skills/id/目录即可被 html-anything 一键安装为模板。小结deck-open-slide-canvas展示了一种与版式锁死相反的模板设计哲学锁住画布、色彩、字体与重心纪律把版面自由交给 Agent。从 SKILL.md 的 1920×1080 画布、十档字号阶梯、四套三色配色到 example.html 对规格的逐条落地再到 loader / API / prompt-assemble 三层的注册与装配机制你可以完整看到一条模板规格 → 提示词约束 → 单文件 HTML 成品的生产链路。对想约束自己的 AI 编辑器生成自由排版 deck 的开发者而言这套规格本身即可直接复用作提示词对想为 html-anything 贡献新模板的开发者而言本模板的目录结构就是最小可复制的起点。赞分享AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载相关推荐Amaro与Node.js集成从零开始构建TypeScript开发环境的完整指南 Amaro与Node.js集成从零开始构建TypeScript开发环境的完整指南 想要在Node.js中无缝运行TypeScript代码而无需繁琐的构建AI 应用人工智能AI AgentAI 写作媒体生成HTML Anything「贵赞编辑墨水 Deck」模板深度解析5 套调色板 × 10 个版式用本地 AI Agent 生成杂志风 HTML PPTHTML Anything「贵赞编辑墨水 Deck」模板深度解析5 套调色板 × 10 个版式用本地 AI Agent 生成杂志风 HTML PPT 本文基AI 应用人工智能AI AgentAI 写作媒体生成JavaScript迷你项目集的安装与配置指南JavaScript迷你项目集的安装与配置指南 1. 项目基础介绍 本项目是一个集成了多个JavaScript迷你项目的开源仓库旨在为初学者提供实践和学习的平AI 应用人工智能AI AgentAI 写作媒体生成上一篇how-to-contribute-to-open-source告警机制设计及时响应开源项目异常情况的方法下一篇react-diagrams中的社区生态插件与扩展资源汇总创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考