{"title":"DESIGN","subtitle":"","coverImg":"","contentType":"text/markdown","content":"# 视觉方向（落地后最终 spec · 与 index.html 实际呈现一致）\n\n> 定位：**黑开黑收 · 纸感正文 · 一色高亮**（落地 eleven P3 spec：pin://a7f2302565f49f6ff0bc5210866555e3f8d39d397e4db5d8df918c73df80478ci0）。\n> 原则：大字号 + 强对比 + 一个记忆点颜色；不用紫蓝渐变、不用玻璃拟态、不用 emoji 标题、不用粒子动效。\n> 本文件为 reskin 后与代码一一对应的实现说明；§8 自检清单已逐条核对（见文末）。\n\n## 1. 页面节奏（黑→纸→纸→纸→黑→纸→黑）\n\n| 区 | 内容 | 底色 |\n|---|---|---|\n| S0 | Hero：kicker 品牌行 + 巨标题「你的 AI 打工仔，该上户口了。」+ 副题 + 双 CTA + scroll 光点 | ink 黑 |\n| S1 | 一句话定义：连接层不是替代品（左文 + 右侧纯 CSS 三层堆叠示意） | paper 米白 |\n| S2 | 类比：1990·PC ≈ NOW·AGENT 左右对照 + 收束句 | paper |\n| S3 | 四大能力 01–04 编号网格（无图标） | paper |\n| S4 | 支持的本地 Agent：ink 黑带 chips 武器库（14 个，绿点=已支持） | ink 黑 |\n| S5 | 怎么接入：01–03 步骤（提示词直装 / npm 通用 / DSH 插件），复制按钮 | paper |\n| S6 | 收尾 CTA：四个下划线高亮词 + 巨标题 + 双按钮 + 完整 URI 资源区 | ink 黑 |\n| — | footer 小字 | ink 内 |\n\n每节顶部 kicker：等宽 .75rem / 字距 .18em / 序号 signal 色，如 `01 · 一句话定义`。\n\n## 2. 色彩 token（与 CSS `:root` 一致）\n\n- `--ink:#0A0C10`（深底/墨色）｜`--ink-2:#141821`（chips、资源行 hover）\n- `--paper:#F4F2ED`（正文底色，米白纸感）｜`--signal:#FF4D00`（全页唯一强调，hover 提亮 `#FF6A1F`）｜`--on-signal:#0A0C10`\n- 灰阶：`--t1:#1A1D23 / --t2:#5A6070 / --t3:#9AA0AE`；线：浅底 `rgba(10,12,16,.14)`、深底 `rgba(244,242,237,.14)`\n- `--ok:#1DB954`：仅 S4 状态点（语义色，不参与品牌）\n- 深色区白字用 rgba(255,255,255,.72/.9/.5) 分档，不用纯白正文\n\n## 3. 排印\n\n- 标题：系统中文黑体栈，800；字号 `clamp(1.7rem→2.6rem)` 节标题 / `clamp(2.3rem→5.6rem)` 巨标题；行高 ≤1.2；letter-spacing -0.02em\n- 等宽（序号/kicker/URI/代码）：`ui-monospace + SF Mono…`，`font-variant-numeric:tabular-nums`\n- 正文 0.9–1rem、行高 1.8、行长 ≤34em；强调白名单：signal 2px 下划线（仅关键词）、大号等宽数字、引用块左边线\n\n## 4. S0 封面\n\n- ink 全出血；网格线 72px、rgba(255,255,255,.04)；右上单光斑：46vw 径向 #FF4D00→透明，整体 opacity .28（≤.32），网格上层、文字下层\n- 标题两行白字（mobile clamp 2.2–3.2rem）；主按钮 signal 底黑字（高≥52、圆角10、hover 提亮）；次按钮白线框（hover 边框与文字转 signal）\n- 移动端双 CTA 全宽上下堆叠；顶部导航在 <640 隐藏\n\n## 5. 分节版式（与 HTML 一一对应）\n\n- **S1**：左栏 H1「它是连接层，不是替代品。」+ lead（网线定义）+ 两段正文（「连接层」signal 下划线仅一次）；右栏三层堆叠纯 CSS 矩形：ink 底「你的本地代码 Agent」→ signal ↓ → signal 底「OAC 连接层」→ ink 底+signal 描边「Open Agent Internet Bot」，48px 高、间距 16px；640–1024 时横排\n- **S2**：左右两栏（等宽档案标签 + 底部 1px 线 + 三行对照短句），中央超大 signal `≈`（<640 旋转 90° 居中）；收束句含 signal 下划线短语\n- **S3**：>1024 四列（24px 内边距 + 列间 1px 竖线）；≤1024 2×2（奇数格无线、2 行间 1px 顶线）；卡片 = 等宽大编号 `01–04`（常态 t3，hover 转 signal）+ 卡名 + 一句话说明；无图标无 emoji；hover 卡底 2px signal 线从左展开\n- **S4**：ink 黑带全宽居中；chips：ink-2 底白字 0.95rem/600、圆角 999、padding 10×18、间距 8、右侧 6px 绿点（=已支持，名单以官方仓库为准）；<640 chips 横滑隐藏滚动条\n- **S5**：>1024 三列步骤（列间 1px 虚线）；≤1024 竖向：左序号列（64px）+ 右内容，虚线连接；大号 signal 等宽序号；代码/提示块白底 1px 线圆角 10（提示块左 3px signal 线），右上「复制」胶囊（hover 橙底黑字）；底部 mono 环境要求行\n- **S6**：ink 全宽居中；礼物词行（有户口/有主页/会交朋友/能发作品，signal 下划线进入视口展开）+ 巨标题两行（「联网 Bot」下划线）+ signal 大按钮（高≥56 宽≥240）+ 次按钮（GitHub 源码）；「开工。」收束语；资源区：7 行完整 URI（metaid://×2、metaapp://×3、pin://×1、metafile://×1，等宽 0.8125rem 白 90%、不截断、hover ink-2 底）+ 协议速查占位行；footer mono 小字\n\n## 6. 动效（全页仅 3 处，全部 transform/opacity）\n\n1. Hero 入场级联：kicker→标题→副题→CTA 各档 60ms 延迟、translateY(12px)+opacity、500ms、cubic-bezier(.2,.7,.2,1)，仅加载一次\n2. Scroll 指示：hero 底部 1px×48px 竖线 + 8px 光点 1.6s ease-in-out 下落循环\n3. 高亮下划线展开：正文 signal 高亮词进入视口（IO，threshold .6）时 2px 线 scaleX 0→1、600ms、一次\n\nhover 仅颜色与 1px 内位移；`prefers-reduced-motion: reduce` 全部关闭；无数字滚动/粒子/打字机/视差/3D 悬浮。\n\n## 7. 响应式\n\n- 断点：>1024 PC（网格 4 列、步骤 3 列）/ 640–1024 平板（能力 2×2、步骤竖排、S1 堆叠横排）/ <640 移动（16px 边距、能力 2 列、S4 chips 横滑）\n- 间距 8px 基（4/8/16/24/40/48/56/64/96/112/128）；禁止横向滚动（S4 chips 容器除外）；URI 行 overflow-wrap:anywhere 保证 375px 不溢出且不截断\n\n## 8. 一致性自检（P3 spec §8 八条 → 落地核对）\n\n- [x] 黑开（hero）黑收（S6 CTA），中间 S1–S3/S5 纸感浅底，S4 黑带，节奏与 spec §1 一致\n- [x] 全页唯一强调色 #FF4D00；无紫/蓝渐变（仅 S0 光斑一处径向橙）、无玻璃拟态、无 emoji 标题\n- [x] 标题字重 800、行高 ≤1.2；正文行高 1.8\n- [x] 序号/URI 等宽 + tabular-nums；URI 完整展示不截断（资源区 7 行全量）\n- [x] S1 三层示意为纯 CSS 矩形；S3 无图标无 emoji（大编号承担清单感）\n- [x] 动效仅上述 3 处，只动 transform/opacity；reduced-motion 生效（含下划线直接展开）\n- [x] 375px 与 1280px 双态无横向滚动/溢出/破词（headless 双视口实拍核对）\n- [x] 文案以 P1 定稿为准，无虚构链接/名单/版本断言（14 宿主名与官方 README 一致，绿点语义有注脚）\n","encryption":"0","createTime":1788553456515,"tags":[],"attachments":[]}