问 AI 分身EN
← 全部日志

发布会改版：第五个产品是网站本身，以及一场和 React 19 水合的遭遇战

2026-06-13约 2 小时（设计对谈约 30 分钟 + 实现与验证约 90 分钟）视觉设计信息架构React 19渐进增强决策

目标

站主丢来一个 14.9 MB 的单文件设计原型（new_index.html，解包后 842 KB 页面 + 13.4 MB 内嵌字体），整页是苹果发布会式滚动叙事：四个项目当产品逐屏发布。两个问题要回答：这种致敬式风格站不站得住？聊天岛（核心展品）和构建日志在这版设计里放哪？

关键 prompt（原文摘录）

你觉得我用这种苹果风格 OK 吗会被说是抄袭苹果吗

那我们怎么来设计这个聊天岛（AI 数字分身）和构建日志。特别是聊天岛

你觉得设计在开头黄一航那下面呢？

那还是 hero 胶囊 + 终章真窗吧

决策记录

  • 风格定性：设计风格不受著作权保护；不碰苹果商标/原文/SF Pro 字体文件（系统字体栈合法）。真正的风险不是「像苹果」而是同质化——解法是把致敬打成明牌，并让聊天岛、构建日志这些苹果页面上不存在的东西撑住差异化。
  • 概念闭环：发布会发布的第五个产品就是网站本身——速览第七卡是预告，终章「还有一件事。」是现场 live demo（真聊天岛），构建日志是它的幕后纪录片，/ai-twin 是它的规格页。形式本身承载「网站即证据」的论点。
  • 聊天岛位置之争：站主想放 hero 名字下面。三个理由劝退：scrub 滚动和聊天内部滚动抢手势（移动端死穴）、发布会从不用 demo 开场（冷启动访客没问题可问）、「前面的窗口都是动画，这一个是活的」的 callback 只有真窗在最后才成立。折中为 hero 放输入框形状的纯静态胶囊（门，不是房间）+ 导航胶囊 + 速览第七卡，三个入口全部直达终章真窗。
  • 新增 Sprout / ContractLens 进 projects.ts：页面展示的项目，AI 分身必须答得上来（单一数据源），Sprout 技术栈先查了 GitHub 仓库确认（Python + litellm + asyncio + MIT）再入库，不瞎编简历数据。
  • scrub 引擎成为客户端 JS 白名单第三个例外：原生 TS 零依赖，挂在 KeynoteStage 水合后启动；无 JS / 减动效 / 爬虫看到的是默认可见的「定妆帧」静态页（009 的纪律延续）。

踩坑与纠正

主坑：React 19 水合把内联脚本的 DOM 变更全部冲掉。 第一版引擎为了零闪烁，走「内联 <script> 同步执行、解析期就加类驱帧」的老派路线。结果首页上类名全消失、引擎像没运行过，控制台却一个错都没有。决定性证据是对照实验：未改动的 /about 上 motion-ok 健在，首页上连它也没了——水合前的 DOM 变更（打字文本、注入的轮播圆点）触发 hydration mismatch，React 19 静默整页客户端重渲染，把解析期的一切改动回滚。修复是反转所有权：剧场开关 .kn-live 由 React state 拥有（useSyncExternalStore，服务端快照恒 false），引擎改成水合后才启动的类型化 TS 模块。顺带挖出旧 reveal 系统的同款潜伏 bug：内联脚本加的 motion-ok 同样会被水合冲掉（动画静默失效，因「默认可见」设计无人察觉），且客户端路由切换后新页面元素永远不会被观察——一并迁入 MotionSetup 客户端组件并按 pathname 重新观察。教训：React 拥有的 DOM 上，水合前的脚本改动等于没改，还可能引发整页重渲染。

演示模式被「平分劫持」：点建议问题「为什么这个网站第一版没用 RAG？」，演示模式答的却是「网站怎么做的」——关键词打分平分（命中 rag=1 vs 网站=1）后数组顺序决定胜负。修复：与 FAQ 原句完全一致时精确匹配优先（建议 chips 点击必中本条），再补关键词。

验证工具三连坑（hidden 无头页面）：截图器会改视口触发引擎 resize 重算把瞬态帧拍进去；rAF 在 hidden 页面被浏览器挂起，引擎「假死」；IntersectionObserver 不派发，聊天岛不水合。对策：引擎暴露 __knTick 可验证性钩子（同步驱帧）、聊天岛加 4 秒强制水合兜底（顺手消灭「观察器异常→聊天永久不可用」的真实故障面）、用负 margin 把目标场景推进视口在零滚动位截图。009 的结论再次成立：可见性永远从「最笨的渲染器」倒推——这次名单上又多了 hidden 页面的 rAF 和 IO。

结果

  • 首页九屏发布会全量上线：Hero（240vh scrub）→ 速览七卡轮播 → NoWorries（420vh，窗口 3D 登场 + 打字 + 步骤卡）→ 三层记忆 → OpenClaw 四级降级时间线 → Sprout 任务树生长 → ContractLens 合同炸开汇聚 → 实战 → 更多作品 → 第五个作品（构建日志纪录片条）→ 规格 → 终章真聊天岛 + 联系。
  • 内容层新增 content/keynote.ts（发布会台词本，zod 校验进 check:content）、Sprout 与 ContractLens 两个完整项目；AI 分身的 system prompt 自动获得这两个项目的知识。
  • 验证：四场景矩阵全过（演示模式 / mock 真 AI 流式 / 死上游优雅降级无 5xx / 第 8 个请求起 429）；无 JS 定妆帧 15 项内容断言全过；六个 scrub 场景逐一 DOM 断言 + 截图；lint / typecheck / build / check:content 全绿。

用时与备注

约 2 小时。设计对谈部分（风格合法性、聊天岛位置三方案对比）由站主逐题拍板；React 19 水合排查约占实现期三分之一——值得，因为它同时治好了一个上线以来没人发现的潜伏 bug。