三份 HTML、两套视觉语言：index.html（门户）与 xiaoermei/ 是「纸 + 墨 + 黑板银」的克制工具站风格，新增工具类产品页照此复刻；xiaoqingwa/（小青蛙伴学）是动森暖色——它是儿童学习产品，与工具站刻意区分，见「产品页（/xiaoqingwa/）」。两套不互相串色。
- 字体：标题宋体
Songti SC / Noto Serif CJK SC；正文苹方/系统无衬线。不加载外部字体——Gambarino / General Sans 无中文字形，且会给大陆访问增加外部依赖。 - 颜色：纸
#f4f4f2、墨#1d1d1f、黑板#0d0d0f、银#f2f2f4、次级银#b9b9c0、焦点蓝#007aff（只用于焦点环）。不加渐变、静止阴影、彩色卡片。 - 圆角：卡片/舞台 20px；按钮胶囊形；截图 14px。
- 图片：只用真实小程序截图（WebP，828px 宽，模拟器逐页截取），不用假 UI、不用图库照片。拟真设备框是唯一例外，契约见「产品页 - 设备框」。
- 文案：只写可验证事实——27 款工具（已上线的工具页；已下线的页面一律不上站，2026-10-29 已据此下线育儿补贴与头像美化）、无需注册、数据存本机、部分增值内容看视频获得 VIP。具体用户量、留存、好评、收益、「永久免费」「完全无广告」、微信官方背书一律不写。
门户是索引，不是招牌：每款产品权重相同、各有自己的入口；展示留给各产品页。
- 版式：单栏居中
max-width:960px；H1 + 说明（34em）→ 两张作品卡（gap 28）→ 预览带两组（组间 28 / 组内 12，与卡片同栅格）→ 页脚。≤720px 全部单列。 - H1：
clamp(2.6rem, 6.2vw, 4.6rem)宋体，两行断句「日常小工具 / 和孩子的功课」。主标题写具体对象、不写开发者身份；身份句降到.lede-sub首句（依据：15 个个人产品站样本的 H1 无一写身份）。首屏必须有一个明确主元素。 - 作品卡：每款产品一张同款黑板卡，整卡可点，指向
/<slug>/；结构固定为 名称 + 右箭头（18px）/ 两行描述，不按产品加料；三档必须等高、底部留白一致。 - 预览带：每款两张真实界面，预裁 3:4（
aspect-ratio+object-fit:cover），组内 12 / 组间 28（2.33×），两组与上方卡片列同轴。每张包在a.shot-link里指向对应产品页（看着像入口就必须能点）；预览素材从完整截图按 3:4 重裁：起点跳过状态栏（约 92px），但不得切断卡片标题或结果数字——必要时下移起点（成人 BMI 预览用+0+680，让 24.4 与彩色刻度条完整），宁可牺牲顶部表单。 - 不做：站点记号（原
mark.png是单款产品图标，已移除）、单一产品的主动作按钮、「下一件在路上」占位。 - 动效：入场
rise0.7s，60–80ms 错峰；卡片 hovertranslateY(-2px)；prefers-reduced-motion全关；不依赖 JS。 - 禁忌：不要把域名做成 H1 上方的 eyebrow（首屏会变成「品牌名 + 空话」）；不要给某一款产品更大字号、彩色边、单独按钮或额外截图——那会立刻打破等权。
- 方向：design-taste-frontend 的 The split stage。右侧固定舞台常驻小程序真实界面，左侧阅读栏滚动；点工具按钮，舞台交叉淡入对应截图。手机把舞台提到首屏顶部，完整设备框直接落在纸面上，纸面
margin-top:-24px只留一道圆角接缝。 - 舞台不着色：舞台没有背景（去掉旧版黑板
--stage与 20px 圆角），纸面上只剩设备框 + 说明文字；设备框落地阴影降到纸面档0 24px 44px -28px rgba(0,0,0,.28)。黑底留在页尾.cta与「为什么」.panel-dark两处，那是内容块不是底板。 - 与方向纸的偏差：字体换宋体（无中文字形）；配色换黑板银 + 暖纸（品牌资产是「黑板银字」）；showcase 与钉住状态机合并成「工具架 + 三步用上」。
- 分栏契约：桌面
grid-template-columns: 1fr 1fr，间距与外边距 12px；舞台position: sticky; top: 12px; height: calc(100svh - 24px)；阅读栏 42rem、正文 16px、行宽 34em。两栏 ↔ 堆叠的断点是 820px（.reading的--pad自 821px 起生效）。 - 设备框：舞台里放拟真 iPhone 13 外壳，屏幕按 390×844 逻辑像素呈现。金属边 3px（
#b4b4ba+ 四向 inset 高光，不用渐变）+ 黑内框 10px；外壳圆角 58px、内框 55px、屏幕 47px；左侧静音/音量、右侧电源用--metal平色按百分比排布。高度预算--screen-h: min(844px, calc(100svh - 24px - 130px))（130 = 舞台上下内边距 24 + 说明区 80 + 内框 26）：视口够高时 1:1（1440×1080 屏 390×844、机身 416×870），不够高时等比缩小（1440×900 屏 343×746，900×768 屏 280×614）；flex: 0 1 auto兜底，说明文字变长时先压机身不溢出。≤820px 保留外壳并等比缩到 150–230px 宽（--screen-h: min(460px, calc(52svh - 26px), calc(100svh - 380px))；390×844 得 210×439，390×667 得 150×313），3px 侧键隐藏（缩到该尺寸后读起来像贴在纸上的杂点）；工具段吸顶预览 40svh，外壳与说明左右并排，条底铺纸色遮住从其下方滚过的工具列表。金属边与落地阴影是 lint 登记例外：源文件带taste-skill-ignore，渲染侧靠给.device标data-ui（外壳是界面片段的一部分）让 inspect 不计入静态阴影。 - 舞台裁切：桌面截图
object-fit: cover+object-position: top center——铺满屏幕、按顶部对齐裁切。旧版contain在 702px 舞台只画 338px 高、900px 宽断崖到 130px。移动端改object-fit: contain：外壳比例 416/870 与实际屏幕 390/844 有约 7% 出入，cover 会削掉两侧；contain让整屏完整落在屏幕区里，代价是 390 宽下屏内画面约 150–200px。 - 截图来源：微信开发者工具模拟器（iPhone 12/13 Pro，390×844）逐页截取，
magick -resize 828x -strip -quality 82转 WebP。把页面调到说明文字描述的状态（如截青少年页），屏幕上的年龄/标准/数值必须与按钮文案一致。新鲜度判据：git log --since=<截图日期> -- <页面源文件>有提交、或该工具已下线，就必须重拍；下线工具的截图与条目同轮删除。 - 数量与索引：全站写 27；索引用四类
dl列全 27 项。其中 12 个有预览的名字是可点按钮（.tool-link，常驻 32% 墨色下划线——不靠颜色区分），点击切舞台并同步 chip；其余 15 个是纯文本。脚注写明「12 款带预览的可以在上面点开，其余 15 款已上线」，分组文案只列有按钮的工具，不写没有入口的名字。工具下线时索引条目、chip、JSON-LDfeatureList与截图文件一并删除。 - 转化：首屏三个入口——主按钮「打开小程序」、搜索胶囊（左「微信搜一搜 / 小而美工具」，右「复制名称」按钮，点完就地变「已复制」/「复制失败」并在 2.4s 后复原，读屏状态走
.copy-status）、次级「看看 27 款工具」。首屏与页尾两块二维码整块可点，跟主按钮一样打开同一个弹层（role=dialog+aria-modal、复制名称 / 200px 大字码两条路、ESC / 点遮罩 / 关闭三个出口、Tab 锁在卡内、关闭还焦）。二维码 152px；桌面说明「微信扫码」、移动「长按识别」（.only-desktop/.only-mobile）。页头四个锚点（工具 / 为什么 / 怎么用 / 打开），窄桌面（约 821–900）空间不够时整行换到锁标下方右对齐；页脚回whinc.top。复制成功态在按钮内显示 2.4s；失败态红底 + 「复制失败，请手动搜索」，.copy-status只给读屏。 - 动效：首屏
.js-reveal .hero-body > *0.8s 依次上升（延迟 0.05–0.29s）；section 用 IntersectionObserver 入场（70ms 错峰）；工具切换 0.55s 交叉淡入；没有舞台漂移。入场隐藏只由.js-reveal控制，该 class 由main.js注入——脚本挂了内容仍然可见。舞台另跟段落：#why/#how/#faq带data-stage-*，IntersectionObserver（-45% 0px -45% 0px）在 ≥821px 把舞台切到该段对应的工具并同步 chip；手机上不绑定。 - 可访问性：工具按钮
aria-pressed，舞台标题aria-live，复制按钮有状态文本，二维码有 alt；弹层aria-modal+ Tab 锁在卡内 + 关闭还焦；索引可点项用下划线而非颜色区分。chip 的 1px#86868b描边（对纸面 3.2:1，满足 WCAG 1.4.11 非文本对比）是 lint 的taste-skill-ignore登记例外——它是控件边界，不是装饰盒子。 - 布局陷阱：
<XPage>那套壳是给小程序用的，本页是纯静态 HTML，不要引入 Taro 术语。
- 方向：动森暖色 + 官方
animal-island-ui默认质感。羊皮纸#f8f8f0/ 棕字#4a3a28/ 薄荷#0f8f84；品牌黄绿#a1c859只做点缀。不做 SaaS 冷色、不做仪表盘。 - 首屏：≥981px 左文右码——码卡与 CTA 同一水平带、码卡压手机 28px；981–1180 用 vw 线性缩放；≤980 单列（文案 → CTA → 搜一搜条 → 码卡）；≤700 隐藏英雄区手机图。
- 零 JS：正文 / 图片 / FAQ 不依赖脚本（FAQ 用原生
<details>）；唯一脚本是「复制名称」的渐进增强，删掉脚本画面不变（已验 AE=0）。 - 信任卡：必须有底色 + 1.5px 描边，不能只靠文字分组。
- 图片：真实界面 WebP 560×1155（已裁状态栏），alt 写画面不写功能清单；OG 图
assets/og-1200x630.png。 - 页脚：品牌行 / 锚点导航 / 免责行（含「面向家长」「非微信官方站点」）/ 微信
iCloudCoding/<a class="icp">备案号 / © 2026。不设邮箱（apex 是 CNAME，与 MX 冲突）。 - 隐私页：
privacy.html同色系、样式内联、不引组件库；noindex,follow，不进 sitemap；四段（不收集什么 / 数据存哪 / 第三方与 Cookie / 联系）。
| 门禁 | 读数 | 处理 |
|---|---|---|
lint.mjs（5 文件） |
0 FAIL / 0 WARN | — |
inspect.mjs 产品页 |
0 FAIL / 3 WARN | no-footage：无录屏素材，不编造演示视频。font-not-dealt：方向纸字体无中文字形，宋体是品牌本字。off-centre @768：脚本按首个可见块估左右外边距（31/64），DOM 实测 hero 64/64、section 48/48、CTA 31/31，判为误报。首屏手机屏标了 data-ui（裁切界面片段），focal-point 据此豁免；标了 data-ui 的图不计入 realPictures，仍在 12 张里够数。 |
inspect.mjs 小青蛙伴学 |
14 FAIL / 4 WARN | 这是已拍板的动森风格（票 05），不是失手：eyebrow ×7 = 分区 pill 标签与首屏品牌句；shadow ×15 / button-fx = 3D 硬边按钮（0 3px 0）是风格核心；outlined-box ×17 / hairline ×12 = 卡片描边与 FAQ 分隔线，v2 明确要求「信任卡必须有底与描边」；gradient ×1 = 组件库 Background 的纸点纹理，不是光束；emoji ★ ✿ = 产品内的星星与小红花奖励符号，属内容；still-page 0 = 零 JS 是 04 的硬要求，页面静态呈现，不加滚动特效；focal-point 首屏焦点是小程序码与手机图，不是标题字号；body-size / small-text / palette-cream / size-count / grey-body / no-footage 同属风格与素材事实（儿童向暖色、正文 14.5px、无录屏）。 |
inspect.mjs 门户 |
1 FAIL / 5 WARN | few-pictures：工具站没有摄影题材，可用图像就是两款产品的真实界面（4 张，data-ui），不为分数堆无关图。first-action：门户故意没有主按钮——等权意味着入口在两张卡上，不是某个产品的 CTA。name-only-title：H1 是名词短语（研究结论选的句式），下方的 18px .lede 已写明「两款微信小程序…」；规则只读 H1 自身文本，判为误报。no-footage / font-not-dealt 同上（无录屏；宋体是品牌本字）。still-page 9 个元素已动（卡入场 + 图入场），不再加滚动特效。 |
- 复制
xiaoermei/为<slug>/，改index.html的标题、canonical、og、JSON-LD 与文案。 - 门户
index.html的ItemList与产品卡各加一条，指向新 slug。 sitemap.xml加一条，robots.txt不动。- 两个页面都跑
lint.mjs+inspect.mjs，读数记进本文件。