# 多模型实作：让 Claude 与 Gemini 联手，把网站重构成可被人读也可被 AI 读

> 通过 Claude 与 Gemini 的多模型认知协作，重建个人网站的排版秩序、语义结构与机器可读性。导入 WebMCP 标准，让网站从被动展示进化为可被 AI Agent 调用的知识节点。

- Author: Paul Kuo（郭曜郎）
- Date: 2026-02-22
- Pillar: 智能与秩序 / Intelligence & Order
- Tags: 多模型协作, WebMCP, 人机协作, Claude, Gemini, 语义化HTML, 知识管理
- Canonical: https://paulkuo.tw/zh-cn/articles/multi-model-collab-website-rebuild/
- Language: Simplified Chinese (简体中文)
- Translation: AI-translated from the zh-Hant (Traditional Chinese) original
- Original (zh-Hant): https://paulkuo.tw/articles/multi-model-collab-website-rebuild.md
- Site index for LLMs: https://paulkuo.tw/llms.txt

---

最近，我终于做好我的个人网站。Domain name 买了多年，但是一直晾着。拜 AI 快速发展之赐，我没有徒手刻每一行代码，也没有把期待交给那些「一键生成」的工具，因为生成得快，bug 越多。看起来漂亮，也不代表信息有秩序。

<div class="listen-summary" style="margin:1.25rem 0;padding:0.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-section);">
  <div style="font-size:0.9rem;font-weight:600;color:var(--text-secondary);margin-bottom:0.5rem;letter-spacing:0.02em;">▶ 听摘要</div>
  <audio preload="none" controls style="width:100%;display:block;">
    <source src="https://audio.paulkuo.tw/multi-model-collab-website-rebuild-zhcn.mp3" type="audio/mpeg" />
    您的浏览器不支持音频播放，请点此 <a href="https://audio.paulkuo.tw/multi-model-collab-website-rebuild-zhcn.mp3">下载音频</a>。
  </audio>
  <div style="font-size:0.75rem;color:var(--text-secondary);opacity:0.75;margin-top:0.4rem;">AI 合成语音・作者本人声线克隆</div>
</div>

我是用桌机版 Claude，同步开启 Gemini Pro，让两个顶尖的非人智能交叉协作、互相校对，跟我一起把系统搭起来。这不是「多开几个聊天窗口」，而是我一直在探讨的多模型认知协作框架的具体实践：Claude 负责产出与架构，Gemini 负责质疑与验证；我则负责定义需求、逻辑边界、语气风格与秩序标准。通过实作，建立半人马模式的工作流程。

## 为什么要这么大费周章？

因为号称「一键生成」的 AI（或任何工具），常常给了我们视觉上的效率，却剥夺应用场景的细腻与真实需求。我检视那些高效网页成品，看到的不是「完成」，而是效率背后的失序：英式排版的宽松字距硬套在中文方块字上，文字像散落的沙子，显得杂乱没品。

好的协作系统（如人体与所有生物），必须让资源到达对的地方；好的思想载体，必须让意义能被准确读取。所以这次建网站，我定义为三件事：重建秩序、提升可读性、与建立可被调用的知识结构。

## 第一层：夺回中文字的「重量」与「凝聚力」

排版不是装饰，而是思想的物理界面。中文的阅读节奏，跟英文完全不同。英文靠字母间距与单字边界自然分词；中文则靠字形密度、行距节奏与标点呼吸来形成理解的坡度。如果沿用默认的西式排版，中文会变得轻飘、松散，读者的注意力会在每一行的空隙里流失。

因此我要求 AI 先放下「默认美感」，回到语言本身，重新定义繁体中文专属的排版规则，例如使用 `text-justify: inter-ideograph` 让行内对齐更符合中文特性、更克制的字距与段落节奏让文字「收拢」、让内容从「轻浮的网页感」回到「纸本专栏般的沉静感」。

让阅读者的心情舒畅，让设计的样板可以是种让人慢下来阅读的视觉结构。

## 第二层：写给人类，也写给 AI Agent

**Machine-readable Authority（可机读的权威性）**

未来的网络流量，有很高比例会先被 AI Agent（例如 Gemini、Perplexity 这类具备检索与总结能力的系统）阅读、摘要、再转述给人类。如果网页底层是一团混乱，标题层级不清、语义标签乱套、内容结构只是为了排版而堆出来，那 AI 读起来就像在看乱码。它可以「看懂字」，却无法「理解意义」，更难建立可靠的引用与归因。

所以我让 Claude 与 Gemini 互相校对，使用 Google 即将推出的 WebMCP 标准，替网站补上两件事：

1. **严谨的语义化 HTML 结构**：把「段落、章节、引用、注解」还给它们该有的位置
2. **JSON-LD 结构化数据**：把文章、作者、主题、时间线、关联内容，用可被机器解析的方式说清楚

这不是为了讨好搜索引擎，而是建立一种更长期的能力：当未来的 AI 试图理解「谁在持续探讨循环经济与 AI 的交叉点」时，它能精准解析出，这是一个有脉络、有方法、有思想体系的知识库，而不是碎片化的信息农场。

## 第三层：导入 WebMCP，让思想成为可被呼叫的「节点」

演化中的智能不会停留在文字，而会「道成肉身」，与真实世界的行动、检索、决策流程接上。我导入 WebMCP（Web Model Context Protocol），把网站从被动展示的看板，推进到一个更像「可互动的知识系统」：我把文章检索封装成可被调用的工具界面，让「阅读」这件事不只是人眼的扫描，也被 AI 代理以更可靠的方式直接呼叫、查询、定位、回传。

这意味着一个典范转移正在成形：从「人类阅读」走向「人机共读」。你的 AI 助理造访网站时，不必再靠猜 DOM、刮屏幕、模拟点击，而能以结构化的方式理解并取得观点。

## 结语：多模型协作是「秩序工程」

通过过年期间与 AI 深度互动，这是一场「多模型认知协作」的田野实验。我们正走进一个即将被 AI 内容淹没、重新定义内容经济的时代。面对这种结构性的焦虑，拒绝 AI 没用；盲从单一 AI 也同样无效。

比较好的做法，就是自己下场，实际探索，确保自己始终掌握「定义秩序」的主体：利用多重视角的非人智能互相碰撞、互相质疑、互相校对，然后再把价值、语气与方向确定。

技术可以加速产出，但秩序才决定文明能走多远。

---

*注：Google 在 2026 年 2 月于 Chrome 146 推出 WebMCP（Web Model Context Protocol）预览版，被业界称为「Web 动作的 Schema.org 时刻」。过去的 SEO 是给 AI 提供「名词」（我是谁、文章是什么）；而 WebMCP 则是给 AI 提供「动词」（帮我搜索文章、帮我联系作者）。有了 WebMCP，AI 代理不再需要像盲人摸象一样「截图网页、寻找按钮、模拟点击」，而是可以直接呼叫网站上的专属工具。*
