williamliu.ai 改版：2 种语言，1 个内容站

要点

🧭 首页现在先展示最新发布的内容，下方并列呈现博客、播客和项目。
🌏 每个页面在 /zh/ 下都有中文版，采用中文界面，并提供中文系列与项目介绍。
🎧 播客页按系列组织。每个系列最新的 3 集可以原地播放，点击 "View all" 可查看其余单集。
📖 单集页现在像文章一样阅读：正文采用衬线字体，图表和参考资料列在侧栏。
📱 手机上不会再横向滚动；关闭 JavaScript 后，每个页面的核心功能仍然可用。
⚖️ 代价是：首次打开中文页面，需要下载 4 至 9 MB 字体。

旧版 williamliu.ai 只是顶端写着我名字的播客站；新版把我发布的所有内容汇成一个作品体系，并提供两种语言。 改版之前，首页只有名字、一行简介、一个 "Open podcasts" 按钮、两个社交链接和 3 张项目卡片。没有导航栏，也没有博客入口。你可以听播客，但得先知道去哪里找。这次改版已于 9 月 16 日上线。本文会逐页介绍变化，并与被替换的旧版对照。

我先在 Claude Design 中完成设计，再让 AI 编码智能体把它构建到现有网站里。整个过程，包括出了什么问题，另有一组技术系列文章详述。本文只讲读者最终会看到什么。下方这段简短、无声的原型演示可以直接在文章中播放。

fig 01 4 张未经裁剪、按统一比例呈现的 Claude Design 原型截图，均为原型的中文界面：以最新播客为中心的首页、按系列组织的播客索引、带封面占位图的单集页，以及文章页。

fig 02 Claude Design 原型动态演示：90 秒无声录屏，依次展示首页、带动态波形播放器的单集页、项目页和中文页面。

fig 03 并排对比：旧版首页显示一个大号名字、一行标语、一个 "Open podcasts" 按钮和 3 张项目卡片；改版后的首页有导航栏和中英文切换，并以带播放器的最新一期播客开场。

🧭 一个内容站，不再是附带其他内容的播客站

博客、播客和项目现在并列呈现；所有页面共用一个导航栏：文章、播客、项目、关于，以及语言切换。 这次改版的第一个想法，是把它们视为同等重要的作品。首页因此不再是一张个人横幅，而是一个索引。最上方只展示最新发布的一项内容，不限类型。下方分成 3 栏，列出最新的博客文章、播客和项目，并分别提供查看全部内容的链接。

博客索引为每篇文章列出日期，标题下方有两行简介，最右侧还有一个 → 箭头。进入文章后，第一个正式段落以首字下沉开篇，图注则带有 fig 01 这样的编号。

网站新增了两个页面：项目和关于。网站现在这样介绍自己：“关于语言模型、编码智能体和工程实践的技术播客与博客。”“关于”页也以同一句话开篇。两页只采用我能核实的事实。没有虚构的 star 数，没有我没写过的履历，也没有设计原型里的样例数字。“关于”页很短，因为我宁可写得短，也不愿写错。

🎧 不离开列表就能收听

播客页按系列组织，每个系列最新的 3 集可以直接在页面里播放。 以前，每个系列都是一张带封面和 "Open series" 按钮的大卡片。想听任何内容，都要先点进去。现在，每个系列都会显示封面、集数、Apple Podcasts、Android 和 RSS 订阅链接，以及配有播放器的最新 3 集。播放其中一集时，页面上的其他播放器会停止，两个单集不会同时出声。

只显示 3 行容易让一个系列显得内容很少，所以每个系列末尾都有 "View all 9 episodes" 这样的链接，数字采用真实集数，点击后进入完整列表。在系列页里，每一集都能原地展开节目说明，并链接到完整单集页。

fig 04 并排对比：旧版播客页把每个系列显示为一张大型圆角卡片，带有 "Open series" 按钮；改版后的页面显示系列封面、集数、有边框的订阅链接，以及配有内嵌播放器的最新 3 集。

播放器仍然使用浏览器自带的音频控件，也就是网站原来用的那一个。设计里有一个带波形的自定义播放器，我很喜欢。智能体构建并测试了一个，但在预发布网站上，它和设计相差很远，于是我要求换回旧播放器。它的行为与浏览器里其他音频一致。

🌏 每个页面都有中文版，并如实标注

