---
name: 网站审美与搭建总skill
description: 规划、设计、搭建、打磨、审查或部署任何企业官网 / 产品网站 / 落地页时使用——从事实清单、定方向写 DESIGN.md、token、页面与文案，到动效、手机与微信适配、多语言、SEO、无障碍、Playwright 验证和 Cloudflare Pages / 服务器部署的整套审美标准与流程。
---

# 网站审美与搭建总skill

这份总 skill 合并了三部分内容：
- 三个已上线或已交付的静态站的实践：工业 B2B 企业站（深色石墨 + 单一橙色、三语）、个人公司站（瓷白 + 深墨 + 衬线）、AI 服务站（瓷白 + 无衬线 + 口号排版）。
- `网站skill/` 合集里的 13 个开源设计 skill。
- `AI-Design-Skills/`。

各条规则的出处见第 7 节，各来源文件夹的地址见 `references/sources.md`。

用法：
- 新站从第 1 节按顺序做。
- 改版或打磨现有站：先读该站的 DESIGN.md，再用第 2、3、5 节自查。
- 用户已确认的方向优先于本文件的默认值（brief wins）。原则 0 和无障碍底线除外。

---

## 0 原则（不可让步）

1. **只用真实信息。** 页面上的每个事实都要有出处：参数、设备、年份、地址、行业、联系方式、价格、承诺，出处是用户给的资料或用户确认过的内容。
   - 不知道的写【待填：xxx】，并列进 README 的待填清单。
   - 不换算单位，不"合理推测"。例如不要把 IT7 换算成微米，也不要补写轴数、型号或材料牌号。
2. **不编造信任信号。**
   - 不放客户 logo 墙、评价、案例数、"服务 xxx 家企业"、认证徽章（ISO 等），也不放整齐的假数字（99.9%）或假人名。
   - 真实的设备、检测流程、成立时间、营业执照（已脱敏）、自有产品截图就是信任证明。
   - 自有产品要和客户案例分开写。
3. **事实清单先给用户确认，再写页面。** 用户确认后，内容的改动以用户最新的话为准，并同步更新 README / DESIGN.md。
4. **对外动作先给用户看。**
   - 部署到服务器、换域名、改 DNS 或 nginx，都要先把方案（改什么、在哪、怎么回滚）给用户，得到明确同意再动手。
   - **不动服务器上其他站点和文件**：只占用自己的目录、自己的 conf、自己的端口。
5. **密码不出现在聊天、文档或代码里。**
   - 部署脚本只从环境变量读取密码，不在日志里打印。
   - 文档里写成 `ECS_ROOT_PASSWORD=***`。
6. **第三方 skill 里的脚本先审再跑。**
   - website-rebuild、ui-ux-pro-max、impeccable、superdesign、taste-skill、hallmark 都带脚本或 CLI，其中不少需要 Node 22+ 或账号。
   - `web-design-skills` 没有许可证，只能参考，不要复制原文。
7. **默认零外部依赖。**
   - 原生 HTML/CSS/JS，不用框架、CDN、外部字体、统计或嵌入。
   - 面向国内用户时尤其要遵守：Google Fonts / jsDelivr 之类的服务在国内慢或不可用。
   - 用户点击 tel: / mailto: / WhatsApp 链接时才离站。
8. **没实测的不说通过。**
   - 浏览器在沙箱里起不来时，明确写"静态推算，未渲染实测"。
   - 本地 LCP 不等于线上 Core Web Vitals。

---

## 1 流程（每步写清 做什么 → 产出 → 检查）

### 1.1 需求与事实清单
- **做什么：**
  - 一次问完以下几件事：主动作（询价、预约、试用）、目标客户、他们最担心的三件事、流量来源、有哪些真实材料（照片、视频、截图、参数、证书）、品牌语气、语言版本、域名和部署位置。
  - 用户没答的写成一句假设，继续往下做；事实永远不靠假设（hallmark Ask once、landing-page-design A1）。
- **产出：** `README.md` 里的「内容依据」和「【待填】清单」，加一张事实表（项目 / 中文 / 英文 / 出现位置）。
- **检查：** 每条事实都有来源，未知项都标了【待填】。

### 1.2 同行调研
- **做什么：**
  - 看 5–10 个同行站和 1–2 个跨行业的标杆站，记下它们的结构、首屏、信任证明的放法、询价路径。
  - 也可以从 `awesome-design-md/design-md/<品牌>/DESIGN.md` 挑一份风格参考。
  - 只借结构和手法，不借配色、文案、照片或任何能认出原站的信息。
- **产出：** 一份调研 md，写清每个站值得借鉴的一点和要避开的一点。

### 1.3 定方向，写 DESIGN.md
- **做什么：**
  - 用一句话写下方向，例如「石墨、钢色与真实制造」「像一份克制的私人账本」。
  - 风格从行业的材料、语汇和使用场景里来（frontend-design）。
  - 先列一个紧凑的方案：色板 4–6 个命名 hex、字体角色、版式概念（可以画 ASCII 线框）、原则。
  - 写完自问："换一个同类客户，我会不会给出一模一样的方案？"会的话就改掉其中一项，并写明原因（frontend-design 两遍法、hallmark mirror test）。
- **选风格包：** 可参考 design-taste 的风格包：
  - corporate-trust：B2B、金融、政务。
  - brutalist-industrial：工业、技术。
  - quiet-luxury / editorial-minimal：个人品牌、高端服务。
  - dark-tech 等。
