一位非技术背景的创始人，通过使用 AI 编码工具 Claude，在几周内成功重建了公司官网。尽管过程中遇到了 AI 响应不稳定、生成多余文件和任务中断等问题，但通过模仿专业开发者的工作流程并进行严格的人工监督，最终证明了 AI 辅助编码是赋能非技术人员、加速开发周期的强大工具。其核心结论是，目前 AI 的真正力量在于 人机协作：由人设定方向，由 AI 加速执行，但绝不能缺少人类的紧密监督。
目标：在不懂代码的情况下重建网站
作为一名非工程师创始人，目标是想验证能否在不雇佣额外开发者或花费数月从零学习编程的情况下，将公司的新网站设计稿（Figma 文件）付诸实现。
使用的主要工具栈包括：
- VS Code
- Anthropic 的 Claude Code 命令行工具
- GitHub 命令行工具
- Figma Dev Mode MCP Server
尽管市面上有 Squarespace 或 Wordpress 这样的无代码建站工具，但它们无法完美匹配我们特定的设计需求。通过与 Claude 协作，我能够以 极高的保真度 将设计稿转化为实际的代码库。
像专业开发者一样工作
最初，所有工作都在本地电脑上完成，这是一个糟糕的决定，因为一旦设备出问题，所有成果都会丢失。为了找到最佳工作方式，我最终采用了一套与许多专业开发者相似的工作流程。
- 分支与开发： 在本地处理具体的修改，并在开发服务器上进行预览测试。
- 提交与请求： 频繁地将进行中的工作推送到一个分支，在发起合并请求（Pull Request）前，让 Claude 清理和测试代码。
- AI 代码审查： 一个有效的技巧是要求 Claude 扮演联合创始人兼 CTO 的角色，对我的合并请求进行审查，并提出修改建议。
Claude（扮演 CTO）："看起来不错，可以合并！"
Claude（扮演 CTO）："干得漂亮！"
这种角色扮演的方式常常能发现一些之前被忽略的优化点。当 AI “批准” 合并时，虽然有点傻，但却很有满足感。这个过程让我意外地发现，AI 辅助编码可以很好地融入 分支、合并请求、代码审查、测试和部署 这一套标准的软件开发流程中。
与 AI 协作的挑战
在与 Claude 的合作中，也遇到了许多令人沮丧的问题。
挑战一：生成冗余文件
一个持续存在的问题是，Claude 会在代码库中生成大量无用的、带有哈希值名称的 SVG 文件。这些文件并未在任何地方被引用，清理起来非常麻烦。
- 解决方案： 我让 Claude 搜索这些带有哈希值名称的文件，确认它们未被使用后进行删除。同时，我也会在编辑器中手动检查，以防 Claude 遗漏或误删。清理完成后，再让 Claude 将剩余文件重命名为人类可读的名称。
挑战二：任务中途停止
Claude 有时会在执行任务的过程中 随机停止工作，而且没有任何明显提示。
我：“继续。”
Claude：“你说得对！”
当我质问它为何停止或提示它继续时，它通常会若无其事地接下去。有时，即使我明确要求它在任务完成前不要停止，它还是会反复中断，需要我多次催促。
挑战三：走上错误的道路
最痛苦的问题是 Claude 似乎会陷入错误的逻辑循环。根本原因通常很简单，比如它混淆了两个名字相似的文件。有几次，这直接导致了部署检查失败。
- 解决方案： 最佳（尽管痛苦）的办法是 回滚到上一个可用的版本，休息一下，然后用一个全新的 Claude 实例重试。
这次经历也让我深刻体会到 频繁提交和创建合并请求的重要性，因为它们能让我快速将 Claude 带回到一个已知正常工作的状态。
结论：AI 是加速器，而非自动驾驶仪
使用 Claude 重建网站是一次强大的体验。它让身为非工程师的我能够完成过去无法想象的任务。
然而，必须谨慎行事。我们的官网页面与核心产品代码是隔离的，所以风险很小。即便如此，我仍然需要不断地检查 Claude 所做的每一项更改。如果我稍一分心，它就可能修改错误的文件。
除了匹配设计，我还必须考虑性能、可访问性和代码质量等因素。我的开发者同事在我自己的检查之外，提供了宝贵的反馈。
目前，AI 编码工具的真正力量在于 人机配对：人类设定方向和目标，AI 负责加速执行。
我绝不会在没有严密人工监督的情况下，信任任何 AI 代理去修改生产环境的代码。