用Claude Code，一键生成店铺页面，省80%设计时间

Claude Code 让你摆脱主题束缚，直接生成专属店铺设计

这跟卖家有什么关系？如果你一直在为Shopify主题的限制抓狂，想要快速出一套更贴合品牌调性的页面，却又不想请设计师或写代码，Claude Code（Anthropic Claude的代码生成插件）现在可以帮你“一键生成”自定义布局，让店铺颜值和品牌声调同步提升。

准备工作
- 拥有一个已上线的 Shopify 店铺（免费试用期或正式版均可）。
- 注册并登录 Anthropic（Claude）账号。
- 在 Anthropic 控制台开启 Claude Code 插件（免费额度约 5 k tokens，超出后每 1 k tokens 约 $0.02）。

定义品牌语气

在 Claude 对话框输入类似指令：

我是一家卖高端高尔夫配件的品牌，品牌语气是专业、轻奢、带点幽默。请把这段语气写成 3 条要点，后面我会让你基于这 3 条生成页面。

Claude 会返回要点，复制保存备用。

让 Claude 生成页面代码

在同一对话框继续输入：

请基于以下品牌要点，设计一个首页 Hero 区块，包括标题、副标题、CTA 按钮和背景图片占位。输出完整的 HTML + CSS，代码必须兼容 Shopify 的 Section 结构（Liquid）。

Claude 会返回类似：

{% schema %}
{
  "name": "Custom Hero",
  "settings": [...]
}
{% endschema %}

...

复制全部代码。

在 Shopify 主题中添加自定义 Section
- 进入 Shopify 后台 → Online Store → Themes → Actions → Edit code。
- 在 sections 文件夹中新建文件 custom-hero.liquid，粘贴 Claude 生成的代码。
- 保存后，在主题编辑器中添加该 Section 到首页或任意页面。
快速迭代
如果布局或文字不满意，直接在 Claude 对话框里把需求改成：“把标题改成‘让每一杆都更精准’，颜色调暗一点”，Claude 会返回更新后的代码，重复第 4 步替换即可。