- **选模式：** 按 impeccable 的四种模式定基调：营销页是 Persuade，文档是 Read，后台是 Operate，作品集是 Experience。
- **产出：** 项目根目录的 `DESIGN.md`，包括：
  - Direction、Tokens 表（色值 + 用途）、对比度计算结果、字体与字号档、网格与间距。
  - 组件规则、图片规则、动效表（效果 / 实现 / 限制）。
  - Do / Don't、「高级感」逐项核对表（项目 / 状态 / 在哪里）、Verification 记录。
- **格式：** 可参考 google-design-md 规范，即 YAML token 加 prose 说明为什么这样定；可以用 `npx @google/design.md lint DESIGN.md` 校验。
- **生效方式：** 所有页面都按 DESIGN.md 做。多个 AI 助手协作时，在 AGENTS.md 里写一句"做 UI 前必须先读 DESIGN.md / 某 skill；两者冲突时以 DESIGN.md 为准"。

### 1.4 Token
- **做什么：** 把 DESIGN.md 落成 `:root` 变量，起始模板见 `references/design-tokens-template.css`。
- **规则：** 组件里不出现裸 hex 和裸 font-family（hallmark Floor 1、taste-color）。
- **检查：** `grep -nE '#[0-9a-fA-F]{3,6}' assets/*.css`，结果应只出现在 token 区和 print 区。

### 1.5 信息架构与页面
- **企业站常见页面：** 首页、能力 / 服务、质量 / 流程、行业 / 应用、关于（登记信息）、询价 / 联系、FAQ、隐私、条款、404、语言选择页（多语言时）。
- **首页的推荐顺序：**
  - Hero（标题、一句说明、主 CTA、次 CTA、一条真实承诺，例如回复时效）
  - 事实条（设备、年份、地点、已确认参数、行业）
  - 能力
  - 应用 / 行业
  - 质量
  - 合作流程（三到四步）
  - 实拍图集
  - FAQ（6–12 问）
  - 收尾 CTA（文案和首屏一致）
  - 完整页脚（法律信息、备案、联系方式）
- 落地页按 landing-page-design A2 / taste-landing-page 的结构做：Hero → 信任条 → 痛点 → 3 个能力 → 证据 → 三步 → FAQ → 收尾 CTA。
- 页面按真实站点在该类目的「解剖」来搭，不要套"图 + 步骤 + 邮件条"的默认模板（hallmark anatomy）。
- **公共结构生成：** 页头页脚等公共部分可以用 Python 标准库的生成器（`scripts/build_site.py`）输出独立的静态 HTML。**生成器和手改的 HTML 必须同步**，否则下次生成会覆盖手改的内容。

### 1.6 文案
- **首屏：** 8 秒内回答三件事：这是什么、给谁用、我下一步做什么（taste-landing-page）。
- **按钮：** 写"动词 + 得到什么"，例如"获取报价""上传图纸""预约免费体检"。不写"提交""了解更多"。同一动作全流程用同一个名字（frontend-design）。
- **好处和数字：** 先讲好处再讲功能，数字要具体且真实。每个说法都配限定或出处，"最好"改成可查证的说法（corporate-trust）。
- **AI 套话黑名单：** 赋能、颠覆、无缝、一站式、全方位、引领未来、下一代（landing-page-design B8 的中文版）。成功提示不加感叹号。报错要说清原因和怎么改，不道歉。
- **中文排版：**
  - 标题不给单个词换色或加粗（frontend-design、hallmark Floor 3）。
  - 中文标题不加负字距；大字号最多 -0.01em。
  - 标题用 `text-wrap: balance`，正文用 `pretty`。
- **术语统一：** 用通用名词，例如「三坐标测量机（CMM）」。不写没授权的仪器品牌，也不写没确认的规格，例如轴数。

### 1.7 图片、插画与 AI 氛围图
- **真实主体只用实拍：** 产品、车间、设备、团队都用实拍或真实截图（hallmark、taste-skill imagery）。
  - 截图要注明范围和时间，演示数据要标明是演示。
  - 来源登记在 `assets/images/sources.json`，记原文件、尺寸、授权。
- **统一裁切：** 用 `.image-frame` 容器统一比例、细边框和说明文字。
  - 细长零件、营业执照用 `contain`，保持完整。
  - 营业执照不做悬停缩放，原有的遮盖和水印不改。
- **工程风 SVG 插画（可选）：** 本地托管，只用系统字体，没有外链和脚本，不写未确认的数字。
  - 桌面版和手机竖版分开：`<picture>` 里 `(max-width: 767.98px)` 指向 `-mobile.svg`。
  - 多语言用 `-en` / `-ja` 后缀。
- **AI 氛围图规则（各站一致）：**
  - 只做装饰纹理，例如金属微距、冷却雾气、蓝图钢板、玻璃光影。画面里**不能有文字、品牌、人物、真实机器或产品**，不能冒充实拍。
  - 写法：`<picture class="atmo-bg" aria-hidden="true">` 作为 `.has-atmo` 区块的第一个子元素，`img alt="" loading="lazy" decoding="async"`。首屏背景例外，改用 `fetchpriority="high"`，不懒加载。
  - 图上压 `::after` 渐变遮罩，保证文字达到 AA。参考值：浅色遮罩不透明度 ≥ .92，深色遮罩 ≥ .84，按底图的黑白极值做保守计算。
  - 多尺寸 WebP：桌面 800 / 1600w，手机 600 / 1024w。验证脚本只对 `picture.atmo-bg[aria-hidden=true]` 里的图豁免非空 alt。
