WebAnatomy

Web Anatomy

为 AI Agent 打造的技能，助你推出真正有效的着陆页。内容源自顶尖 SaaS 公司实际采用的策略，并以经过评分的基准库为依据，让每条建议都有真实页面作为参考，而非泛泛而谈。

$ npx skills add GabrielAmz/web-anatomy

为 Claude Code、OpenAI Codex、Cursor、Windsurf 及任何支持 Agent Skills 规范的 Agent 安装 Web Anatomy 技能包。

Web Anatomy 是什么

大多数 AI Agent 会依据泛泛的建议来改造页面：增加社会认同、强化 CTA、精简标题。Web Anatomy 为 Agent 提供证据。技能会将页面解析为一组已知版块（主视觉区、价值主张、信任背书、客户评价、定价、常见问题、CTA），再以由真实页面构成、按版块逐一评分的基准库作为依据，为每项改动提供支撑。

技能背后的基准库（发布前需确认数据）：

• 3,500+ 个已评分版块
• 500+ 个着陆页
• 290+ 家公司

技能可独立运行，并内置模式。连接托管的 MCP（强烈推荐）后，每份报告都会获取实时基准数据和真实参考截图。请参阅实时基准数据。

四个层级

Web Anatomy 提供四个缩放层级。层级与所要回答的问题相匹配。

层级	问题	技能
页面	这个市场中最出色的页面采用了哪些做法？我的页面表现如何？	find-examples
审查	我的整个页面表现如何？我应该先改什么？	audit-page
版块	如何提升某个版块的水平，从基础版做到一流水准？	research-best-practices
修改	撰写有依据的文案，用于改造现有页面或创建新页面。	write-page

文案撰写完成后，build-page 会将结构和文案整合成可分享的线框图，并配上连贯、统一且基于单个范例的设计系统。它是优化和创建两条流程的最终步骤，因此位于各层级之上，而不属于其中任何一个。

先运行一次 webanatomy-setup。它会将产品、ICP、行业、竞争对手和证明材料记录到 .agents/webanatomy-context.md，让每项技能都能给出更精准、符合品牌调性的建议。

两条流程

• 优化现有页面： audit-page（诊断） -> write-page（改写薄弱版块） -> build-page（可选：将优化后的页面整合成可分享的线框图，沿用页面自身的风格）。
• 创建新页面： find-examples（选定一个范例首页） -> write-page 构建模式（先根据范例的版块顺序拟定简要大纲，再撰写文案） -> build-page（按照范例的风格整合线框图）。

技能

技能	阶段	功能
webanatomy-setup	基础	运行一次。将产品、ICP、行业、竞争对手、证明素材和优先页面记录到 .agents/webanatomy-context.md。
find-examples	页面	市场扫描。提取市场中排名靠前的页面和版块，展示值得借鉴之处；分享你的页面后，还会标注它与这些页面的对比情况。整合了旧版 benchmark-compare。
audit-page	审计	根据 CRO 评分标准评估当前页面，逐个版块诊断，并返回按优先级排序的修复清单。可独立运行，无需 MCP。
research-best-practices	版块	深入分析版块。针对一个版块，提供分层改进路径（基础、竞争力、业界最佳），每项建议都以真实基准版块为依据。
write-page	修复	文案引擎。根据诊断结果、改进级别或选定结构，生成有依据、可直接复制粘贴的版块文案；既可改写现有页面，也可撰写新页面。
build-page	组装	最终组装器。根据结构及其文案，将内容排布为可分享的线框图，并采用单一范例设计系统（新页面使用基准页面，改进页面时使用你自己的页面）。
moodboard	页面	逐版块视觉看板。逐个采集实时页面版块并从 MCP 获取基准，然后将每个版块整理为当前状态大图 + 问题 + 基准截图网格 + 带领域标签的实践 + 建议。find-examples 展示值得借鉴之处，而 moodboard 则将整个页面整理为可供构建时参考的视觉资料。

视觉报告

Web Anatomy 不依赖聊天界面来呈现截图。输出技能会生成本地视觉资料：

