网站审美与搭建总skill

企业官网 / 产品网站 / 落地页的审美标准与搭建流程。公开链接，任何账号都可下载复用。

curl -fsSL https://web-design-master-skill.pages.dev/install.sh | bash

curl -fsSL https://web-design-master-skill.pages.dev/install.sh | bash -s -- ~/.codex/skills

网站审美与搭建总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. 只用真实信息。 页面上的每个事实都要有出处：参数、设备、年份、地址、行业、联系方式、价格、承诺，出处是用户给的资料或用户确认过的内容。
2. 不知道的写【待填：xxx】，并列进 README 的待填清单。
3. 不换算单位，不"合理推测"。例如不要把 IT7 换算成微米，也不要补写轴数、型号或材料牌号。
4. 不编造信任信号。
5. 不放客户 logo 墙、评价、案例数、"服务 xxx 家企业"、认证徽章（ISO 等），也不放整齐的假数字（99.9%）或假人名。
6. 真实的设备、检测流程、成立时间、营业执照（已脱敏）、自有产品截图就是信任证明。
7. 自有产品要和客户案例分开写。
8. 事实清单先给用户确认，再写页面。 用户确认后，内容的改动以用户最新的话为准，并同步更新 README / DESIGN.md。
9. 对外动作先给用户看。
10. 部署到服务器、换域名、改 DNS 或 nginx，都要先把方案（改什么、在哪、怎么回滚）给用户，得到明确同意再动手。
11. 不动服务器上其他站点和文件：只占用自己的目录、自己的 conf、自己的端口。
12. 密码不出现在聊天、文档或代码里。
13. 部署脚本只从环境变量读取密码，不在日志里打印。
14. 文档里写成 ECS_ROOT_PASSWORD=***。
15. 第三方 skill 里的脚本先审再跑。
16. website-rebuild、ui-ux-pro-max、impeccable、superdesign、taste-skill、hallmark 都带脚本或 CLI，其中不少需要 Node 22+ 或账号。
17. web-design-skills 没有许可证，只能参考，不要复制原文。
18. 默认零外部依赖。
19. 原生 HTML/CSS/JS，不用框架、CDN、外部字体、统计或嵌入。
20. 面向国内用户时尤其要遵守：Google Fonts / jsDelivr 之类的服务在国内慢或不可用。
21. 用户点击 tel: / mailto: / WhatsApp 链接时才离站。
22. 没实测的不说通过。
23. 浏览器在沙箱里起不来时，明确写"静态推算，未渲染实测"。
24. 本地 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，适合临时官网或海外 / 英文站）：
• 先组一个干净的部署目录：只放 HTML、assets、robots、sitemap；排除 .git、scripts、screenshots、源图、.agents/。
• 在可写目录里运行： cd /tmp/cfdeploy && export CLOUDFLARE_ACCOUNT_ID=<账号ID> WRANGLER_CACHE_DIR=/tmp/cfdeploy/.cache && wrangler pages deploy <部署目录> --project-name=<项目名> --branch=main --commit-dirty=true
• 部署后用 curl 检查每个 URL 都返回 200 或预期的 308，HTTPS 可用，语言选择页正常。
• 每个站用自己的 Cloudflare 项目，不要覆盖别人的项目。
• *.pages.dev 在国内访问不稳定。中文主站长期放在国内服务器上更好，前提是先办 ICP 备案。
• 自有服务器（nginx）：
• 先把方案给用户看，同意后再动。
• 备份现有目录（<目录>.bak-时间戳）。
• 用 git archive 打包上传，原子替换本站目录。
• 只写本站的 conf，不抢 default_server 和别人的端口。
• nginx -t 通过后才 systemctl reload nginx，失败就回滚本站 conf。
• 在服务器内部和外网分别验证。
• 国内服务器绑域名必须先完成 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 规则 → 来源

7.2 来源冲突与推荐选择