每个页面现在都有中文版：首页、播客、所有系列页和单集页、项目、关于，甚至 404 页面。 你可以用导航栏里的 EN / 中文控件切换，也可以直接访问 /zh/ 下的任意地址。按 9 月 12 日的构建，共有 137 个中文页面与 137 个英文页面并列；每发布一集新节目，就会再增加一对。语言切换是普通链接，因此关闭 JavaScript 也能使用。开启 JavaScript 后，网站会记住你的选择；如果浏览器设为中文，也会自动进入中文页面。每个页面还会向搜索引擎声明对应的另一语言版本。

目前的翻译范围很明确。界面已经是中文，包括导航、标题、标签、日期、数量和阅读时间。中文导航中的博客入口叫“文章”，页面标题是“博客”。唯一的例外是：新的 "View all" 链接仍为英文，要等我确认中文措辞。3 个系列有中文标题和简介，3 个项目和 2 个单集也有。其他大部分单集标题和全部文字稿仍是英文。中文页面出现较长的英文内容时，会先显示一行提示："这一部分尚未翻译，以下为英文原文。" 构建过程不会自动翻译。只有设计交付包自带或经我批准的译文才会发布。

fig 05 中文播客页：导航、页面标题、系列标题和简介均为中文，下方的单集标题仍为英文。

📖 像读文章一样读单集页

单集页现在是一个阅读页面：顶部是标题和播放器，接着是节目说明，然后是采用衬线字体的完整文字稿，图表和参考资料列在侧栏。 这个布局适合日后回到某一期，寻找某个观点或某张图。文字稿现在会在正文旁边的窄栏显示发言人。图表出现在讨论它们的位置，侧栏则列出全部图表和来源，方便直接跳转。手机上，侧栏会移到正文下方。

fig 06 桌面端改版后的单集页：文字稿采用衬线字体，发言人姓名位于旁边的窄栏；来源论文中的图表内嵌于正文，附有编号说明和许可信息；侧栏列出该单集的所有图表。

📱 为手机、键盘和无 JavaScript 环境而做

旧单集页在手机上会横向滚动；新版完全适配屏幕，而且关闭 JavaScript 后，每个页面的核心功能仍能使用。 在宽 390 像素的手机上，旧版单集页比屏幕宽 11 像素，因此滚动时会左右晃动。改版页面在同一台手机上的横向溢出为零。网站会在 4 种屏幕尺寸上测试，最窄为 320 像素，并在每种尺寸上运行自动无障碍检查。

还有一些功能，只有需要时才会注意到。自动测试会检查网站交互控件能否用键盘操作，以及焦点轮廓是否清晰可见。展开按钮和列表链接至少高 44 像素，拇指操作起来更舒服。如果系统要求减少动态效果，动画会自动关闭。关掉 JavaScript 后，导航、完整单集列表、所有单集页、文字稿、来源链接和音频播放器仍然可用，只有可展开的单集行需要 JavaScript。字体现在也随网站一同提供，因此所有设备看到的效果一致，不会退回到设备碰巧安装的字体，也不会再让第三方字体服务得知你的访问。

⚖️ 哪些没有变，以及代价是什么

订阅、单集链接和 feed 都继续有效；真正的代价只有一个：首次打开中文页面会更重。 改版改变的是网站外观，不是发布内容。所有现有单集地址仍然有效。RSS feed、发布日期和发布计划都没有变化，因此你的播客应用里不会有任何内容移动。

代价来自字体。网站现在自行提供字体。英文页面根据具体页面加载 64 至 215 KB。中文页面还需要一套中文字体。这些字体文件覆盖网站所需的简体中文字符范围，每个 4 至 6 MB，因此中文页面首次访问时会下载 4 至 9 MB 字体，具体取决于页面。浏览器会缓存一天，但在慢速网络上，首次访问仍会明显感觉到。下一步显然是把字体缩减到网站实际使用的字符。

🧪 它是怎样构建出来的

我在 Claude Design 中完成网站设计，随后 AI 智能体在 9 月 2 日至 16 日的 15 天里把它构建进现有代码库，期间旧版网站一直正常为读者服务。 设计原型是带有样例内容、可以运行的样稿，不能直接发布。要把它变成真实网站，需要 AI 编码智能体和大量自动审查。读者没有遇到停机，但一次预发布错误让生产数据库约 2 小时无法写入。技术系列文章会完整讲述构建过程和其中的错误。

如果你读中文，可以试试“中文”切换，并告诉我最希望先翻译哪个页面。这个清单会决定翻译顺序。

本文写作方式：由 Claude Code 根据我本人的会话日志起草，另一个 Codex 智能体对照同一批日志核对事实，最后由我修改定稿。封面插图由 AI 生成；截图来自旧版网站和改版网站的本地构建。