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点击查看免费下载导读本文围绕 html-anything 内置 Skill「doc-kami-parchmentKami 羊皮纸文档」展开从模板的元数据与意图定位出发逐项拆解其暖羊皮纸画布 墨蓝单色 accent 单一衬线字体的硬性视觉签名完整列举 One-Pager、Long Doc、Letter、Portfolio、Resume、Slides、Equity Report、Changelog 八种可选文档类型的版面骨架并结合仓库源码next/src/lib/templates/loader.ts、next/src/app/api/convert/route.ts说明该模板在本地 AI Agent 生成流程中的真实调用链与可运行配置。读完本文你将能直接在 html-anything 中选择该模板生成符合被排过版的纸质感的编辑文档也能仿照example.html自行复刻这份样式。一、模板是什么一份可被 Agent 执行的排印规范doc-kami-parchment是 html-anything 内置 Skill 库中的一个文档类模板位于仓库的 next/src/lib/templates/skills/doc-kami-parchment/一个 Skill 目录包含三份文件SKILL.md—— 模板的 frontmatter 元数据 给 Agent 的完整指令正文设计签名、文档类型清单、设计准则example.md—— 一份可直接喂给 Agent 的示例输入内容example.html—— 同内容的预渲染预览稿用于模板选择器内联展示。这一一个 Skill 一个目录的约定不是该模板独有的而是整个模板注册机制的通用约定。从 next/src/lib/templates/loader.ts 的注释可以看到模板注册完全由磁盘目录驱动新增模板只需新增目录无需改动 TS 代码API 路由会自动重扫磁盘客户端重新拉取/api/templates即可。模板 frontmatter 中给出的定位信息如下元数据字段值含义namedoc-kami-parchmentSkill 唯一 IDzh_name/en_nameKami 羊皮纸文档 / Kami Parchment Document选择器中的中英文名称categorydoc文档类模板scenariopersonal归属场景选择器过滤标签之一aspect_hintA4 / Letter 长页建议画布长宽比recommended3数字越小在推荐组内越靠前tagskami、parchment、serif、editorial、report、letter、one-pager检索关键词其中scenario字段会被 next/src/lib/templates/scenarios.ts 的场景词表消费已知场景键映射到 i18n 字典标签未知键则回退为 raw id 展示。recommended字段则控制模板是否进入选择器顶部的推荐分组。二、意图与定位写得像被排过版的纸SKILL.md的意图描述非常明确这是一个严肃排版文档模板适用面包括 one-pager、长报告、信函、简历、财报、changelog、portfolio。它明确强调两条设计立场是文档不是 dashboard不堆 KPI 卡片、不用 emoji 图标、不要 hero 渐变是纸不是网页画布永远不用纯白。配对的示例内容 example.md 用一份虚构的 Open Design Studio — Issue №26 编辑信纸示范了这份立场暖羊皮纸画布、单一墨蓝 accent、单一衬线声部、无阴影无闪烁一页之内完成 logotype、大标题、lede、三列要点和底脚 metadata 的完整排印。该模板的设计灵感来源在 frontmatter 中标注为example_source_url: https://github.com/tw93/kami。三、硬性视觉签名五条不许改的排印铁律模板对 Agent 的输出有不许改级别的约束这正是它能稳定产出统一风格的关键。这五条签名的每一条在example.html中都能找到一一对应的实现证据1. 画布暖羊皮纸#f5f4ed纯白只是屏幕的 affordance不是出版惯例——纸有温度字有温度。画布固定为#f5f4ed次级背景#efeee5。在 example.html 中body { background: #f5f4ed; }直接落地标签块的背景则使用#efeee5。2. 墨色近黑暖灰主文字#1f1d18近黑暖灰不用纯黑#000次文字#6b665b。示例 HTML 的页眉、页脚、元信息、正文注释统一使用这两档暖灰。3. 唯一色彩墨蓝#1B365D所有 accent——链接、tag 描边、重点数字、引用左 rule——只允许这一个颜色严禁多色。示例中标题的斜体词intelligence、三列编号01 · Pillar、引用块的左 borderborder-color:#1B365D全部落在这一个色上。4. 字体一种语言一种衬线全文不混用英文CharterfallbackSource Serif Pro、Iowan Old Style中文TsangerJinKai02 W04fallbackNoto Serif SC日文YuMinchofallbackNoto Serif JPBody 400Heading 500禁用 700/800/900 字重。示例 HTML 通过 Google Fonts 引入Source Serif Pro与Noto Serif SC并将衬线族设为font-family: Source Serif Pro, Noto Serif SC, Georgia, serif同时以 IBM Plex Mono 作为等宽元信息字体。5. 行高与细节禁令标题行高 1.1–1.3紧凑正文 1.4–1.45阅读型正文 1.5–1.55严禁 drop-shadow / blur / 圆角 ≥ 8px / 渐变 / 霓虹色 / rgba改用 solid hex因为 WeasyPrint 这类 PDF 渲染引擎对 rgba 支持不佳。细节上tag 用 solid hex 背景方块单线几何 icon边缘使用 1px hairline#d4d1c5rule 且长度受控不到边。示例页眉与页脚的分隔线即border-color: #d4d1c5的 1px 描边。四、八种可选文档类型按用户内容判断版面模板不锁死版面数量而是要求 Agent按用户内容判断选用哪种骨架。八种类型及其版面结构如下类型版面骨架One-Pager顶部 logotypeCharter italic 标题 lede 3 列要点 底脚 metadataLong Doc封面页大标题副标作者日期→ 目录kicker页码→ 章节folio 顶角section rulebody→ 注释脚注 文末 colophonLetter抬头地址 日期 收件人 左对齐正文段间 1.5em 署名 签名占位线Portfolio项目 hero大标题sub 1 张全幅图CSS 块绘占位 项目描述 角色/时间/stack 元数据行Resume顶部大字姓名 tagline 一行 contact row experience公司/时间/职位/bullets skills educationSlideskeynote 风页数由内容决定短内容 6 页起步长内容应更多每页满铺羊皮纸大标题 lede 角标页码Equity Report公司名 ticker Q×年份 key metrics 行revenue/margin/yoy 正文分析 单色 SVG 折线图ChangelogCharter italic 大字版本号 日期 改动列表Added/Changed/Fixed单 rule 分隔需要说明的是页数/数量由用户内容的实际长度与信息结构决定模板正文中的数字只是短示例下的参考下限。这一原则与模板系统共用的全局设计指令一致——next/src/lib/templates/shared.ts 明确要求输出数量完全由用户内容决定必须完整覆盖每一个要点、章节、数据组宁可多页也不把多个独立要点硬塞进一页。五、生成流程模板如何进入 Agent 的提示词doc-kami-parchment不是静态 HTML 仓库而是一份排印指令真正执行排印的是本地 AI Agent。生成链路在 next/src/app/api/convert/route.ts 中非常清晰前端向/api/convertPOST{ agent, templateId, content, format, model, cwd, binOverride }服务端用loadSkill(templateId)从磁盘加载 Skill读取SKILL.md中的 frontmatter 与指令正文调用 shared.ts 的assemblePrompt将全局设计指令 模板指令正文 输入格式 用户内容拼装成完整提示词交给invokeAgent即本地安装的 Claude Code / Cursor / Codex 等 CLI流式生成结果以 SSEtext/event-stream流式返回前端。全局设计指令SHARED_DESIGN_DIRECTIVES同样约束着 Agent 的技术输出方式禁止使用 Write/Edit/Bash 等文件工具HTML 必须作为回复正文流式输出文档以!DOCTYPE html开头、/html结尾通过 CDN 引入 Tailwind v3 Play 与所需 Google Fonts不引用外部图片 URL优先 CSS/SVG 内联绘制输出纯 HTML不加 markdown 代码围栏。这些约束与 Kami 模板单文件 HTML、Tailwind CDN、占位用 paper-tint 色块 1px ink 描边的设计准则完全同构。模板选择器侧的消费路径同样值得注意next/src/app/api/templates/route.ts 返回全部 Skill 元数据列表不含指令正文避免把提示词文本下发到浏览器next/src/app/api/templates/[id]/example/route.ts 则按需返回example.md与example.html让选择器的 Preview 一次请求拿到内容与渲染稿。六、从示例到产出一份可复刻的 one-pager 参考实现example.html约 84 行是理解整套签名的最小可运行参考其版面结构自上而下为顶部 folio rule三列等宽小字KAMI · Open Design / Vol. 01 · Issue №26 · MMXXVI / Apache-2.01px hairline 下边框kicker 行Studio Lettersolid 色块 tag背景#efeee5、文字#1B365D 地理坐标小字hero 标题clamp(48px, 7vw, 96px)响应式大字号line-height: 1.05font-weight: 500其中关键斜体词以墨蓝着色lede20px 正文最大宽 680px近黑暖灰三列要点grid-cols-3顶部 1px rule 分隔每列含墨蓝编号01 · Pillar 衬线小标题 正文pull quote左侧 2px 墨蓝 border斜体衬线大字colophon 底脚与页眉同构的三列小字1px 顶部分隔线。若想自行复刻这份样式核心 CSS 只有四处画布与墨色background:#f5f4ed; color:#1f1d18、墨蓝 accent#1B365D、衬线字体栈Source Serif Pro, Noto Serif SC, Georgia, serif与 hairline rule#d4d1c5。把同样的设计语言套用到 Long Doc 的目录/章节或 Resume 的 experience 区块时只需保持这四处签名不变即可获得一致的被排过版的纸质感。七、使用方式与适用前提在 html-anything 中启用该模板只需三步进入模板选择器在 doc 分类或直接搜索kami/parchment/serif标签中找到Kami 羊皮纸文档选择它后在转换输入框中粘贴你的内容Markdown/纯文本均可也可先用example.md试跑点击生成由本地 Agent 按模板指令输出单文件 HTML随后可预览、导出或一键发布。需要说明的适用前提该模板不内置字体文件Charter、Source Serif Pro、Noto Serif SC等需通过 Google Fonts CDN 加载中文字体体积较大离线或内网环境请预先自托管模板指令面向本地已配置 AI Agent CLI的运行环境Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider 等无需 API key若以纯静态方式使用仅能获得example.html这份固定样例不会获得内容驱动的动态排版。八、总结doc-kami-parchment是 html-anything 模板体系中编辑排印风格的代表暖羊皮纸画布、墨蓝单色 accent、单一衬线声部与 hairline 细节四条铁律构成了它的全部视觉签名而 One-Pager 到 Changelog 的八种版面骨架则让同一套签名可以覆盖信函、简历、财报、长报告等不同内容。通过 SKILL.md 的指令正文、example.md 的示例输入与 example.html 的渲染参考再加上loader.ts→shared.ts→/api/convert的完整调用链读者既可以开箱即用地生成也能完全复刻这套纸感排印系统到自己的文档项目中去。赞分享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点击查看免费下载相关推荐html-anything 的 Kami 羊皮纸文档模板用「硬性视觉签名」约束 Agent 输出编辑级排印的单文件 HTMLhtml anything 的 Kami 羊皮纸文档模板用「硬性视觉签名」约束 Agent 输出编辑级排印的单文件 HTML 本文围绕 html anythiAI 应用人工智能AI AgentAI 写作媒体生成Kami 排版技能实战指南用 kami-skill.md 把简历、白皮书、落地页与演示文稿做成专业文档Kami 排版技能实战指南用 kami skill.md 把简历、白皮书、落地页与演示文稿做成专业文档 「Good content deserves goodAI 技能AI 插件MCP 服务Kami Mermaid 图表流水线把 Mermaid 文本变成羊皮纸风格静态 SVG 的完整方案Kami Mermaid 图表流水线把 Mermaid 文本变成羊皮纸风格静态 SVG 的完整方案 导读 本文讲解 Kami 项目中基于 Mermaid 的图AI 技能AI 插件MCP 服务上一篇Rack认证授权终极指南Basic与Abstract Handler安全实现下一篇Signpost核心概念指南OAuthConsumer与OAuthProvider全景解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考