- **生图方法：** 用 Claude Code 的 `gpt-image-bridge`，命令是 `~/.claude/skills/gpt-image-bridge/bin/gpt-image-2 "<详细的美术指导 prompt>" /绝对路径/out.png [--size WxH]`。
  - 前提是 codex CLI 已用 ChatGPT 账号登录。
  - 每张约 4–6 分钟，放后台跑。
  - 生成后先看一遍图，再转成 WebP 多尺寸。
- **性能：** 每张图都写 `width` / `height`。首屏图 `fetchpriority="high"`，首屏以下懒加载；用 WebP / AVIF。首页总重 ≤ 1.5MB（taste-web-performance）。

### 1.8 动效
详见第 3 节，模板见 `references/motion-template.js`。先在 DESIGN.md 的动效表里列清楚，再实现。

### 1.9 响应式与微信
详见第 4 节。从 320px 写起（mobile-first），断点用 768 / 1024 / 1280。

### 1.10 多语言
- **目录和文件名：** 用 `zh/` `en/` `ja/` 目录，各语言文件名严格一致。根目录 `index.html` 是语言选择页，作 `x-default`。
- **语言切换：** 切到**同名页**而不是首页，链接带 `lang` 属性。
- **lang 属性：** `<html lang="zh-CN|en|ja">`。CSS 用 `:lang(zh-CN)` / `:lang(ja)` 分别调标题字号和行高；日文 / 中文行高要比英文大，例如手机 H1 中文 36px / 1.25，日文 34px / 1.3，英文 40px / 1.15。
- **新增语言：** 写一个幂等脚本，从已有语言生成，例如 `build_ja.py` 加一张译文表。
  - 脚本先保护 script / style 的内容。
  - 未翻译的串要报出来，不能静默保留英文。
  - 同时把新语言加进所有页的语言切换、hreflang 和 sitemap。
- **不翻译的内容：** 法定名称、注册地址、JSON-LD 的 legalName 保留原文。译名要注明是译名。
- **字体栈：** 每种语言都有系统字体回退，日文加 Hiragino Sans、Yu Gothic、Noto Sans CJK JP。
- **仅限某语言的内容：** 例如开票信息只放中文页，验证脚本里要写明这一点。

### 1.11 SEO / JSON-LD / hreflang
- **每页都要有：**
  - 唯一的 `<title>` 和 description、`canonical`。
  - 全套 `hreflang`：各语言加 `x-default`。
  - Open Graph：og:title、og:description、og:url、og:image、og:image:alt。
  - 一个 `Organization` JSON-LD，只写确认过的字段。
- **站点文件：** `sitemap.xml` 包含根页面和全部本地化页面；`robots.txt` 指向 sitemap。
- **其他：** 语义化 HTML（header / nav / main / section / footer）、每页一个 h1、标题层级连续。FAQ 用问答写，可以加 FAQPage schema。自定义 404，页脚放隐私和条款链接（landing-page-design A7 / B10）。
- **域名没定时：** 统一用 `https://example.com` 占位并标【待确认】，确认后在生成器里改一处 BASE。

### 1.12 无障碍
- **对比度：** 正文 ≥ 4.5:1；大字（≥ 24px 或 18.66px 粗体）≥ 3:1；控件边界、图标、焦点环 ≥ 3:1。要用公式算，不能目测，结果写进 DESIGN.md。
- **焦点和键盘：**
  - 全站 `:focus-visible` 用 2px 强调色，outline-offset 3–4px；深色区块里改用亮色。
  - 每页有"跳到正文"链接。键盘能走完全页，菜单和弹窗能用 Escape 关闭并把焦点还回去。
- **表单：** label 在字段上方，不能只用 placeholder 当标签。错误就地提示，加 `aria-invalid` / `aria-errormessage`，并把焦点移到第一个错误。
  - 状态不只靠颜色表达，错误要有文字和边框。
  - 提交失败时保留已填的内容。
- **装饰元素：** 装饰图标 `aria-hidden`，纯图标按钮要有可访问名称。动画数字给屏幕阅读器读最终值。
- **缩放：** 200% 缩放（约等于 640px 宽）时没有横向滚动。

### 1.13 验证
用 Playwright（Python 或 Node）脚本加截图做验证，清单见第 5 节和 `references/verify-checklist.md`。

### 1.14 部署
- **Cloudflare Pages（免费，带 HTTPS，适合临时官网或海外 / 英文站）：**
  1. 先组一个**干净的部署目录**：只放 HTML、assets、robots、sitemap；排除 `.git`、scripts、screenshots、源图、`.agents/`。
  2. 在可写目录里运行：
     `cd /tmp/cfdeploy && export CLOUDFLARE_ACCOUNT_ID=<账号ID> WRANGLER_CACHE_DIR=/tmp/cfdeploy/.cache && wrangler pages deploy <部署目录> --project-name=<项目名> --branch=main --commit-dirty=true`
  3. 部署后用 curl 检查每个 URL 都返回 200 或预期的 308，HTTPS 可用，语言选择页正常。
  - 每个站用自己的 Cloudflare 项目，不要覆盖别人的项目。
  - `*.pages.dev` 在国内访问不稳定。中文主站长期放在国内服务器上更好，前提是先办 ICP 备案。
- **自有服务器（nginx）：**
  1. 先把方案给用户看，同意后再动。
  2. 备份现有目录（`<目录>.bak-时间戳`）。
  3. 用 `git archive` 打包上传，原子替换**本站目录**。
  4. 只写本站的 conf，不抢 `default_server` 和别人的端口。
  5. `nginx -t` 通过后才 `systemctl reload nginx`，失败就回滚本站 conf。
  6. 在服务器内部和外网分别验证。
  - 国内服务器绑域名必须先完成 ICP 备案，否则云厂商会拦截 80/443 访问。备案号要放进页脚。
