html-anything prototype-web 技能实战：从 Markdown 示例到可点击的 SaaS 落地页原型-开发者社区

AI 应用
人工智能
AI Agent
AI 写作
媒体生成

【免费下载链接】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 仓库内prototype-web（Web 产品原型）技能为研究对象，逐层拆解其配套示例输入example.md、模板提示词SKILL.md与高保真预览example.html，并结合模板加载器、示例 API 与转换链路的源码实现，说明如何用一条 Markdown 文案驱动 AI 生成"明天就能上线"的 SaaS 落地页原型，以及如何把它改造成你自己的产品演示。

prototype-web是 html-anything 技能库（Skills）中面向设计场景的一枚"Web 产品原型"技能：它要求 Agent 输出一个包含导航、英雄区、特性区、CTA 的可点击功能性 Web 原型，适用于产品演示、融资 demo、上线前的落地页验证等场景。读完本文你将掌握：这枚技能的验收标准是什么、配套示例example.md为何以"Inkstack"这款虚构运营文档产品为素材、示例 HTML 是如何一帧一帧搭出来的，以及从选择模板到流式生成落地的完整调用链。

prototype-web 技能的位置与"三件套"文件结构

在 html-anything 仓库中，每个技能对应next/src/lib/templates/skills/下的一个文件夹，采用"一技能一目录"的布局。新增一个模板只需新增一个文件夹，无需改动任何 TypeScript 代码（见 loader.ts 顶部注释）。prototype-web目录下恰好构成完整的三件套：

SKILL.md —— 技能元数据（frontmatter）+ 提示词正文，是"灵魂"；
example.md —— 可选，随技能预置的示例输入（模拟用户要投放的内容）；
example.html —— 可选，预渲染的高保真预览页，供选择器内联展示。

这三者的读取由 loader.ts 完成：loadSkillFromDir依次读取目录下的SKILL.md、example.md、example.html（loader.ts），metaFromDir则只做元数据扫描；example.html是否存在决定选择器里是否出现"预览"能力（hasHtml，loader.ts）。

SKILL.md frontmatter 字段逐项解读

prototype-web的 frontmatter 是理解该技能在 UI 中如何被展示的第一手资料：

字段	取值	含义与去向
`name`	`prototype-web`	技能 id，也是目录名，必须通过`/^[a-z0-9][a-z0-9-]*$/`的合法 id 校验（loader.ts）
`zh_name`/`en_name`	`Web 产品原型`/`Web Prototype`	选择器中按 locale 展示的名称（见 template-picker.tsx 的`templateName`）
`emoji`	`🛠️`	选择器列表项中的图标
`description`	可点击的功能性 Web 原型，含导航、英雄区、特性区、CTA	列表项的描述文本（两行截断展示）
`category`	`prototype`	技能类别
`scenario`	`design`	场景键，驱动选择器顶部的场景筛选 chips；未知场景会落到末尾的 synthetic "other" 桶（scenarios.ts）
`aspect_hint`	`1440×900 桌面`	在按钮和列表项中以小字展示的"画幅/规格"提示
`tags`	`["prototype","landing","原型"]`	参与选择器搜索关键词匹配（`matchesQuery`会拼接 zhName/enName/description/aspectHint/category/scenario/tags 作为检索 haystack，template-picker.tsx）
`example_*`系列	见下	仅当目录下存在`example.{md,html}`时生效

example_*元数据描述随技能预置的示例：example_id: sample-prototype-inkstack、example_name: "Web 原型 · SaaS Landing"、example_format: markdown、example_tagline: "完整可点击的 SaaS 落地页"、example_desc: "Hero / Features / How / Voices / Pricing / Footer 一步到位"。这些字段经fmToMeta组装为SkillExampleMeta（loader.ts），供选择器显示 tagline、悬停缩略图和"载入示例"按钮使用。

example.md 在体系中的角色

