Crie uma loja de moda de luxo com IA e painel admin

Claude Desktop

Use o Claude Code no app para desktop para configurar e personalizar sua loja.

Baixar o Claude Desktop

https://claude.ai/download

Conta no GitHub

Gratuito. Sua própria cópia do STILLFORM fica aqui, e a Hostinger faz a implantação a partir dela.

Criar conta no GitHub

https://github.com/signup

Node.js

Baixe a versão LTS atual. Ele roda a loja no seu computador.

Baixar Node.js

https://nodejs.org/en/download

Conta no Supabase

O plano gratuito é suficiente. Ele guarda seus produtos, fotos, pedidos e o login do proprietário.

Criar conta no Supabase

https://supabase.link/r4gdwhi

Conta na Cloudflare

Gratuito. A verificação Turnstile mantém os bots longe do seu checkout.

Criar conta na Cloudflare

https://dash.cloudflare.com/sign-up

Hospedagem Hostinger

O STILLFORM é gratuito; sua loja no ar roda aqui.

Escolha um plano da Hostinger

Use o plano Unlimited ou um plano Cloud — o STILLFORM é implantado como uma Node.js Web App.

Crie sua própria cópia

Experimente primeiro a loja pronta na demo ao vivo: passe o mouse sobre a arara de roupas, arraste-a e abra uma peça. O checkout e o Studio ficam desativados lá.

Abrir o STILLFORM no GitHub

https://github.com/salhiworks/stillform-fashion-store

Clique em Use this template e depois em Create a new repository Dê um nome e escolha Public ou Private Clique em Create repository e copie o endereço dele

Leve para o seu computador

Claude Desktop Code Local

Inicie uma sessão Local em uma pasta como Documentos, adicione o endereço do seu repositório abaixo e envie:

Clone sua cópia

Baixa o seu próprio repositório do STILLFORM em uma nova subpasta.

Clone {{REPOSITORY_URL}} into a NEW subfolder inside the folder I selected, named after the repository. Never clone directly into the selected folder and never overwrite existing files. If Git is missing, or GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

O endereço do seu novo repositório

https://github.com/your-name/my-fashion-store

Abra sua pasta do STILLFORM

Inicie uma nova sessão Local Abra a pasta que o Claude acabou de criar — a que tem o README.md dentro Se o Claude Desktop pedir, confie na pasta

Rode a loja localmente

Na sua sessão do STILLFORM, envie:

Prepare e inicie o STILLFORM

Instala o projeto e inicia a loja no seu computador, em modo demo.

This folder is my own copy of the STILLFORM fashion store. Read README.md and docs/SETUP.md before you start. 1. Check that Node.js 20 or newer is installed. If it isn't, stop and tell me how to install it. 2. Install the dependencies with npm install. 3. Start the development server with npm run dev and keep it running. 4. Give me the local address to open. Don't change any code, don't create .env.local and don't connect Supabase yet: I want to see the store in demo mode first.

Abra o endereço que o Claude informar, geralmente http://localhost:5173. Sem o Supabase, a loja roda em modo demo com a coleção embutida: a arara, as páginas de produto e a sacola funcionam, e o checkout fica desligado até o Passo 3.

Criar um projeto no Supabase

Abrir o painel do Supabase

https://supabase.com/dashboard

Clique em New project — qualquer região e o plano Free servem Deixe a Data API ativada Guarde a senha do banco de dados em um lugar seguro — o Claude nunca precisa dela Quando o projeto estiver pronto, copie o Project ID dele

Supabase Project Settings General

O Project ID é a única informação do projeto de que o Claude precisa. Ele mesmo lê sua Project URL e sua Publishable key pela Supabase CLI.

Faça login na Supabase CLI

Isso abre o seu navegador, então você mesmo executa, uma única vez:

Clique no botão Terminal no topo da sua sessão do STILLFORM Execute o comando abaixo Aprove o login na janela do navegador que abrir

npx supabase login

Crie um widget do Turnstile

Abrir o painel da Cloudflare

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