- **部署前给用户看：** 要部署哪个 commit、哪些文件、回滚方式。

### 1.15 交付
- **截图：** 放在 `screenshots/<版本>/`，包括：
  - 1440 和 390 的首屏与全页截图。
  - 手机菜单展开、微信弹窗、询价页桌面和手机。
  - 每种语言的首页。
- **报告：** `verification.json`，记录各项检查、错误数、外部请求数和截图清单。
- **汇报内容：** 改了什么、线上 URL、哪些没实测、【待填】清单、下一步。

---

## 2 审美标准「高级感」清单（合并去重，附数字）

**方向**
- [ ] 有一句话方向和一份 DESIGN.md，所有页面共用同一套 token。
- [ ] 大胆只用在一处，即一个"让人记住的东西"。通常是首屏最有行业代表性的真实画面或一句话，其余部分保持克制。完成前"摘掉一件配饰"（frontend-design）。
- [ ] 亮色还是暗色按使用场景选，不按行业惯性选（impeccable）。

**色彩**
- [ ] 中性色 60%、结构色（细线 / 边框）30%、**一个**强调色 10%（taste-color）。
  - 强调色只用在主按钮、链接、激活态、焦点和关键数字上。
  - 状态色只表示状态，不作装饰。
- [ ] 表面分 2–3 层，例如 paper / surface / panel；文字分 3 档：主 / 正文 / 辅助。
- [ ] 细线颜色不承担控件边界；输入框边界另设 token，且 ≥ 3:1。
- [ ] 背景用纯色，不用渐变。渐变只用于图上保证可读性的遮罩。不要紫蓝渐变、发光、玻璃拟态，也不要每张卡片下都铺一层软阴影。
- [ ] 主按钮上的文字和按钮底色对比度要算过。浅色强调色上通常用深色字。
- [ ] 照片保留实物颜色；如需统一，可以用 CSS 灰度，但不改原图。

**字体**
- [ ] 最多两套字体。国内站默认用系统字体栈，不下载字体。
  - 中文：PingFang SC、Hiragino Sans GB、Microsoft YaHei、Noto Sans CJK SC。
  - 衬线标题可以用：Songti SC、Noto Serif CJK SC。
  - mono 只用于真实的技术数据和测量值，计数加 `tabular-nums`。
- [ ] 字重 ≤ 3 种，推荐 400 / 500 / 600。不用斜体，不用伪粗体。
- [ ] 字号固定档位，不留随意数值。
  - 推荐 12 / 14 / 16 / 18 / 20 / 24 / 32 / 48 / 64px，或五档制：注释 13、正文 16、提要 22、区块 clamp(1.75rem, 3.2vw, 2.6rem)、页面 clamp(2.2rem, 4.8vw, 3.75rem)。
  - 首页 H1：桌面最大约 64–84px，手机 28–40px。
- [ ] 行长：正文 45–75 字符，中文约 38em，英文 ≤ 72ch。行高：正文 1.6–1.8，标题 1.05–1.25（中日文取高值）。
- [ ] 正文 ≥ 16px，任何文字 ≥ 12px（手机端辅助文字 ≥ 14px）。iOS 上输入框 ≥ 16px，防止聚焦时页面放大。
- [ ] 标题在中文语义完整处断行，不出现孤字（`text-wrap: balance`）。

**网格与留白**
- [ ] 12 列网格 `repeat(12, minmax(0, 1fr))`。
  - 容器最大 1240–1280px，居中；1920 宽屏时只加宽两侧，正文行长和网格不变（hallmark）。
  - gutter：桌面 32px，手机 16px。
  - 两侧边距：桌面 ≥ 48px，手机 20–24px，或用 `clamp(20px, 5vw, 64px)`。
- [ ] 间距只用档位 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 160px。
- [ ] 区块之间的距离：企业 / 工业站桌面 96px、手机 64px；编辑式 / 奢华站 `clamp(96px, 12vw, 160px)`，quiet-luxury 要求 ≥ 140px。首屏上下留白 ≥ 18vh（编辑式）。
- [ ] 标题上方的空间大于下方，同组元素靠紧，不同组拉开。
- [ ] 用细线和留白分组，不要把内容切成一排同样圆角、同样阴影的卡片，更不要卡片套卡片。
- [ ] 不对称分栏，例如 7/5、5/7、7 + 1 空 + 4，比平均三栏更像"设计过的"。

**形状**
- [ ] 圆角一套到底。工业 / 编辑风用 0–2px（弹窗 4px）；B2B SaaS 用 6–8px；胶囊形只给小标签。
- [ ] 层次只用一种方式表达：边框或阴影，二选一。不要用 4px 4px 0 那种硬投影，除非方向本身就是新粗野主义。

**首屏**
- [ ] 一张真实主视觉，或一句排版本身就是视觉的话，加一句说明、一个主 CTA 和最多一个次 CTA。不要用"大数字 + 小标签 + 渐变"的默认套路。
- [ ] 1280×800 和 390×620（微信内置浏览器的可用高度）下，标题、主 CTA 和关键承诺都在首屏内。
- [ ] 首屏约 80 字以内（hallmark）。

