文件列表，内容直接显示在本页。

AGENTS.md

# AI 工作规则

<!--
用途：这个文件管“AI 应该怎么工作”。
写给：Codex、Cursor、Claude Code 等会改代码的 AI。
原则：文件名保留英文大写，内容用中文讲清楚项目规则；技术名、路径、HTML/CSS/JS 保持英文。
-->

## 先读顺序

AI 在创建或修改这个网站前，必须先按顺序读取：

1. `PRODUCT.md`：项目目标、受众、定位、转化动作
2. `DESIGN.md`：页面表现、颜色、字体、布局、组件、禁区
3. `CONTENT.md`：文案语气、页面内容、SEO 关键词
4. `SITEMAP.md`：页面结构、URL、导航、区块顺序
5. `TESTING.md`：完成前的验收清单

## 项目类型

这是一个静态多页企业网站项目，项目名为 `Website Agent OS`。

默认使用：

- HTML
- CSS
- 少量 JavaScript

除非用户明确要求，不要引入 React、Vue、Next.js、Tailwind 或构建工具。

## 硬规则

- 不编造企业事实、客户名、奖项、资质、电话、地址、价格、案例数据。
- 信息缺失时，用 `[待补充：字段名]` 保留占位。
- 页面表现必须服从 `DESIGN.md`。
- 页面文案必须服从 `CONTENT.md`。
- 页面结构必须服从 `SITEMAP.md`。
- 公共样式放在 `assets/css/styles.css`。
- 公共脚本放在 `assets/js/main.js`。
- 每个 HTML 页面必须有唯一的 `<title>`、`meta description`、一个 `h1`、清晰导航。
- 网站最终不是单页，当前示例保持 3 个完整页面。

## 冲突优先级

如果文件之间发生冲突，按这个顺序执行：

1. 用户最新要求
2. `AGENTS.md`
3. `PRODUCT.md`
4. `DESIGN.md`
5. `CONTENT.md`
6. `SITEMAP.md`
7. 现有页面实现

## 完成前自检

交付前必须检查：

- 页面数量是否为 3 个完整页面
- 页面导航是否互通
- 是否没有编造事实
- 移动端是否可读
- 页面表现是否符合 `DESIGN.md`
- 文案是否符合 `CONTENT.md`
- 是否存在 `llms.txt`、`robots.txt`、`sitemap.xml`

README.md

# Website Agent OS Website Docs

<!--
用途：这个文件是项目入口，给人和 AI 快速理解这个目录。
建议：README.md 不要写太长，重点说明这个项目是什么、怎么预览、文件怎么分工。
-->

## 这是什么

这是一个用于 AI 生成静态企业网站的项目文档模板。

它示范了一个网站项目根目录应该如何放置：

- 给开发 AI 看的项目规则
- 给开发 AI 看的产品、页面表现、内容、结构说明
- 给外部 AI 和爬虫看的 `llms.txt`、`robots.txt`、`sitemap.xml`
- 一个 3 页完整静态网站示例

## 项目目标

`Website Agent OS` 这个示例网站不是为了展示某个真实企业业务，而是为了说明：

> 如果你准备用 AI 生成一个特定企业网站，应该先准备哪些文档，以及这些文档如何共同约束 AI。

## 目录结构

```txt
website/
  AGENTS.md      # AI 工作规则
  README.md      # 项目说明入口
  PRODUCT.md     # 项目目标和受众
  DESIGN.md      # 页面表现规则
  CONTENT.md     # 文案和内容规则
  SITEMAP.md     # 页面结构和导航
  TESTING.md     # 验收清单
  index.html     # 首页：总览
  about.html     # 文档体系、文件用法和使用流程
  file-list.html # 文件列表
  llms.txt       # 给外部 AI 看的站点摘要
  robots.txt     # 爬虫规则
  sitemap.xml    # 站点地图
  assets/
    css/styles.css
    js/main.js
```

## 如何预览

直接用浏览器打开：

```txt
index.html
```

不需要安装依赖，不需要构建。

## 如何用于真实企业网站

1. 保留文件结构。
2. 把 `PRODUCT.md` 改成真实企业信息。
3. 把 `DESIGN.md` 改成真实页面表现规则。
4. 把 `CONTENT.md` 改成真实文案和 SEO 内容。
5. 把 `SITEMAP.md` 改成真实页面结构。
6. 让 AI 先读这些文件，再生成页面。

PRODUCT.md

# 产品与项目上下文

<!--
用途：这个文件管“网站为什么存在”。
写给：AI 和项目参与者。
不要写：颜色、字体、组件细节，那些放 DESIGN.md。
-->

## 项目名称

Website Agent OS

## 项目定位

这是一个“AI 生成静态企业网站”的项目文档示例。

它帮助用户理解：

- 开始做网站前，应该先给 AI 哪些上下文
- 每个 `.md` 文件分别约束什么
- 为什么不能只给 AI 一句“帮我做高级点”
- 网站上线后如何让外部 AI 更容易读懂

