从3D汉堡到定制周边：用 AI 搭建商店

面包被掀起。酸黄瓜露出。再加一片芝士，汉堡就在你眼前变化，收据也随之更新。另一处，买家把一幅插画拖到连帽衫上，向上移动一点，然后把商品转一圈看看效果。在那次简单的交互背后，卖家已经决定了图案能放在哪里、能有多大。这是两种截然不同的购物体验，但它们有一个共同点：商店可以围绕你销售的商品来设计，甚至把顾客的选择方式也考虑进来。我们把这两种起点都放在了 Modern Shop collection on GitHub：一个 3D 快餐店面（Jelly Bites），和一个定制商品的产品设计器（Mockup Studio）。源代码在 MIT 许可下可用，你可以查看、改造并在此基础上开发。带上你的想法、品牌，以及像 Codex 或 Claude Code 这样的 AI 编码工具。已经有了一个有趣的出发点可以利用。

Jelly Bites：让顾客自己拼午餐

先打开 Jelly Bites 在线演示。选择一个汉堡，拖拽旋转它，尝试更换某种配料。食物会有柔和的晃动反馈。高亮某一层，堆叠就会打开，让你看见内部构成。这看起来很有趣，但交互背后有实用的目的。顾客能看见自己正在做的选择。酸黄瓜、酱料、芝士和配料不再是需要想象的一串选项，而是订单里可见的组成部分。披萨构建器把同样的思路往另一个方向拓展：选择大小、饼底、酱料和配料，然后看披萨生成。实时收据让这些决定的后果一目了然。演示还展示了配送或自取、优惠码、结账以及订单跟踪界面。这里有一个在顾客改变主意时很重要的小细节：构建舞台上的商品在顾客正式选择“加入购物车”之前都只是草稿。购物车中的商品可以被取回到 3D 构建器中继续编辑。这类交互是餐厅可以据此定制的体验。3D 快餐店面源码 使用 Vue、TypeScript 和 Three.js 构建。你并不需要熟悉这些名字就能试用演示；但对开发者或编码代理来说，这些技术栈表明这是一个可在浏览器中检视与扩展的熟悉项目。食物的形状在代码中生成，为你修改外观和行为提供了明确的起点。一家本地汉堡店可以把菜单改成自家的配方和包装；一家披萨品牌可以把招牌组合放在首位。你可以更改配色、语言、文案、配料选项和点餐流程以符合你的业务。示例中已经包含了英文和波斯文布局。在将其用于真实订单之前，有一点需要理解：当前演示使用示例目录数据、保存在浏览器中的订单，以及模拟的结账与跟踪流程。与 Selldone 的连接尚需实现。这里展示的是可探索的视觉体验；最终的目录与价格服务端校验、支付与履单需要真实的电商集成。3D 体验需要支持 WebGL 2 的浏览器，因此请在顾客常用的手机与浏览器上测试适配效果。

Mockup Studio：卖家与顾客不同的体验

定制 T 恤商店面临不同的问题。顾客希望有足够的自由去尝试创意，而印刷方需要一个符合实际印刷区域的设计文件。Mockup Studio 同时兼顾了这两方面。在 在线产品设计器演示 中，你会看到两个清晰区分的模式：一个用于店铺管理员（seller 模式），另一个用于购物者（shopper 模式）。

卖家只需一次性设定规则

在模板构建器中，卖家选择产品、添加产品视图并定义可印刷区域。这些尺寸以毫米为单位存储，并提供分辨率与出血（trim 边缘外的额外图稿）设置。卖家随后决定顾客可以更改的内容：例如移动、缩放或旋转图案。胸前打印可以有自己的边界，而袖子则使用另一套区域。模板在移交给宿主应用之前，能从顾客视角进行测试。这种分离使得该概念超越单一 T 恤的场景。示例画廊包括 T 恤、连帽衫、毛衣、帽子、马克杯、抱枕和吊牌。准备好的 3D 资产也可在支持的模型格式中使用。若是不同的产品形状，需要准备相应的模型及其印刷区域映射。该工作室还可以从配置的 3D 模型生成初始产品照片，为卖家在开发产品体验时准备编辑器视图提供另一种方式。

顾客有足够的空间去玩创意

购物者的编辑器更聚焦。上传图片、放置位置、调整大小，并在商品上预览。卖家的规则会在后台生效，而顾客可以自由尝试创意。有基于照片的 2D 视图和可选的可旋转 3D 视图。对图案的更改会实时反映在模型上。在支持的软性产品上，拉伸工具甚至可以让你提拉织物并观看其回落。这是预览效果；不会拉伸最终发送印刷的图稿。项目中有一条清晰的分工：一端展示给顾客看商品可能的样子；另一端输出一个透明 PNG 用于印刷表面，使用已配置的物理尺寸与分辨率。印刷质量指示器有助于说明源图像像素与所选尺寸之间的关系。在实际的生产工作流中，印刷方仍需批准尺寸、颜色与文件要求。当前导出为浏览器渲染的 RGB PNG，未包含针对印刷厂的 CMYK 或颜色配置文件转换。生成的产品形状更像插画，而非对你可能销售的每件服饰的精确测量复制品。演示也将模板和设计保存在本地。将它们保存到商家账户、把精确设计附加到订单、收款并将任务发送到生产，这些都是成品商店需要做的整合步骤。文本/字体工具、产品变体以及在 3D 表面上直接拖拽图稿等功能仍在项目路线图中。