Dê ao widget o nome da sua loja Em hostnames, adicione localhost Adicione também o domínio da sua loja, se já souber qual é — caso contrário, você adiciona no Passo 5 Escolha o modo Managed e crie o widget Deixe a página aberta: o Passo 3 precisa da chave do site e da chave secreta dele

Peça ao Claude para conectar sua loja

Na sua sessão do STILLFORM, adicione seu Project ID abaixo e envie:

Conecte o STILLFORM ao Supabase

O Claude vincula seu projeto, configura o banco de dados e a coleção inicial e implanta a função de checkout.

Connect this STILLFORM store to my Supabase project {{PROJECT_REF}}. Read docs/SETUP.md first and follow it exactly. Use only the migrations, seed and scripts this project already has: don't write new SQL, tables or setup steps, and don't change the store's code. I'm already signed in to the Supabase CLI. Do these yourself, and tell me what each one does before you run it: 1. Link this folder to my project. 2. Show me what the database push would apply, then apply the migrations with the starter collection (supabase db push --include-seed). 3. Write my Project URL and Publishable key to .env.local. Never read, use or write the secret or service_role key. 4. Deploy the place-order Edge Function with --no-verify-jwt. If any command needs my password or a secret key, stop and give me the command to run in my own terminal instead. Then tell me to run npm run setup in my own terminal: it asks for my Turnstile keys and my owner email and password in hidden prompts. Never ask me for them in this chat. When I tell you it's done, run npm run setup -- --check and npm run verify:remote, restart npm run dev, and tell me in plain words what passed and what is still left to do.

Seu Project ID do Supabase

abcdefghijklmnopqrst

O Claude pergunta antes de cada comando — clique em Allow. Ele para quando for a sua vez.

Digite seus segredos no Terminal

Quando o Claude pedir, execute a configuração da própria loja no Terminal. Ela pula tudo o que o Claude já fez e pede apenas o que é privado:

npm run setup

Na proteção do checkout, escolha 1 e cole a chave do site e a chave secreta do Turnstile Se ele oferecer reimplantar a função place-order, digite n — o Claude já a implantou Digite seu e-mail e uma senha com pelo menos 12 caracteres para sua conta de proprietário Quando for pedido, desative Allow new users to sign up no seu painel do Supabase e pressione Enter — o setup confere se está desativado Avise o Claude que terminou

Supabase Authentication Sign In / Providers

Mantenha isto em sigilo

Digite sua chave secreta do Turnstile e sua senha apenas nos prompts ocultos do Terminal. Nunca cole esses dados no chat.

Verifique a configuração e faça login

O Claude executa as verificações da loja e a reinicia. Quando ele disser que tudo passou:

Recarregue sua loja local — agora ela carrega a coleção do seu banco de dados Abra /admin e faça login com seu e-mail e sua senha de proprietário

Você está no Studio, o painel da sua loja. Só as contas da lista de administradores da loja podem abri-lo, e ninguém consegue se cadastrar.

Adicione um produto

Tudo o que você salva no Studio vai direto para o seu banco de dados — sem mudar código.

Studio Products Add a product

Preencha Name, Category e One-line summary Em Photos, adicione uma foto frontal Em Price, sizes and stock, defina o Price e escolha as Sizes Dê nome à primeira cor, escolha a amostra dela e informe o estoque de cada tamanho Clique em Add a colour para cada outra variação de cor Clique em Publish

Opcional: depois de adicionar suas próprias peças, arquive ou exclua os oito produtos de demonstração em Products.

Ajuste a foto na arara

Adicionar uma foto frontal abre o editor da arara. Um recorte PNG transparente com o gancho do cabide no topo fica melhor; uma foto contra uma parede lisa e clara também funciona.

Ative Remove the plain background se a foto não for um recorte Ajuste Size e a posição, ou arraste a foto na prévia Descreva a foto para leitores de tela Clique em Use this photo

Confira Preview on the rail: passe o mouse para girar a peça e clique nela para abrir o close-up. Fotos de costas e de lado permitem que ela gire por completo.

Organize a arara

Studio Rail