## 目标用户

这个示例面向：

- 准备用 AI 做企业网站的人
- 不懂代码但想组织好网站需求的人
- 需要反复让 AI 修改页面的项目负责人
- 想让网站对搜索和 AI 更友好的人

## 用户痛点

- 不知道项目根目录该放什么文档
- 不知道 `AGENTS.md` 和 `DESIGN.md` 分别管什么
- 只给 AI 模糊要求，导致生成结果反复偏离
- AI 会编造企业信息、案例、数据
- 网站生成后缺少 `llms.txt`、`sitemap.xml` 等对外说明

## 网站目标

这个示例网站要让访问者在 3 分钟内明白：

- `AGENTS.md` 管 AI 工作规则
- `PRODUCT.md` 管项目目标
- `DESIGN.md` 管页面表现
- `CONTENT.md` 管文案
- `SITEMAP.md` 管页面结构
- `TESTING.md` 管验收
- `llms.txt` 管外部 AI 如何理解网站

## 转化动作

这个模板的“转化”不是销售，而是让用户完成下一步：

- 复制这套结构
- 替换成自己的企业信息
- 让 AI 按这些文档生成网站

## 信息边界

本项目不代表真实企业业务。

凡是电话、邮箱、地址、客户、案例、价格、资质，都必须用占位符或真实信息替换，不能由 AI 编造。

DESIGN.md

# 设计规范

<!--
用途：这个文件管页面表现规则。
它把页面呈现相关要求整理成 AI 能执行的颜色、布局、组件、禁区和验收标准。
-->

## 总体风格

这个示例网站要表达：

- 清楚
- 克制
- 可信
- 文档感
- 轻微科技感
- 不像营销落地页

页面应该像一套“项目说明书网站”，而不是夸张宣传页。

## 颜色系统

默认使用：

- 背景色：`#F7F3EA`
- 卡片色：`#FFFFFF`
- 主文字：`#20231F`
- 次文字：`#62685F`
- 主色：`#1F5A48`
- 辅助色：`#A86F3D`
- 边框色：`#DDD5C7`

禁止：

- 大面积紫蓝渐变
- 大面积纯黑科技风
- 大红大金节庆风
- 随机多色混搭

## 字体

使用系统字体：

```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
```

规则：

- 中文正文要清楚易读
- 标题要短，不要堆形容词
- 不使用花哨书法字体
- 不使用负字距

## 布局

桌面端：

- 内容最大宽度控制在 `1120px`
- 区块之间留足空白
- 采用多页结构，不把所有内容堆到首页
- 卡片只用于重复信息，不做卡片套卡片

移动端：

- 导航可折叠
- 卡片单列排列
- 按钮和正文不能溢出

## 组件规则

导航：

- 顶部固定导航
- 当前页面有 active 状态
- 页面之间必须互通

按钮：

- 主按钮使用深绿色
- 次按钮使用边框样式
- 文案短，表达动作

卡片：

- 用于展示文件说明、流程、清单
- 每张卡片必须有实际信息

表单：

- 只作静态示例
- 明确提示不会提交数据

## 图片与装饰

这个示例不依赖图片。

可以使用：

- 简单色块
- 线框
- 文档感面板
- 轻微纸张质感

避免：

- 随机图库图
- 空洞装饰图
- 和文档主题无关的插画

## 设计禁区

- 不做单页营销长卷
- 不用“高级感”这种空泛要求代替规则
- 不把所有说明塞进首页
- 不让每个页面风格不一致
- 不编造品牌故事
- 不为了好看牺牲可读性

## 验收清单

生成页面后检查：

- 是否像一个清晰的文档说明网站
- 是否有 3 个完整页面
- 是否每页都说明一个明确主题
- 是否颜色、导航、按钮、卡片一致
- 是否移动端可读
- 是否没有编造真实企业信息

CONTENT.md

# 内容与文案规则

<!--
用途：这个文件管“网站说什么、怎么说”。
不要把页面表现规则写在这里。页面表现规则放 DESIGN.md。
-->

## 语言标准

文件名和技术名使用英文：

- `AGENTS.md`
- `DESIGN.md`
- `llms.txt`
- `HTML`
- `CSS`
- `JavaScript`

正文说明使用中文。

原因：

- 中文更适合解释中文项目需求
- 英文文件名更符合工具和社区习惯
- 技术词保留英文更准确

## 语气

应该：

- 直接
- 清楚
- 像说明书
- 少形容词
- 多具体规则

避免：

- “领先行业”
- “极致赋能”
- “打造闭环”
- “高级感拉满”
- 没有实际含义的营销口号

## 首页文案

主标题：

> 用一套文档，让 AI 稳定生成企业网站。

副标题：

