WebAnatomy

Web Anatomy

実際に優れた SaaS 企業が公開した施策をもとに、機能するランディングページを作る AI エージェント向けのスキルです。評価済みのベンチマークライブラリに基づいているため、一般論ではなく実在するページを根拠として、すべての提案を提示します。

$ npx skills add GabrielAmz/web-anatomy

Claude Code、OpenAI Codex、Cursor、Windsurf、および Agent Skills 仕様に対応するあらゆるエージェントに、Web Anatomy スキルパックをインストールします。

Web Anatomy とは

多くの AI エージェントは、ソーシャルプルーフを追加する、CTA を強化する、見出しを簡潔にするといった一般論をもとにページを作り直します。Web Anatomy は、代わりにエージェントへ根拠を提供します。スキルはページを既知のセクション（ヒーロー、価値提案、信頼性、推薦文、料金、FAQ、CTA）から成る構造として読み取り、セクションごとに評価された実在するページのベンチマークライブラリを根拠として、あらゆる改善策を提示します。

スキルの基盤となるベンチマーク（リリース前に数値を確認してください）：

• 評価済みセクション 3,500 件以上
• ランディングページ 500 件以上
• 企業 290 社以上

スキルは、組み込みのパターンを使って単独で実行できます。ホスト型 MCP に接続すると（強く推奨）、ライブのベンチマークデータと実際の参考スクリーンショットを各レポートに取り込めます。ライブのベンチマークデータをご覧ください。

4 つの視点

Web Anatomy は、4 つのズームレベルで機能します。視点のレベルは、問いの内容に対応しています。

視点	問い	スキル
ページ	この市場で最も優れたページは何をしていて、自分のページと比べてどうですか？	find-examples
監査	ページ全体の出来栄えはどうで、最初に何を変えるべきですか？	audit-page
セクション	基礎レベルから最高水準まで、1 つのセクションをどのように改善できますか？	research-best-practices
修正	ページを作り直したり、新しく作成したりするための、根拠に基づいたコピーを書きます。	write-page

コピーを書いた後、build-page は構成とコピーをまとめ、一貫性のある単一の参考デザインシステムを使った、共有可能なワイヤーフレームを作成します。改善と新規作成の両方のフローで最後に実行するステップであり、いずれかの視点に属するものではなく、その上位に位置します。

まず webanatomy-setup を 1 回実行してください。製品、ICP、業界、競合他社、証拠となる素材を .agents/webanatomy-context.md に記録することで、すべてのスキルがより的確でブランドに沿った提案を行えるようになります。

2 つのフロー

• 既存のページを改善する： audit-page（診断）-> write-page（弱いセクションを書き直す）-> build-page（任意：ページ本来の見た目で改善後のページをまとめ、共有可能なワイヤーフレームを作成）。
• 新しいページを作成する： find-examples（参考にするホームページを 1 つ選ぶ）-> write-page のビルドモード（簡単なアウトラインで参考ページのセクション順を採用し、その後コピーを書く）-> build-page（参考ページの見た目でワイヤーフレームを作成）。

スキル

スキル	段階	内容
webanatomy-setup	基礎	1 回だけ実行します。プロダクト、ICP、業界、競合、実績を示す素材、優先ページを収集し、.agents/webanatomy-context.md に保存します。
find-examples	ページ	市場を調査します。市場で上位にランクされるページとセクションを取得し、参考にすべき点を示します。また、ページを共有すると、そのページとの比較結果をラベル付けします。以前の benchmark-compare を統合しています。
audit-page	監査	現在のページを CRO の評価基準に照らして採点し、セクションごとに問題を診断して、優先順位付きの修正リストを返します。単独で実行でき、MCP は不要です。
research-best-practices	セクション	セクションを詳しく調査します。1 つのセクションを入力すると、段階別の改善案（基礎、競争力向上、ベストインクラス）を返します。それぞれ、実際のベンチマークセクションに基づいています。
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 への接続は必須ではありませんが、強く推奨します。静的なガイダンスではなく、ライブベンチマークデータと実際の参考例に基づいて、あらゆる推奨事項を作成できます。これがスキルの性能を最大限に引き出します。ベータトークンと 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 がエージェントに提供するものと同じライブラリなので、接続前に内容を確認できます。

「Anatomy」という名前の理由

多くの AI エージェント向けスキルパックは、ページを仕事（CRO、コピーライティング、SEO）として捉えます。Web Anatomy は、ページを構造として捉えます。ヒーロー、実績、課題、解決策、料金、FAQ、CTA です。各セクションには、既知のパターン、避けるべきパターン、参考になる企業があります。

Web Anatomy の各スキルは、ページを複数の要素に分けます。ヒーロー、実績、課題、解決策、料金、FAQ、CTA です。各要素には、既知のパターン、避けるべきパターン、ベンチマーク例があります。フレームワークと根拠を一緒に活用できます。

互換性

• ✅ Claude Code
• ✅ OpenAI Codex
• ✅ Cursor
• ✅ Windsurf
• ✅ Agent Skills 仕様に従って .agents/skills/<name>/SKILL.md を読み込む、あらゆるエージェント

インストール方法

オプション 1 — CLI（任意のエージェント）：

# 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 を実行して更新するか、マーケットプレイスの自動更新を有効にして手間を省けます。スキルは名前空間付きでインストールされます：/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 でインストールされるスキルパックの信頼できる情報源が格納されています。

コントリビューション

プルリクエストを歓迎します。新しいスキルの作成方法（ケバブケース、YAML フロントマター、明確なワークフロー名、本文は 5K トークン未満）については、CONTRIBUTING.md をご覧ください。

ライセンス

MIT。自由に使用、フォーク、販売、配布できます。

---

Gabriel Amzallag が作成しました。Web Anatomy パックは、非公開のランディングページ向けベンチマークおよび監査ツールを支えるパターンを公開用に抽出したものです。スキルがフレームワークを提供し、アナライザーがデータを提供します。