**"AI 味"反模式，看到就改**（frontend-design、taste-skill tells、hallmark、impeccable）
- 紫蓝渐变、渐变文字、发光按钮、玻璃卡片、每张卡片下的灰色软阴影。
- 三张一样的图标卡片，图标还放在圆角方块里；Bento 圆角拼块墙；卡片套卡片。
- 每个标题上方都有全大写字距拉开的眉标（eyebrow），Hero 上方有 "New" / "Beta" 胶囊。
- 标题里只给一个词换色或改斜体。
- 用中点串起来的元信息（A · B · C），链接文字后硬加 "→"，装饰性的"在线"小圆点。
- 内容不是序列却用 01 / 02 / 03 编号；拿 mono 字体冒充"技术感"。
- 用灰条和环形图拼出来的假仪表盘，emoji 当图标。
- 每个区块都"淡入上滑"，视差、自动轮播、循环漂浮。
- Lorem ipsum、Acme、"张三"、99.99%。

**浏览器细节**（impeccable craft-floor）
- [ ] 选区颜色、光标颜色、滚动条、焦点环、下划线偏移、表格数字都按色板主题化。
- [ ] 每个交互元素都有 hover、active（缩到 0.98 或下沉 1px）、focus、disabled、loading 和错误态，空状态要给出引导。

---

## 3 动效规范

- **原则：** 动效用来解释界面，不是装饰。
  - 用户没触发的动效要少而准，一个编排好的时刻比到处散落的效果好。
  - 响应用户操作的动效（展开、确认）可以放心用。
  - 默认 HTML 里内容全部可见，动效只是渐进增强。
- **只动 `transform` 和 `opacity`。** 永远不写 `transition: all`，不对 width / height / top / left / margin 做动画，不设常驻 `will-change`，滚动时不测量布局。
- **时长 token**（taste-motion）：
  - hover / 按下：100–200ms。
  - 小状态切换：200–300ms。
  - 区块显现：500–700ms。
  - 首屏序列：600–900ms，品牌横梁这类单次动画可到 1.2s。
  - 首屏背景慢缩放 `scale(1 → 1.04 至 1.06)`，18s，alternate。这是唯一允许的"环境慢动"，减少动态时关闭。
- **缓动：**
  - 入场 / 显现：`cubic-bezier(.22, 1, .36, 1)` 或 ease-out。
  - UI 状态：`cubic-bezier(.4, 0, .2, 1)`。
  - 退场比入场更快。不拿 `ease-in-out` 当万能曲线。
- **滚动显现：**
  - 全站**只用一个** `IntersectionObserver`，同时负责内容块和计数。
  - `opacity 0 → 1` 加 `translateY(12–20px → 0)`。
  - 每个元素只播一次，显现后立刻 `unobserve`。
  - 同组子元素错开 60–70ms，最多 3–4 档（0 / 60 / 120 / 180ms）。
  - 父子元素不叠加动画：一个块显现，或者它的子元素显现，二选一。
  - 设 `rootMargin: 0px 0px -24px 0px`；已经滚过视口的元素（top < 1）也立即显现，快速滑动时不会卡在隐藏状态。
- **隐藏态的开关：**
  - `<head>` 里第一时间给 `<html>` 加 `.js` 类。
  - 只有脚本确认 IntersectionObserver 可用并完成绑定后，才给元素加 `.reveal.is-pending`。
  - CSS 只隐藏 `.js .reveal.is-pending`。没有 JS 或没有 IntersectionObserver 时，内容全部可见。
- **数字递增（count-up）：**
  - 用 `requestAnimationFrame`，约 1100ms，easeOutCubic。
  - 只给真实的计数事实用，例如台数、年份；规格、单位、流程序号一律不计数。
  - HTML 里写最终值：屏幕阅读器读 `.sr-only` 里的固定数字，动画副本加 `aria-hidden="true"`，数字宽度用 `tabular-nums` 固定。
- **键盘焦点：** 焦点落到还没显现的块上时，立即显示该块，并把里面的数字设成最终值。
- **减少动态（prefers-reduced-motion: reduce）：**
  - 关闭所有动画、过渡和 transform，内容立刻全部可见，数字直接是最终值，平滑滚动也关闭。
  - **用户在页面打开后才切换这个设置**，也要监听 `change`：断开观察器、取消计数帧、恢复所有最终值。
- **其他推荐的轻量效果：**
  - 图片悬停：只缩放框内的图片 `scale(1.03–1.04)`，600ms，只在 `(hover: hover) and (prefers-reduced-motion: no-preference)` 下生效。
  - 导航下划线：`scaleX` 绘入。按钮背景过渡 200ms，按下时下沉 1px。
  - 页头：用 passive scroll 加 rAF 节流，超过 24px 就加静态阴影或细线。不改页头高度，避免布局跳动。也可以用一个 24px 高的哨兵元素配合观察器。
  - 视频：先显示 poster；只在可见时播放，离开视口、页面隐藏、减少动态时暂停。
- **禁止：** 视差、自动轮播、循环漂浮、滚动位置驱动重绘、每个区块一模一样的淡入、逐字动画滥用。
- **截图模式：** URL 带 `?static`，或 `html[data-static]` 时，所有入场动画直接定格为可见。
- **验证：** 在独立上下文里测正常动效：只有一个观察器、显现后取消观察、只播一次、计数的无障碍文本、运行时切换减少动态。截图一律用 reduce 模式。

---

## 4 手机与微信适配要点

- **宽度：** 必测 320 / 360 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920，任何宽度都**没有横向溢出**。
  - 用 `overflow-x: clip`，不用 `hidden`，也不用 `100vw`（hallmark）。
  - 承载图片的网格轨道用 `minmax(0, 1fr)`，标题加 `overflow-wrap: break-word; min-width: 0`。
