Shopify Builds

Shopify构建

使用上下文工程框架构建生产Shopify商店 克劳德代码 基元。

这是什么

这是一个 完整的人工智能辅助Shopify开发系统 基于Claude Code的原生原语构建：技能（斜线命令）、代理（专业人员）和MCP服务器配置。它的设计使任何使用Claude Code的开发人员都可以通过调用当前阶段的正确技能来构建生产Shopify商店——主题、无头店面、应用程序、结账自定义和完全自定义构建。

该系统分为三层：

1. 语义网 (SEMANTIC-WEB.md)--一个递归知识图，映射每个Shopify域、工具、资源和工作流。节点相互交叉引用，因此AI可以从任何概念遍历到任何相关概念。

1. 框架 (FRAMEWORK.md)——上下文工程架构。定义技能、代理、团队和MCP服务器的组成方式。包括工作流编排、不同构建类型的团队组成和社区资源集成策略。

1. Claude代码原语 (.claude/)--可执行系统：

- CLAUDE.md --始终加载包含平台规则、质量门和约束的项目上下文 - 12技能 --覆盖整个构建生命周期的Slash命令 - 6名代理人 --具有深厚Shopify领域知识的专业人员

为什么存在

Shopify的开发看似复杂。看起来“只是一个商店”涉及10多个不同的技术领域：

• 采用Online Store 2.0架构的液体模板
• GraphQL管理API，具有基于成本的费率限制和季度版本控制
• Hydrogen（React Router v7无头框架），支持RSC和边缘部署
• Shopify函数（WebAssembly，256KB/11M指令限制）
• 检查可扩展性（Preact，64KB捆绑包限制）
• 元字段/元对象数据建模
• 多市场国际化
• 跨7+扩展表面的应用程序开发
• 第三方集成（ERP、CRM、履行）

没有一个人能掌握所有这些。该框架对所有领域的知识、约束和模式进行编码，以便Claude Code可以在当前任务所需的任何领域担任知识渊博的专家。

技能（击杀命令）

代理人（专业工人）

设置

先决条件

• 克劳德代码 安装
• Shopify CLI 安装： npm install -g @shopify/cli@latest
• A. Shopify合作伙伴帐户 具有开发存储访问权限

1.克隆此Repo

git clone https://github.com/domocarroll/shopify-builds.git
cd shopify-builds

2.安装MCP服务器

# MUST HAVE: Shopify platform knowledge (docs, schemas, validation)
claude mcp add shopify-dev -- npx -y @shopify/dev-mcp@latest

# MUST HAVE for themes: Offline Liquid reference (198 docs, sub-ms search)
# See: https://github.com/florinel-chis/shopify-liquid-mcp
claude mcp add shopify-liquid -- node /path/to/shopify-liquid-mcp/index.js

# MUST HAVE for store operations: 70+ Admin API tools
claude mcp add shopify-admin -- npx -y @ajackus/shopify-mcp-server

3.开始建设

# Open Claude Code in the project
claude

# Start with client discovery
/shopify-discovery

# Or jump to a specific phase
/shopify-theme
/shopify-hydrogen
/shopify-app

构建类型

主题构建（最常见）

/shopify-discovery -> /shopify-architect -> /shopify-content -> /shopify-theme -> /shopify-audit -> /shopify-deploy -> /shopify-handoff

堆栈：液体+网上商店2.0+可选Vite 团队：领导+液体开发+内容开发+qa

无头构建

/shopify-discovery -> /shopify-architect -> /shopify-content -> /shopify-hydrogen -> /shopify-audit -> /shopify-deploy -> /shopify-handoff

堆栈：氢气+反应路由器v7+氧气 团队：领导+氢气开发+api开发+内容开发+qa

应用程序构建

/shopify-discovery -> /shopify-architect -> /shopify-app -> /shopify-checkout -> /shopify-audit -> /shopify-deploy -> /shopify-handoff

堆栈：React路由器+Shopify API+扩展 团队：领导+api开发+函数开发+qa

完全自定义构建

所有技能按顺序排列，团队包括所有专家。

引用的MCP服务器

项目状态和路线图

当前状态：v0.1--基金会

框架、语义网、技能和代理都是基于对Shopify 2025-2026平台的深入研究而构建的。这是知识脚手架。它有 尚未经过实战考验 在真实的客户端构建中。

接下来需要做什么

立即（在首次客户端构建之前）

