yuzhe.dev：用 AI 快速做出、再用规格和测试管住的零成本双语网站

概览

• 挑战： 海外创始人花 30 秒扫一眼资料，看不出十年后端经验意味着什么。
• 方案： 中英双语网站：服务、案例详情、可搜索的博客、项目简报——不依赖任何付费基础设施。
• 结果： 2026 年 5 月上线；Lighthouse 桌面端 100 / 100 / 100 / 100、移动端 96 / 100 / 100 / 100；内容规则由自动化测试把关。

挑战

这个网站同时承担四件事：接单的证据、一人公司的公开记录、搜索流量、未来产品的入口。两条约束决定了所有选择——赚钱之前成本接近零；以及严格的真实性标准：不编造客户、数据或链接，只有能验证在线的才标“已上线”。

方案

• 一条清晰的主路径： 首页 → 精选案例 → 案例详情 → 项目简报 → 微信 / X / 邮件。每页只有一个主按钮。
• 像这页一样的案例详情， 每个都有截图、线框图、架构图和测试证据。
• 项目简报工具： 在浏览器里把模糊的想法整理成结构化需求，永远不显示假的“已提交”。
• 可搜索的中英双语 MDX 博客。

案例详情页：线框图

技术亮点

yuzhe.dev 架构图

• 静态优先的 Next.js，部署在 Vercel： 内容是 Git 里的 MDX，构建时编译；没有数据库、没有表单后端，不花一分钱。
• 结构上就是双语： 每种语言一个 JSON 字典、一个内容目录，加一种语言只需要加一个 locale、一个字典、一个目录。
• 浏览器端搜索： Fuse.js，支持中文数字归一化。
• SEO 基础： canonical、hreflang、sitemap、自动生成的分享图、不夸大的结构化数据。

先做快，再管住

从 create-next-app 到上线的双语网站，V1 只用了 3 天（2026-05-27 至 05-29），编码 Agent 是 Codex。随后的审计发现了 AI 写的代码常见的问题：占位的联系方式和点了没反应的链接、乱码、手机 360 px 宽度横向溢出、缺分享图、部分交互不能用键盘、改一个样式另一个组件就坏了。

修复不只是打补丁。我把 AI 必须遵守的规则写下来——带内容锁定的产品说明、设计说明、每个模块一份规格——然后加了强制执行这些规则的测试：出现占位符就失败、状态标签必须真实、联系方式必须真实、每页必须有一个 H1。现在 AI 改歪了，先报错的是测试，而不是访客。我在客户项目里也是这样用 AI 的。

质量与测试

交付过程