结论先行
官网重构的核心不是「换框架」，而是为 LLM 可检索性而重构。我们把正文密度从 7% 提升到 40%+，建立了三层内容供给体系，所有技术决策都服务于这个目标。
背景：旧站的三个核心矛盾
| 矛盾 | 旧站现状 | 影响 |
|---|---|---|
| 无内容系统 | 加篇博客要改 HTML，加产品要复制粘贴 | 内容更新极慢，SEO 无法持续 |
| 两套构建系统 | 主站手写 HTML + 博客 Hugo | sitemap/llms.txt/结构化数据无法统一生成 |
| LLM 读到噪声多 | 34KB HTML 仅 2.4KB 正文，密度 7% | 长文易被截断，关键信息丢失 |
关键技术决策
1. 统一到 Astro 5，砍掉 Hugo
理由：Astro 是唯一能同时满足「静态输出（LLM 友好）」+「组件化（做产品页）」+「内容类型安全」的选型。
- 默认零 JS，HTML 体积极小 → 正文密度天然高
- Content Collections 提供 Zod schema 类型约束，字段写错构建失败
- 同一构建产出 HTML + Markdown + RSS + sitemap + llms.txt
- MDX 支持，组件可嵌入内容，内容可嵌入组件
2. 不用 Tailwind，用原生 CSS + CSS 变量
反直觉但必要：Tailwind 把样式写成 HTML 里的长 class 串，会显著推高 HTML 字节数、压低正文密度。
旧站：<div class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow">
新站：<div class="product-card">- 原生 CSS + 语义化 class（
.product-card、.hero）压缩 HTML 体积 - LLM 从 class 名就能理解页面结构
- 双层 Design Token（色板层 + 语义层），换主题只改 1 处
3. 双层 Token 架构 + .on-dark 反转类
/* 第 1 层：原始色板 —— 换配色时整体替换 */
:root { --graphite-900: #14161A; --sand-100: #F7F5F1; --ember-500: #E0501C; }
/* 第 2 层：语义变量 —— 组件只准用这一层 */
:root { --deep: var(--graphite-900); --paper: var(--sand-100); --accent: var(--ember-500); }
/* 深浅区块共享组件 */
.on-dark { --ink: var(--ink-on-dark); --border: var(--border-on-dark); ... }- 组件零硬编码色值，4 套主题内置可一键切换
- 深色区块加
.on-dark，内部变量自动反转，避免写「深色版」组件
4. LLM 三层内容供给体系
| 层 | 产物 | 生成方式 | 作用 |
|---|---|---|---|
| 目录层 | llms.txt |
构建脚本从 Collections 自动生成 | 我是谁、有哪些页、每页讲什么 |
| 全文层 | llms-full.txt |
全站正文拼接，控制 200KB 内 | 一次性读完核心内容 |
| 逐页层 | /path.md + Cloudflare Markdown for Agents |
Astro 路由输出 + 边缘转换 | 单页纯文本，省约 80% token |
关键规则：
- llms.txt 每个链接必须指向独立 URL（锚点对 LLM 无意义）
- 生成脚本跳过空集合（cases 为空时不产出空的「## 客户案例」区块）
- Cloudflare 后台必开：Markdown for Agents ✅ / Block AI Scrapers ❌ / AI Labyrinth ❌ / Email Obfuscation ❌
设计系统：A 石墨工程
| 角色 | 色值 | 用途 |
|---|---|---|
深色主 --deep |
#14161A |
Hero 底、方法论区、CTA 带、页脚、正文主色 |
页面底 --paper |
#F7F5F1 |
全站背景（暖砂白） |
强调 --accent |
#E0501C |
CTA 底、装饰线、关键数字（余烬橙） |
为什么不是深蓝金/青紫渐变：品牌叫「Agent 建筑师」，建筑事务所的视觉语言是极简、大留白、强排版。橙仅作点睛（施工感：脚手架、工程标记），传达「工程严谨 + 可落地」而非「未来感 + 炫技」。
对比度实测（全部 AAA/AA 达标）：
- 正文 16.63:1、深底 18.11:1 → AAA
- 强调按钮字深色 4.60:1 → AA（白字在所有主题上均不达标）
正文密度提升实测
| 指标 | 旧站 | 新站 | 提升 |
|---|---|---|---|
| HTML 体积 | 34,388 字节 | ~8,000 字节 | -77% |
| 正文字符 | 2,394 | ~3,200 | +34% |
| 正文密度 | 7.0% | >40% | 5.7x |
待办：Phase 2+ 进行中
- 5 个产品页完整内容
- 3 个解决方案完整内容
- 2 篇诊断笔记（替代案例的信任状）
- 3 篇博客（方法论/洞察/更新日志）
- 中文字体子集化（PingFang SC → WOFF2，unicode-range 分片）
- OG 图自动生成（@vercel/og 或手工制作）
- Cloudflare Pages 部署 + 域名切换
- 生产环境 LLM 访问体检（17 个 UA 全 200）
给同行的建议
如果你也在做 B2B 官网，且在乎 LLM 可检索性：
- 别用 Tailwind/UnoCSS —— class 串会杀死正文密度
- 别用锚点导航 —— LLM 读不懂
#section - 别把 CSS 写在 style 标签里 —— 会被当正文索引
- 必须生成 llms.txt + 逐页 .md —— 这是 LLM 读取的标准接口
- Cloudflare 后台四个开关必须手动核 —— 默认全反了
下期预告：字体子集化实战、OG 图生成方案、生产环境体检报告。
这个问题，我们可以帮您诊断
把真实业务场景告诉我们，48 小时内回复初步建议。
获取方案与报价