- **首屏：** 390×620（微信 iPhone 内置浏览器的可用高度）内要放下 H1、主 CTA 和关键承诺。手机 Hero 可以用 `<picture>` 换成更清晰的竖版或深色图，并单独设 `object-position`。
- **汉堡菜单：**
  - 1280px 以下显示。三横线图标用 CSS 画（`aria-hidden`），旁边是视觉隐藏的文字。
  - 固定 48×48px，`white-space: nowrap`，在 320–430px 下永不换行。
  - `aria-expanded` 随开合切换，`aria-label` 写"打开菜单"。
  - Escape 关闭并把焦点还给按钮；Tab 焦点限制在菜单内。
  - 打开时给 main / footer 加 `inert`，锁定滚动（body `position: fixed` 加 `top: -scrollY`），关闭后恢复滚动位置。
  - 点击链接后自动关闭；视口变宽时自动关闭。
  - **没有 JS 时直接显示完整导航**（`html:not(.js) nav { display: flex }`）。
- **触控目标：** ≥ 44×44px，主按钮 ≥ 48px。手机上 CTA 全宽，触控目标间距 ≥ 8px。
- **底部快捷栏（可选）：**
  - 768px 以下显示，固定在底部，3 格：电话 / 微信 / 询价。
  - 底部留出安全区：`padding-bottom: calc(8px + env(safe-area-inset-bottom))`。
  - body 加 `padding-bottom`，html 加 `scroll-padding-bottom`，避免遮住内容和表单按钮。
  - 菜单打开或输入框聚焦时隐藏快捷栏。
  - 首页可以等滚过首屏后再显示；没有 JS 时不显示。
- **安全区：** 页头和抽屉菜单都用 `env(safe-area-inset-*)`。高度用 `100dvh` / `100svh`，并写 `100vh` 作回退。
- **微信：**
  - 微信号用 `<dialog>` 弹出显示，可以复制号码，提供关闭按钮。Escape、点遮罩都能关闭，焦点限制在弹窗内，关闭后焦点回到触发按钮。
  - 不要依赖微信内置浏览器之外的能力，例如外链下载、新窗口。
  - 用微信的 UA 截图验证，例如带 `MicroMessenger` 的 iPhone UA，390×664 和 390×620。
- **电话：** 用 `tel:+86xxxxxxxxxxx` 链接。有多个号码时标出主号和（备用），顺序和 JSON-LD 一致。
- **防断行：** 手机上长规格数字和电话号码加 `white-space: nowrap`（比如包成 `.value-token`），避免从中间断开；邮箱和长链接用 `overflow-wrap: anywhere`。
- **表格：** 手机上把每行改成纵向块，表头作为标签重复显示。
- **图集：** 桌面四列、手机两列；比例盒防 CLS。手机上不做横向滚动的图集。

---

## 5 验证清单（摘要；详细版见 references/verify-checklist.md）

1. **启动：** `python3 -m http.server 8000`，跑 Playwright 脚本，跑完关掉服务器。
2. **SEO：** 每页的 title / description 唯一，canonical、hreflang 全套、OG、JSON-LD、h1 唯一且层级连续。
3. **链接和资源：** 所有本地 `src` / `href` / `srcset` 都存在并返回 200，语言切换到同名页。
4. **外部请求、页面错误、控制台错误都为 0。**
5. **布局：** 第 4 节列出的全部宽度无横向溢出；390×620 首屏断言通过；汉堡按钮尺寸达标且不换行。
6. **交互：** 菜单、弹窗、表单的错误态和成功态、文件规则、焦点归还、跳到正文链接。
7. **无 JS：** 正文、导航、最终数字全部可见，表单不会因原生提交而跳页（用 `method="dialog"` 或禁用 fieldset）。
8. **缺少 IntersectionObserver 时**全部可见；reduced-motion（含运行时切换）立即恢复终态。
9. **对比度：** 计算值写进 DESIGN.md；200% 缩放无横向滚动。
10. **图片：** 有尺寸、有 alt（装饰图例外）、首屏以下懒加载；首页总重 ≤ 1.5MB；CLS = 0。
11. **内容：** grep 禁用词和未确认的说法，例如轴数、仪器品牌、AI 套话、假数据；【待填】都在清单上。
12. **部署后：** curl 检查线上每个 URL 都返回 200（或预期的 308），HTTPS 可用，资源 `?v=` 是新版本号。
13. **截图：** 按 1.15 的清单出齐，并写入 `verification.json`。

---

## 6 常见坑

- **Wrangler 和 Node 版本：** 最新版 wrangler 需要 Node 22。机器上是 Node 20 时，**固定用能跑的 4.x 版本，不要随手升级**。升级前先看 `node -v`。taste-skill、website-rebuild、hallmark 的脚本也需要 Node 22+。
- **Wrangler EACCES（`/node_modules/.cache`）：** 在根目录或只读目录里运行会报这个错。换到可写目录（如 `/tmp/cfdeploy`）运行，并设置 `WRANGLER_CACHE_DIR`。
- **Wrangler 登录：** 没有图形界面的机器上用 `wrangler login --browser=false`，把链接拿到浏览器里授权；取 token 卡住时，结束进程重新来。已经登录的共享账号**不要重新登录**，以免影响其他助手。
- **Cloudflare Pages 会把 `foo.html` 308 重定向到 `foo`：**
  - canonical / sitemap / hreflang 最好直接写无扩展名的 URL，或者至少保证 308 之后的 URL 正确。
  - 验证脚本要跟随重定向，或者接受 308。
  - 页面内部链接写 `.html` 也能用，只是多一次跳转。
