Claude Code 改造电商站的操作与复盘

我的 WooCommerce 商店看起来还停留在 2019 年：深色页头、没人记得是谁选的配色、主题里没清理干净的演示内容，还有一个默认先展示最新商品、而不是畅销商品的商店页面。

我大致知道，请 WordPress 设计师来解决这些问题要花多少钱：至少 $2,500，还要来回沟通几周。

于是我换了个办法。我在终端里打开 Claude Code（Opus 5.5），连接 Claude-in-Chrome 扩展，让它通过我已经登录的浏览器操作线上网站。我没有预发布站点。所有操作都直接在生产环境进行，每次只执行一项经过我批准的修改。

两周后，它完成了 108 项修改，每一项都记录了日志，也写明了如何撤销。我自己总共投入了大约 10 小时，主要是在看它的提案，然后决定同意还是不同意。新增支出：$0。我本来就付费使用 Claude 来写代码；如果你也靠开发谋生，大概也已经在用 Claude Code 或类似工具。

这篇文章会一步步介绍整个工作流程，并提供可以直接复制的 prompt，让你也能用同样的方法改造自己的 WordPress 或 WooCommerce 网站。我还会讲到过程中出现的四个问题，以及下次我会怎样改进。

你需要在终端中安装 Claude Code，并订阅包含它的套餐。

在已经登录 WordPress 的 Chrome 用户配置中安装 Claude-in-Chrome 扩展。启动 Claude Code 时使用 claude --chrome，或者在会话中输入 /chrome 来连接。

你需要拥有 WordPress 网站的管理员账号，并且已经在这个 Chrome 用户配置中登录。Claude 通过你的登录会话操作，所以不需要把密码粘贴到聊天里。

安装 Code Snippets 插件，免费。小范围的 PHP 修改放在这里，保存成有名字的 snippet，点一下就能停用，不必直接修改 functions.php。

在电脑上为这个项目准备一个空文件夹。Claude 会把笔记、备份、脚本和变更日志保存在这里。

开始前，通过主机服务商或备份插件给网站做一次完整备份。如果主题提供了导出按钮，也把主题选项导出一份。

不需要预发布服务器，不需要 FTP，也不需要购买新插件。

如何适配你的网站

如果是博客或内容网站，没有商店，跳过第 5、6、8 步。

如果用的是 Elementor、Divi 或其他页面构建器，流程相同。告诉 Claude 使用该构建器自带的 widget 来搭建页面。

如果还没有热力图工具，提前一到两周安装 Microsoft Clarity，免费，这样第 7 步就有数据可看。

第 0 步：先写清楚基本规则

这一步让后面的操作有了安全保障。在 Claude 动手之前，我先给它定好规则，并要求它保存到记忆中，确保不同会话之间也能保留。

We're redesigning my live WordPress + WooCommerce site at <your URL>.
There is no staging site, so these rules apply to every change:

1. Never change anything without showing me the plan first and getting a yes.
2. Before each change, save a backup of the exact old value (to a local
   file or a custom field on the post).
3. After each change, reload the page logged out and confirm it worked.
4. Log every change in notes/changelog.md: what, where, and how to undo it.
5. Build pages with my theme's own builder elements, not custom HTML,
   so I can still edit them myself later.
6. Work in small phases. Never batch-edit many products in one go
   without testing on one first.

Save these rules to memory.

第 5 条是为项目结束后的维护考虑的。用自定义 HTML 做出来的页面看起来很漂亮，可一旦你想改个标题，就得打开代码。用主题自带元素搭建的页面，定制感可能稍弱一点，但你自己就能维护。

第 1 步：全面审查，先不修改

Audit my whole site. Use the browser to visit the homepage, shop,
3 product pages, cart, checkout, the docs or blog, and 404s from the
sitemap. Check:
- broken links and broken images
- typos and broken characters
- SEO basics: titles, meta descriptions, alt text, H1s
- page speed and what's slowing it down
- anything that looks broken or outdated
- leftover demo content from the theme

Don't change anything. Write the findings to notes/01-audit.md,
sorted by how much they hurt sales or trust.

一个运营了几年的网站，大概率会查出这些问题：

主题演示内容的残留：演示 logo、结账页里的示例电话号码、页脚或弹窗里的占位文字。我的网站有 200 多个文档页面，都在显示一个加载失败的演示 logo。

数据库或主机迁移后变成“?”的 Emoji，出现在标题、商品描述，甚至按钮文案中。

旧文章和文档中的 404 链接，指向已经删除或改名的页面。

没有页面缓存，服务器响应缓慢。

有流量的页面却没有 meta description。

这些问题都不难发现。只是我们大多数人从来没有坐下来认真检查过。

第 2 步：把审查结果拆成几个阶段

Turn the audit into a phased plan. Phase 1: safe fixes (typos, broken
links, demo leftovers). Phase 2: global design (logo, header, fonts,
colours, footer). Phase 3: key pages. Phase 4: shop and checkout.
For each item, say what changes, where, and the risk. Save it to
notes/04-phased-plan.md.