> `Website Agent OS` 示例项目展示了 AGENTS.md、DESIGN.md、PRODUCT.md、CONTENT.md、SITEMAP.md、TESTING.md 和 llms.txt 如何一起工作。

主按钮：

> 查看文档结构

次按钮：

> 查看文件列表

## 页面内容分工

`index.html`：

- 说明这套项目是什么
- 解释为什么先写文档再生成页面
- 总览所有文件

`about.html`：

- 说明项目文档体系
- 解释开发 AI 和外部 AI 的区别
- 逐个解释每个 `.md` 文件怎么用
- 说明文件之间的优先级
- 说明从补齐文档到生成页面的流程

`file-list.html`：

- 展示文件列表
- 链接到各个 `.md`、`.txt`、`.xml`、HTML、CSS、JavaScript 文件

## SEO 关键词示例

- AI 生成企业网站
- DESIGN.md
- AGENTS.md
- llms.txt
- 静态网站模板
- 企业网站项目文档
- AI 网站生成规范

## 禁止内容

- 不出现虚假企业电话
- 不出现虚假客户案例
- 不出现虚假奖项资质
- 不把示例项目包装成真实公司

SITEMAP.md

# 页面结构

<!--
用途：这个文件管“网站有哪些页面、每页讲什么、导航怎么排”。
如果新增或删除页面，要同步修改 sitemap.xml。
-->

## 页面列表

| 页面 | 文件 | 目的 |
|---|---|---|
| 首页 | `index.html` | 总览这套 AI 网站项目文档结构 |
| 文档体系 | `about.html` | 解释开发 AI 文档、外部 AI 文件、文件用法和使用流程 |
| 文件列表 | `file-list.html` | 展示所有文档、页面和资源文件 |

## 导航顺序

1. 首页
2. 文档体系
3. 文件列表

## 首页区块

1. Header
2. Hero
3. 为什么需要这些文档
4. 文件总览
5. 开发 AI 与外部 AI 的区别
6. 推荐起步流程
7. Footer

## 文档体系页区块

1. Header
2. Page Hero
3. 项目根目录文档
4. 网站公开文件
5. 中英文使用原则
6. 文件职责
7. 使用顺序
8. 优先级
9. Footer

## 文件列表页区块

1. Header
2. Page Hero
3. 项目根目录文档
4. 网站公开文件
5. 页面和资源文件
6. Footer

TESTING.md

# 验收清单

<!--
用途：这个文件管“怎么判断网站做完了”。
AI 每次生成或修改页面后，都应该按这份清单自检。
-->

## 页面完整性

- `index.html` 存在
- `about.html` 存在
- `file-list.html` 存在
- 每个页面都有明确主题，不是重复内容

## 导航

- 每个页面顶部导航可用
- 每个页面页脚链接可用
- 当前页面有 active 状态
- 移动端菜单可以打开和关闭

## 内容

- 每个页面只有一个 `h1`
- 每页有唯一 `<title>`
- 每页有 `meta description`
- 文案符合 `CONTENT.md`
- 没有编造企业事实

## 页面表现

- 颜色符合 `DESIGN.md`
- 字体和间距统一
- 卡片和按钮样式一致
- 移动端不重叠、不溢出
- 页面看起来像一个完整网站，而不是几段散文

## 对外 AI 文件

- `llms.txt` 存在
- `robots.txt` 存在
- `sitemap.xml` 存在
- `llms.txt` 能解释网站主题
- `sitemap.xml` 包含当前公开页面

## 最终交付前

- 替换 `example.com`
- 替换所有 `[待补充：...]`
- 检查所有链接
- 检查移动端

站点地图 HTML

index.html      # 首页：总览
about.html      # 文档体系、文件用法和使用流程
file-list.html  # 文件列表，本页直接展示所有关键文件内容

assets/css/styles.css

:root {
  --bg: #f7f3ea;
  --surface: #ffffff;
  --ink: #20231f;
  --muted: #62685f;
  --primary: #1f5a48;
  --primary-dark: #173f34;
  --bronze: #a86f3d;
  --border: #ddd5c7;
  --paper: #efe7d8;
  --radius: 8px;
  --shadow: 0 18px 45px rgba(32, 35, 31, 0.08);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.65;
}

.container {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(221, 213, 199, 0.82);
  background: rgba(247, 243, 234, 0.94);
  backdrop-filter: blur(16px);
}

.nav, .nav-links, .actions, .footer-inner {
  display: flex;
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(32, 35, 31, 0.05);
  padding: 28px;
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  color: var(--ink);
  font: 14px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
  }

  .nav-links.open {
    display: flex;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }
}

assets/js/main.js

const toggle = document.querySelector("[data-nav-toggle]");
const links = document.querySelector("[data-nav-links]");

if (toggle && links) {
  toggle.addEventListener("click", () => {
    const isOpen = links.classList.toggle("open");
    toggle.setAttribute("aria-expanded", String(isOpen));
  });
}