Construir a vitrine e o catálogo de produtos
Quando usar
Comece aqui, em um projeto totalmente novo, antes de adicionar contas, um carrinho ou pagamentos.
Um formato de loja pública completo onde as pessoas podem navegar pelos produtos e entender o que estão comprando.
O prompt
Esses prompts funcionam melhor em inglês — cole-os como estão, mesmo em páginas traduzidas.
Build the public storefront for [STORE NAME], which sells [PHYSICAL PRODUCTS / DIGITAL PRODUCTS / BOTH] for [WHO THE PRODUCTS ARE FOR]. Create a home page that explains what the store sells, why a customer should trust it and how to browse. Create a catalogue page where people can browse products by [YOUR MAIN CATEGORIES]. Create one reusable product page that shows the product name, real description, price, available options, stock message, image area, delivery or download summary and a clear purchase action. Also add an about page and a contact page using [CONTACT EMAIL]. Save products as editable information rather than writing each product permanently into a page. Each product needs a name, short description, full description, category, price, product type, status, image, delivery summary and whether it is featured. Product type is physical or digital. Status is draft, active or unavailable. Only active products appear to visitors. Add three example products that are clearly labelled as examples for me to replace. Use labelled image placeholders saying [REAL PRODUCT IMAGE NEEDED]. Do not use stock photos and do not generate product, customer or lifestyle images from scratch. Editing my own real product photos is fine; only invented or generated products are the problem, because they misrepresent what the buyer receives. Do not build customer accounts, a cart, checkout or payment in this step. Show the purchase action as [BUTTON LABEL, e.g. Choose options], but do not pretend an order can be completed yet. Design the store to feel [THREE BRAND ADJECTIVES]. Use [COLORS] and [TYPOGRAPHY PREFERENCE]. Keep the product information easy to scan, use restrained spacing and make every page comfortable on a phone. Do not invent reviews, sales numbers, scarcity messages, certifications or customer claims. When finished, tell me where I edit products and which text and images are still examples.
Confira se funcionou
- Você pode mover-se da página inicial para o catálogo e abrir cada produto de exemplo
- Editar um produto de exemplo altera o que os visitantes veem sem precisar reconstruir a página
- Produtos em rascunho e indisponíveis não aparecem como produtos comuns à venda
- Cada área de imagem está claramente rotulada para uma imagem real que você deve fornecer
- A ação de compra não leva a um checkout falso
- O catálogo e as páginas de produtos são fáceis de ler no seu celular
Você saberá que funcionou quando:
Uma vitrine pública onde você pode navegar por três produtos de exemplo editáveis, desde a página inicial até uma página de produto completa.
Fique atento a
Produtos de exemplo frequentemente sobrevivem até o lançamento por acidente. Dê a cada exemplo um rótulo óbvio e não remova esses rótulos até que o nome real, a descrição, o preço e a imagem tenham sido fornecidos. Uma grade de produtos bonita também não é um catálogo de loja se cada item for escrito diretamente na página; prove que uma edição na área de produtos atualiza a página pública.