De Hambúrgueres 3D a Merch Personalizado: Construa uma Loja com IA

O pão se eleva. Os picles aparecem. Adicione mais uma fatia de queijo e o hambúrguer muda diante dos seus olhos, junto com o recibo. Noutra cena, um cliente solta uma ilustração sobre um moletom, move-a um pouco para cima e depois gira o produto para ver o efeito. Por trás dessa interação simples, o vendedor já definiu onde a arte pode ficar e qual o tamanho permitido. São duas experiências de compra bem diferentes. Compartilham uma ideia útil: uma loja pode ser moldada em torno do que você vende, inclusive na forma como alguém escolhe o produto. Colocámos esses dois pontos de partida na coleção Modern Shop no GitHub: , uma vitrine 3D para fast-food, e , um criador de produtos para merchandising personalizado. O código-fonte está disponível sob a licença MIT, por isso pode explorá-lo, adaptá-lo e construir a partir dele. Traga uma ideia, a sua marca e uma ferramenta de codificação com IA como Codex ou Claude Code. Já há algo interessante com que trabalhar.

Jelly Bites: deixe os clientes montarem o almoço

Comece pelo demo ao vivo Jelly Bites. Escolha um hambúrguer, arraste para girá-lo e experimente alterar um ingrediente. A comida responde com um leve balanço. Destaque uma camada e a pilha abre para você ver o que há dentro. É lúdico, mas a interação tem um propósito prático. Os clientes conseguem ver as escolhas que estão a fazer. Picles, molho, queijo e coberturas tornam-se partes visíveis do pedido em vez de uma lista de opções que precisam imaginar. O construtor de pizzas leva a mesma ideia noutra direção: escolha o tamanho, a massa, o molho e as coberturas, e veja a pizza ganhar forma. Um recibo ao vivo torna visíveis as consequências dessas decisões. O demo também explora entrega ou recolha, códigos promocionais, checkout e uma tela de acompanhamento do pedido. Há um pequeno detalhe aqui que importa quando as pessoas mudam de ideia. O item em etapa de montagem é um rascunho até o cliente escolher . Um item no carrinho pode então ser trazido de volta ao construtor 3D e editado. Esse é o tipo de interação que uma lanchonete ou hamburgueria pode adotar para marcar a sua identidade. O código-fonte da vitrine 3D foi construído com Vue, TypeScript e Three.js. Não precisa conhecer esses nomes para experimentar o demo. Para um desenvolvedor ou agente de codificação, eles identificam um projeto familiar baseado em navegador para inspecionar e estender. As formas dos alimentos são geradas em código, dando-lhe um ponto de partida concreto para alterar a aparência e o comportamento. Uma hamburgueria pode adaptar o menu às suas próprias receitas e embalagens. Uma pizzaria local pode colocar as suas combinações emblemáticas em destaque. Pode alterar cores, idioma, textos, opções de ingredientes e o fluxo de encomenda para caber no negócio. Layouts em inglês e persa já estão representados no exemplo. Uma limitação a entender antes de usar para pedidos reais: o demo atual usa dados de catálogo de exemplo, encomendas armazenadas no navegador e checkout e acompanhamento simulados. A ligação a Selldone ainda precisa ser implementada. A experiência visual está aí para explorar; verificações finais de catálogo e preços no servidor, pagamentos e fulfillment exigem uma integração de comércio real. A experiência 3D requer um navegador com suporte a WebGL 2, por isso teste uma adaptação nos telemóveis e navegadores que os seus clientes usam.

Mockup Studio: uma experiência para o vendedor, outra para o cliente

Uma loja de camisetas personalizada tem um problema diferente. O cliente quer liberdade para experimentar. A gráfica precisa de um design que caiba na área de impressão real. Mockup Studio aborda ambos os lados desse problema. Abra o demo ao vivo do editor de produtos e verá dois modos claramente assinalados: para administradores da loja e para compradores.

O vendedor define as regras uma vez

