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 仓库内prototype-webWeb 产品原型技能为研究对象逐层拆解其配套示例输入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.htmlloader.tsmetaFromDir则只做元数据扫描example.html是否存在决定选择器里是否出现预览能力hasHtmlloader.ts。SKILL.md frontmatter 字段逐项解读prototype-web的 frontmatter 是理解该技能在 UI 中如何被展示的第一手资料字段取值含义与去向nameprototype-web技能 id也是目录名必须通过/^[a-z0-9][a-z0-9-]*$/的合法 id 校验loader.tszh_name/en_nameWeb 产品原型/Web Prototype选择器中按 locale 展示的名称见 template-picker.tsx 的templateNameemoji️选择器列表项中的图标description可点击的功能性 Web 原型含导航、英雄区、特性区、CTA列表项的描述文本两行截断展示categoryprototype技能类别scenariodesign场景键驱动选择器顶部的场景筛选 chips未知场景会落到末尾的 synthetic other 桶scenarios.tsaspect_hint1440×900 桌面在按钮和列表项中以小字展示的画幅/规格提示tags[prototype,landing,原型]参与选择器搜索关键词匹配matchesQuery会拼接 zhName/enName/description/aspectHint/category/scenario/tags 作为检索 haystacktemplate-picker.tsxexample_*系列见下仅当目录下存在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组装为SkillExampleMetaloader.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 三档天然映射三张价格卡## CTACTA 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的排版准则。区块逐帧拆解Navsticky 毛玻璃导航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-whitering-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 全部齐备大字号、柔和渐变、glassmorphismtext-6xl/7xl、gradient-bg/grad-text、.glassbackdrop-filter至少处理md:断点Nav、Features、Voices、Pricing 均使用md:/lg:栅格切换特性卡 hover 浮起.card-rise:hovertransform shadownav 滚动变色以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-age5做短暂缓存route.ts。选择与搜索TemplatePicker 用useTemplates()消费该列表支持按场景筛选 chipsdesign场景即设计/探索桶、关键词搜索、悬停 260ms 后懒加载example.html并以iframe sandboxallow-scripts allow-same-originscale(0.4375)缩放展示缩略图template-picker.tsx。载入示例点击预览onPreview调fetchTemplateExample(prototype-web)一次拿到contenthtml并loadSample进编辑器——此时你看到的就是本文拆解的 Inkstack 页面。重新生成/改造把编辑器里的内容换成你自己的文案⌘Enter 后/api/convert接管loadSkill(templateId)取出prototype-web的正文assemblePrompt({ body, content, format })将其与SHARED_DESIGN_DIRECTIVES、用户内容拼接成完整 promptshared.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.htmlprototype-web完整演示了 html-anything 的内容 → 原型工作范式SKILL.md 定义验收标准example.md 定义输入形态example.html 定义输出下限loader 与 API 负责把它们以零代码的方式接入选择器/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 中的 prototype-web 技能用 Agent 一键生成可点击的 SaaS 产品落地页原型html anything 中的 prototype web 技能用 Agent 一键生成可点击的 SaaS 产品落地页原型 prototype web 是AI 应用人工智能AI AgentAI 写作媒体生成html-anything SaaS Landing 模板深度解析从 SKILL.md 到单文件落地页的生成链路html anything SaaS Landing 模板深度解析从 SKILL.md 到单文件落地页的生成链路 本文聚焦 html anything 开源仓AI 应用人工智能AI AgentAI 写作媒体生成Windows热键冲突终极解决方案3分钟定位热键小偷的完整指南Windows热键冲突终极解决方案3分钟定位热键小偷的完整指南 你是否曾经按下熟悉的快捷键却没有任何反应当 CtrlS 不再保存文件 AltTabAI 应用人工智能AI AgentAI 写作媒体生成上一篇PHP Excel扩展终极指南xlswriter快速上手教程下一篇云原生身份管理的终极方案Ory Kratos 完整指南 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 html-anything prototype-web 技能实战：从 Markdown 示例到可点击的 SaaS 落地页原型
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 仓库内prototype-webWeb 产品原型技能为研究对象逐层拆解其配套示例输入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.htmlloader.tsmetaFromDir则只做元数据扫描example.html是否存在决定选择器里是否出现预览能力hasHtmlloader.ts。SKILL.md frontmatter 字段逐项解读prototype-web的 frontmatter 是理解该技能在 UI 中如何被展示的第一手资料字段取值含义与去向nameprototype-web技能 id也是目录名必须通过/^[a-z0-9][a-z0-9-]*$/的合法 id 校验loader.tszh_name/en_nameWeb 产品原型/Web Prototype选择器中按 locale 展示的名称见 template-picker.tsx 的templateNameemoji️选择器列表项中的图标description可点击的功能性 Web 原型含导航、英雄区、特性区、CTA列表项的描述文本两行截断展示categoryprototype技能类别scenariodesign场景键驱动选择器顶部的场景筛选 chips未知场景会落到末尾的 synthetic other 桶scenarios.tsaspect_hint1440×900 桌面在按钮和列表项中以小字展示的画幅/规格提示tags[prototype,landing,原型]参与选择器搜索关键词匹配matchesQuery会拼接 zhName/enName/description/aspectHint/category/scenario/tags 作为检索 haystacktemplate-picker.tsxexample_*系列见下仅当目录下存在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组装为SkillExampleMetaloader.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 三档天然映射三张价格卡## CTACTA 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的排版准则。区块逐帧拆解Navsticky 毛玻璃导航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-whitering-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 全部齐备大字号、柔和渐变、glassmorphismtext-6xl/7xl、gradient-bg/grad-text、.glassbackdrop-filter至少处理md:断点Nav、Features、Voices、Pricing 均使用md:/lg:栅格切换特性卡 hover 浮起.card-rise:hovertransform shadownav 滚动变色以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-age5做短暂缓存route.ts。选择与搜索TemplatePicker 用useTemplates()消费该列表支持按场景筛选 chipsdesign场景即设计/探索桶、关键词搜索、悬停 260ms 后懒加载example.html并以iframe sandboxallow-scripts allow-same-originscale(0.4375)缩放展示缩略图template-picker.tsx。载入示例点击预览onPreview调fetchTemplateExample(prototype-web)一次拿到contenthtml并loadSample进编辑器——此时你看到的就是本文拆解的 Inkstack 页面。重新生成/改造把编辑器里的内容换成你自己的文案⌘Enter 后/api/convert接管loadSkill(templateId)取出prototype-web的正文assemblePrompt({ body, content, format })将其与SHARED_DESIGN_DIRECTIVES、用户内容拼接成完整 promptshared.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.htmlprototype-web完整演示了 html-anything 的内容 → 原型工作范式SKILL.md 定义验收标准example.md 定义输入形态example.html 定义输出下限loader 与 API 负责把它们以零代码的方式接入选择器/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 中的 prototype-web 技能用 Agent 一键生成可点击的 SaaS 产品落地页原型html anything 中的 prototype web 技能用 Agent 一键生成可点击的 SaaS 产品落地页原型 prototype web 是AI 应用人工智能AI AgentAI 写作媒体生成html-anything SaaS Landing 模板深度解析从 SKILL.md 到单文件落地页的生成链路html anything SaaS Landing 模板深度解析从 SKILL.md 到单文件落地页的生成链路 本文聚焦 html anything 开源仓AI 应用人工智能AI AgentAI 写作媒体生成Windows热键冲突终极解决方案3分钟定位热键小偷的完整指南Windows热键冲突终极解决方案3分钟定位热键小偷的完整指南 你是否曾经按下熟悉的快捷键却没有任何反应当 CtrlS 不再保存文件 AltTabAI 应用人工智能AI AgentAI 写作媒体生成上一篇PHP Excel扩展终极指南xlswriter快速上手教程下一篇云原生身份管理的终极方案Ory Kratos 完整指南 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考