example.md在这里不是"文章正文"，而是给 Agent 看的用户内容样例（sample input）。当用户在 TemplatePicker 中点击某技能的"预览"，前端调用fetchTemplateExample(id)（index.ts），由 example 路由一次性返回{ content, html }组合：content即example.md原文，html即example.html原文，前端将其直接loadSample进编辑器，避免两次往返请求（route.ts）。

也就是说：example.md是"素材"，example.html是"该素材在此技能约束下的理想成品"，两者拼在一起，既给 Agent 演示了输入形态，也给用户演示了输出形态。

SKILL.md 模板正文拆解：一个可点击 SaaS 落地页的验收标准

SKILL.md在 frontmatter 之后，是一段约 6 行的模板正文，定义了该技能对输出 HTML 的全部约束。逐条来看：

【模板: Web 产品原型】 - 输出一个完整的产品 landing page。 - Sections: Top Nav (logo + 导航 + CTA 按钮) → Hero (大标题 + 副标 + 双 CTA + 可视化占位) → Features (3-6 个特性卡) → How it works (步骤) → Social proof (logo wall / 评价) → Pricing (可选) → Footer。 - 使用现代 SaaS 设计趋势: 大字号、柔和渐变、glassmorphism 卡片、滚动到视图入场动画 (pure CSS 即可)。 - 响应式: 移动端单栏, 桌面多栏; 至少处理 `md:` 断点。 - 添加交互: nav 滚动变色; 特性卡 hover 浮起; FAQ 可手风琴展开 (用 `<details>`)。 - 这是高保真原型, 应该让人觉得"明天就能上线"。

可以提炼出六个硬性维度：

结构完整性：Top Nav → Hero → Features → How it works → Social proof → Pricing（可选）→ Footer，这是一条标准的 SaaS 落地页信息架构，顺序本身也是转化漏斗的体现；
视觉风格：大字号（text-6xl/text-7xl级别）、柔和渐变、glassmorphism（毛玻璃）、滚动入场动画，且明确要求"pure CSS 即可"——不需要引入动画库；
响应式：至少处理 Tailwind 的md:断点，移动端单栏、桌面多栏；
交互：三类具体交互——导航滚动变色、特性卡 hover 浮起、FAQ 手风琴（指定用原生<details>实现，零 JS）；
保真度："高保真原型，应该让人觉得'明天就能上线'"——这是对设计完成度的主观验收线；
内容驱动：模板正文只定义"可用版面 / 风格 / 配色 / 组件库"，不定义卡片、section 的数量。

第 6 点尤为重要。仓库在 shared.ts 中维护了一段每个技能都会被前置的共享设计指令SHARED_DESIGN_DIRECTIVES，其中"内容驱动数量"被标为最高优先级：输出的 section/card 数量完全由【用户内容】的实际长度和信息结构决定，模板里的"3-6 个特性卡"只视为短示例下的参考下限，长内容应远超该范围；推荐做法是把用户内容按语义切段，每段至少对应一个独立的 section/card。因此本例的example.html只是"短内容"下的一个下限示范，当你的真实内容更长时，Agent 被指令要求输出更多卡片与区块，而不是压缩信息。

example.md 全解析：一份 SaaS 运营文案的结构范本

example.md全文仅 22 行，但它是后续所有页面区块的内容源头，也是本文的核心骨架。完整内容如下：

# Inkstack — 让 AI 替你写运营文档 ## 定位 小团队的 AI 文档协作平台 ## 核心特性 - AI 起草: 输入大纲, 30 秒一份完整文档 - 团队协作: 实时多人编辑, 评论, 历史版本 - 一键发布: 公众号 / 知乎 / Notion 一键导出 - 隐私优先: 本地 agent 优先, 数据不离开你的设备 ## 用户评价 - "再也不用在编辑器之间复制粘贴了" — 张三, 内容总监 - "团队周报效率翻倍" — 李四, 产品经理 ## 价格 - 免费: 个人, 5 文档/月 - Pro: ¥39/月, 不限量, 团队协作 - Team: ¥99/人/月, 企业级权限 ## CTA 立即免费开始 · 无需信用卡

