{"title":"DESIGN","subtitle":"","coverImg":"","contentType":"text/markdown","content":"# 视觉方向（设计 spec · 与 index.html 实际呈现一致）\n\n> 定位：自媒体/爆款科普 × 科技感。原则：**大标题抓人、扫读友好、克制动效、不空口配图**——页面 100% 由排版与 CSS 构成，无占位图。\n> 本 spec 描述的每个分节都能在 index.html 中找到对应实现；如后续与 P3 视觉 spec 对齐，只做参数级微调（色值/字号/间距），不动结构。\n\n## 设计 token\n\n| token | 值 | 用途 |\n|---|---|---|\n| 底色 --bg | `#05070f` 近黑深蓝 | 科技底，衬托发光 |\n| 面板 --card | `rgba(255,255,255,.035)` + 1px `--line` 描边 | 卡片统一质感 |\n| 主强调 | 渐变 `#22d3ee → #818cf8 → #a78bfa`（--grad） | 关键词、主按钮、结尾大字 |\n| 语义色 | 绿 `#34d399`（联网/成功）、红 `#fb7185`（误解✕）、黄（不用） | 情绪引导 |\n| 标题字 | 系统黑体栈，weight 900，`clamp()` 响应式巨字 | 自媒体大字 |\n| 辅助字 | `--mono` 等宽（SF Mono/Menlo），11–14px，大写+letter-spacing | 科技标签/编号/代码 |\n| 正文 | 系统中文栈，14.5–17.5px，`#94a0bf` 次级色 | 扫读舒适 |\n| 背景层 | 固定网格（56px，顶部径向渐隐）+ 三个方向光晕 | 深度，不抢内容 |\n\n## 分节视觉 spec\n\n1. **封面 hero（100svh 居中）**\n   微光点呼吸 + mono kicker 双竖线；三行巨字标题（`46→118px`，行高 1.06），第二行渐变；副文案限宽 560px 居中灰字，关键词加粗；中段用「step → 箭头 → 大 punch」三段式把 35 年前类比推高；双按钮（渐变实心 + 幽灵描边）；底部宿主 chips 一排 + 呼吸滚动指示条。背景固定网格 + 三团光晕。\n2. **01 时间线（左上角 01 水印大字）**\n   四格横向时间轴卡片（≤860px 变 2 列，≤520px 变 1 列），每格：mono 年份、线框图标、粗标题、两行灰字；第四格「OAC」态点亮绿色（live 强调），hover 上浮。\n3. **02 定义（无编号标题，直接大卡片）**\n   居中径向辉光大面板：两行 900 号「网线」定义（关键词青色），三枚绿色描边 pill「✕ 不换电脑/宿主/工作流」，正文居中，底部渐变「连接层，不是替代品」punch。\n4. **03 先别误会**\n   三行等宽质问列表（红 ✕ + 灰粗问句，虚线分隔），第四行绿 ✓「都不是。」；下方左绿边 verdict 卡：一句九字级判断 + 两行解释 + 渐变「是连接层，不是替代品」。\n5. **04 四大能力（2×2 grid，≤720px 单列）**\n   每卡右上 mono 编号水印（01/IDENTITY…），左上渐变描边线框图标；标题 900 号、正文带加粗关键词；卡下「链上真实案例」区：mono hint 注释行 + 5 枚可点 chip 卡（metaid:// ×2 Bot Page、metaapp:// ×3 示例，href 全量 scheme，Bot Browser 内点击直达）。\n6. **05 宿主**\n   14 枚 mono pill 网格（编号 + 名称），hover 变青上浮；下方绿色计数总结行。\n7. **06 上手**\n   三张编号卡（1 提示词直装 / 2 npm 通用 / 3 DSH 插件）：左上渐变方块数字、标题 + mono 绿注释；代码块深底 `#070b16`，prompt 版用青紫渐变淡底白字大号；每块右上「复制」胶囊，点击 toast 反馈；DSH 卡内注释行灰 mono 分步。\n8. **07 结尾 CTA**\n   居中：引导句 → 四枚紫色描边 pill（有户口/有主页/会交朋友/能发作品）→「的联网 Bot」→ 三张下一步卡（源码/实例/动手，mono NEXT 编号）→ 全宽渐变巨字「开工。」（`64→200px`）。\n9. **Footer**：两行小字 mono 声明（事实来源、纯静态无依赖）。\n\n## 动效纪律\n\n- 仅三处：呼吸光点、滚动渐显（一次性的 fade-up，IO 驱动，阈 0.12）、滚动 cue 上下浮动；按钮 hover 上浮 2px\n- 全部动画在 `prefers-reduced-motion: reduce` 下关闭\n- 无弹窗、无轮播、无自动播放内容\n\n## 响应式\n\n- 断点 860 / 720 / 520：时间线降列、能力 2×2 → 1 列、三 CTA → 1 列、导航折叠（仅保留「是什么 / 现在接入」）\n- 字号全部 `clamp()`，容器 max-width 1080px，正文限宽保证移动端行长 < 45 字\n","encryption":"0","createTime":1788551700459,"tags":[],"attachments":[]}