# Principles · 7 条跨产品线硬规则

> **任何 UI 工作都必须满足的最小集合**。
> 不分产品线 / 分设备 / 分市场 —— 这些是通用的底线。
>
> **怎么用**：做 UI 工作时，对照这 7 条自检。**任一不通过 = 视为交付未完成**。

---

## 1. 触达工具 = **市场合规通道**

**规则**：所有触达用户的方式，必须用**目标市场的主流工具**。

| 市场 | 用 | 禁 |
|------|----|----|
| **MX（墨西哥）** | WhatsApp / WhatsApp Business | ❌ 微信 / WeChat |
| **CN（中国）** | 微信 / 企业微信 | ❌ WhatsApp |
| **US / EU** | Email / SMS / 主流 IM | ❌ 跨市场混用 |
| **全球** | 适配每个市场的本地工具 | 单一全球渠道 |

**反查清单**：
- [ ] CTA 按钮链接里的 `wa.me` / `weixin.qq.com` / `mailto:` 跟目标市场匹配？
- [ ] 客服 / 销售联系通道用了市场习惯的工具？

**为什么**：用错渠道 = 用户不知道怎么找你 = 转化直接归零。

---

## 2. 图标唯一来源 = **单一图标库**

**规则**：图标必须走 **一个图标 CDN**，禁止混用多种方案。

**推荐**（按场景）：

| 场景 | 推荐 | CDN |
|------|------|-----|
| **品牌 logo** | `simple-icons:byd` / `simple-icons:xpeng` | Iconify |
| **功能图标**（搜索 / 关闭 / 设置） | `lucide:` 或 `mdi:` | Iconify |
| **同一页面不混用** lucide + mdi | 选一个，**保持一致** | — |

**禁止**：
- ❌ Font Awesome / Material Icons 字体版 / Iconfont（多 CDN 难维护）
- ❌ 用 emoji 替代图标（系统字体 + 表情不一致）
- ❌ 用截图当图标（不可缩放）
- ❌ 同一页面混 `lucide:` + `mdi:` + `fa-` + 自造 SVG

---

## 3. **单文件自适应** = 一份 HTML 覆盖 PC + H5

**规则**：产品原型 / 落地页 = **一份 HTML 文件**，用 CSS `@media` 同时覆盖 PC 和移动端。

**断点标准**：**1024px**（≥1024px = PC，<1024px = H5）

**禁止**：
- ❌ `xxx-pc.html` + `xxx-h5.html` 两个独立文件（导致不同步）
- ❌ 用 JS 检测屏幕尺寸切版本（增加复杂度）

**反查清单**：
- [ ] 断点 ≥1024 / <1024 都正确切换布局？
- [ ] PC / H5 共用同一个 `<header>` / `<main>` / `<footer>`？

**为什么**：维护成本 + 一致性 + Cloudflare Pages 静态托管的最佳实践。

---

## 4. **数据真实性（P0 错误 · 最严）**

**规则**：UI 上显示的任何数字 / 文字，必须**真实来源**。

**禁止**：
- ❌ lorem ipsum / "示例数据" / 占位文案
- ❌ 编造价格 / 销量 / 评分 / 用户评论 / 用户名
- ❌ 示意曲线 / 假序列 / 模糊词（"约""大概"）
- ❌ 占位图片（`https://via.placeholder.com/...`）

**允许**：
- ✅ 平台自有数据（产品页直接显示的图 / 参数 / 价格 / 评分）
- ✅ 缺数据时**明确标注** `[数据来源：需人工确认]`，留空等用户补
- ✅ 引用第三方数据时确认来源可靠（评论机构 / 新闻稿）

**反查清单**：
- [ ] 每个数字字段都有 `<-- source: -->` 注释？
- [ ] 数据缺失的字段是留空 + 标注，不是占位？
- [ ] 引用外部数据有可验证 URL？

---

## 5. **留资表单 = 合规 + 隐私脚注**

**规则**：所有要求用户填手机号 / 邮箱 / 身份证号 / WhatsApp 号的页面，CTA 按钮下必须有：

1. **隐私政策链接**（市场对应法规）
2. **中介免责说明**（第三方处理用户数据）

**示例（MX 市场）**：
```html
<a class="btn" href="https://wa.me/...">联系销售</a>
<p class="privacy">
  Al enviar, aceptas nuestra
  <a href="https://your-platform.com/legal/privacy">Política de Privacidad</a>
  y autorizas a TuPlataforma como intermediario entre tú y los proveedores.
</p>
```

**适用场景**：订阅卡 / 转人工 / 申请表单 / 留资弹窗 / 任何价格影响数页面。

---

## 6. **颜色系统不互通** = 品牌色按产品线分

**规则**：每条产品线有独立的品牌色，**禁止混用**。

**典型结构**：

| 产品线 | 主色 | 辅助色 | 适用场景 |
|--------|------|--------|----------|
| 前台用户端 · 品牌 A | amber + navy | 蓝 / 绿 / 灰 | 营销 / 内容 |
| 前台用户端 · 品牌 B | 5 色渐变 | 蓝 / 灰 / 黄 | 平台 / 工具 |
| 后台 · 内部工具 | `#314256` 灰 | 单一灰板 | 数据 / 后台 |
| 浮层 / 嵌入组件 | 跟宿主一致 | — | 跟宿主 |

**禁止**：
- ❌ 把前台营销色用到内部后台
- ❌ 把品牌 B 渐变用到品牌 A 的报告
- ❌ 后台灰板用到前台营销页

**反查清单**：
- [ ] 同一项目内颜色 token 按产品线命名（`--cavi-primary` vs `--admin-bg`）？
- [ ] 不混用品牌色？

---

## 7. **多环境分流**（适用于对齐平台真实页面）

**规则**：如果 UI 要对齐真实平台（100% copy 或集成），按平台环境区分。

**典型环境分流表**：

| 环境 | URL 参数 | 用途 |
|------|----------|------|
| **稳定版** | `?env=stable` | 基础数据 / 默认 |
| **灰度版** | `?env=canary` | 新功能 / 灰度 |
| **实验版** | `?env=experiment` | A/B 测试 |

**适用**：截图 / 抓数据 / 同步设计稿时，**注明用的是哪个环境**。

**反查清单**：
- [ ] UI 上的数据 / 截图来自哪个环境？
- [ ] 跨环境差异（如 canary 有新组件，stable 没有）有标注？

---

## 🎯 自检 checklist（每个 UI 交付前）

```
✅ 1. 触达工具跟目标市场匹配
✅ 2. ICON 走单一 CDN（同一页面不混用）
✅ 3. 单文件自适应（断点 1024px）
✅ 4. 数据真实（无占位 / 示意 / 模糊词）
✅ 5. 留资表单有隐私脚注
✅ 6. 颜色 token 按产品线分（不互通）
✅ 7. 环境分流（如果是 100% copy / 平台集成）
```

**任一不通过** → 视为交付未完成。

---

## 🔗 相关文档

- [`tokens.md`](./tokens.md) — 颜色 / 字体 / 间距 设计变量集中版
- [`components/`](./components/) — 组件库（Button / Input / Tag / Tabbar / Badge）
- [`demo/`](./demo/) — 完整生产页 demo
- [`SKILL.md`](./SKILL.md) — AI 加载的 skill 入口