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 开源仓库内置的docs-page模板技能展开剖析其SKILL.md定义的“侧导航 正文 右 TOC”三栏文档页设计规范并结合仓库源码说明技能注册、Prompt 组装与示例渲染的完整调用链。读完本文你将掌握 docs-page 技能的完整元数据、布局与设计细节并能将其复用到自己的 API / 教程文档生成场景。一、docs-page仓库 75 个模板技能中的文档页专属模板在 html-anything 中每个内置模板Skill都是一个独立文件夹位于 next/src/lib/templates/skills/ 下文件夹内由SKILL.md必选、example.md可选与example.html可选组成。docs-page正是其中之一其核心定义文件是 next/src/lib/templates/skills/docs-page/SKILL.md。该文件的 YAML frontmatter 完整记录了技能的注册元数据字段值含义namedocs-page技能标识符即文件夹名也作为templateId传入转换接口zh_name技术文档页中文展示名en_nameDocs Page英文展示名emoji选择器中的图标description三栏文档页: 侧导航 正文 右 TOC一句话摘要展示在模板选择器中categorydoc分类归属scenarioengineering场景分类对应工程类aspect_hint桌面 1440画布比例提示面向 1440px 桌面宽屏tags[docs, api, tutorial, guide]检索与过滤标签从源码看这套 frontmatter 由 next/src/lib/templates/loader.ts 中的parseFrontmatter函数解析支持字符串、整数与[a, b]形式的单行数组字面量再经fmToMeta映射为SkillMeta最终通过 next/src/app/api/templates/route.ts 的GET /api/templates以{ templates: SkillMeta[] }形式返回给前端选择器。scenario: engineering对应 next/src/lib/templates/scenarios.ts 中的SCENARIO_KEYS之一会在模板选择器中以“工程”标签分组展示。二、设计意图API / 教程文档单页长读体验优先SKILL.md正文第一部分明确了该模板的意图【意图】API / 教程文档单页, 长读体验优先。这是 docs-page 区别于 deck、poster、card 等其他技能的根本出发点它不为短促的视觉冲击服务而是为持续数分钟到数十分钟的深度阅读设计。因此整个 Prompt 的约束都围绕“信息可扫读、结构可导航、代码可复制”三个目标展开最终由 Agent 生成一份自包含的单文件 HTML。需要强调的是docs-page 只约束版式、风格与组件不约束章节数量。仓库内置的全局设计指令见下文第五节明确要求内容数量完全由用户输入的实际长度决定——写 12k 字符的文档内容时只输出 4-6 个章节是严重错误。换言之长文档就该长页输出页面高度随内容增长这正是“长读体验优先”的落地方式。三、布局骨架三栏 Grid 与两个 sticky 面板SKILL.md定义了四个布局区域Inline-start nav侧导航左侧栏目按分组列出文档章节支持 sticky 吸顶Article body正文中间主列承载代码块、callout、表格等富文档元素Inline-end TOC右侧目录粘性定位支持 scroll-spy 滚动高亮顶栏搜索框 版本切换 主题切换。仓库自带的可运行示例 next/src/lib/templates/skills/docs-page/example.html 提供了这套骨架的最小实现。其核心是grid-template-columns: 240px minmax(0, 1fr) 220px的三栏布局并带两级响应式降级.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 0; min-height: calc(100vh - 50px); } media (max-width: 1024px) { .layout { grid-template-columns: 220px 1fr; } .toc { display: none; } } media (max-width: 720px) { .layout { grid-template-columns: 1fr; } .sidebar { display: none; } }在1024px 以下隐藏右栏 TOC保留侧导航 正文在720px 以下隐藏侧导航退化为单列纯阅读模式。侧导航在示例中用.sidebar.group-label实现分组标题如 “Getting started”“Sync engine”“CLI”当前章节通过.active类高亮background: var(--accent); color: white并设置overflow-y: auto让分组菜单自身可滚动。右侧 TOC 使用.toc a.active标注当前阅读位置——这正是SKILL.md中 “sticky, scroll-spy” 的视觉呈现。四、顶栏与文档正文的关键设计细节SKILL.md的【设计细节】是整份模板的技术核心共两条4.1 代码块圆角 dark 语言标签 复制按钮代码块是文档页出现频率最高的元素docs-page 要求其具备四个特征圆角示例中为border-radius: 8pxdark 深色背景与正文浅色背景形成强对比示例用var(--code-bg)深色面板承载pre code语言标签在代码块左上角标注语言名如bash/python复制按钮右上角提供一键复制降低读者手动选取代码的成本。示例 HTML 中的实现要点是pre设置overflow-x: auto保证长行可横向滚动pre code清除继承背景避免双重底色。Agent 按此规范输出代码块时还需要为每个块标注正确的语言类名以便前端或阅读器渲染语法高亮。4.2 calloutinfo / warn / danger 三色文档中需要区分提示等级的内容统一用 callout 呈现SKILL.md规定三色体系info普通补充说明示例中label为 “Note”左边框使用主题色warn警告提醒可能踩坑的操作danger危险标注会导致数据丢失或破坏性后果的操作。示例中的 CSS 实现为白底、1px边框、左侧3px主题色竖条border-left: 3px solid var(--accent)、圆角8px内部用小号大写字母标签区分类型.callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin: 20px 0; font-size: 14px; } .callout .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 4px; }正文区还保留了文档页常见的面包屑.crumbs如Docs › Getting started › Quickstart、引导段.lede与底部翻页器.pagerPrevious / Next 链接——这些虽未逐条写进SKILL.md但出现在示例实现中是文档页长读体验的完整组成部分。五、从 SKILL.md 到成品Prompt 组装与渲染链路docs-page 的SKILL.md正文是一段面向 Agent 的中文指令但它并不会被直接发给模型。仓库中组装最终 Prompt 的规范化流程如下读取技能next/src/app/api/convert/route.ts 的POST /api/convert接收{ agent, templateId, content, format }通过loadSkill(templateId)从磁盘读取SKILL.md解析出 frontmatter 与正文 body拼接全局指令assemblePrompt({ body, content, format })把技能的 body 包裹进一份全局共享设计指令中。全局指令定义在 next/src/lib/templates/shared.tsCLI 侧的同构版本见 cli/src/prompt-assemble.ts包含内容驱动数量、禁止使用文件系统工具、纯 HTML 流式输出、CDN 引入 Tailwind 与字体、1 主色 2 中性色 至多 1 强调色、8px 基线网格、对比度 ≥ 4.5 等硬性要求流式返回invokeAgent调用本地 CLI AgentClaude Code / Cursor / Codex / Gemini 等生成 HTML/api/convert以 SSEtext/event-stream流式转发HTML 提取next/src/lib/extract-html.ts 的extractHtml负责从 Agent 可能夹杂解释性文字的回复中剥离出!DOCTYPE html ... /html完整文档previewHtml则在流式过程中补全闭合标签以便 iframe 增量渲染。也就是说docs-page 的SKILL.md正文只需定义“长什么样、有哪些组件、什么配色气质”其余技术红线由SHARED_DESIGN_DIRECTIVES统一兜底——这与仓库 next/src/lib/templates/index.ts 中 “Adding a new template adding a new folder with SKILL.md” 的扩展模型完全一致新增技能无需改动任何 TS 代码。六、示例内容与预览机制docs-page 的文件夹结构如下next/src/lib/templates/skills/docs-page/ ├── SKILL.md # 技能元数据 Prompt 正文 └── example.html # 预渲染示例本技能无 example.md与部分技能同时附带example.md示例输入内容不同docs-page 仅附带example.html演示了一个虚构的 “Filebase docs” Quickstart 页面包含顶栏搜索placeholder 为Search · ⌘K、三组侧导航、带语言标签和复制按钮的代码块、Note 型 callout、四段式 TOC 与底部 pager。该示例通过 next/src/app/api/templates/[id]/example/route.ts 的GET /api/templates/docs-page/example暴露返回{ id, name, templateId, format, tagline, desc, source, content, html }的 JSON 包前端可直接注入loadSample()用于模板选择器的 “Preview” 预览loader.ts中的skillHasPreview则通过检查example.html是否存在决定选择器是否显示预览入口。七、实战建议如何把 docs-page 用于自己的文档要在 html-anything 中生成技术文档页实际操作路径是在模板选择器或直接以docs-page作为templateId选中“技术文档页”技能把 API 参考、教程正文等原始内容粘贴进编辑器支持 Markdown、纯文本等格式format字段会原样传给assemblePrompt标注输入格式点击转换等待 Agent 流式输出前端自动完成 HTML 提取、沙箱预览与导出HTML / PNG / 各平台一键分发。在 AI 提示词层面你也可以直接复用SKILL.md的正文结构——只要在给模型的指令中显式列出三栏布局、sticky 行为、代码块四要素与 callout 三色就能在其他对话式 Agent 中复现同款文档页。建议结合仓库中的示例文件对照阅读SKILL.md 原文 定义了“做什么”example.html 展示了“长什么样”两者结合即是完整的可执行规范。赞分享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点击查看免费下载相关推荐专业级Windows系统优化工具WinUtil一站式自动化解决方案专业级Windows系统优化工具WinUtil一站式自动化解决方案 Windows系统管理长期以来都是技术爱好者和系统管理员面临的挑战——繁琐的软件安装、复杂AI 应用人工智能AI AgentAI 写作媒体生成html-anything 中的 prototype-web 技能用 Agent 一键生成可点击的 SaaS 产品落地页原型html anything 中的 prototype web 技能用 Agent 一键生成可点击的 SaaS 产品落地页原型 prototype web 是AI 应用人工智能AI AgentAI 写作媒体生成html-anything 的 pm-spec Skill用一句意图生成一页式 PRD / Product Spec 单页 HTMLhtml anything 的 pm spec Skill用一句意图生成一页式 PRD / Product Spec 单页 HTML 导读 本文以 htmlAI 应用人工智能AI AgentAI 写作媒体生成上一篇解决GPT4All-Chat常见问题模型下载失败、对话卡顿终极方案下一篇Karabiner-Elements 中的 Duktape 内存压力测试分配器alloc-torture 的写后擦除与红区越界检测机制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考