AI 工具指南和应用实现的频道和内容：https://t.me/claudedevolper
Claude Code 如何帮助我彻底重做 Tilda 网站
以前我有一个 Tilda 网站。设计师用无代码区块搭建的，因为标准模板看起来太单调、太模板化了。每次要添加新评价、区块或页面，我都得给设计师发消息说"嘿，能加这个吗？"添加文章稍微方便一点，但也远非完美。在 WordPress 上，可以直接从 Google Docs 复制内容——图片都会一起上传到网站。在 Tilda 上，每张图片都得手动上传。这很快就让人烦了。最后我意识到网站已经过时，需要彻底重做。我也决定换个平台——比如迁移到我早就熟悉的 WordPress。但我突然想到：Claude Code 能不能自己做一个完整的 WordPress 网站？我就这个问题去问了它。Claude 回答说可以，但原则上说 WordPress 太无聊了。用 Next.js + headless CMS 做个现代网站要好得多。当时我还不太明白那是什么——只是听说过 Next.js 能做快速方便的项目。我决定不妨学一学、试试看。
剧透：我们成功了。网站运行良好，我很满意，甚至 SEO 流量在迁移后也没有下降。
我如何用 Claude Code 搭建网站（逐步讲解）
我来讲讲这个过程在实际中是怎样的。我先说明一下：我不是开发者。过去 7 年我管理了一个内容代理公司，在那之前做过编辑和营销。半年前我开始对 AI 编码感兴趣，做了几个粗糙但能用的服务，意识到需要更深入地了解。不是单纯地把任务丢进"黑盒"然后期待一切都能运行，而是至少要理解过程、管理它。所以我在这儿。目前我理解得还很粗浅。所以我提前声明：文章中可能有一些地方对某些人来说看起来过于幼稚或愚蠢。以后某个时候我自己重读也会这么想。不过现在我就尽力了 =)好吧，够了，别说了。咱们开始做网站吧。
从知识库开始（Knowledge base / Memory bank）
因为我对代码不熟，无法快速发现错误，所以对我来说很关键的是 Claude Code 尽可能少出错，工作要有条不紊。所以最初几个小时我们只做文档。我在某处读到过 Knowledge base（或 Memory bank）——这是一组 md 文件，包含项目的重要知识：架构、技术栈、规则等。在每个新会话开始时，你把需要的文件提给 Claude——他立刻就知道情况了。会话结束时，你让他更新文档。为什么不用一个大的 CLAUDE.md 文件，而是用多个单独的文件？
如果把所有东西放在一个文件里——它一开始就会消耗大量 token，模型就开始出问题。如果为了省 token 而去掉细节——模型又会出问题，因为信息不足。最后我的文件结构是这样的：
- 架构——技术栈、文件夹结构、为什么选择这些特定的工具。
- 模式——如何命名变量、如何组织代码、函数最多几行（这样 Claude 能保持一致性）。
- 部署——网站部署到哪里、如何部署、服务器访问、Docker 配置、CI/CD。
- 数据库——数据如何存储。
- Git 工作流——规则如"未经许可不要 push 到 main，所有操作都在 dev 分支中"。
- UX 指南——颜色、字体和规则"不要从零开始设计元素——从 shadcn 选现成的"。
- 路线图——工作顺序、网站页面列表等。
- 项目——总体背景：是什么网站、为谁做的、解决什么问题。
我们一起填充这些文件：我说我想要什么，Claude Code 描述一切，我审查和编辑，然后保存。正是在这个阶段，我们最终决定用 Next.js + headless CMS 做网站，而不是我原来计划的 WordPress。这是我的 architecture.md 文件的一小段（作为例子）：
我们如何在用 Claude Code 创建网站时处理文档和规范
我们用英文编写所有文档。英文的 token 化效率更好，所以文件在模型的上下文窗口中占用的空间更少。从节省 token 的角度来看，我认为这很重要。另外我还顺便练习了英文。现在过程是这样的：当我们开始一项新任务时，我首先从知识库中把需要的文件提给 Claude Code。他读了这些文件——然后我们就能完全理解上下文地继续工作。
规范驱动开发——我们的主要方法
我从关于 AI 编码和软件开发的文章中学到的另一个重要的事情是：你在一开始对任务描述得越详细，最终把事情做好而不需要返工的机会就越大。因此，我们把网站的所有工作分解成许多小任务。为每一个我们都写一个单独的规范——详细的技术规范。我用语言解释我想要什么，Claude Code 编写规范，我读它、编辑并批准。以下是我们在知识库规划阶段编写的任务示例：
- 在 localhost 上做网站的 MVP（这样就能打开一个简单的文字页面）
- 做主页
- 做博客流
- 做博客文章模板
- 从旧网站转移所有文章
- 添加暗色主题
- 配置 main 分支的部署，绑定域名
等等。当我说"让我们做第一个任务，按模板为它写规范"时，Claude Code 会提出澄清性问题，必要时在互联网上搜索信息，并通过 MCP Context7 写出完整的技术规范。我读它，找出不清楚的地方，要求他"用最简单的语言"解释。如果我看到逻辑上的漏洞——我会指出来。Claude 要么证明他是对的，要么同意并重做。规范立即被分解成原子步骤："在这个文件中做这个，然后运行测试检查没有破坏什么"。这是 Claude Code 为自己写的技术规范的一段（示例）：
这是一个任务文件的例子。Spec是我们正在开发的功能的总体描述，里面包含很多单独的小md文件，每个都是一个小任务，我一次只给CC喂一个。再说，这样是为了不让它的上下文被多余的信息堵满。
准备工作占了与Claude Code进行开发的整个过程的70%
坦白说，所有这些前期工作——知识库、规范和规划——大约占了我开发时间的70%。后面就基本不依赖我了。Claude Code开始写代码、执行命令，而我对此理解还太浅，无法实时控制整个过程。正因如此，我尽量彻底地完成规划阶段。计划和文档越详细，之后就越少出现意外。对于小任务，我不写完整的spec。我就启用plan-mode，让Claude Code列出行动计划，我同意后再开始工作。没有plan-mode我根本不做任何事：它能很好地防止模型犯低级错误。
使用Claude Code开发网站的过程是怎样的
我的开发过程相当简单和可重复：
- 启动与Claude Code的新聊天。
- 给它发送任务文件+知识库中相关部分的链接。
- Claude Code研究我发送的所有内容，并写出详细的行动计划。
- 我批准它（或修改它）。
- 开始工作。
- 我在localhost上打开网站，看看结果如何。
- 几乎总是第一次就不对劲，所以我截图，发到聊天里，请它修正。
就这样一步步完成每个任务。在某个阶段，我接入了带Playwright的MCP服务器，这样Claude Code可以自己打开网站看结果。这在修复明显的bug和技术问题时很有帮助。但当问题只是"不好看"或"样子不对"时——Playwright帮不上忙。我得截图，用人话解释什么东西需要移到哪里。网站主页花了我整个晚上。
我看了各种例子，理解了大致方向，在Figma里画了个简单的草图，给Claude Code发过去，请它做成类似的样子。
关键是——我非常不喜欢AI做的设计。Lovable、Gemini、Claude——它们的结果都很沉闷。
所以我让CC别瞎折腾，就用现成的shadcn组件。已经又漂亮又整洁了。这个建议是CC在网站规划阶段给我的=)
我们做了个简单的页面，然后开始给它加料。这个区块加个截图，这里放客户logo，这儿加个这样的动画之类的。
几个小时后，主页就完全做好了。此时我已经欣喜若狂，因为没有任何承包商能为我做得这么快。那边要数天数周，我们一晚上就完成了。而且晚上的大部分时间是规划。
最终结果和内容迁移的过程
我很喜欢最终结果。最终得到了简约设计，网站瞬间加载。最棒的是——现在可以通过与Claude Code的聊天来编辑任何东西。不需要拖拽式编辑、后台管理或手工编码。当然，不总是第一次就完美。有时Claude一下子就做得很好，有时需要修改2–3次。但即使需要修改，这也快得惊人——尤其考虑到我不是开发者、不是前端工程师、不是设计师，之前根本不了解Next.js。一切都是按照互联网建议和模型提示做的。又用了整整一天来迁移其他页面、博客流和所有文章。说到内容迁移，我想起了个很有意思的例子。
之前我们在一个项目中从Tilda迁移到WordPress。一个人花了好几天手工迁移所有文章：复制文本、上传图片、排放位置。Claude Code在15分钟内完成了这一切。我只是给了它旧网站的sitemap。它自己解析了，提取了所有文章，将它们分成单独的MDX文件，下载了图像，并放入项目的正确文件夹中。当然，出了些小问题：有些图片重复了，某些文章中还保留了指向旧Tilda CDN的链接，而不是本地副本。但这些都是小问题——半小时就解决了。总的来说，整个博客迁移花了大约一小时。
最后一天用来精细调整。我让CC研究整个网站代码，找出可能的问题、漏洞和未使用的功能。然后重构一切。
然后进行了同样的SEO审计。Claude自己提出了需要做什么，添加了robots.txt，制作了sitemap、元标签和所有页面上的opengraph。接入了Yandex Metrica、Search Console等工具。最后通过PageSpeed Insights检查网站，复制了所有建议，请CC完成。
结果不错。旧网站的性能大约在70。
放弃Payload CMS：为什么后台管理不必要
按照初始计划，网站应该有一个完整的Payload CMS后台。但是一开始Claude Code就无法正常安装它——总是出错。我决定先搁置这个任务：万一网站根本做不出来，后台也就不需要了。三天的紧张开发后，我意识到一个意外的事情：我根本不需要后台。既然Claude Code几乎能做网站上的任何更改，还要它干嘛？
- 「加个新评论」→ 加了
- 「把这篇文章发到博客」→ 发了
- 「改改主页的文本」→ 改了
- 「改个按钮颜色」→ 改了
- 「更新文章的描述」→ 更新了
它做这些都很快，第一或第二次就对，几乎没有bug。由于知识库精心制作，模型准确知道文章、图像、评论和其他数据的存储位置和方式。我和Claude讨论了这个问题，决定完全放弃CMS。删除了Payload，忘了它。顺便说一下，整个开发过程是在拉脱维亚VPS上进行的。我通过SSH连接到它，不需要VPN——非常方便。如果需要在路上紧急修复什么，我直接用Termius app在手机上登进去。
最终结果：3天开发，全新网站
整个项目花费了整整三天：
- 第1天 — 规划、文档和主页
- 第2天 — 其他页面、博客和文章迁移
- 第3天 — 打磨、SEO、修复bug和迁移到生产域名
作为对比，十年前我的第一个WordPress网站也花了大约三天。但那时做出来的是一个沉闷又设计糟糕的网站，我自己也很不满意。而现在我真的很喜欢这个结果 — 无论是外观还是运行速度都很好。重要的是，迁移后SEO流量完全没有下降。迁移过程非常顺利，没有任何技术损失。在这三天里，我学到了很多新东西：最终搞清楚了什么是Next.js、shadcn和现代前端开发。现在我对网站的任何更改都通过Claude Code完成。我只需要说出需要什么，它就会进行修改。我在localhost上检查结果，如果一切正常 — 我就请求将更改推送到main。之后网站通过Docker自动更新。还有一个很大的好处 — 现在网站完全是我自己的。我完全不依赖Tilda。即使当前VPS出现问题，所有代码都存储在GitHub上。只需将仓库迁移到另一个服务器 — 网站就可以继续运行。
关于Claude Code的指南和内容频道，我们在这里发布新闻（当限制被大幅削减时）以及我们通过Claude为项目实现的各种工具，频道：https://t.me/claudedevolper
