SiteSparkSiteSpark星火建站escreva um prompt · publique um site
← Todas as publicações
Pet supplies

How many steps does a pet supplies storefront really take?

Walked through the platform's real four-stage flow: describe it → the agent builds it → preview and iterate → ship it. Eight prompts in total, all copy-paste ready.

The flow first: four stages, and a pet supplies shop uses the same four

The generation flow on the platform is fixed at four stages. A storefront goes through exactly the same pipeline as anything else — only what you say at each turn changes:

Below is that flow applied to a pet supplies shop. There are eight prompts you need to type, all copy-paste ready. If an edit goes wrong you do not restart the project — every meaningful change leaves a checkpoint you can roll back to.

  • Describe the idea — one sentence saying what you want built
  • The agent generates — it plans the architecture, scaffolds a real project, writes the code and runs it in an isolated sandbox
  • Preview and iterate — watch it live, keep talking to change design and logic; build errors are caught and fixed automatically, up to five rounds
  • Ship it — one-click deploy to a production URL (custom domain, SSL, version history), or export to GitHub and take over

Stage 1 · Describe the idea: what you sell and who buys it (prompt 1)

This decides the structure and tone of every page that follows. “Pet supplies” spans cats, dogs, aquariums and reptiles — completely different price points and repeat-purchase rhythms — so narrow the category in the first sentence.

What to check: does the headline name the category you meant, and does the navigation show pet-related categories?

Build me a pet supplies storefront selling everyday cat and dog products (beds, bowls, toys, cleaning supplies) to individual consumers, clean and airy style, product photos as the focus. Start with the home page and the product list.

Stage 2 · The agent generates: nothing for you to type

The agent plans the architecture, scaffolds a real project, writes production-grade code and gets it running inside a resource-limited sandbox. You do not write code and you do not configure an environment.

Two things to look at here: which files and endpoints it created (products, cart, orders) and whether the preview is up. If the build fails, it catches, analyses and fixes the error itself, up to five rounds — no manual patching.

Stage 3 · Preview and iterate (1/4): a home page that sells (prompt 2)

Once iteration starts, click through the preview on desktop and on a phone first, then keep editing in conversation. The home page is not a display case — it only has to answer three questions: what you sell, why buy from you, how to reach you.

What to check: are the hero products visible, is there a contact entry point, and does it still hold together on a phone?

Rework the home page into three bands: a top banner with the three featured products of the season including prices and buy buttons; a middle section laying out products by category (beds / bowls / toys / cleaning); a bottom section with contact details and a link to the returns policy.

Stage 3 · Preview and iterate (2/4): product list and detail (prompt 3)

These two pages are where the buying decision happens. The list needs filtering, and the detail page has to state the specs clearly — the most common question with pet products is simply “will this size suit my dog?”.

What to check: does filtering work, does search work, does the detail page show specs and stock, and do the prices match between list and detail?

Add category filtering and a search box to the product list, with cards showing image, name and price. The product detail page needs a main image, specs (size / material / suitable pets), stock, an add-to-cart button and three to five FAQs.

Stage 3 · Preview and iterate (3/4): cart and checkout (prompts 4 and 5)

Payment is decided here, so settle where your buyers are first: buyers abroad usually mean Stripe or PayPal settling in USD; buyers in mainland China mean Alipay or WeChat Pay settling in CNY. Getting this wrong is painful to undo later.

What to check: does the cart total update correctly, can items be removed, does checkout open, and is the cart empty after a successful payment?

Add a cart and checkout flow: the cart supports changing quantities and removing items; the checkout page shows the order summary and total and pays through Stripe. After a successful payment, clear the cart and generate an order number for the purchase.
Also add PayPal as an alternative payment method, settling in USD.

Stage 3 · Preview and iterate (4/4): the trust pages (prompt 6)

Most storefronts that fail to take money do not have an ugly design — buyers simply cannot find a human, or do not trust the returns process. About, returns and contact must be real and reachable.

What to check: is the support email your own, do the returns terms match what you can actually do, and are all three pages linked from the footer? If an edit goes wrong, roll back to the previous checkpoint instead of starting over.

Add three pages: About (stating the operating entity and address), Returns policy (with the conditions and window for returns) and Contact (support email and working hours). Link all three from the footer.

Stage 4 · Ship it (prompt 7)

Once content and flow are right, handle the last three pre-launch checks: click every page on a phone, make the title and description read like a sentence, and confirm images load without stalling.

Then ship. Either deploy straight to a production URL — your own custom domain, SSL, and version history kept for each deploy — or export to GitHub: every project is a real repository and the code is yours.

Check the layout of every page on mobile and fix overflow and misalignment; rewrite the home page title and description so they say what the shop sells; make sure product images load smoothly.

One last thing before launch: your own products (prompt 8)

The sample products are placeholders. The store is only ready once real names, prices, specs, stock and photos are in. With many products, put them into one table first (name, price, specs, stock, image path) and have the platform replace them in one pass — far faster than editing one by one.

Replace the product data with the table I give you: name, price, specs, stock, image path, in that order, keeping the existing categories.

FAQ

The three questions we hear most:

  • Do I need to write code? — No. Across the whole flow you do two things: describe the requirement, and review what comes back.
  • What if an edit breaks something? — No need to restart. Every meaningful change creates a checkpoint, and you can roll back to any of them in one click.
  • Do I have to host it on the platform? — No. You can export to GitHub and run the source on your own server.

Next step

If you want to walk these four stages yourself, start from any of the links below.

Ideia → site

Seu próximo site está a uma frase de distância.

Pare de montar estruturas. Comece a descrever. Construa, execute e publique um site de verdade sem sair da conversa.