No construtor de modelos, o vendedor escolhe o produto, adiciona vistas do produto e define a área imprimível. Essas dimensões são guardadas em milímetros, com configurações para resolução e sangria, a arte extra para além da linha de corte. O vendedor decide então o que o comprador pode alterar: mover, redimensionar ou rodar a arte, por exemplo. Uma impressão no peito pode ter os seus próprios limites, enquanto a manga usa outra área. O modelo pode ser testado do ponto de vista do cliente antes de ser entregue à aplicação anfitriã. Essa separação torna a ideia útil além de uma única camisola. A galeria de exemplo inclui uma t-shirt, hoodie, sweater, boné, caneca, almofada e etiqueta. Assets 3D preparados também podem ser usados dentro do formato de modelo suportado. Para uma forma de produto diferente, planeie preparar o modelo e o seu mapeamento da área de impressão. O estúdio pode criar fotografias iniciais do produto a partir de um modelo 3D configurado, também. Isso dá ao vendedor outra forma de preparar vistas para o editor durante o desenvolvimento do produto.

O cliente tem espaço para brincar

O editor do comprador é mais focado. Carregue uma imagem, posicione-a, ajuste o tamanho e pré-visualize no produto. As regras do comerciante permanecem em vigor enquanto o cliente experimenta. Há vistas 2D baseadas em fotografia e uma vista 3D opcional que pode ser girada. As alterações na arte aparecem no modelo. Em produtos macios suportados, uma ferramenta de “puxar” deixa levantar o tecido e vê-lo acomodar-se de volta. É um efeito de pré-visualização; não estica a arte enviada para impressão. Uma distinção clara percorre o projeto: Uma mostra ao cliente como o item pode ficar. A outra é um PNG transparente para a superfície de impressão, usando as dimensões físicas e resolução configuradas. Um indicador de qualidade de impressão ajuda a explicar como os pixels da imagem de origem se relacionam com o tamanho escolhido. Para um fluxo de produção real, a gráfica ainda precisa aprovar dimensões, cores e requisitos de ficheiro. A exportação atual é um PNG RGB renderizado no navegador, sem conversão CMYK ou perfis de cor específicos de impressão. As formas de produto geradas são ilustrações em vez de réplicas medidas de cada peça de vestuário que possa vender. O demo também mantém modelos e designs localmente. Guardar esses elementos numa loja, anexar o design exato a um pedido, receber o pagamento e enviar o trabalho para produção são passos de integração para a loja final. Ferramentas de texto/fontes, variantes de produto e arrastar arte diretamente na superfície 3D estão entre as funcionalidades ainda no roteiro do projeto.

Um ponto de partida muda a conversa com a IA

“Construa-me uma loja” deixa muito para um assistente de IA adivinhar. “Pegue neste editor de produto, use a nossa marca e faça o fluxo de cliente funcionar para a nossa gráfica” dá-lhe algo concreto. É por isso que partilhamos o código-fonte. Pode ver a interação, experimentá-la e apontar as partes que deseja alterar. Uma captura de ecrã vira discussão. Um demo vira referência de trabalho. O código dá ao seu desenvolvedor ou agente de codificação com IA um lugar para começar. Use o ChatGPT para trabalhar a ideia de negócio: quem está a comprar? Quais opções importam? Onde os clientes hesitam? Que informação deve chegar à cozinha ou à equipa de impressão? Depois traga esse briefing para Codex, Claude Code, ou outro ambiente de desenvolvimento com IA que consiga inspecionar e editar o projeto. Ferramentas de IA podem ajudar a adaptar componentes, rever o design, conectar serviços, escrever testes e explicar código desconhecido. Um resultado forte ainda depende de um briefing claro e de verificar a experiência real. Dê ao assistente um marco útil de cada vez e peça que mostre o que funciona.

Onde o Selldone MCP entra

