# T1 产品落地页系统规格说明书 v1.0
> yitb.com 产品库 · OpenClaw 生态
> 最后更新：2026-03-25
---
## 1. 定位
产品落地页是 yitb.com 排行榜的承接页。
用户点击排行榜条目 → 进入产品详情页 → 再跳转到产品官网。
每个有排行榜的产品必须有落地页，100% SEO 优化。
---
## 2. 排行榜与落地页映射
| 排行榜 | 落地页URL格式 | 对应产品数 | 状态 |
|--------|-------------|-----------|------|
| AI模型排行榜 | `/product/model-{slug}.html` | 50 | ✅ 已上线 |
| Claw产品榜 | `/product/product-{slug}.html` | 25 | ✅ 已上线 |
| Skills榜 | `/product/skill-{slug}.html` | 30 | ⚠️ 待生成 |
| **合计** | | **105** | |
---
## 3. URL 规范
```
https://yitb.com/product/model-claude-opus-46.html
https://yitb.com/product/product-openclaw.html
https://yitb.com/product/skill-bluebubbles.html
```
**规则：**
- 前缀：`/product/`
- 模型：`model-` + slug
- Claw产品：`product-` + slug
- Skills：`skill-` + slug
- 后缀：`.html`（SEO友好静态风格）
- 全部小写，单词用连字符 `-` 分隔
**slug 命名规则：**
```
Claude Opus 4.6 → claude-opus-46
GPT-5.4 → gpt-54
OpenClaw Skills → openclaw-skills
Wecom OpenClaw Plugin → wecom-openclaw-plugin
```
---
## 4. 页面 SEO 标准（每页必须包含）
### 4.1 Meta 标签
```html
{产品名} - {一句话描述} - 龙虾官网
```
**Example:**
```html
Claude Opus 4.6 - 综合能力第一的旗舰AI模型 - 龙虾官网
```
### 4.2 页面结构
```html
{产品名}
产品介绍
← 含关键词的描述段落（200字+）
核心亮点
← 标签云形式，含关键词
详细参数
← 表格：开发商/评分/价格/上下文窗口
立即使用
← 跳转官网按钮
```
### 4.3 跳转按钮规范
产品页内**必须有**两处"跳转到官网"按钮：
- 页面顶部 Hero 区
- 页面底部"立即使用"区
```html
🌐 跳转到官网
```
**跳转按钮用 `official_url`（官网链接），不用产品页URL。**
### 4.4 排行榜 data-url 规范
排行榜页面的 `data-url` 指向产品页URL（不是官网URL）：
```html
```
---
## 5. 页面模板规范
### 5.1 必须区块
| 区块 | 内容 | 位置 |
|------|------|------|
| 导航栏 | Logo + 龙虾AI | 顶部固定 |
| Hero区 | 徽章 + Logo + 名称 + 描述 + 官网跳转按钮 | 首屏 |
| 产品介绍 | 长段落描述（200字+）+ 分类标签 | 正文第一屏 |
| 核心亮点 | 标签云（6个） | 正文 |
| 详细参数 | 表格（开发商/评分/价格等） | 正文 |
| 立即使用 | 官网跳转按钮（醒目样式） | 正文末 |
| Footer | 龙虾AI + 更新日期 | 底部 |
### 5.2 设计规范
- **配色：** 深色顶栏（#1a1a2e）+ 橙红主色（#e74c3c）+ 白色卡片
- **字体：** `-apple-system, BlinkMacSystemFont`（系统字体）
- **移动端：** 响应式，Hero h1 在手机上缩小到 26px
- **Logo Emoji：** 每个产品有对应 Emoji logo（如 🤖 AI模型 / 🦞 OpenClaw / ✏️ Cursor）
- **评分显示：** 模型用 ELO评分，Claw产品用 龙虾指数
### 5.3 CSS 禁区
- **不要**在 CSS 中使用 `{` 作为占位符（与 Python `str.format()` 冲突）
- 使用 `%` 风格的 CSS minifier 压缩，或用双花括号 `{{` 转义
---
## 6. 数据管理
### 6.1 数据源文件
| 文件 | 位置 | 用途 |
|------|------|------|
| `products_db.json` | 本地 `tasks/T1/` | 50模型 + 25产品完整数据 |
| `rankings.json` | 服务器 `/alidata/www/yitb/data/` | 模型排行数据（含url字段）|
| `claw_rankings.json` | 服务器 `/alidata/www/yitb/data/` | Claw产品数据（含url字段）|
| `skills_rankings.json` | 服务器 `/alidata/www/yitb/data/` | Skills数据（含url字段）|
### 6.2 字段规范（JSON）
**模型数据：**
```json
{
"name": "Claude Opus 4.6",
"slug": "claude-opus-46",
"provider": "Anthropic",
"elo": 1476,
"category": "flagship",
"input_price": 5.0,
"output_price": 25.0,
"context_window": 200000,
"release_date": "2024-03",
"tagline": "综合能力第一的旗舰AI模型",
"highlights": ["长上下文","强推理","优秀写作","代码生成"],
"logo": "🤖",
"url": "https://yitb.com/product/model-claude-opus-46.html",
"official_url": "https://www.anthropic.com/claude"
}
```
**Claw产品数据：**
```json
{
"name": "OpenClaw",
"slug": "product-openclaw",
"provider": "OpenClaw",
"category": "Claw产品",
"lobster_score": 98,
"tagline": "开源AI智能体开发平台",
"highlights": ["开源免费","MCP支持","500+Skills","本地运行"],
"logo": "🦞",
"url": "https://yitb.com/product/product-openclaw.html",
"official_url": "https://openclaw.ai"
}
```
**Skills数据：**
```json
{
"name": "@wecom/wecom-openclaw-plugin",
"slug": "skill-wecom-openclaw-plugin",
"provider": "WeCom",
"category": "communication",
"tagline": "企业微信 OpenClaw 频道插件",
"highlights": ["企业微信","官方插件","消息同步"],
"url": "https://yitb.com/product/skill-wecom-openclaw-plugin.html",
"official_url": "https://github.com/wecom/OpenClaw-plugin"
}
```
---
## 7. 生成流程
### 7.1 完整重建（当有新增产品时）
```
1. 更新 products_db.json（本地）
└── 补充新产品的 name/slug/tagline/highlights/official_url/logo
2. 运行生成脚本
└── python3 generate_product_pages.py
├── 本地 /tmp/yitb_pages/ 生成 HTML
├── 更新 products_db.json 的 url 字段
└── 更新 rankings/claw_rankings/skills_rankings 的 url 字段
3. 上传到服务器
└── scp *.html root@server:/alidata/www/yitb/product/
chown -R apache:apache /alidata/www/yitb/product/
4. 上传更新后的 JSON
└── scp rankings.json root@server:/alidata/www/yitb/data/
scp claw_rankings.json root@server:/alidata/www/yitb/data/
scp skills_rankings.json root@server:/alidata/www/yitb/data/
```
### 7.2 单产品更新
直接更新 `products_db.json` 中对应条目，然后重新生成该产品页 + 上传。
### 7.3 生成脚本位置
```
/Users/evabot/Documents/EvaBot/tasks/T1/generate_product_pages.py
```
---
## 8. 当前进度
### 8.1 已完成
| 类型 | 数量 | 文件 | URL |
|------|------|------|-----|
| AI模型 | 50 | ✅ 已生成上传 | `/product/model-*.html` |
| Claw产品 | 25 | ✅ 已生成上传 | `/product/product-*.html` |
| Skills | 30 | ⚠️ 待生成 | `/product/skill-*.html` |
### 8.2 待完成
- [ ] Skills 详情页生成（30个 skill 产品页）
- [ ] Skills JSON 的 `url` 字段更新为产品页URL
- [ ] 百度站长平台提交产品页 sitemap
- [ ] 批量验证所有105个产品页 HTTP 200
---
## 9. 模板文件
### 9.1 产品页 HTML 模板
见：`generate_product_pages.py` 内的 `HTML_TPL` 常量
### 9.2 相关PHP页面
| 文件 | 用途 |
|------|------|
| `page-models.php` | AI模型排行榜页面 |
| `page-claw.php` | Claw产品排行榜页面 |
| `page-skills.php` | Skills排行榜页面 |
排行榜页面的 `data-url` 读取 JSON 的 `url` 字段。
---
## 10. 安全与维护
- **备份：** 修改 `products_db.json` 前先备份
- **属主：** 上传后必须 `chown apache:apache`，否则 403
- **去重：** slug 不得出现双前缀（如 `model-model-xxx`）
- **CSS bug：** Python `str.format()` 与 CSS `{}` 冲突，必须用 `%dict` 风格或 `{{` 转义
---
*本文档是 T1 产品落地页系统的唯一权威来源。*