• \[ \] 安装和配置MCP服务器 -- @shopify/dev-mcp 是最高优先级。测试所有三个必备的MCP是否端到端工作。
• \[ \] 建立测试开发库 --创建Shopify合作伙伴开发商店，以根据真实的Shopify API验证技能。
• \[ \] 在模拟客户简报上运行/购物发现 --验证面试流程，生成有用的需求文档。
• \[ \] 端到端运行/购物主题 --构建一个简单的主题部分来验证完整的技能->代理->MCP管道。

短期（前2-3个建筑期间）

• \[ \] 根据实际使用情况改进技能 --过于冗长、模糊或缺少步骤的技能在每次构建后都会更新。
• \[ \] 校准代理约束 --验证代理规则是否可以防止实际错误（而不仅仅是理论错误）。
• \[ \] 构建客户端项目模板 --标准化 clients/{name}/ 目录结构 .planning/ 文档。
• \[ \] 创建团队组成配置 --将4种团队类型（主题、无头、应用、完整）正式化为可重用的配置。
• \[ \] 添加Shopify CLI包装器技能 --自动化常见多步骤CLI工作流的技能（主题初始化+检查+开发，应用初始化+开发+部署）。

中期（5栋以上建筑后）

• \[ \] 提取可重用的节库 --经过测试的Liquid代码的常见部分（英雄、产品网格、推荐信、常见问题解答）。
• \[ \] 构建氢气启动器模板 --Opinionated氢气发酵剂，带有我们的烘焙图案。
• \[ \] 创建集成蓝图 --测试了常见集成模式（Klaviyo、ShipStation、NetSuite）。
• \[ \] 自动化季度更新周期 --检查Shopify API变更日志并在我们的技能/代理中标记需要更新的内容的脚本。
• \[ \] 性能基准测试套件 --Automated Lighthouse使用回归跟踪对构建进行运行。

长期（愿景）

• \[ \] 发布为Claude Code技能包 --使其他Shopify开发人员可以安装该框架。
• \[ \] AI购物代理模板 --利用Shopify的Storefront MCP和商店聊天代理，获得人工智能驱动的商务体验。
• \[ \] 多店铺编排 --管理多个Shopify商店（扩展商店、无头多品牌）的技能。
• \[ \] 上游贡献 --将模式反馈到Shopify的开发mcp和社区技能库。

跟踪社区资源

这些是我们确定用于评估和潜在整合的资源：

Claude代码技能和插件

• wookstar克劳德代码插件 --6 Shopify技能+GA/GTM
• shopify开发工具包claude插件 --16个代理，涵盖主题、应用程序、Polaris
• claudekit技能 --Shopify市场格式技能
• claude代码模板/shopify开发 --通过npx快速安装
• 反重力惊人的技能 --868+技能，包括Shopify

AI编码规则

• cursor.directory/rules/shopify --AI的流动最佳实践
• 光标.指令/规则/液体 --以流动性为重点的规则
• Horizon Theme.cursorules——Shopify官方编写的人工智能规则

参考仓库

• Shopify/黎明 --参考OS 2.0主题
• Shopify/骨架主题 --Vite的最小起动器
• Shopify/氢气演示店 --全功能氢气模板
• Shopify/商店聊天代理 --AI购物代理参考
• julionc/真棒shopify --规范资源列表

精彩列表

• 真棒shopify --Shopify开发资源
• 可怕的氢 --无头商业资源
• 很棒的claude代码工具包 --克劳德代码生态系统

上下文如何流动

User invokes /shopify-theme
  |
  +-- CLAUDE.md loads (always) --> Shopify constraints, quality gates
  |
  +-- Skill prompt loads -------> Theme workflow, steps, delegation patterns
  |
  +-- Skill spawns agent -------> shopify-liquid-dev with Liquid expertise
  |
  +-- Agent queries MCP --------> @shopify/dev-mcp for live API docs
  |                                shopify-liquid-mcp for Liquid reference
  |
  +-- Agent produces code ------> Validated against constraints at every layer
  |
  +-- QA agent verifies --------> Theme Check, Lighthouse, accessibility

每一层都添加了上下文。每一层都有约束。结果是代码与Shopify的实际平台相匹配，而不是模型“记忆”的内容

贡献

这目前是一个私人开发工作室工具。如果你有兴趣使用或贡献该框架，请打开一个问题。

许可证

麻省理工学院