- **缓存：** 改了 CSS / JS 必须更新版本号，例如 `style.css?v=YYYYMMDD-tag`，全站一起改，否则 CDN 和浏览器会继续用旧文件。
- **部署 commit 有未提交改动时，** Cloudflare 需要加 `--commit-dirty=true`。部署目录要单独组，别把 `.git`、scripts、源图传上去。
- **生成器和手改不同步：** 改了生成器却没改 HTML，或者反过来，下次生成会把手改的内容覆盖掉（比如页脚的双号码布局）。改完一边要同步另一边，或者在 README 里写明。
- **截图里内容空白：** 显现动画让折叠线以下的内容一直是隐藏状态。截图要开 `reduced_motion='reduce'`，等 `document.fonts.ready` 和所有图片 `decode()` 完成，并断言 `.reveal.is-pending` 的数量为 0。
- **本地 `python -m http.server`** 不会把不存在的路径转到自定义 404，要直接访问 `/404.html` 检查。
- **iOS 表单放大：** 输入框字号小于 16px 时，聚焦会触发页面放大。
- **底部固定栏遮住表单的提交按钮或错误提示：** 用 `scroll-padding-bottom` 和 `scroll-margin-bottom`。
- **演示表单：** 没有后端时，不能提示"提交成功"。要写明"演示版，未上传、未保存"，并给出直接联系方式。不发请求，不用 localStorage。
- **国内访问：** `*.pages.dev` 不稳定，Google Fonts 和国外 CDN 也不稳定。国内服务器绑域名要先做 ICP 备案（备案完成前，域名访问会被拦截），备案号要放进页脚。
- **在服务器上部署：** 不要抢 80 端口或 `default_server`；先跑 `nginx -t`；回滚只回滚本站的配置。改安全组或端口前先告诉用户。
- **浏览器在沙箱里起不来：** 如实写"静态推算，未渲染实测"，不要说"已通过"。
- **第三方 skill 规则彼此冲突**（见 7.2）：用户已确认的方向和本站 DESIGN.md 优先，冲突要记进 DESIGN.md。
- **SVG 和 JSON-LD 里**的规范命名空间不会触发外部请求，但外部请求检查脚本要能区分这两种情况。

---

## 7 各来源对照

### 7.1 规则 → 来源

| 规则 | 来源 |
| --- | --- |
| 只用真实信息，不编造指标、评价、logo 墙；缺的写【待填】 | 三个站点的 README / DESIGN（linghengmake-site、lingheng-tech-site、ai-planner-site）；hallmark Floor 8；landing-page-design B8 |
| 先定方向和 4–6 个色值，两遍法自审，大胆只用一处，"摘掉一件配饰" | frontend-design |
| DESIGN.md 是统一规范，AI 照着做；YAML token 加 prose 的格式 | awesome-design-md、google-design-md、impeccable（PRODUCT.md / DESIGN.md）、ai-planner-site AGENTS.md |
| 先问四件事（材料 / 受众 / 用途 / 语气），一次问完；mirror test | hallmark |
| 模式区分（Persuade / Operate / Read / Experience）、brief wins、浏览器细节主题化、craft floor | impeccable |
| AI 味"tells"登记表（眉标、胶囊、渐变文字、等大卡片、假仪表盘） | taste-skill references/tells.md、hallmark、impeccable craft-floor、frontend-design |
| 60-30-10 配色、单一强调色、OKLCH 色阶、WCAG 数值、语义 token | design-taste/taste-color |
| 最多两套字体、字号档位、行长 45–75、字重 ≤ 3 | design-taste/taste-typography、frontend-design |
| 时长和缓动 token、位移 ≤ 20px、错开 60–120ms、只动 transform / opacity | design-taste/taste-motion |
| 企业信任风：一个深蓝强调色、表格是招牌组件、几乎不用动效、每个说法配出处 | design-taste/corporate-trust |
| 工业风：可见网格、一个信号色、圆角 ≤ 2px、机械式短动效 | design-taste/brutalist-industrial |
| 留白就是产品：Hero ≥ 18vh、区块 ≥ 140px、用细线不用框 | design-taste/quiet-luxury |
| 落地页 12 段结构、按钮写动词、AI 套话黑名单、B10 上线前必补项 | landing-page-design（网站skill/ 与 AI-Design-Skills/ 是同一来源） |
| 只在区块露出 30% 时播一次、离屏暂停、减少动态时直接显示终态 | AI-Design-Skills/design-to-motion |
| 首页、FAQ 和国内本地化（ICP、公安备案、不用 Google Fonts、表单失败保留输入） | AI-Design-Skills/学习笔记.md |
| LCP < 2.5s、CLS < 0.1、INP < 200ms、页面 ≤ 1.5MB | design-taste/taste-web-performance、lingheng-tech-site / ai-planner-site |
| 触控 44 / 48、可访问性优先级表、WCAG 2.2 条目 | ui-ux-pro-max quick-reference、design-taste/taste-accessibility |
| mobile-first、断点 640 / 768 / 1024 / 1280 / 1536 | web-design-skills/02-responsive-design（仅参考，无许可证） |
| 设计深度分级（Level 0–2）、Level 2 先给可看的产物再实现、verify-ui | design-guide |
| 复刻和改版的授权边界：默认私有、noindex，法务决定交给用户 | website-rebuild |
| 多模型画布对比设计稿（需要账号，只作参考） | superdesign |
| 深色石墨 + 单一橙色、12 列网格、0/2px 圆角、事实条、实拍主视觉、count-up 只用于真实计数、单观察器、no-JS / reduced-motion 回退、汉堡菜单 48px、微信弹窗、390×620 首屏、手机底部快捷栏、zh/en/ja 同名页、Playwright 验证、Cloudflare Pages 部署 | linghengmake-site（DESIGN.md / README / style.css / main.js / verify.py / responsive_checks.py / build_ja.py） |
| 瓷白 + 深墨 + 衬线标题、五档字号、`?static` 截图模式、【待补充】标记样式、部署脚本（端口检查、原子替换、`nginx -t`、回滚、只动本站） | lingheng-tech-site |
| 口号排版（nowrap、`&nbsp;`、逐宽检查）、氛围图遮罩不透明度下限、哨兵页头、浮动条显示条件、AGENTS.md 指定 skill | ai-planner-site |
| 生图调用方式 | ~/.claude/skills/gpt-image-bridge |

