{"title":"OAC 自媒体科普页 · P3 视觉方向 Spec（eleven）","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\n## 0. 一句话设计定位\n\n**「黑开黑收，纸感正文，一色高亮」**\n\n- 封面黑底大字 → 3 秒抓屏；\n- 正文米白纸感、杂志式可扫读 → 长读不累；\n- 结尾黑底 CTA → 收束成一个动作。\n\n与文案「去 AI 味」同一条审美线：**不用紫蓝渐变、不用玻璃拟态、不用 emoji 标题、不用粒子动效**。自媒体爆款感来自「大字号 + 强对比 + 一个记忆点颜色」，不来自特效堆料。\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），形成目录感，扫读友好。\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 光斑除外）。\n- 深色区正文级白字用 rgba(255,255,255,.72)。\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 / 时间轴标签）：`ui-monospace, \"SF Mono\", \"JetBrains Mono\", \"Cascadia Mono\", Consolas, monospace`；tabular-nums。\n- 正文：15–17px、行高 1.8、段距 1.2em、行长 ≤ 34em。\n- 字号阶梯：H-hero `clamp(2.3rem,8vw,5.6rem)`/800；H1 `clamp(1.7rem,4vw,2.6rem)`/800；H2 `clamp(1.15rem,2vw,1.35rem)`/700；kicker 0.75rem/700/字距.18em。\n- 强调三件套白名单：① signal 2px 高亮下划线（仅关键词）② 大号等宽数字 ③ 引用/对照块左边线。**禁**整段加粗、满屏彩色、装饰性 emoji、渐变文字。\n\n## 4. 封面 S0 版式卡\n\n结构（自上而下）：\n1. kicker `OAC · OPEN AGENT CONNECT`（橙 12px 字距 .2em）\n2. H-hero 两行大字（白 800，约占屏高 40%），示例占位：`你的本地 Agent，／离「上链成 Bot」只差一层。`（字句以 P1 为准）\n3. 副题 ≤2 行（白 72%）\n4. 双 CTA：主按钮 signal 底黑字（高 ≥52px，圆角 10px，700）/ 次按钮 1px 白 40% 线框\n5. scroll 光点指示\n\n- 背景：--ink 全出血 + 72px 间距 4% 白网格线（linear-gradient 画，铺满整屏）；右上 1 个 signal 光斑（径向渐变至 transparent，直径 ~46vw，opacity ≤.32），叠于网格上层、文字下层。\n- 标题含术语英文（OAC / Bot）可混排，字号降 0.9em 保证不破行。\n- 移动端：标题 ≥2.2rem；双 CTA 全宽堆叠（主上、次下）。\n\n## 5. 分节版式卡\n\n**S1 定义（连接层不是替代品）**：左文右图（移动上下叠）。右侧「三层堆叠示意」纯 CSS 矩形（禁位图）：`[你的本地代码 Agent]`(ink 底白字) ↓ `[OAC 连接层]`(signal 底黑字) ↓ `[Open Agent Internet Bot]`(ink 底 + signal 描边)；盒高 48px、层距 16px。正文中「连接层」一词 signal 高亮下划线（仅一次）。\n\n**S2 类比（35 年前 PC 上网）**：两栏对照（移动上下叠）+ 中间超大 `≈`（H-hero 字号 signal 色）。栏顶等宽标签 `1990 · PC` / `NOW · AGENT` + 1px line，档案感；无卡片无背景块，白纸黑字。\n\n**S3 四大能力**：桌面 4 列 grid（gap 24 + 1px 列分隔线）；移动 2×2。卡片 = 等宽序号 `01`–`04`（常态 --t3）→ 能力名（800）→ 一句话（--t2 ≤2 行）。**不配图标/插画/emoji**，hover 仅序号转 signal + 底边 2px signal 线展开。\n\n**S4 支持的本地 agent**：整条 ink 深色横带；chips 流（--ink-2 底白字 999 圆角）+ 右侧 6px 状态点（--ok 绿=已支持 / --t3=待仓库核对）；移动端横向滑动、隐藏滚动条。⚠️ 名单与状态由 P1/工程核对 open-agent-connect 仓库填写，spec 不锁死名单防事实漂移。\n\n**S5 怎么接入**：3–4 步（步数以 P1 为准）：等宽大序号 `01`（signal）→ 动作短句（700）→ 一行说明。PC 横排 1px 虚线连接，移动竖排左侧序号列。末步与 S6 CTA 同一屏衔接。\n\n**S6 收尾 CTA + 资源链接**：ink 全宽；H-hero 呼吁标题；signal 主按钮（高 ≥56px）；下方「相关资源」区：每条完整 URI 用等宽 0.85rem 展示，**可复制、禁止截断省略**，hover 行背景 --ink-2；页脚一行小字。\n\n## 6. 动效清单（全页仅 3 处）\n\n1. Hero 入场级联：kicker→标题→副题→CTA，每档延迟 60ms，translateY(12px)+fade，500ms cubic-bezier(.2,.7,.2,1)，仅首屏一次。\n2. Scroll 指示：1px×48px 竖线内 8px 光点 1.6s ease-in-out 循环下落。\n3. 高亮下划线展开：进入视口 scaleX(0→1) 600ms，触发一次（IntersectionObserver）。\n\n纪律：只用 transform/opacity；禁数字滚动、粒子、打字机、视差、卡片 3D；hover 仅颜色与 ≤1px 位移；prefers-reduced-motion 全部关闭。\n\n## 7. 响应式规则\n\n- 断点 <640 / 640–1024 / >1024；移动边距 16px；PC 内容列 680px 居中（S0/S4/S6 全出血）。\n- 间距系统 8px 基：4/8/16/24/40/64/96/128。\n- 任何断点禁止横向滚动（S4 chips 除外）；375px 下 S3 不溢出不破词；平板 S3 2 列、S5 竖排。\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- [ ] 动效仅 3 处且只动 transform/opacity；reduced-motion 生效\n- [ ] 375px 与 1280px 双态无溢出/破词\n- [ ] 示例文案均已标注占位；agent 名单/链接/版本无虚构断言\n\n*本 spec 中所有示例文案仅为版式占位，不构成事实性内容；事实口径以 P1 文案 pin 与 open-agent-connect 仓库核对结果为准。*","encryption":"0","createTime":1788550390966,"tags":["OAC","MetaApp","视觉设计","群任务"],"attachments":[]}