由于本人完全不懂web开发，本站的开发工作全部交给了AI。网站整体比较简单，没有复杂的数据逻辑，不过AI的表现还是超出了我的预期。整个流程中我没有看过任何代码，仅仅是提需求和review文档，AI基本上能够一次就正确实现功能。
前期准备
前期和Gemini讨论了网站上线所需的步骤。对于我的网站，主要包括：代码实现，文章编写，界面设计，远端部署。代码这块Gemini推荐了astro这个框架，支持markdown写文章，看了眼感觉还行，就决定用他了（反正代码不是我写）。我让Gemini给我生成几张技术博客的设计图，这里就遇到了一个很奇葩的问题。Gemini网页上预览图片的时候，默认是圆角的，如下图：
我以为是图片生成的问题，让Gemini改成直角，改了几版都改不好。最后下载下来发现，原图就是直角的：
折腾了半天，其实这样还不如去别人的博客上偷张图。拿到设计图后，AI很快就写了一版差不多的网站，还是让我稍微有点惊讶的。
关于openspec
最近SDD比较火，所以我也跟着去尝试了下。简单概括下新增一个功能的流程：
- /opsx-propose 提出需求，后面可以跟这个需求的名称，如 /opsx-propose add-multi-theme, 也可以跟详细的需求描述。AI会生成对应的文档，包括proposal.md, design.md, spec.md, tasks.md。
- review生成的文档。最开始我会每个文档都过一遍，后面就只会简单看下proposal和design了。如果有需要改变的需求，这个时候可以提出来并且让AI修改对应的文档。似乎这一步没有opsx指令可以用，只能用自然语言。
- /opsx-apply 然后开始看戏。AI会依照前面生成的文档实现功能，然后构建网站，尝试用MCP或者curl命令验证网站内容。目前为止这一步没有遇到太多问题，只要通过构建，网站基本上就能正常显示。
- /opsx-archive 归档。主要是归档第一步生成的文档。如果有delta spec，这一步会合并到原有的spec里面。
前期也试过 /opsx-explore指令，主要原因是觉得需求一句话讲不清楚，希望通过这个指令讲清楚再走后面流程。但是使用过程中发现AI可能会在没有写文档的情况下就提前开始代码实现。后面发现如果有这样的需求，完全可以/opsx-propose 然后接一大段描述，并且propose之后也能再修改。于是再也没用过这个指令。
一些粗浅的理解，openspec主要做了几件事情：
- .cursor/commands 里面创建了opsx-propose等指令，相当于是提供了一个对话的模板。主要通过这些指令来推进开发，但中间也可以使用自然语言。
- .cursor/skills 里面创建了和每个指令对应的skill。里面内容看上去和commands内容有大量重复，原因不明。下图是command和skill的对比，可见大部分是重复或相似内容：
- 提供一系列命令行工具供AI或人类调用。我自己只调用过openspec init, 其余均为AI调用。
- 通过以上工具指导AI产出需求和设计文档，并在适当时机持久化，通过文档指导开发。
其实我觉得openspec对我这个简单项目的作用主要就是有了文档，方便做上下文管理。AI可以通过spec查询到之前的设计。不过当前项目过于简单，印象中查询以往spec就只有1次。另外，在项目的第一个版本，没有走openspec的流程，而是直接给AI说了一句话：我要做一个个人博客网站，AI就做了一个能跑的版本。这就导致这部分代码没有反映在spec文档里面。后续是否会出问题还有待验证。
AI踩坑记录
浏览器MCP调用失败。AI坚称MCP应该是cursor自带的。上网查询后发现需要安装playwright MCP。安装后能正常调用，但有时这个MCP会莫名被禁用，需要手动打开。另外这个MCP和skills，rules都存在一个问题：你想要他们被调用的时候，AI不一定会去调用。这篇文章提到使用全局的AGENTS.md可能得到更好效果，日后可以试一下。
调用shell经常失败，并且输出一堆乱码。这点我没找到什么好的解决方案，只是让AI重试各种命令直到成功为止。
/opsx-archive的时候，本应该把所有文档都移动到archive下面，但经常有原始文件残留的情况。并且每次这一步调用的命令都不统一。按理来说，除了spec的合并，都应该是确定性的过程。如果有文件残留，即使是空文件夹，openspec也会认为proposal是未完成的。
本地测试网页的时候，会起一个监听端口。如果是AI通过powershell起的话，经常会关不掉。建了个杀进程用的skill，但AI从来没调用过。
自动化测试
我认为对于AI生成的代码，有自动化测试可以节省人为debug的成本。本来想让AI写测试来验证它自己写的代码，但对话的过程中偏离了原来的目标，做成了一个验证博文内容的测试。至少还是有些作用。
值得一提的是SDD并不能代替TDD，两者是可以共存的。如果需要单例测试，应该作为需求提出。
部署
我主要的诉求是第一版尽量简单，后续可能考虑迁移到自己租的服务器上。AI给出的方案是托管在vercel上。目前用下来没什么问题。暂时也不想折腾服务器了。
总结
AI在web前端的能力确实很强大。这个网站是纯前端的，正好利用AI的能力实现快速开发。
比较遗憾的是我并没有通过这个网站的开发过程了解web技术栈。连代码都几乎没看过。对于当前版本，这样应该没什么问题，但后续如果想加入留言板之类安全相关的功能，自己不懂的话还是不太放心。
对于SDD之类新出现的AI编程范式，我不太确定是否有必要深入了解。这个简单的网站，可能不需要使用sdd也能做好。也许当AI足够强大，只需一句话就能实现需求，并且产出所有需要的文档的时候，这些范式就会被淘汰了。
相比于web前端，游戏的效果差了很多。可能的原因：开源项目较少，缺少统一框架，游戏世界的状态较为复杂，游戏逻辑的正确性较难判断。之后可以在虚幻引擎里面应用SDD去做以前做过但没做好的事，看下是否有提升。