### 7.2 来源冲突与推荐选择

| 冲突点 | A 说 | B 说 | 推荐 |
| --- | --- | --- | --- |
| 动效数量 | frontend-design：只要一个编排好的时刻；corporate-trust：几乎没有；impeccable / taste-skill：每个区块都淡入是 AI 味 | linghengmake-site：用户确认多处克制动效（单观察器显现 + 计数 + 悬停 + 首屏慢缩放）；ai-planner / lingheng 也用了区块显现 | 默认：一个首屏时刻 + 克制的显现（≤ 20px、只播一次）。用户要求更多时可以加，但必须带齐 no-JS / reduced-motion 回退，并在 DESIGN.md 里写清 |
| 显现参数 | corporate-trust：6px / 200ms；brutalist：8px / 150ms；landing-page-design：模糊变清晰 ≥ 800ms，`cubic-bezier(.32,.72,0,1)` | 实践：16–20px / 600ms ease-out 或 `cubic-bezier(.22,1,.36,1)` | 企业站 12–20px、500–700ms、`(.22,1,.36,1)`；不做大面积模糊（性能问题） |
| 字体 | impeccable：系统字体当 display 是失败，要自托管有性格的字体；landing-page-design：禁用 Inter / Arial / Helvetica，指定 Geist / Manrope | 三个站：只用系统字体，不下载（国内访问、零外部请求） | 国内站用系统 CJK 字体栈，靠字号、字重和留白建立个性。确实需要品牌字体时，自托管子集化的 woff2 并设 `font-display: swap`，绝不走 CDN |
| 眉标、mono 标签、01/02/03 编号 | hallmark / impeccable：禁眉标、禁字距拉开的大写标签、mono 不能当"技术感"道具；frontend-design：近黑底 + 单一亮橙 / 朱红、mono 小标签、细线零圆角都是 AI 默认方案 | corporate-trust 允许眉标；brutalist 要求 mono 编号；linghengmake-site 是深色 + 橙色 + mono 技术数据；ai-planner 用 mono 序号（aria-hidden） | brief wins：用户确认的方向照做。mono 只给真实的测量值、规格和代码；编号只给真实的序列（流程步骤）；不给每个标题加眉标 |
| 区块留白 | quiet-luxury：≥ 140px、Hero ≥ 18vh | linghengmake-site：96 / 64px；lingheng / ai-planner：`clamp(96px, 12vw, 160px)` | 工业 / B2B 信息密集的站：96 / 64；编辑 / 奢华 / 个人品牌：`clamp(96px, 12vw, 160px)` |
| 圆角 | corporate-trust：6–8px；impeccable（codex 段）：卡片 12–16px | brutalist ≤ 2px；quiet-luxury 按钮 ≤ 4px；三个站都是 0–2px | 按方向定一套。工业 / 编辑风 0–2px（弹窗 4px）；SaaS 6–8px；不要所有元素一个大圆角 |
| Hero 标题 | landing-page-design B5：标题文字从左到右渐变 | taste-skill / impeccable：渐变文字 banned | 不用渐变文字，用实色 |
| 标题字号上限 | corporate-trust：≤ 2.8rem | linghengmake-site：桌面 64px；ai-planner：H1 ≤ 6.5rem；impeccable：display ≤ 6rem | 企业信任风用 2.8–4rem；有实拍或口号主视觉时可到 64–84px；手机 28–40px |
| 暗色 / 亮色 | corporate-trust：营销页不要深色 Hero | impeccable：按使用场景选；linghengmake-site 用户确认深色工业风 | 按场景和用户确认来选。深色要重新计算三层表面的对比度 |
| 首屏信任信号 | landing-page-design：首屏放客户 logo、数据或评价 | 原则 0 / hallmark：不编造 | 只用真实事实：设备数、成立年份、已确认参数、回复时效 |
| 主按钮数量 | landing-page-design：一屏只有一个主按钮 | corporate-trust：一个主按钮 + 一个次按钮；linghengmake-site：获取报价（主）+ 上传图纸（次） | 一个实心主按钮，加最多一个描边或文字形式的次按钮，首尾文案一致 |
| 页头滚动反馈 | linghengmake-site：超过 24px 加静态阴影 | lingheng-tech：不加阴影，只淡入细线 | 都可以；不改页头高度，不持续测量布局 |
| 图标 | landing-page-design：用 Phosphor / Solar 图标库 | brutalist：只用排版符号；三个站：几乎不用图标，用 CSS 或 SVG 画 | 零依赖站：少量自绘 SVG，统一线宽，emoji 不当图标 |