How to restyle generated login, blog or store components with "Refine"

When you turn on a TeleportHQ feature such as the blog or the online store, what it adds (for example an article card, a product card or a cart line) starts from a standard template. To make a component match your site, open it and click Refine. The AI restyles it with your colors, fonts, spacing and screen sizes. Its content, data and interactions stay exactly the same, and you can undo it.

Before you start#

• Refining uses AI tokens. The Refine window shows the cost before you confirm. See What uses AI tokens, and how much?.
• You need permission to edit components.
• Refine works on components that a feature created: the blog's article card, the store's product cards and their loading placeholders, cart lines and review cards, and the AI chat window.

Refine one component#

1. In the TeleportHQ editor, open the component, for example the store's product card. You can open it from the Components list in the left sidebar.
2. Above the canvas, next to Ask AI, click Refine (tooltip, for example, Restyle this E-Commerce component to match your project's design).

3. Read the Refine "{name}" with AI? window. It explains that only the styling and layout change. If the component has a loading placeholder, the window says it's refined with it, so the two keep matching. The last line shows the cost: "This uses your workspace tokens: about {n} to refine this component."
4. Click Refine component (~{n} tokens), or Cancel.

Refine a feature's new pages#

In a project made with the AI Website Builder, TeleportHQ can offer to restyle what a feature added right after you turn it on, for example the sign-in and sign-up pages of Authentication. The window is titled like Refine the new Authentication pages?

1. In the list, tick the pages or components you want restyled. Rows marked needs more tokens don't fit your balance.
2. Click Refine {n} pages (~{x} tokens).

Check that it worked#

While it works, the canvas shows Refining this component’s design… (or Refining this page’s design…) and "Its content stays exactly as it is — only the layout changes." Items still waiting show Waiting to refine this component… on the canvas. In the Components list, the item shows (Refining) or (Queued) after its name. When it finishes, the component or page uses your site's design. To go back, click Undo above the canvas (Ctrl/Cmd+Z). Each refined component or page is undone in one step.

Troubleshooting#

"Refining this component costs about {n} tokens, and your balance is {m}. You need about {k} more." The Refine component button stays greyed out until your balance covers it. Buy tokens, then try again. See How to buy more AI tokens.

"You need about 1,500 tokens to refine a page. Add more tokens to use this." Shown in the window for a feature's new pages when your balance can't cover any of them. Buy tokens, then try again.

"Your balance covers about {k} of these {n} pages (roughly 1,500 tokens each). Pick the ones that matter most, or add more tokens." Untick the pages that matter least, or add tokens. If you pick more than your balance covers, the window warns that "The extra ones will be skipped."

"This component has already been refined once. Running it again starts from how it looks now, and is charged again." You can refine again, but it starts from the current look and costs tokens again.

I don't see the Refine button The component wasn't created by a feature, another generation or refinement is running, or your role can't edit components. For other components and sections, ask the AI Assistant to restyle them.

Good to know#

• Refine changes only styling and layout. Texts, data connections and what happens on click stay as they are.
• If you close the window for a feature's new pages, you can still refine each component later with Refine.