.webanatomy/
├── find-examples/
├── audit-page/
├── research-best-practices/
├── moodboard/
│   └── page-date/
│       ├── report.md
│       ├── report.html
│       └── references/
├── write-page/
│   └── topic-date/
│       ├── report.md
│       ├── report.html
│       └── references/
│           ├── current.png
│           └── company-section.png
└── build-page/
    └── page-date/
        ├── wireframe.html
        ├── design-system.md
        └── references/

聊天回复应保持简短：关键发现、报告路径，以及任何截图或 MCP 限制。report.html 才是产品体验的核心。

实时基准数据（可选，强烈推荐）

这些技能可独立运行，因此你可以安装后立即开始使用。连接托管的 Web Anatomy MCP 从来不是必需的，但强烈推荐：它能让每条建议都以实时基准数据和真实参考示例为依据，而不是静态指导；这正是这些技能最擅长的地方。你需要一个 beta 令牌，并为每个 IDE 执行一条配置命令：

在 https://www.webanatomy.ai/dashboard/mcp 登录以获取令牌和各 IDE 的配置。 你必须先登录，因为该页面会为你生成专属令牌。

连接后，这些技能会使用 search_pages、get_page、search_sections 和 get_section 等 MCP 工具；未连接时则会平稳退回到静态指导。评分、阈值、原始标记坐标和基准字段名称均保留在内部；面向用户的报告会将它们转化为通俗易懂的模式和差距标签。

想先看看基准内容吗？ 浏览公开的评分版块库：https://www.webanatomy.ai/best-landing-pages/sections — 这里有真实的落地页版块及其评分，并说明了每个版块的有效之处。这与 MCP 提供给你的 Agent 的是同一个资料库，因此你可以在连接任何内容之前先行探索。

为什么叫“Anatomy”

大多数 AI Agent 技能包会按任务来划分页（CRO、文案撰写、SEO）。Web Anatomy 则将页面视为一种结构：主视觉区、证明、问题、解决方案、定价、常见问题、行动号召。每个版块都有已知模式、反模式和参考公司。

每项 Web Anatomy 技能都会将页面拆解为各个部分：主视觉区、证明、问题、解决方案、定价、常见问题、行动号召。每个部分都有已知模式、反模式和基准示例。框架与证据相辅相成。

兼容性

• ✅ Claude Code
• ✅ OpenAI Codex
• ✅ Cursor
• ✅ Windsurf
• ✅ 任何按照 Agent Skills 规范读取 .agents/skills/<name>/SKILL.md 的 Agent

安装选项

选项 1 — CLI（适用于任何 Agent）：

# Installs the whole pack to .agents/skills/
npx skills add GabrielAmz/web-anatomy

# Update later (or just re-run the command above, it's idempotent)
npx skills update GabrielAmz/web-anatomy

选项 2 — Claude Code 插件（支持版本感知更新）：

/plugin marketplace add GabrielAmz/web-anatomy
/plugin install web-anatomy

Claude Code 会识别已安装的版本，并在有新版本发布时通知你。使用 /plugin marketplace update web-anatomy，然后运行 /plugin update web-anatomy 即可更新；也可以为 marketplace 开启自动更新，实现全自动更新。技能会以命名空间形式安装：/web-anatomy:write-page、/web-anatomy:build-page 等。

选项 3 — 克隆并手动复制：

git clone https://github.com/GabrielAmz/web-anatomy
cp -r web-anatomy/skills/* .agents/skills/

安装后，运行 webanatomy-setup 开始使用。基准测试支持的工作流在未连接 MCP 时也能正常运行，会回退到静态／参考指南；不过，使用实时基准测试数据时效果最佳，因此强烈建议连接 MCP。

仓库布局

skills/ 存放技能包，是由 npx skills add 安装的权威来源。

贡献

欢迎提交 PR。新技能的编写指南请参阅 CONTRIBUTING.md：使用 kebab-case、YAML front matter、清晰的工作流名称，正文不超过 5K 个词元。

许可证

MIT。随意使用、分叉、出售和发布。

---

由 Gabriel Amzallag 创建。Web Anatomy 技能包是一个公开提取版本，展示了某个私有落地页基准测试与审计工具所用的模式。技能为你提供框架；分析器为你提供数据。