分阶段做，可以缩短每次审阅的时间。先从低风险修改入手，在大改动之前，熟悉“批准、检查、记录”的操作流程。

第 3 步：全局设计（logo、页头、字体、页脚）

Propose a new look: a simple text logo + favicon, a white header,
two Google fonts (one for headings, one for body), and a colour
palette with one main colour. Show me a before/after screenshot of
a product page and a doc page before applying anything. Then apply
it through the theme's global options, one group at a time.

Claude 写了一个小脚本，用 SVG 绘制 logo，再导出各种尺寸的 PNG 和 favicon。它上传这些文件，在主题选项中设置好，然后修改页头、字体、颜色和页脚。

每组设置都把旧值和新值并排记下来，所以任何一项都能在一分钟内恢复。

在使用页面构建器的主题里，调色板中的一个颜色经常控制着全站所有边框和分隔线。你为了一个地方改了它，整个网站的线条都跟着变色。修改全局颜色之前，先让 Claude 列出所有使用这个颜色的选项。

第 4 步：重建关键页面，先做成草稿

Build a new homepage as a DRAFT page, not public. Use only the
theme's builder elements. Sections: hero with one clear action,
best-selling products, proof (real numbers + real reviews), latest
videos, FAQ, closing call to action. Use only facts from my site.
Send me the preview link. Don't switch the front page until I say so.

先做草稿的习惯，能避免线上页面处于半成品状态。等我批准后，Claude 才切换首页设置，同时保留旧首页的已发布状态。这样想回滚，只需要改一个下拉选项。

接下来值得做的两个页面：

用真实评价做一个评价页面。如果你在交易平台上卖商品，或者有 Google、Trustpilot 评价，就让 Claude 阅读这些评价，逐字摘录其中最好的内容，并注明评价者姓名和对应商品。真实引用比你自己写的任何推荐语都更有说服力。

访客实际进入网站的那个页面。它往往不是首页。第 7 步会介绍怎么找到它。

第 5 步：用同一套模板生成商品图片

Create a consistent product image for every product: 1200×1200, same
layout, product icon, one short benefit line. Write it as a script so
I can change the design once and rebuild all of them. Show me 3
samples first. Then upload them, set alt text = product name, and set
each as the featured image AND as the image of every variation.
Save a backup of the old image IDs first.

“同时设置每个 variation 的图片”这句话，能避免 WooCommerce 中一个常见问题。对于有 variation 的商品，每个 variation 都可能单独保存着旧图片，而它会覆盖商品页上新设置的特色图片。完成后，让 Claude 在退出登录的状态下检查商店，确认展示的只有新图片。

因为图片是脚本生成的，之后改设计只需几分钟：删掉一行文字、加一个标签、重新生成，再上传。

第 6 步：修整商店页面，收入就从这里来

Review /shop/ for conversion problems. Check sort order against real
sales data, products per page, how prices are shown, buttons, badges,
filters, and anything covering the content. Compare what the shop
shows first with what actually sells. Don't change anything; list
the findings with the fix for each.

在把商店切换为“畅销商品优先”之前，Claude 将销量计数与 WooCommerce Analytics 对照，发现三个计数出了问题。其中两个商品各自显示卖出了 9,223,372,036,854,775,807 件。这是 64 位整数能容纳的最大值，这两个商品会霸占所有按热度排序的列表顶部。按销量排序之前，先检查计数是否正确。

通常可以让它处理这些商店问题：

按真实热度排序。如果商品数量不到 30 个左右，就在一页里全部展示，避免畅销商品藏在第 2 页。

在商品网格上方放分类筛选标签，分类方式要符合买家的思考习惯。

在价格下方显示“已售”数量，但只有超过一个看起来可信的门槛才展示。

展示真实优惠幅度，比如“Save 15%”，而不是泛泛的“Sale!”标签；价格显示为“From $49”，而不是一个价格区间。

找出那些被你遗忘的隐藏商品。商品组合包经常属于这一类。

购物车中的交叉销售推荐放在合计金额下方，避免把“Proceed to checkout”按钮挤出屏幕。

让它把每一项修改都做成独立命名的 snippet，方便单独停用。

第 7 步：让它和你一起读热力图

如果你使用 Microsoft Clarity、Hotjar 或类似工具，可以让 Claude 在浏览器里读取数据。

Open my Clarity dashboard for the last 30 days. Report the top entry
pages, dead clicks, rage clicks, popup clicks, JavaScript errors and
the performance score. Then open heatmaps for the top 5 entry pages
and the shop. For each page: what visitors try to do, and what stops
them. Also pull last 30 days of orders and revenue from WooCommerce
as a baseline. Don't change anything.

重点留意这些现象：

流量最高的着陆页。检查它有没有发挥应有的作用。我的最高流量着陆页是一个多年没动过的页面，访问量比首页还高，但上面几乎没什么内容。

弹窗占用了大量点击。在我的商店里，大约三分之一的点击都是用户在关闭弹窗。我当天就关掉了折扣弹窗。

