用 Claude Code 推翻重写笑小枫网站

这是「笑小枫 AI 改造日记」系列的第 1 篇。记录我用 Claude Code 把自己的网站推倒重来的全过程。不是教程是我自己的折腾记录。说说前世先聊聊为什么突然要搞这个事。三个原因都挺真实的第一AI 恐慌。每天刷到各种 AI 新闻焦虑得不行想学点什么但又不知道学了能干嘛。买了一堆课收藏了一堆文章动手量为零。这种状态持续了几个月我觉得不行得找个东西练手。第二火山方舟的 Coding Plan 快过期了。之前白嫖的额度一直躺着没用。眼看就要到期不用掉感觉亏了一个亿。第三就是想折腾。人嘛总想留下点什么。我有个荒废已久的个人网站每次想到它都觉得「该更新了」然后就没有然后了。这次借着 AI 的劲决定把它翻出来重新搞。核心目的就是学习 AI使用 AI拥抱 AI。战略方向就是使用各种流行 Agent像 Claude Code、OpenClaw 等等通过 LangChain、Deep Agents 去做智能体应用等等。先看看前世长什么样说实话也不算丑。纯手搓的也还凑合。那为什么不基于这个继续改呢我试过。让 AI 在老项目上优化改了这个那个又坏了效果不好。老项目是基于我的开源项目 Maple-Boot 搭的整体架构偏老前端代码组织也比较混乱。后面我主要想往 AI 方向发展网站要接入更多 AI 功能。在烂尾楼上搞装修不如推倒重来。聊聊今生打开 Claude Code 终端说了一句「帮我做一个笑小枫网站」。然后等它写完。然后就上线了。开玩笑的。没这么简单。先看看项目效果项目底座新项目基于我的另一个开源项目 Maple-Boot-17 进行。为了方便区分Maple-Boot 就叫「前世版本」Maple-Boot-17 叫「今生版本」吧。两者最大的区别就是 JDK 版本升级带来的一系列组件升级。改造策略这次改造我做了一个关键决定只保留数据表结构和后端前端全部废弃重来。为什么保留后端因为后端是我自己搭的框架熟结构也比较规范出问题我能快速定位。在 AI 转型的路上后端暂时不需要大动。为什么废弃前端说实话我前端能力一般。但我觉得现在 AI 的前端能力已经很强了与其自己写一堆半吊子代码不如放手让它来。实际过程这里有个细节值得说。整个前端雏形其实不是 Claude Code 生成的而是 Google AI StudioGemini 3.5 Flash 模型先做了一版。原因很简单免费额度。Gemini 把大体框架搭出来之后后续的迭代优化才转到 Claude CodeGLM 5.2 模型上。相当于 Gemini 干了打地基的活Claude Code 干了盖楼和装修的活。这个分工模式我觉得挺适合白嫖党用免费模型出雏形用付费模型做精修。别一上来就烧钱。附一张管理端的开发截图风格选择用 AI 生成前端最开始有一个绕不开的问题选风格。这个决定了整个项目后面的走向。UI 框架选哪个、配色走什么调、布局风格偏简约还是偏花哨–前期不定好后面改就是灾难。来看看选择困难症患者的真实表现是的我频繁切换了 N 次。每次切完觉得「这个好看」用着用着又觉得「还是上一个好」。最终定下来的时候已经浪费了不少时间和 token。Claude Code Skills 加持光靠裸用 Claude Code 对话效率其实有上限。这次重构我加了几个社区 Skills让 Claude Code 变得更聪明ecceverything-claude-codeClaude Code 的百科全书装了之后它对项目结构的理解明显提升生成的代码更贴合现有架构不会给你写一堆「能跑但风格完全不搭」的东西。sdd-workflow规范了开发流程让 Claude Code 按需求拆解 - 设计 - 实现的节奏走而不是一上来就闷头写代码。ui-ux-pro-max-skill前端 UI/UX 专用技能解决了我前面「选风格选到怀疑人生」的问题。装了之后直接告诉它设计方向它生成的 UI 明显比之前成熟。经验教训先和 AI 讨论方案讨论清楚后再让 AI 去开发。比如「暗色系、极简、科技感、参考 Vercel 官网」比你自己来回试高效得多。我走了弯路才学会这事。先做最小 MVP。这是我踩过的最大的一个坑一开始啥都想要社区、论坛、小程序等等妥妥的堆功能但真的有人用吗一定要想清楚到底想要做什么核心在哪做最小 MVP 去试错。谈谈未来新站上线了但它现在就是个普通网站。好看能跑仅此而已。其实重构网站只是个引子。我做这件事的真正目的是给自己找一个练 AI 的真实战场。笑小枫这个站就是我的实验田。以后每一个 AI 功能都会在这里种下去、长出来。可能长得好也可能长歪了但至少不是在沙盘里模拟种地。接下来的路线图大概是这样接入AI能力加一个 AI 客服 Agent访客来了能聊两句不是对着一个静态页面发呆。这个 Agent 后面会接更多能力能查文章、能回答常见问题、能引导关注。让网站自己运营让AI自己整理一些热门文章自己去和用户评论互动等等。搭建配套的小程序。说白了就一条线从一个静态网站变成一个有 AI 大脑的站点。这些功能我会一个一个接每个接的过程都记下来。踩了坑就写坑翻了车就写车。这不是什么高深的技术专栏就是一个独立开发者用 AI 工具改造自己网站的真实过程。如果你也在想把 AI 用起来但不知道从哪开始可以跟着看看。这是「笑小枫 AI 改造日记」系列的第 1 篇。网站速观请前往 xiaoxiaofeng.com。