A frente da loja é a parte que os clientes tocam. Por trás estão produtos, stock, pagamentos, envio e as encomendas que alguém tem de cumprir. Selldone MCP dá a um assistente de IA conectado acesso estruturado a uma loja Selldone autorizada. Durante a construção, isso pode ajudar o agente a trabalhar com o catálogo da loja, conteúdo e configuração suportada em vez de adivinhar um conjunto separado de dados de demonstração. O acesso fica dentro da loja e das permissões que escolher. A loja implementada então precisa da sua própria API Selldone ou integração de serviço real. O MCP ajuda o assistente a fazer o desenvolvimento e o trabalho aprovado na loja; não transforma automaticamente o botão de checkout de um demo num fluxo de pagamento ao vivo. Para o Jelly Bites, isso significa ligar o menu e o fluxo de encomendas a serviços de comércio reais. Para o Mockup Studio, significa armazenar o modelo do vendedor e o design escolhido pelo cliente de forma fiável, preservando esse design com o produto e encomenda corretos. A experiência voltada ao cliente pode manter-se distinta enquanto a Selldone fornece a base de comércio. Existem diferentes formas de construir sobre essa base. Uma loja completa pode ser customizada através do fluxo de trabalho Selldone Layout, enquanto uma app personalizada mais especializada pode usar um frontend separado. A visão geral Selldone Genesis explica esses caminhos. A escolha certa depende de quanto da loja existente quer manter e o quão invulgar precisa ser a jornada do cliente.

Dê à sua IA um briefing inicial melhor

Pode começar com o pedido seguinte num ambiente de codificação. Substitua as partes entre colchetes pelos detalhes do seu negócio.

Inspecione os dois projetos em https://github.com/Modern-Shop e recomende o melhor ponto de partida para [o meu negócio]. Leia a documentação, depois clone o projeto escolhido para uma nova pasta. Mostre que funcionalidades funcionam hoje e quais precisam de integração. Adapte a jornada do cliente a [a minha marca, produtos e requisitos], mantendo usabilidade móvel.

Depois de escolher uma direção, peça o próximo marco:

Ligue a loja Selldone pretendida através do MCP com as permissões que esta tarefa necessita. Planeie e implemente o catálogo real, armazenamento de designs quando relevante, carrinho, checkout e integração de encomendas usando serviços Selldone suportados. Substitua pressupostos do demo por dados reais da loja. Teste todo o fluxo e mostre uma pré-visualização para revisão antes do deployment.

Esses prompts são o começo de uma conversa de construção. Um bom agente irá inspecionar o projeto, identificar peças em falta e trabalhar nelas consigo. Para um primeiro marco de restaurante, pode pedir uma encomenda completa: personalizar um item, ver o preço correto, pagar no fluxo de teste suportado e verificar que a encomenda foi recebida pelo negócio. Para uma gráfica, siga um design desde o upload até à pré-visualização e ao ficheiro exacto guardado associado à encomenda. É também aqui que uma vitrine personalizada pode tornar-se um projeto mais económico. Código de interação existente e uma plataforma de comércio reduzem o que precisa construir do zero. O custo final depende do design, integrações, assets, alojamento e testes que o seu negócio necessita. A licença MIT torna o código de exemplo reutilizável; não inclui esses serviços gratuitamente.

Construa você mesmo ou traga a ideia à nossa equipa

Continuaremos a refinar os exemplos Modern Shop e a desenvolver a coleção. Pode começar pelas versões disponíveis agora, adaptar uma experiência inteira ou aproveitar a parte que resolve o seu problema específico. Se preferir que especialistas moldem o resultado à sua marca, pode pedir um orçamento de vitrine personalizado à equipa oficial de setup e design da Selldone. Traga o demo que gosta, os seus produtos e a experiência que quer oferecer aos clientes. Podemos dimensionar o design e a implementação consigo antes do início do projeto. Talvez a sua loja comece com um hambúrguer que se desmonta no ecrã. Talvez comece com uma pequena ilustração numa caneca. Abra os demos, altere algo e veja que ideia se parece com o seu negócio. Explore Modern Shop no GitHub · Experimente o construtor 3D de comida · Experimente o Mockup Studio