Build Note

我如何用 AI 协作搭建个人工作室官网

记录 YiForge Studio 官网从想法、技术选型、页面开发到静态部署的完整过程,以及我如何在这个项目中实践 AI Native 协作开发。

2026-06-06发布日期4标签
AI 协作Next.js独立开发静态部署
所属项目:YiForge Studio 官网

AI 时代让我重新看见自己的可能性

AI 时代来了以后,我在工作和学习里越来越频繁地使用 AI 对话和 AI 写代码。新模型或大厂发布新的 AI 能力时,我也会第一时间体验。这个过程中,我能非常直接地感受到 AI 带来的生产力提升。

这种变化对我来说很震撼。过去我首先是一个前端开发者,工作内容会天然把我限定在某个岗位边界里。后端、部署、产品、销售、内容表达,很多事情不是不能碰,而是成本很高,经验也不够完整。

但 AI 出现以后,我开始发现它像一个随时可以协作的专家。只要我把背景、目标和约束讲清楚,它就能给出专业建议,帮我补齐很多过去难以跨过去的能力断点。

所以我开始相信,这是一个属于个人构建者的时代。我要抓住这个机会,做一些自己的产品,创造自己的价值。YiForge Studio 就是在这种想法下成立的个人 AI 工作室。

为什么我要做 YiForge Studio 官网

YiForge Studio 需要一个真实的线上门面。这个工作室虽然是一个虚拟的线上状态,但它会持续探索 AI 开发、自动化工具、产品构建和内容表达,所以它需要一个地方承载这些内容。

官网就是这个容器。它会展示工作室是什么,展示我正在做的项目,也会持续记录每一次构建过程。

这也是为什么我把官网本身定义成工作室的第一个项目。它不是一个外部展示壳,而是 YiForge Studio 的第一个真实上线产品。访问者看到它时,应该能知道:这个工作室已经上线了,而且它本身就是一个基于 AI 协作开发完成的案例。

这次我没有先写代码,而是先和 AI 做技术选型

做项目最重要的事情之一是技术选型。技术选型很考验开发者经验,因为它会影响后续开发效率、性能、SEO、部署方式和维护成本。

以前我在 2018 年做过一个创业项目官网,当时选择的是 SPA 单页应用架构。那种架构开发体验不错,但对 SEO 不友好。等项目上线以后再想补 SEO,成本就变得很高。

这次我明确知道,PC 官网必须要支持 SEO,也要适合长期静态部署。所以我先把背景、目标和约束告诉 AI,让 AI 和我一起讨论技术方案,再由我做最终判断。

最后这个项目选择了 Next.js、React、TypeScript 和 Turborepo。Next.js 可以生成 SEO 友好的页面,TypeScript 能提供类型约束,Turborepo 适合后续把多个项目和共享包放到同一个工作室仓库里维护。

从页面到部署,AI 参与了哪些环节

这个项目是一次 AI Native 开发实践。很多代码不是我一行一行手敲出来的,而是我通过提示词描述目标、约束和反馈,让 AI 负责实现,我再验收、测试和继续调整。

AI 参与了很多环节:需求梳理、首页结构、页面文案、项目页和构建记录页规划、样式打磨、技术方案讨论、浏览器兼容检查、文档整理和问题修复。

我在这个过程中负责的是另一种工作:描述真实目标,判断方案是否合理,指出页面哪里不符合预期,确认内容是否能对外表达,并决定哪些东西应该沉淀成文档。

这让我对 AI 协作开发有了更清楚的理解。AI 可以大幅提升实现速度,但人仍然要负责方向、上下文、判断和验收。

为什么选择 Next.js 和免费静态部署

这次官网选择 Next.js,一个重要原因是 SEO。官网不是一次性 Demo,而是长期会被搜索、被分享、被引用的内容入口。项目介绍和构建记录都需要稳定 URL、metadata、sitemap 和清晰页面结构。

部署方式上,我这次使用了 Cloudflare 相关的域名和免费静态部署能力。过去我也用过腾讯云服务器部署前端页面,当时需要容器和 Nginx,整个过程更重,访问速度也没有这次让我满意。

这次静态部署后的访问速度让我很惊喜。它也让我意识到,对个人工作室来说,很多项目并不需要一开始就上复杂服务器。只要内容可以静态生成,免费静态部署就足够支撑一个真实可访问的网站。

这也影响了后续内容系统方案:项目用 Typed 数据维护,构建记录用 Markdown 文件维护,所有详情页都在构建阶段生成静态页面。不用数据库,不用 CMS,也不需要运行时接口。

这次官网项目已经完成了什么

目前官网已经完成基础仓库搭建、页面开发、域名配置、自动化部署和上线访问。站点包含首页、项目、构建记录、关于和联系页面。

首页已经具备 AI 工作室的视觉方向和核心导航。项目页和构建记录页开始从占位内容转向真实内容。关于页也会从官网项目介绍里提炼出工作室定位、AI Native 理念和协作方式。

这个项目还沉淀了两个很重要的协作范式:一个是项目和文章的模板范式,另一个是与 AI 澄清需求的 spec 协作范式。它们会在后续文章里单独展开。

这次构建给我的启发

这次项目让我更确信,AI 协作开发不是简单地让 AI 写代码。真正重要的是把目标说清楚,把背景讲完整,把约束写出来,然后持续判断、验收和反馈。

当这些上下文足够清晰时,AI 的实现速度会非常快。它能帮助我跨过很多过去需要大量经验才能处理的问题,比如技术选型、部署方案、SEO 结构、文档整理和内容规划。

但 AI 不是替代人的判断。这个项目里,最重要的事情仍然是我决定为什么要做官网、要展示什么能力、什么内容可以公开、什么方案更适合长期维护。

下一步还要继续完善什么

下一步,我会继续把官网从占位内容变成真实内容系统。项目介绍会持续补充,构建记录会持续新增,后续真实开发出来的工具和产品也会沉淀到这个工作室官网中。

这篇文章只是第一篇构建记录。后续我还会继续写两类文章:一类是 AI 协作开发的方法论,比如如何用 spec 和 AI 问题列表澄清需求;另一类是内容系统和写作模板,比如如何用 Markdown、slug 和静态页面管理项目与文章。

YiForge Studio 官网上线了。它既是工作室的门面,也是我用 AI 协作开发完成的第一个真实产品。