使用说明
Shopify构建
使用上下文工程框架构建生产Shopify商店 克劳德代码 基元。
这是什么
这是一个 完整的人工智能辅助Shopify开发系统 基于Claude Code的原生原语构建：技能（斜线命令）、代理（专业人员）和MCP服务器配置。它的设计使任何使用Claude Code的开发人员都可以通过调用当前阶段的正确技能来构建生产Shopify商店——主题、无头店面、应用程序、结账自定义和完全自定义构建。
该系统分为三层：
-
语义网 (
SEMANTIC-WEB.md)--一个递归知识图，映射每个Shopify域、工具、资源和工作流。节点相互交叉引用，因此AI可以从任何概念遍历到任何相关概念。 -
框架 (
FRAMEWORK.md)——上下文工程架构。定义技能、代理、团队和MCP服务器的组成方式。包括工作流编排、不同构建类型的团队组成和社区资源集成策略。 -
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-discovery |
客户需求收集访谈 | 发现 |
/shopify-architect |
架构决策（主题vs无头vs应用程序） | 设计 |
/shopify-theme |
Liquid主题开发工作流程 | 构建 |
/shopify-hydrogen |
无头店面开发 | 建造 |
/shopify-app |
嵌入式应用程序开发 | 构建 |
/shopify-checkout |
结账定制（功能+UI扩展） | 构建 |
/shopify-content |
内容建模（图元字段、图元对象） | 构建 |
/shopify-i18n |
国际化（市场、货币、翻译） | 构建 |
/shopify-integrate |
第三方集成（ERP、CRM、3PL） | 构建 |
/shopify-deploy |
部署和CI/CD | 发货 |
/shopify-audit |
质量审核（主题检查、灯塔、a11y） | 验证 |
/shopify-handoff |
客户文件和培训材料 | 交付 |
代理人（专业工人）
| 代理 | 模型 | 专业化 |
|---|---|---|
shopify-liquid-dev |
Sonnet | Liquid，OS 2.0部分/块，模式设计 |
shopify-hydrogen-dev |
Sonnet | React路由器v7，RSC，店面API，氧气 |
shopify-api-dev |
Sonnet | GraphQL管理API、OAuth、App Bridge、webhooks |
shopify-functions-dev |
Sonnet | Wasm功能、结账UI、结账品牌 |
shopify-content-dev |
俳句 | 元域、元对象、分类学、翻译 |
shopify-qa |
Sonnet | 主题检查、灯塔、可访问性、安全性 |
设置
先决条件
- 克劳德代码 安装
- 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服务器
| 服务器 | 用途 | 必填 |
|---|---|---|
| @shopify/dev mcp | Shopify文档、API架构、GraphQL内省、Polaris、验证 | 是 |
| shopify液体mcp | 198液态文档，离线，亚毫秒搜索 | 是（主题） |
| @ajackus/shopify mcp服务器 | 70+管理API工具 | 是（存储操作） |
| 阿波罗mcp服务器 | 通用GraphQL自检 | 可选 |
| ShopifyMockMCP | 用于安全测试的mock.shop代理 | 可选 |
| Shopify 商店 MCP | AI购物代理集成 | 如果建筑代理 |
| Shopify目录MCP | 跨商家产品发现 | 如果建立发现 |
项目状态和路线图
当前状态：v0.1--基金会
框架、语义网、技能和代理都是基于对Shopify 2025-2026平台的深入研究而构建的。这是知识脚手架。它有 尚未经过实战考验 在真实的客户端构建中。
接下来需要做什么
立即（在首次客户端构建之前）
- [ ] 安装和配置MCP服务器 --
@shopify/dev-mcp是最高优先级。测试所有三个必备的MCP是否端到端工作。 - [ ] 评估社区合并技能 -- wookstar克劳德代码插件 （6项Shopify技能）， shopify开发工具包claude插件 （16名代理人），以及 地平线主题cursorules 可能有值得整合的模式。
- [ ] 建立测试开发库 --创建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的实际平台相匹配，而不是模型“记忆”的内容
贡献
这目前是一个私人开发工作室工具。如果你有兴趣使用或贡献该框架，请打开一个问题。
许可证
麻省理工学院
