How This Was Built
A family travel journal, and a look at how it was made with AI woven through the whole process. Not just writing code, but running the entire content pipeline with an agent in the loop.
这是一份猪猪家族的澳大利亚旅行日记,这一页记录它是怎么用 AI 一层层做出来的。不只是写代码,而是让 AI 参与从数据、内容、配图到发布的整条管线,下面逐层拆开每个环节。
Spec-Driven Development
行程内容是 YAML 单一真源(SSOT),经 Zod schema 强校验作为契约门禁。AI 改数据必须先过 schema 才能进构建;文档不是事后旁证,而是驱动 AI 写代码的可执行规约。
AI Content Enrichment
景点描述由阿里云百炼 DashScope(Qwen)带 web_search 生成,prompt 内置反「AI 味」写作原则做质量门禁,避免千篇一律的空话。
Automated Image Pipeline
构建期从 Unsplash 检索候选图、烘焙 LQIP 模糊占位、剥离 EXIF 元数据、生成多尺寸 webp;运行时零图片 API 调用,首屏即出。
Multi-Agent Privacy Audit
公开发布前,一套多智能体、多轮对抗式 workflow 扫描全站,逐项判定并抹除酒店 / 航班 / 住址 / 朋友 / 财务 / 健康等隐私信息。你正在看的这个站,就是它清洗过之后的产物。
Registry-First Design
写任何 UI 前先穷举 shadcnblocks + React Bits Pro 两个组件库,能复用就不自建,把「胶水编程」降到最低,交互与动效由 View Transitions + Motion 分层承担。
Static & Offline-First
Next.js 全静态导出(SSG),装成 PWA 后离线也能看;部署在阿里云 ESA(国内加速)+ Cloudflare Pages(海外镜像),无服务器、无数据库、无登录。