Em Add a piece, escolha seu novo produto e a cor Arraste as peças para ordená-las, ou use as setas Remova qualquer peça que você não queira na página inicial Clique em Save rail

De seis a dez peças funcionam bem em uma tela de computador. No celular, a arara vira um carrossel deslizável.

Monte as coleções e o lookbook

Studio Collections

Em Homepage selection, escolha as peças que abrem a página inicial e clique em Save Clique em New collection, ou edite uma, e adicione as peças

Studio Lookbook

Edite o título e a introdução Envie suas próprias fotos e legendas para cada página dupla Oculte ou reordene as páginas duplas e depois clique em Save lookbook

Atualize as configurações e abra o checkout

Studio Settings

Em Store, defina o nome da loja e a moeda Em Contact, Shipping e Policies, adicione seus próprios dados Em Homepage, mude os textos ao redor da arara Em Checkout, ative Cash on delivery, Bank transfer ou Pay at studio pickup e edite as instruções Ative Open checkout Clique em Save settings

O STILLFORM não pede dados de cartão: os compradores escolhem um dos seus métodos, e você marca cada pedido como pago quando o dinheiro chega.

Faça um pedido de teste

Abra sua loja local, coloque uma peça na sacola e finalize a compra Anote a referência do pedido na página de confirmação No Studio, abra Orders e clique no seu pedido de teste Clique em Cancel order — o estoque volta a ficar à venda

Crie sua Web App

Ainda não tem hospedagem? Escolha um plano nos Pré-requisitos.

Hostinger Websites Create website Web App

Escolha seu próprio domínio, ou um domínio temporário para começar Escolha Import your Git repository Escolha Continue with GitHub e dê à Hostinger acesso ao seu repositório do STILLFORM Selecione o repositório e o branch main

Configure e implante

Mantenha o preset de framework Vite que a Hostinger detecta Escolha Node.js 22 Defina o comando de build como npm run build — nunca build:demo Defina o diretório de saída como dist e deixe o arquivo de entrada vazio

Antes do primeiro build, adicione estas três variáveis de ambiente — os mesmos valores do seu .env.local, que o Claude pode mostrar. Elas são incorporadas à loja, então mudar uma depois exige uma nova implantação.

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

Supabase Project URL

VITE_SUPABASE_ANON_KEY

Publishable key do Supabase

VITE_TURNSTILE_SITE_KEY

Chave do site do Turnstile

Os valores do Supabase estão em Connect. A chave do site está no seu widget do Turnstile.

Abrir o Connect

https://supabase.com/dashboard/project/_?showConnect=true

Somente valores públicos

Nunca adicione à Hostinger a chave secreta do Turnstile, a Secret key do Supabase nem a chave service_role. Tudo o que começa com VITE_ fica visível no navegador.

Peça ao Claude para rodar npm run preflight, a verificação de lançamento da loja — implante só quando ela passar Clique em Deploy e espere o build terminar Abra seu endereço no ar

Conecte seu domínio no ar

Supabase Authentication URL Configuration

Defina a Site URL como seu endereço no ar, começando com https:// Adicione o mesmo endereço às Redirect URLs Clique em Save

Cloudflare Turnstile

Abra seu widget do STILLFORM Adicione seu domínio no ar aos hostnames dele e salve

Allow new users to sign up continua desativado no Supabase.

Teste sua loja no ar

Abra uma das suas páginas de produto diretamente pelo endereço e depois atualize a página Faça login em /admin no seu endereço no ar Coloque uma peça na sacola e finalize a compra — a verificação do Turnstile é invisível ou uma única caixa de seleção Encontre seu pedido de teste em Orders e cancele-o

Ainda não foi confirmado como a Hostinger trata os links diretos desta loja. Se uma página de produto mostrar um erro 404 ao abrir ou atualizar, peça ao Claude para revisar com você a seção Hostinger de docs/DEPLOY.md.

Atualize sua loja depois

Produtos, fotos, estoque, pedidos e configurações: altere no Studio — entram no ar na hora

Mudanças de design ou de código: peça ao Claude para fazê-las e enviá-las para main — a Hostinger recompila sua loja a cada push