有一个起点会改变与 AI 的对话

“帮我搭一个商店”会让 AI 助手猜很多东西。而“把这个产品编辑器用上我们的品牌，并使客户流适用于我们的印厂/餐厅”则给出具体的方向。这就是我们分享源码的原因。你可以看到交互、亲自试用并指出想修改的部分。截图成为讨论的依据，演示成为可工作的参考，代码为你的开发者或 AI 编码代理提供了开始的地方。使用 ChatGPT 规划业务：谁是买家？哪些选项重要？顾客在哪些环节犹豫？哪些信息需要传达到厨房或印厂？然后把这些需求带到 Codex、Claude Code 或其他能检视与编辑项目的 AI 开发环境中。AI 工具能帮助改编组件、修改设计、连接服务、编写测试并解释不熟悉的代码。但良好结果仍依赖于明确的需求说明与亲自检验体验。给助理一步一步明确的里程碑，并要求演示可运行的结果。

Selldone MCP 在何处发挥作用

商店的前端是顾客触达的部分。其背后是商品、库存、支付、物流和需要履行的订单。Selldone MCP 为被授权的 Selldone 店铺提供结构化访问，连接的 AI 助手可以据此处理店内目录、内容和支持的配置，而不是去猜测演示数据以外的信息。访问权限在你选择的商店和权限范围内运行。部署后的店面仍需要自己实现 Selldone API 或服务集成。MCP 帮助助理做开发与获批的店铺操作；它不会自动把演示里的结账按钮变成真实的支付流程。对 Jelly Bites 来说，这意味着要把菜单和订单流程连接到真实的电商服务。对 Mockup Studio 来说，则意味着可靠地存储卖家的模板与顾客选定的设计，并把该设计与正确的商品和订单一起保留。面对顾客的独特体验可以保留，而 Selldone 则提供电商的底层支持。在此基础上有多种构建方式可选。完整店面可以通过 Selldone Layout 工作流进行定制，而更专业的自定义应用则可以使用独立前端。Selldone Genesis 概览 解释了这些路径。最佳选择取决于你想保留多少现有店铺功能以及顾客旅程需要多么独特。

给你的 AI 一个更好的首份需求说明

你可以在编码环境中从下面的请求开始。将方括号内的部分替换为你自己的业务细节。

Inspect the two projects at https://github.com/Modern-Shop and recommend the better starting point for [my business]. Read its documentation, then clone the chosen project into a new folder. Show which features work today and which need integration. Adapt the customer journey to [my brand, products, and requirements], keeping it usable on mobile.

一旦你选定方向，请求下一步里程碑：

Connect the intended Selldone shop through MCP with the permissions this task needs. Plan and implement the real catalog, design-storage where relevant, cart, checkout, and order integration using supported Selldone services. Replace demo assumptions with actual shop data. Test the complete flow and show a preview for review before deployment.

这些提示只是构建对话的开始。一个优秀的代理会检视项目、识别缺失部分并与你逐步完成它们。对于第一个餐厅里程碑，你可以要求完成一次完整订单：自定义一个商品、看到正确价格、通过支持的测试支付流程付款，并验证商家收到了订单。对于印刷店，请跟踪一次设计从上传、预览到被精确保存并附加到订单的全过程。这也是为何自定义店面可能更划算：现成的交互代码和电商平台能减少你从零开始构建的工作量。最终成本仍取决于设计、集成、素材、托管与测试等业务需求。MIT 许可证使示例源码可重用；但这些服务并非免费提供。

自己动手构建，或把想法交给我们的团队

我们会继续完善 Modern Shop 示例并扩展集合。你可以从现有版本开始、改造整个体验，或借用其中解决你特定问题的部分。如果你希望由专家根据你的品牌来塑造结果，可以 向 Selldone 官方的店铺设置与设计团队申请定制店面报价。带上你喜欢的演示、你的商品，以及希望顾客获得的体验。我们可在项目开始前与你一起制定设计与实现的范围。也许你的店面从一个屏幕上会拆开的汉堡开始；也许从杯子上的一处小插画开始。打开演示，改动某处，看看哪个想法更适合你的生意。在 GitHub 上探索 Modern Shop · 试试 3D 食物构建器 · 试试 Mockup Studio