这份示例素材可以视为一个"最小可用的产品文案包"，五个小节与 SKILL.md 要求的页面区块几乎一一对应：

example.md 小节	对应的落地页区块	说明
`# Inkstack`标题 +`## 定位`	Hero（大标题 + 副标）	品牌名 + 一句话定位："小团队的 AI 文档协作平台"
`## 核心特性`（4 条）	Features 特性区	正好落在模板要求的 3-6 个特性卡范围内，4 个特性对应 4 张卡片
（隐含的流程信息）	How it works 步骤区	示例 HTML 中的"写大纲 → 选模板 → 按 ⌘+Enter"三步来自对产品使用流程的提炼
`## 用户评价`（2 条）	Social proof / Voices	两段带身份署名的用户证言
`## 价格`（3 档）	Pricing 价格区	免费 / Pro / Team 三档，天然映射三张价格卡
`## CTA`	CTA + Footer	"立即免费开始 · 无需信用卡"直接复用为 Hero 与文末的主按钮文案

需要特别澄清的是：Inkstack 是示例素材中的虚构产品，其中的"800+ 团队""¥39/月""张三/李四"等数据均为演示文案（对应 SKILL.md 的example_name: "Web 原型 · SaaS Landing"），并非 html-anything 项目自身的真实运营数据。shared.ts的共享指令要求"必须使用用户提供的真实数据，不要编造、不要 lorem ipsum"——这里的"真实"指的是以用户输入为准，而示例只是预置的教学素材。

这份素材还有一个值得注意的点：它结构极薄（每个特性只有一行）、没有任何多余装饰，恰好考验 Agent 在"内容驱动数量"规则下的补全能力——HTML 成品里 Hero 的大标题文案、步骤区、副标等，都是 Agent 基于这份大纲做的合理扩展，而不是照抄原文。

高保真落地：example.html 的工程拆解

example.html是一个完全自包含的单文件 HTML（约 233 行），双击即可打开，技术栈为Tailwind CSS v3 Play CDN + 两个 Google Fonts + 少量手写 CSS 工具类，零 JavaScript 依赖。这与 shared.ts 的硬性要求完全一致：<head>中通过 CDN 引入 Tailwind v3 Play 与所需字体、不引用外部图片、脚本仅经 jsdelivr 引入、以<!DOCTYPE html>开头并以</html>结束。

自定义工具类：四个关键 CSS 原语

<style>块定义了四个全页复用的工具类（example.html），是理解整页视觉系统的钥匙：

