Transcript
00:00:00设置 Shopify 商店变得前所未有的简单，因为现在你只需要将其与
00:00:04你使用的 AI 编码代理结合起来，让它们处理一切。但仅仅把 Claude code 连接到
00:00:09你的商店是不够的。为了最终得到一个看起来不像
00:00:14市面上其他通用 Shopify 商店那样的店铺，你需要将其与一些关键部分结合起来。
00:00:19到本视频结束时，你将掌握整套工作流程，能够用来搭建你自己的
00:00:23Shopify 端到端流水线，从而立即开始销售你的产品。
00:00:28在开始构建商店之前，你需要遵循几个步骤。首先
00:00:32你需要一个 Shopify 合作伙伴账户，所以去浏览器注册一个。合作伙伴
00:00:37账户很重要，因为它让你能够访问开发工具，从而可以在该平台上进行实验。
00:00:41它基本上是你商店的沙盒，你可以在这里按照正常方式构建应用，
00:00:46同时利用模拟支付和测试用户等开发工具，以便在应用上线前进行测试。
00:00:51之后，如果你觉得你的应用已经准备好开始
00:00:56销售了，只需要添加支付集成，就可以轻松地将开发账户迁移到
00:01:01商家账户，在那里你可以开始向真实用户销售真实产品。
00:01:05现在，一旦你在项目中创建了应用，就该安装 Shopify CLI 了。你可以通过
00:01:10从 CLI 文档中复制安装命令并在终端中运行来完成。运行之后，
00:01:15系统会提示你选择 React 应用或扩展应用。我们选择了 React 应用，因为
00:01:20这是我们最常开发的，并且通过这种方式定制应用更容易。之后，你可以选择
00:01:26要使用的语言，我们选择了 TypeScript，因为它相比 JavaScript 具有更好的类型安全性和安全性。
00:01:31设置完成后，系统将自动安装运行应用所需的所有依赖包。
00:01:37依赖安装完成后，项目就准备就绪了。运行项目时，你将
00:01:41你将看到一个基本的应用模板，可以从这里开始做进一步的修改。一旦 CLI
00:01:46安装完毕，还需要安装其他东西，首先是 Shopify AI 工具包，它
00:01:51增强了构建过程。其中最重要的部分是 MCP，安装此
00:01:56适用于所有 AI 编码代理的 MCP 的命令可以在文档中找到。由于我们使用的是 Claude code，我们复制了
00:02:03Claude 的命令并安装了 MCP，你可以对任何你选择的编码工具执行相同的操作。一旦 MCP
00:02:08安装完成，它就会将其工具暴露给 Claude，但仅有 MCP 是不够的，因为其中的所有工具
00:02:14基本上都是为了帮助 Claude 构建得更好。MCP 无法将更改推送到云端运行的
00:02:19商店中。它只包含关于 Shopify API 的文档和知识，以及其他验证。所以
00:02:25这个设置本身不足以进行构建。这就是为什么 CLI 很重要，因为它是
00:02:30连接 Shopify 应用和本地设置的桥梁。除了 MCP，你还需要
00:02:35安装插件。插件很重要，因为它捆绑了多个代理和技能。
00:02:40你可以通过运行安装命令来安装它。在运行安装命令后，
00:02:44运行重新加载插件的命令，所有的代理和技能就可以使用了。
00:02:49现在主要设置已经完成，但在真正开始构建之前，你需要准备项目
00:02:53本身。首先要设置的是 Claude.md 文件，它基本上是用于指导
00:02:59代理遵循你想要实践的文件。我们添加的 Claude.md 包含了我们一直谈论的所有最佳实践。
00:03:05我们有一个专门的完整视频，讲解了 Claude.md 文件的最佳实践，
00:03:10你可以在频道上查看。除了 Claude.md，你还需要落实其他一些
00:03:15事情。默认情况下，Claude 生成 SVG 并将其用作图像占位符。但
00:03:21这些 SVG 无法满足我们商店的视觉效果需求，所以我们创建了一个技能来弥补这一差距。我们创建了一个
00:03:26Gemini 图像生成技能，让安装了它的任何代理都能调用 Gemini CLI，并
00:03:32提示它为网站生成图像。该技能包含关于如何调用 Gemini CLI
00:03:38以及将生成的图像保存在哪里的说明。而且因为 Gemini CLI 集成了图像生成功能，
00:03:44所以不需要单独的 API 密钥，你可以直接依靠 Gemini CLI
00:03:50身份验证来使用此技能。除了图像生成，我们还为了方便自己构建了另一个技能。原型
00:03:55技能的工作方式是，每当你要求代理进行设计更改时，它首先会创建一个 HTML 文件，
00:04:01你可以预览它，一旦预览完毕，它就会将该更改应用到应用的设计中。该
00:04:05skill.md 文件包含有关整个工作流程的详细信息，分为两个阶段。一旦这些技能
00:04:11就位，还有一些钩子（hooks），你需要将其配置并连接到 .claud
00:04:17文件夹内的 settings.json 中。这些钩子基本上充当了 Claude 的护栏。例如，预工具使用脚本可以
00:04:22在 Claude 未经你批准直接将更改推送到应用之前阻止它。你可以根据需要配置任意数量的
00:04:28钩子。所以有了这个设置，我们就准备好真正构建应用了。但在继续之前，
00:04:33让我们听听我们的赞助商 Willow Voice 的消息。如果你一天大部分时间都在打字写邮件、
00:04:37Slack 消息、文档和提示词，那你工作得比你需要的时间慢得多。Willow Voice 让你
00:04:42可以在电脑的任何地方说话而不是打字，文本会立即出现。它不像
00:04:47你的内置听写功能那样每隔一个字就出错。Willow 的准确率高出三倍，而且
00:04:52它实际上以正确的段落和结构格式化所有内容。最棒的部分是它会适应你的
00:04:57行为：写邮件时正式，用 Slack 时随意，写代码时专业。
00:05:02它会随着时间的推移学习你的写作方式，因此输出听起来像你，而不是机器人。超过 10 万名专业人士
00:05:07每天都在使用它，并且它通过了 SOC2 认证和 HIPAA 合规性，且零数据留存，所以你的文字
00:05:13保持私密。我过去一周一直在使用它，现在再回到打字感觉慢得令人痛苦。
00:05:18使用说明中的链接免费下载 Willow Voice。现在，一旦这些就位，你就可以
00:05:23只需提示 Claude 你想构建什么。你需要描述你想要的落地页，
00:05:27就像我们提到我们要落地的风格一样。因为我们
00:05:31配置了技能，它首先加载了原型技能。所以，它没有直接在
00:05:36实际应用上进行更改，而是编写了 HTML 代码来最终确定设计，然后等待我们的批准。
00:05:41它还在新标签页中打开了设计，以便我们可以预览。它构建的第一个版本
00:05:46看起来很干净，视觉效果也不错，但在落地页上使用占位符部分的地方，
00:05:51本应有图像。既然我们安装了图像生成技能，它应该直接加载
00:05:55那个技能并首先使用图像生成。所以我们再次提示它使用图像
00:06:00生成技能，并为那些占位符部分实际生成图像。在我们给出该提示后，
00:06:05它通过 bash 工具启动了多个 Gemini CLI，并在 YOLO 模式下打开它们，这样 Gemini CLI
00:06:12就不会被任何权限提示所阻止。Claude 启动了多个终端，所有这些终端
00:06:17都开始并行生成图像。图像生成需要较长时间，所以你必须等待它
00:06:22完成。图像准备好后，你就可以查看网站，它看起来会更加精致。而且
00:06:27由于图像生成提示也由 Claude 控制，因此图像与 UI 风格非常匹配。
00:06:33现在加上了视觉效果，网站就完成了。此时你可以对设计进行迭代。
00:06:38因为我们没有其他需要做的更改，我们让 Claude 继续并在商店中实现该应用。
00:06:43它会问你一些关于你想如何实现该应用的问题，比如是否
00:06:48你想让它与在线商店同步，我们做到了，所以我们选择了该选项。一旦你回答了它的
00:06:53问题，它就开始将 HTML 设计转换为应用本身，不是直接转换到主应用，
00:06:58而是转换到我们创建的开发应用。它一对一地模仿了设计，你可以亲自预览
00:07:03该应用，看看它是否完全模仿了设计。现在，我们在实现它之前使用了 HTML
00:07:08预览是一件好事，因为这个过程花费大量时间。如果你
00:07:13在这个过程中迭代设计，那将会浪费很多时间和代币。HTML
00:07:18原型设计更快，迭代更容易。另外，如果你喜欢我们的内容，请考虑
00:07:23按下点赞按钮，因为这有助于我们创作更多类似的内容并触达更多人。
00:07:28到目前为止，该应用已与实际的商店 URL 同步。你刚刚构建的设计是在本地
00:07:34服务器上进行本地机器预览的，并且它也存在于主题预览中，这就是它
00:07:39基本上将主题运送到开发应用的地方，所以我们可以实时预览它。这不是最终版本，
00:07:44这只是草稿。所以我们只是告诉它同步实时版本，它使用了 Shopify CLI 和 MCP
00:07:50工具将设计同步到配置用于 Shopify 商店的主 URL。在此之后，
00:07:55Claude 将在你的应用上实时更新设计。现在，同样地，你可以要求它更新
00:08:00你网站上的所有其他页面，它将遵循相同的过程。它将首先对部分进行原型设计，
00:08:05然后更新它们到实际应用中，并将其同步到托管商店。但还有一些事情
00:08:10你仍然需要对你的商店做，才能使其准备就绪。此时，你将无法添加
00:08:14产品，因为更新产品并使其实施准备就绪需要 Shopify 管理
00:08:20API。没有管理 API 这是无法完成的，因为这是赋予你访问
00:08:25商店的主要部分（如关于页面、产品和其他管理功能）权限的地方。到目前为止，我们只是
00:08:30对主题进行更改，并将该主题应用到商店本身以实现视觉效果。为了连接
00:08:35管理 API，你需要使用 Shopify CLI 使用商店对其进行身份验证。一旦你输入带有
00:08:41你的授权链接的身份验证命令，它将打开浏览器，你可以从中进行身份验证。之后，
00:08:46你将能够创建与商店相关的页面，并且它将使用 Shopify MCP 和 CLI 工具
00:08:52一起来更新页面的其他部分。现在，你可以告诉它添加其他产品到
00:08:56你的商店，这样你就可以开始销售了。但是为了添加产品，你需要配置
00:09:01Shopify 商店的权限，以便它可以通过管理 API 访问这些工具。添加产品需要更多
00:09:06权限，超过了我们之前给出的权限。我们之前只添加了写入内容的权限，但为了添加
00:09:11产品，我们需要额外的权限，如编写产品以及阅读和编写出版物。
00:09:16所以，你需要再次运行 auth 命令，但要增加权限。一旦完成，
00:09:20你就可以要求 Claude 将产品添加到你的网站。一旦它完成，你就可以查看应用并看到
00:09:25产品列在那里，商店也准备好了产品详情和购物车功能，
00:09:30也可以在管理面板中检查产品。但是无论谁访问你的商店，此时仍然无法
00:09:35进行购买。为了让商店真正准备好销售产品，你需要添加支付
00:09:40详细信息以便可以处理支付。你还需要选择一个计划，因为除非这样做，
00:09:45否则无论谁访问你的商店都需要输入密码才能查看，这显然是不可行的。所以，
00:09:51一旦你选择了计划，你就可以开始销售你的产品了。现在，整个设置
00:09:55指南和此处创建的所有技能都可以在 AI Labs Pro 中找到，用于本视频以及我们之前的所有
00:10:02视频，你可以从那里下载并将其用于你自己的项目。如果你发现了我们工作的价值
00:10:07并想支持该频道，这是最好的方式。链接在说明中。
00:10:11本视频到此结束。如果你想支持该频道并帮助我们继续制作
00:10:16像这样的视频，可以通过使用下方的超级感谢按钮来做到。一如既往，
00:10:20感谢观看，我们下期再见。
Community Posts
No posts yet. Be the first to write about this video!
Write about this video