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 仓库内建的competitive-teardown竞品拆解技能为切入点完整解读其官方示例文档example.md的写法与决策逻辑并结合仓库中的技能定义SKILL.md、预渲染示例example.html以及模板注册、加载与转换的源码链路说明如何利用该技能把 26 个竞品的杂乱资料结构化为一页可扫读、可引用的产品战略报告。读完本文你将掌握竞品拆解报告的标准结构、定位象限与功能矩阵的绘制方法以及 html-anything 中技能模板 → 示例预览 → 单文件 HTML 输出的完整工作方式。一、示例文档在技能体系中的定位在 html-anything 的 skills 模板目录中每个技能都是一个独立文件夹competitive-teardown位于 next/src/lib/templates/skills/competitive-teardown/SKILL.md技能定义包含 frontmatter名称、场景、标签与提示词正文规定了必须输出的结构example.md示例输入内容即本文解析的关联文档用于展示该技能在真实资料上的应用方式example.html预渲染的示例输出供模板选择器内嵌预览assets/三种可选风格模板战情室网格、雷达图、投研档案。从 loader.ts 的注释可以看出这种一技能一文件夹的布局是对旧版硬编码模板数组的替代新增模板只需新增文件夹无需改动 TypeScript 代码/api/templates路由会在磁盘上重新扫描并返回技能清单。example.md正是文件夹中可选的示例内容文件hasMd标记为 true 时技能会附带示例元信息。该技能 frontmatter 中的关键信息见 SKILL.md为category: doc、scenario: productaspect_hint: 战略长页面标签competitive、teardown、strategy、product、竞品、拆解示例名称竞品拆解 · AI Meeting Assistants示例格式为 markdown。也就是说example.md是官方为竞品拆解场景准备的一份真实风格样例输入展示的是 AI 会议助手AI meeting assistants这一品类下产品团队如何对三家竞品做资料整理与初步判断。二、示例输入全解析一份竞品拆解文档的骨架example.mdnext/src/lib/templates/skills/competitive-teardown/example.md是一份结构紧凑的调研笔记它按市场背景 → 竞品卡片 → 自身现状 → 产品目标四层组织总计约 40 行但信息密度极高。2.1 头部信息与产品界定文档开头定义了报告的基本语境日期2026-05-28报告日期用于标注时效品类AI meeting assistants面向产品与客户团队的会议助手我方产品LoopNote一款面向产品发现discovery电话访谈的轻量会议记忆工具。这里的写法符合 SKILL.md 中Header: 市场 / 产品类别 / 报告日期 / 结论一句话的要求——先划定战场再进入竞品分析。2.2 三家竞品的定位卡片示例文档为每家竞品提供了一致的六维信息结构这正是 SKILL.md 中Competitor cardstarget user、core promise、pricing signal、primary strength、visible weakness的具体化Granola定位面向大量开会人群的 AI 记事本用户创始人、管理者、运营人员定价信号个人订阅公开站点强调简洁优势给人低摩擦、个人化的感受用户喜欢它不像一个可见的机器人弱点团队级分析或 CRM 工作流不明显信息传达为连轴开会的人准备的 AI 笔记。Fireflies定位会议转录、摘要与可检索的对话智能用户销售、招聘、客户成功团队定价信号免费计划加付费档位强调团队/工作区优势集成面广、可检索的转录库、销售工作流弱点偏重、可见的机器人可能让部分通话不那么自然信息传达自动化会议笔记。Fathom定位免费的 AI 会议记录工具带高亮与 CRM 同步用户销售代表、面向客户的团队定价信号个人免费、团队付费版优势高亮捕获快、销售效用清晰弱点主要停留在单次会议记录缺乏跨会议的产品洞察综合信息传达再也不要在 Zoom 通话里记笔记了。值得注意的是示例中每家竞品的定价信号都是通过公开站点可观察到的信号免费档、订阅制、团队版而不是编造的精确价格数字——这与 SKILL.md 中不要发明市场份额、ARR、客户名、定价数字的内容真实性原则完全一致。2.3 我方产品现状LoopNote current state示例文档如实列出了 LoopNote 的当前状态最适合产品发现访谈与调研类通话通过 Chrome 扩展在通话中捕获用户标记的时刻会后生成洞察卡片痛点pain、引语quote、功能请求feature request、异议objection弱点还没有原生日历机器人、集成有限、定价未定优势跨多场访谈的综合synthesis能力优于单次通话摘要工具。这一节为后续的定位差异化和产品目标提供了我方坐标是定位象限中 LoopNote 位置的依据。2.4 产品目标Product goals示例以三个目标收尾找到避开与通用转录工具正面竞争的楔子wedge为产品团队确定一个打包packaging角度决定未来 90 天要做什么。这三点直接对应了 SKILL.md 中Opportunity windows与Recommended moves的输出要求——输入侧先立目标输出侧才能给出行动建议。三、模板规定的九段式输出结构competitive-teardown技能的核心约束在 SKILL.md 的必须输出的结构一节共九段Header市场 / 产品类别 / 报告日期 / 结论一句话Executive takeaway3 条最重要判断每条必须包含so whatPositioning map用 2×2 象限或坐标图表现竞品定位坐标轴必须来自用户内容不套模板词Competitor cards每家竞品一张卡包含 target user、core promise、pricing signal、primary strength、visible weaknessFeature matrix行为关键能力列为竞品加 Us / Opportunity用 ✓ / △ / — 表达覆盖度并加短注释Pricing / packaging read价格层级、免费试用、限制项、企业销售动作UX / messaging notes从用户材料中抽取 46 条可观察细节Opportunity windows3 个机会窗口每个含 why now、target segment、first move、riskRecommended moves30 / 90 / 180 天行动建议。同时 SKILL.md 明确界定了这不是什么不是文章、不是 PRD、不是 pitch deck而是一份可决策的产品战略报告帮团队回答我们和它们到底差在哪里下一步该怎么打。这决定了输出必须是高信息密度、可快速扫描的战情室风格而不是营销落地页或普通长文。从 shared.ts 的SHARED_DESIGN_DIRECTIVES可以看到所有技能输出的 HTML 都要遵循内容驱动数量的最高优先级原则section/card 数量完全由用户内容长度决定必须完整覆盖每个要点不许压缩丢弃配色使用 1 主色 2 中性色 至多 1 强调色中英文混排遵循盘古之白。这些全局设计指令会经由assemblePrompt()与技能正文、用户内容拼接成最终提示词。四、从输入到渲染示例输出的逐区块拆解技能文件夹中的 example.html 是把example.md这份输入渲染成最终报告页的官方样例也是模板选择器中的内嵌预览。它完整实现了九段结构中的核心视觉区块并展示了战情室网格war-room-grid风格的落地形态Header 区顶部胶囊标签Competitive teardown / AI meeting assistants / 2026-05-28左侧一句话结论LoopNote should avoid generic transcription and own product-discovery memory右侧 Executive takeaway 列出 3 条判断竞品卡片三列卡片分别概括 GranolaPersonal AI notepad、FirefliesConversation library、FathomFree sales notetaker的核心定位定位象限2×2 图横轴为 High synthesis、纵轴为 Team workflow三家竞品与 LoopNote 楔子各占一个位置——注意坐标轴来自输入资料综合能力 vs 团队工作流而非模板预设词功能矩阵表格行是 Invisible note capture、Transcript library、CRM / sales workflow、Cross-interview insight cards列是三家竞品加 LoopNote opportunity用 ✓ strong / △ bot-like / not found 等符号加短注释表达覆盖度行动建议30 天围绕产品发现打包、90 天构建研究记忆、180 天选择性集成三张卡片。关于风格选择SKILL.md 要求在三种资产模板中按内容选取一种、不可混用assets/war-room-grid.html默认风格浅色战情室/咨询报告适合产品团队、PM 与普通商业读者assets/radar-map.html深色雷达图/market intelligence console适合安全、AI、开发者工具、平台型竞品assets/analyst-dossier.html纸质分析档案/投研报告适合投研、行业分析与正式战略备忘。默认优先war-room-grid输入强调市场格局、技术雷达、攻防态势时用radar-map输入像研究笔记、投资备忘或行业报告时用analyst-dossier。五、仓库机制技能如何被加载、预览与转换example.md能在界面中被选用、预览并最终渲染成 HTML依赖仓库中一条完整的前后端链路。注册表与加载技能目录由 loader.ts 扫描读取。parseFrontmatter()以正则解析SKILL.md的 frontmatter字符串、整数与单行数组loadSkillFromDir()会同时读入example.md与example.htmllistSkills()合并内置技能与用户通过 marketplace 安装的技能命名空间 id 形如pkg-owner__repo--originalId安装在~/.html-anything/skills/下。生产环境下元数据会缓存invalidateSkillsCache()在安装/卸载后调用以清缓存。API 层next/src/app/api/templates/route.ts 返回SkillMeta[]列表仅元信息、不含正文Cache-Control: max-age5next/src/app/api/templates/[id]/example/route.ts 返回单个技能的示例 bundlecontent即example.md原文html即example.html让选择器一次请求即可完成预览避免两次往返。客户端组件层通过 next/src/lib/templates/index.ts 的useTemplates()缓存并去重拉取清单fetchTemplateExample(id)获取示例refreshTemplates()在安装/卸载后使选择器立即刷新。template-picker.tsx与samples-gallery.tsx均调用fetchTemplateExample实现悬停预览与示例加载。转换主链路真正把example.md这类输入变成 HTML 的是 next/src/app/api/convert/route.ts它先用loadSkill(templateId)取回技能再调用assemblePrompt({ body: skill.body, content, format })拼出完整提示词——即全局设计指令 技能正文 输入格式 用户内容四段式。SHARED_DESIGN_DIRECTIVES要求模型直接流式输出以!DOCTYPE html开头的单文件 HTML通过 CDN 引入 Tailwind 与字体禁止调用文件系统工具落盘前端捕获 stdout 文本完成渲染。因此本文解析的example.md一旦被放入编辑器并选择competitive-teardown技能就会沿这条链路产出如example.html所示的战情室报告页。六、实战使用方式与内容真实性约束在 html-anything 中使用该技能在模板选择器template picker中找到竞品拆解 · Competitive Teardown可先通过悬停预览查看example.html的效果将 26 家竞品的官网、定价页、changelog、用户评论、销售反馈或内部调研笔记粘贴为输入格式不限表格、bullet、链接摘录、访谈记录均可点击转换即可得到战略报告页。若只输入单家竞品技能会退化为单竞品 deep dive。内容真实性是硬约束SKILL.md 明确要求只使用用户提供的竞品、价格、功能、评论缺失信息用 not found in source 或 unknown 标注example.html的功能矩阵中unknown/not found的用法即为此例不发明市场份额、ARR、客户名与定价数字若用户资料明显不足仍要输出报告但在 Evidence gaps 中列出缺口。这套约束同样体现在SHARED_DESIGN_DIRECTIVES中必须使用用户提供的真实数据不要编造、不要 lorem ipsum。七、从示例反推方法论竞品拆解的通用步骤通过example.md这份输入与example.html这份输出的对照可以把 competitive-teardown 的方法论提炼为四步界定战场写明品类、报告日期、我方产品一句话定位划定 26 家竞品范围统一采集维度对每家竞品按 target user / core promise / pricing signal / primary strength / visible weakness 五维记录缺失信息明确标注不补编找出差异坐标从输入中提炼真实的差异化轴如综合能力 vs 团队工作流把竞品与自身放进 2×2 象限找出空白楔子收敛为行动用功能矩阵确认哪里不打、哪里必打把机会窗口落到 30 / 90 / 180 天的具体动作上。结语competitive-teardown/example.md表面上是几十行调研笔记实际是 html-anything 技能体系中示例输入这一设计的最佳范本它以统一维度约束信息采集、以内容真实性规则杜绝编造、以结构化输出倒逼决策。配合 SKILL.md 的九段式输出约束、example.html 的渲染样例以及 loader.ts 与 convert/route.ts 构成的加载-转换链路任何产品团队都可以把零散的竞品资料一键变成一份可扫读、可引用、可决策的战略报告。赞分享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点击查看免费下载相关推荐深入解析 eslint-plugin-react 的 jsx-no-comment-textnodes 规则阻止注释串泄漏为 JSX 文本节点深入解析 eslint plugin react 的 jsx no comment textnodes 规则阻止注释串泄漏为 JSX 文本节点 本篇技术指南聚开发工具代码质量静态分析html-anything 的 experiment-readout 技能模板把 A/B 实验数据转成可执行的产品决策报告html anything 的 experiment readout 技能模板把 A/B 实验数据转成可执行的产品决策报告 本文聚焦 html anythinAI 应用人工智能AI AgentAI 写作媒体生成FGO-py终极指南如何让Fate/Grand Order自动帮你养肝护发FGO py终极指南如何让Fate/Grand Order自动帮你养肝护发 你是否还在为FGO无限池刷到凌晨三点而苦恼是否因为重复刷素材而感到枯燥乏味FGGUI 自动化桌面应用计算机视觉RPA任务调度上一篇一步把电子书转有声书Audiblez 完整教程epub 转 m4b下一篇FlashMLA 新内核深度解析Seesaw 调度、细粒度 TMA 流水线与 H800 上的 660 TFlops MLA 解码创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考