.accent { color:#c96442; } /* 主强调色（陶土橙） */ .glass { background:rgba(255,255,255,0.7); backdrop-filter:blur(14px); border:1px solid rgba(21,20,15,0.06); } /* 毛玻璃 */ .grad-text { background:linear-gradient(120deg,#15140f 0%,#c96442 60%,#e9b94a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* 渐变文字 */ .gradient-bg { background:radial-gradient(ellipse at 20% 0%, rgba(201,100,66,0.18), transparent 55%), radial-gradient(ellipse at 80% 60%, rgba(233,185,74,0.15), transparent 55%); } /* 双径向渐变氛围底 */ .card-rise { transition:transform 0.25s ease, box-shadow 0.25s ease; } .card-rise:hover { transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(21,20,15,0.2); } /* 卡片 hover 浮起 */

配色上严格遵循共享指令的"1 个主色 + 2 个中性色 + 至多 1 个强调色"：主色#c96442（陶土橙），强调色#e9b94a（金黄），中性色#15140f（近黑）与#5a564e（暖灰），背景#fafaf7——没有使用纯黑#000/纯白#fff。字体为 Inter Tight（英文）+ Noto Sans SC（中文），符合"中文优先 Noto Sans SC"的排版准则。

区块逐帧拆解

Nav（sticky 毛玻璃导航）：sticky top-0 z-30 glass固定于视口顶部（example.html），左侧 logo（渐变色块 + 品牌名），中部hidden md:flex的锚点导航（特性/原理/用户/价格），右侧"登录"链接与主 CTA 按钮。md:断点在这里的第一处应用：窄屏下隐藏中间导航，只保留 logo 与 CTA。

Hero（英雄区）：gradient-bg pt-24 pb-32的渐变氛围底上依次是：胶囊形版本徽章（v1.0 · 已为 800+ 团队节省 12,000+ 小时）、超大标题（text-6xl md:text-7xl，其中"AI"使用grad-text渐变文字、数字"那 80%"用衬线斜体强调）、副标段落、双 CTA（主按钮bg-[#c96442]+ 次级"看 90 秒 demo"描边按钮）、以及一个"可视化占位"——深色aspect-video圆角块内衬网格线，中央是播放图标与"点击播放"提示（example.html）。这一整块正是 SKILL.md 中"Hero (大标题 + 副标 + 双 CTA + 可视化占位)"的完整落地。

Features（特性区）：grid md:grid-cols-2 lg:grid-cols-4 gap-5的响应式网格（example.html），在md断点从单栏变为两栏、lg断点变为四栏。四个特性卡分别承载 example.md 的四条特性，每张卡由card-rise装饰符号、加粗标题、描述文字组成；card-rise:hover提供 hover 浮起效果——这正对 SKILL.md 的"特性卡 hover 浮起"交互要求。

How it works（三步原理）：浅色背景bg-[#f4f1ec]的独立区块（example.html），用衬线斜体的超大数字 01/02/03 串联"写大纲 → 选模板 → 按 ⌘+Enter"三步，每步配一句说明。这里的步骤文案是对 example.md 隐含工作流的补全。

Voices（用户评价）：grid md:grid-cols-2 gap-5两列评价卡（example.html），每卡含引导引号、评价正文、头像（渐变圆）与署名（姓名 + 身份），对应 example.md 的两条用户评价，且把"张三，内容总监"扩展为"张三 · 内容总监 · 某新消费品牌"。

Pricing（价格区）：grid md:grid-cols-3 gap-5三张价格卡（example.html），严格映射 example.md 的三档价格。中档 Pro 卡使用深色底bg-[#15140f] text-white+ring-2 ring-[#c96442]/30高亮，顶部悬浮"推荐"徽章（absolute -top-3），这是典型的 SaaS 定价页"锚定中档"设计。

CTA + Footer：全宽居中 CTA 区（大标题"少写文档，多做事" + 主按钮），随后是含隐私/条款/联系我们链接的页脚（example.html），形成完整的页面收束。

与 SKILL.md 约束的对照

SKILL.md 要求	example.html 实现
完整 landing 结构	Nav / Hero / Features / How / Voices / Pricing / CTA / Footer 全部齐备
大字号、柔和渐变、glassmorphism	`text-6xl/7xl`、`gradient-bg`/`grad-text`、`.glass`backdrop-filter
至少处理`md:`断点	Nav、Features、Voices、Pricing 均使用`md:`/`lg:`栅格切换
特性卡 hover 浮起	`.card-rise:hover`transform + shadow
nav 滚动变色	以`sticky`+ 半透明毛玻璃替代（变色逻辑需 JS，此处为静态原型）
FAQ 手风琴`<details>`	示例未包含 FAQ 区块（模板允许可选区块，正文中 FAQ 为可选交互点）

需要如实说明：SKILL.md 中提到的"nav 滚动变色"与"FAQ 手风琴"在example.html中并未全部落地——前者在纯静态单文件里通常需要少量 JS（模板允许"pure CSS 即可"的部分只针对入场动画），后者则因为 example.md 素材本身没有 FAQ 内容而自然缺席。这恰好说明示例是下限示范：当你把真实内容喂给 Agent 时，模板正文会要求它补全这些可选交互与区块。

在 html-anything 中的完整使用链路

prototype-web不是孤立的 HTML 文件，它在 html-anything 中被一整套 API 与客户端组件串起来使用：

元数据下发：GET /api/templates调用listSkills()返回全部技能元数据（不含提示词正文，避免把 prompt 文本下发到浏览器），并带Cache-Control: public, max-age=5做短暂缓存（route.ts）。
选择与搜索：TemplatePicker 用useTemplates()消费该列表，支持按场景筛选 chips（design场景即"设计/探索"桶）、关键词搜索、悬停 260ms 后懒加载example.html并以iframe sandbox="allow-scripts allow-same-origin"+scale(0.4375)缩放展示缩略图（template-picker.tsx）。
载入示例：点击"预览"，onPreview调fetchTemplateExample("prototype-web")，一次拿到content+html并loadSample进编辑器——此时你看到的就是本文拆解的 Inkstack 页面。
重新生成/改造：把编辑器里的内容换成你自己的文案，⌘+Enter 后/api/convert接管：loadSkill(templateId)取出prototype-web的正文，assemblePrompt({ body, content, format })将其与SHARED_DESIGN_DIRECTIVES、用户内容拼接成完整 prompt（shared.ts），再经invokeAgent调用本地 Agent CLI，以 SSE 流式把 HTML 逐段吐回编辑器（route.ts）。若编辑器里已有旧 HTML，则会走buildEditPrompt的最小化差异编辑路径，只改文字、保留设计（route.ts）。
导出：生成结果可继续走仓库的导出体系（HTML / PNG / WeChat / X / Zhihu 等）。

这条链路对prototype-web的实战意义是：你不需要会写 HTML，只要把 example.md 那种"定位/特性/评价/价格/CTA"的结构化文案准备齐，就能得到一份可直接演示的高保真原型；如果对生成结果不满意，还能在原 HTML 基础上做增量编辑，防止每次重生成都"创意漂移"。

实战建议：把 example.md 改造成你自己的原型输入

要把这份示例变成你自己的产品原型，最直接的做法是保留它的五段结构、替换其中的业务内容：

定位：一句话说清"为谁解决什么问题"，会直接成为 Hero 副标甚至标题；
核心特性：3-6 条为宜（模板参考下限），每条一行、动词开头，对应特性卡数量；内容更长时可预期 Agent 扩展出更多卡片；
用户评价：2 条以上带身份署名的证言，构成 Social proof 区；
价格：如无定价则删除该节（模板声明 Pricing 可选），Agent 会自然跳过；
CTA：一个明确的行动指令，会同时出现在 Hero 与文末。

同时记住三条来自源码的硬约束：内容必须是真实数据（共享指令禁止 lorem ipsum 与编造）；数量由内容长度驱动（内容长时不应得到 4-6 张卡的压缩结果）；单文件自包含（不要期望 Agent 引用外部图片或依赖本地资源）。对于导航滚动变色、FAQ 手风琴这类模板可选交互，如果示例输出里没有，可以在生成后用<details>手写补齐，或通过再次编辑让 Agent 增补。

结语

从 22 行的example.md到 233 行的高保真example.html，prototype-web完整演示了 html-anything 的"内容 → 原型"工作范式：SKILL.md 定义验收标准，example.md 定义输入形态，example.html 定义输出下限，loader 与 API 负责把它们以零代码的方式接入选择器，/api/convert则负责在用户自己的内容上复现同样的设计质量。对产品经理、设计师与独立开发者而言，这枚技能提供了一条把"文案大纲"变成"可点击原型"的捷径——而它的源码，就摆在这篇指南引用的那几个文件里，随时可以继续深挖。