视觉改版：摆脱「AI 默认审美」，以及一次为 SEO 放弃新特性的取舍

目标

站主看了一圈别人的作品集后提出（原话）：

现在大家都用 vibe coding，但是 Claude 或者 ai 不加自己的特殊提示词，设计出来的风格是一模一样的，一看就知道是一句话让 Claude 生成的，没有经过调整，也就是说没有使用 ai 的能力。

这话点在要害上：对一个想证明「会驾驭 AI」的网站，长着一张 AI 默认脸本身就是反证。方向由站主拍板：苹果官网发布会风格——把自己当产品来发布。

结果

• 视觉身份：白底超大字号标题（渐变高光动画）、bento 网格亮点矩阵（大数字 + 小注脚）、纯黑全宽 feature 段落（聊天框住进去，固定深色配色）、毛玻璃细导航、accent 蓝胶囊按钮。
• 动效纪律：进场动画纯 CSS keyframes；滚动渐入「默认可见 + 约 20 行原生 IntersectionObserver 渐进增强」；全程零 JS 动画库、尊重 prefers-reduced-motion；构建产物里页面仍全部静态预渲染。
• 桌面与 375px 移动端全页走查通过，重样式后的聊天岛实测正常（真 AI 徽章、流式回答都在）。

踩坑与纠正

为 SEO 放弃了一个很想用的新特性。 滚动渐入最初用的是纯 CSS 的 scroll-driven animations（animation-timeline: view()）——零 JS、很优雅。但验证时发现截图工具下页面全白，深挖后意识到一个更严重的问题：对没有滚动条的渲染环境（搜索引擎爬虫、社交分享的链接预览机器人，它们用超高视口一次性渲染页面），滚动时间线处于未激活状态，内容可见性语义不可靠。一个求职网站赌不起 Google 索引和微信分享预览。

替代方案是老练但稳妥的：内容默认完整可见（无 JS 环境零损失），约 20 行原生 IntersectionObserver 在真实浏览器里先隐藏再逐个揭示。效果一样，兜底硬得多。

教训：新 CSS 特性的兼容性表只告诉你「浏览器支不支持」，不告诉你「爬虫怎么看」。可见性永远要从「最笨的渲染器」角度倒推。

用时与备注

约 70 分钟，其中约 20 分钟花在排查截图全白与 view() 语义上。设计 token、版式与文案重写由 AI 完成，风格方向与「眼前一亮」的判断标准来自站主。