用AI辅助重做客户WordPress官网

文章目录

1. 1. 背景
2. 2. 做法
   1. 2.1. 1. 定设计稿
   2. 2.2. 2. 原型开发
   3. 2.3. 3. 模块化开发
   4. 2.4. 4. 其他
3. 3. 总结

客户有一个老官网，当时是以WordPress为底子，深度了自定义的后台。这次想在保留这个后台的情况下，为另一个公司设计一套前端完全不同的官网。其实挺长时间没有做外包业务了，这次我也试着用 AI 辅助从头做了一套新主题。

背景

技术栈没变：WordPress 6.x + PHP，前台用 Bootstrap、FontAwesome、SASS，图片弹窗用 fancybox / magnific-popup，轮播用 OwlCarousel，瀑布流用 isotope，进场动画用 wow.js。字体是自托管的 Rajdhani（数字/英文）+ Noto Sans SC（中文正文）。

做法

核心思路是：老站只保留 WordPress 骨架和数据，视觉和结构全部推到重来。

只所以说 AI 起到的是辅助作用，是因为我还是在很多方面给了关键性的引导，但是往下看就知道，主要工作却都不是我做。

1. 定设计稿

我首先在TemplateMonster上面选择了一个我比较满意的参考风格（https://ld-wp73.template-help.com/wordpress/prod_21594/v6/）。

提供给他这个参考模板之后，我给他定义了我的主要设计思路和各种设计边界。由于我自己也学过设计，通常以前网站外包的开发中，网页设计也是我自己来做，所以我对成品效果也有自己的预估。

长期的AI工作环境让我知道，让AI完全自主开发，最终是不可能达到我的期望的。

2. 原型开发

原型的产生意外的顺利。

我把参考网站和我的需求，尝试性的先给了豆包的云电脑。当时是因为收费版豆包的宣传，让我对它的云电脑工作模式有了一些兴趣。

使用下来效果也比较惊人，完全就是本地Agent的工作模式。因此没有经过几次交互式的调整，原型就达到我的要求了。

这其中还要特别提到豆包的生图能力。与Codex交流时要特意让它生成某些图片不一样，豆包非常完美的预测了我的需求，生成了一些无版权的且适合网站风格的占位图。有些图甚至我在后边直接就使用了，节省了不少时间。

3. 模块化开发

之前的步骤，豆包主要是帮我完成了外观上的设计，并且搭好了基础的 HTML/CSS/JS 框架。但是其中一是没有和我的后台进行对接，第二是有些地方只是视觉上呈现出了我的需求，而实际上并不是我要的组件。

所以接下来我把工作环境挪到了我常用的 OpenCode 中。这个项目在我平时的开发任务中，只能算作是小型项目。因此我也没有用能力更强、价格更贵的模型，美团的LangCat完全能够胜任。

以下是我拆分的一些工作任务:

- 滚动显现动画
- 当前导航项按 URL 高亮
- 锚点平滑滚动
- 搜索框 focus/blur 交互
- 图片加载失败回退
- 服务卡、团队卡的键盘可达性
- 顶部滚动进度条
- 推荐位响应式轮播
- 品牌详情页模板（品牌信息 + 产品）
……

当然实际上还是比这个要多得多。

关键还是在于每一条任务都是独立可验证的，出现问题好定位。

而这其中在每一次完成且达标的任务之后，都非常有必要提交一次Git。AI不知道什么时候会来一次小捣乱，而这有可能造成整个代码的混乱。

4. 其他

我现在基本上都使用语音输入，有的时候没有太注意，口头上就把有一些关键信息带进去了。

AI则直接把这些信息用硬代码的方式写在了页面上，造成和后台脱离。

这个时候就显示出真正开发交付流程中，人类作为代码审核者的重要性。

AI更擅长的是把表面的事情做好，但是人类一旦没有提到的，或者是概念理解可以比较模糊的地方，仍然非常容易出错。

总结

这个项目的开发周期由于AI的参与，变得非常短，短到难以置信（甚至比我自己预估的时间还要短）。

有的时候我会想，是不是真的在这个阶段，开发者完全不值钱了。

但是我有各个行业的朋友。我也跟他们都聊过这些。小的工具，他们自己也都让AI帮他们开发。但是中大型项目是绝对不会的，不管从功能实现还是Token的消耗上，对他们来说都是承受不住的。

其实不管哪个行业，与AI强大的实施落地能力相比，人类的经验、直觉感知、规划和回归，在项目实践当中仍然是不可替代的能力。

我想，在下一次的AI讲座分享当中，我应该会把这个案例作为自己的感悟分享出去吧。