有搜索排名、但看起来像坏掉了的归档页和标签页。Google 会把用户送到这些页面，可平时没人检查它们。

用户以为是链接的文字，却点了没有反应。

修改任何内容之前，记下过去 30 天的订单量和收入，这样才能判断哪些修改有效。

第 8 步：结账流程，以及需要你亲自操作的部分

Walk through the purchase flow as a customer: product page, add to
cart, cart, checkout. Don't place an order. Count the steps and the
required fields, and flag anything that slows down a buyer of a
digital product.

数清楚步骤和必填字段。很多主题把结账流程拆成多个标签页，而数字商品通常不需要街道地址或电话号码。我的网站用了多步结账，解决方法只是改一个主题设置，这一步我自己操作。有些修改涉及支付，我更愿意亲自点击。让 Claude 找出问题，并准确告诉你该修改哪个设置。

Fix the SEO basics found in the audit: missing meta descriptions on
key pages, missing alt text on product images, broken internal links,
and typos. Use my SEO plugin's fields. Back up each old value. Verify
on the logged-out page source.

大多是些没什么趣味的工作，也正是设计师按小时收费、而你总抽不出时间处理的那类事。

108 项修改中出现了四次状况。每一次都在当天解决，也都变成了一条新规则。

1. 它用渲染后的 HTML 覆盖了商品描述。通过某个 API endpoint 读取商品，返回的是页面展示出来的内容，而不是可编辑的构建器内容。Claude 把这些内容写了回去，导致一个商品的描述在几分钟里变成了静态 HTML。它自己的检查发现了问题：保存后的内容长度与计划不符，随后从备份恢复。新规则：始终读取和写入原始内容。

2. 保存 widget 列表时打乱了页脚。提交完整的“inactive widgets”列表，导致 WordPress 重新分配 widget，页脚在几分钟里显示了错误的 widget。新规则：每次只给一个目标区域分配 widget。

3. 我自己删掉了正在使用的图片。清理媒体库时，我删除了一些仍在使用的图片。因为图片脚本和商品 ID 对照表都保存在本地，Claude 当天就重新上传并分配好了图片。

4. Claude 修改后，我又在构建器里编辑了页面。当我用可视化构建器编辑首页时，它会连同所有默认设置重新保存每个元素，导致 Claude 的本地副本不再与线上一致。新规则：Claude 编辑前必须读取线上页面，不能使用自己保存的旧副本。

哪些事情需要单独规划

页面缓存。如果商店会根据国家或客户显示不同价格，全页面缓存就需要认真规划，不能当成一个随手修复的小问题。

社交分享图片，也就是 OG images。值得单独处理一轮。

内容层面的修正，比如一个页面出现两个 H1 标题。Claude 可以把这些问题列出来；有些自己动手改更快。

支付设置。自己修改。

优秀的设计师能带来审美和判断，而这次每一个设计决定仍然是我自己做的。Claude 带来的是耐心。在这 108 项修改中的每一项开始前，它都记下了旧值。

下次我仍然会遵守的规则

1. 先定规则，再动手。第一天就写好基本规则，让 Claude 保存到记忆中。

2. 先审查，再规划，最后修改。前两个 prompt 只允许读取。这样才能按正确顺序解决真正该解决的问题。

3. 页面先做草稿，批量修改先拿一个商品测试。第一次尝试绝不能直接上到线上。

4. 先看数据，再做设计。错误的销量计数和被我忽视的最高流量着陆页，都藏在我自己的数据里。光做视觉改版发现不了这些问题。

5. 遵守撤销规则。下面展开说。

如果 Claude 说不清楚一项修改该如何撤销，就不能执行这项修改。

我的变更日志每条都有三个部分：改了什么、改在哪里、如何撤销。有些撤销步骤是“恢复上一个修订版本”，有些是“停用这个 snippet”，还有些是“把这个选项改回原来的十六进制颜色值”。

商品描述出问题时，没有人需要再去回忆旧内容是什么。备份就在商品的自定义字段里，是编辑前几秒保存的。我删掉正在使用的图片时，图片与商品的对应关系也保存在本地文件中。

在线上网站修改前，先问三个问题

准确的旧值是什么，保存在什么地方？

怎样在退出登录的状态下检查修改是否生效？

如果改错了，需要点击几次才能撤销？

如果第三个问题的答案是“很多次”，就先把它做成草稿或 snippet。

按风险给修改分类

可以快速批准

错别字、失效链接、alt text、meta description。每项对应一个修订版本，很容易恢复。

看过预览再批准

新页面，先做成草稿；全局颜色和字体；商店布局 snippet。

自己操作，或者密切关注

结账和支付设置、跨多个商品的批量修改，以及任何删除操作。

这周只做第 0 步和第 1 步，其他先不动。审查不会修改网站上的任何内容，只需要花你一小时，就能得到一份问题清单。你可以把它交给 Claude、设计师，也可以留给某个周六有空的自己。

如果还想采取进一步行动，可以考虑屏蔽此人，或者举报滥用行为。