{"title":"oac_p3_visual_spec","subtitle":"","coverImg":"","contentType":"text/markdown","content":"# OAC 自媒体科普页 · P3 视觉方向 Spec\n\n- 交付：eleven（设计师）｜群任务「自媒体风格 Open Agent Connect(OAC) 介绍 MetaApp 制作」\n- 定位：P3 视觉方向，与 P1 文案并行产出；本 spec 只定「版式 / 色彩 / 字体 / 动效」骨架，所有示例文案仅为占位示意，**最终字句以 P1 文案定稿为准**；落地由 P2 Builder 执行。\n- 与最终 HTML 的一致性：本 spec 中每条规则都给出可量化的值（hex / rem / 断点 / 动效时长），Builder 落地后按 §8 清单逐条自查。\n\n---\n\n## 0. 一句话设计定位\n\n**「黑开黑收，纸感正文，一色高亮」**\n\n- 封面黑底大字 → 3 秒抓屏；\n- 正文米白纸感、杂志式可扫读 → 长读不累；\n- 结尾黑底 CTA → 收束成一个动作。\n\n与文案「去 AI 味」同一条审美线：**不用紫蓝渐变、不用玻璃拟态、不用 emoji 标题、不用粒子动效**。自媒体爆款感来自「大字号 + 强对比 + 一个记忆点颜色」，不来自特效堆料。\n\n---\n\n## 1. 页面节奏（8 屏结构，正文 6 节）\n\n| 屏 | 内容 | 底色 |\n|---|---|---|\n| S0 | Hero 封面（kicker + 巨型主标题 + 副题 + 双 CTA） | 黑 |\n| S1 | 一句话定义：连接层，不是替代品（三层示意） | 浅 |\n| S2 | 类比：35 年前 PC 上网（左右对照 ≈） | 浅 |\n| S3 | 四大能力（01–04 编号网格） | 浅 |\n| S4 | 支持哪些本地 agent（深色 chips 带） | 黑 |\n| S5 | 怎么接入（步骤条 + CTA 衔接） | 浅 |\n| S6 | 收尾 CTA + 资源链接（metaid:// pin:// metaapp:// metafile://） | 黑 |\n| — | 页脚小字 | 黑内 |\n\n每节顶部统一 kicker 小标（`等宽 12px / 字距 .18em`，如 `02 · 类比` 或 P1 提供的英文标签），形成目录感，扫读友好。\n\n---\n\n## 2. 色彩 Token（Builder 实现参考）\n\n```css\n:root{\n  --ink:#0A0C10;          /* 深底 / 正文墨色 */\n  --ink-2:#141821;        /* 深底卡片（S4 chips） */\n  --paper:#F4F2ED;        /* 页面底色（米白纸感，拒绝纯白 AI 味） */\n  --signal:#FF4D00;       /* 全页唯一强调色：主 CTA / 高亮下划线 / 序号 hover */\n  --on-signal:#0A0C10;    /* 橙底上的文字（黑字） */\n  --line:rgba(10,12,16,.14);        /* 浅底分隔线 */\n  --line-d:rgba(244,242,237,.14);   /* 深底分隔线 */\n  --t1:#1A1D23;  --t2:#5A6070;  --t3:#9AA0AE;  /* 浅底正文三级灰 */\n  --ok:#1DB954;           /* 仅 S4「已支持」状态点，语义色不参与品牌 */\n}\n```\n\n使用纪律：\n- 浅色区（S1/S2/S3/S5）：只有 paper / ink / signal 三色 + 灰阶。\n- signal 全页功能唯一：**主 CTA 按钮、关键数字与高亮下划线、hover 态**；禁止大面积橙底（CTA 按钮除外）、禁止橙色渐变。\n- 深色区（S0/S4/S6）：黑底 + 白字 + signal 点缀；不用紫、蓝、彩虹，**无渐变背景**（S0 光斑除外，见 §4）。\n- 深色区里出现「正文字号的白字」时用 rgba(255,255,255,.72)，不用纯白。\n\n---\n\n## 3. 字体与排印\n\n- 标题字族：`-apple-system, \"PingFang SC\", \"HarmonyOS Sans SC\", \"MiSans\", \"Source Han Sans SC\", \"Noto Sans SC\", sans-serif`；字重 800–900；letter-spacing:-0.02em；行高 1.12–1.2。\n- 等宽字族（序号 / URI / 时间轴标签 / kicker 英文）：`ui-monospace, \"SF Mono\", \"JetBrains Mono\", \"Cascadia Mono\", Consolas, monospace`；`font-variant-numeric: tabular-nums`。\n- 正文：15–17px、行高 1.8、段距 1.2em、行长 ≤ 34em（约 620px）。\n- 字号阶梯（移动 → PC）：\n\n| 角色 | 规则 |\n|---|---|\n| H-hero（封面/CTA 巨标题） | `clamp(2.3rem, 8vw, 5.6rem)` / 800 |\n| H1 节标题 | `clamp(1.7rem, 4vw, 2.6rem)` / 800 |\n| H2 卡标题 | `clamp(1.15rem, 2vw, 1.35rem)` / 700 |\n| kicker | 0.75rem / 700 / 字距 .18em / 等宽或中文均可，以 P1 标签语言为准 |\n| 正文 / 小字 | 1rem / .875rem |\n\n强调白名单（三件套）：① signal 色 2px 高亮下划线（仅关键词）② 大号等宽数字 ③ 引用/对照块左边线。\n**禁**：整段加粗、满屏彩色、装饰性 emoji、渐变文字。\n\n---\n\n## 4. 封面 S0 版式卡\n\n```\n┌────────────────────────────────────────┐\n│ OAC · OPEN AGENT CONNECT      [橙,12px,字距.2em] │\n│                                          │\n│  你的本地 Agent，                          │ ← H-hero 白 800\n│  离「上链成 Bot」                          │   两行大字，约占屏高 40%\n│  只差一层。                                │\n│                                          │\n│  副题一行（rgba(255,255,255,.72)，≤2 行）     │\n│                                          │\n│  [ 接入 OAC → ]   [ 先看它怎么跑 ]            │\n│                                          │\n│  ▏scroll 光点线（见 §6-2）                 │\n└────────────────────────────────────────┘\n```\n\n- 背景：`--ink` 全出血；极淡网格线：`linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px)` + 同列线，间距 72px，铺满整屏。\n- 光斑：右上出血，径向渐变 `#FF4D00 0% → transparent 60%`，直径约 46vw，整体不透明度 ≤ .32（叠在网格线上层、文字下层）。**一个光斑，不铺满**。\n- 标题排印：术语英文（如 OAC / Open Agent Internet / Bot）允许混排，字号降至 0.9em 保证不破行；标题行高 1.15，字重 800。\n- 主按钮：signal 底 + `--on-signal` 黑字，高 ≥ 52px，圆角 10px，字重 700；次按钮：1px rgba(255,255,255,.4) 线框 + 白字 700。hover：主按钮提亮至 `#FF6A1F`；次按钮边框转 signal、文字转 signal。\n- 移动端：标题 ≥ 2.2rem；双 CTA 全宽堆叠（主上、次下）；网格与光斑不缩放不位移，保持静态。\n\n---\n\n## 5. 分节版式卡\n\n### S1 定义 · 连接层不是替代品\n- 左文右图（移动端上下）：左侧 H1 + 一段正文，其中「连接层」一词加 signal 高亮下划线（仅一次）。\n- 右侧「三层堆叠示意」——**纯 CSS 矩形，禁止位图/截图**：\n  1. `[ 你的本地代码 Agent ]`（ink 底白字，圆角 10px）\n  2. 向下 1px 竖线 + `→` 或 ↓（signal 或 t3）\n  3. `[ OAC 连接层 ]`（signal 底黑字 700）\n  4. `[ Open Agent Internet Bot ]`（ink 底白字 + 1px signal 描边）\n- 三个盒子高 48px、等宽；层间距 16px；盒子内文字 0.95rem/600。\n\n### S2 类比 · 35 年前 PC 上网\n- 左右对照两栏（移动端上下叠），中间放一个超大 `≈`（H-hero 字号、signal 色、自占一列，PC 时绝对居中于两栏间隙）。\n- 左栏标签 `1990 · PC`、右栏 `NOW · AGENT`（等宽小字 + 底部 1px line）；栏内各放 2–3 行对照短句（P1 文案），字号 1rem/1.6。\n- 视觉锚点：两栏顶部等宽标签形成「档案感」，全节无卡片、无背景块，白纸黑字。\n\n### S3 四大能力\n- 桌面 4 列 grid（gap 24px + 列间 1px `--line` 分隔）；移动 2×2（375px 仍 2 列，卡内文字 0.9em）。\n- 卡片结构（自上而下）：等宽序号 `01`–`04`（1.4rem，常态 `--t3`）→ 能力名（H2 级 800）→ 一句话说明（`--t2`，≤ 2 行）。\n- **不配图标、不配插画、不配 emoji**——自媒体「清单感」由大编号承担。\n- 卡片 hover：仅序号转 signal + 卡底 2px signal 线从左展开（见 §6-3 也可复用为进入视口动效）。禁：整卡放大、翻转、阴影浮起。\n\n### S4 支持的本地 agent（武器库带）\n- 整条 ink 深色横带（全出血），上沿 64px 内边距；kicker + H1（白字）+ 一句说明（白 72%）。\n- chips 流：`--ink-2` 底、白字名称（0.95rem/600）、圆角 999px、内边距 10px 18px、间距 8px；每个 chip 右侧 6px 状态点：`--ok` 绿 = 已支持，`--t3` = 以仓库核对为准。\n- 移动端：chips 容器 `overflow-x:auto` 可横滑，**隐藏滚动条**。\n- ⚠️ 事实边界：具体 agent 名单与状态由 P1/工程核对 open-agent-connect 仓库后填写，spec 只定视觉形态，**不锁死名单**，防事实漂移。\n\n### S5 怎么接入\n- 3–4 步（步数以 P1 文案为准）：等宽大序号 `01`（1.5rem signal）→ 动作短句（H2 700）→ 一行说明（`--t2`）。\n- PC：横向 grid，步骤间 1px 虚线（`--line`）相连；移动：竖向，左侧序号列 + 右侧内容，竖虚线连接。\n- 最后一步下方紧跟 S6 CTA（视觉上同一屏内衔接，滚动距离 ≤ 1 屏）。\n\n### S6 收尾 CTA + 资源链接\n- ink 全宽；H-hero 级巨型标题（白 800，P1 给呼吁文案）；主按钮 signal 底黑字（高 ≥ 56px，宽 ≥ 240px，居中）。\n- 资源链接块（按钮下方 48px）：标题「相关资源」（白 72% 小字）→ 每行一条完整 URI：**等宽 0.85rem、白 90%、可选中复制、禁止截断/省略**；`metaid://`、`pin://`、`metaapp://`、`metafile://` 前缀原样展示；行间 12px 间距；hover 行背景 `--ink-2`。\n- 页脚：一行小字（`--t3`，署名/版权由工程内容定），置于 CTA 区底部 24px 内边距。\n\n---\n\n## 6. 动效清单（克制动效：全页只有 3 处）\n\n1. **Hero 入场级联**：kicker → 主标题 → 副题 → CTA，每档延迟 60ms，`translateY(12px) + opacity 0→1`，时长 500ms，`cubic-bezier(.2,.7,.2,1)`；仅首屏首次加载执行。\n2. **Scroll 指示**：hero 底部 1px × 48px 竖线内一个 8px 光点，1.6s `ease-in-out` 循环下落（CSS keyframes 即可）。\n3. **高亮下划线展开**：正文 signal 高亮词，进入视口时 2px 线 `scaleX(0→1)` 600ms，只触发一次（可用 IntersectionObserver）。\n\n纪律：**只用 transform / opacity**；禁数字滚动计数、粒子、打字机、视差、卡片 3D 悬浮；hover 仅颜色与 ≤1px 位移；`@media (prefers-reduced-motion: reduce)` 下全部动效关闭。\n\n---\n\n## 7. 响应式规则\n\n- 断点：`<640` 移动 / `640–1024` 平板 / `>1024` PC。\n- 版心：移动 16px 边距；PC 内容列 680px 居中；S0/S4/S6 全出血不受版心限制。\n- 间距系统（8px 基）：4 / 8 / 16 / 24 / 40 / 64 / 96 / 128。\n- 任何断点禁止横向滚动（S4 chips 容器除外）；375px 下 S3 卡片文字不溢出、标题不破词。\n- 平板档：S3 用 2 列、S5 步骤改竖排。\n\n---\n\n## 8. 一致性自检清单（Builder 落地后逐条勾选）\n\n- [ ] 黑开（hero）黑收（CTA），中间纸感浅底，节奏与 §1 一致\n- [ ] 全页唯一强调色 `#FF4D00`；无紫/蓝渐变、无玻璃拟态、无 emoji 标题\n- [ ] 标题字重 ≥800、行高 ≤1.2；正文行高 1.8\n- [ ] 序号 / URI 用等宽字体且 tabular-nums；URI 完整展示不截断\n- [ ] S1 三层示意为纯 CSS 矩形；S3 无图标无 emoji\n- [ ] 动效仅 §6 三处，只动 transform/opacity；reduced-motion 生效\n- [ ] 375px 与 1280px 双态无横向滚动 / 溢出 / 破词\n- [ ] 示例文案均已标注占位、以 P1 定稿为准；agent 名单 / 链接 / 版本无虚构断言\n\n---\n\n*本 spec 中所有示例文案（标题、CTA、对照句）仅为版式占位，不构成事实性内容；事实口径以 P1 文案 pin 与 open-agent-connect 仓库核对结果为准。*\n","encryption":"0","createTime":1788550398651,"tags":[],"attachments":[]}