Design a locker with AI (ready-made prompt)

Every locker ships with a template, and you can replace that template's markup and styles with your own, per locker, from the Advanced tab of the locker editor. Three boxes:

Each one replaces its template counterpart rather than adding to it. A box you never touch stays empty and keeps following the template, so a template improvement still reaches your locker for every field you did not customise.

This is where an AI is genuinely useful: the design is unconstrained, but the contract is small and exact. Give the model the contract and you get working markup. Leave it out and you get something beautiful that never renders an offer.

The contract, in short

Required. Write %offers% exactly once in your HTML. It expands to the container the offer cards are injected into:

<div class="toro-offers" data-toro-offers></div>

Put it on its own and style .toro-offers in your CSS. Do not wrap it in your own element and style the wrapper: display:flex; gap on a wrapper applies to the wrapper and its single child, so the gap between cards disappears.

%offers% is the only offers syntax. id="toro-offers", {{offers}}, %offers(my-class)% and a second %offers% are all rejected when you save.

Recommended. id="toro-progress" on the progress-bar fill element, whose width is set by JavaScript as offers complete, and id="toro-progress-text" for the "0 of 1 offers completed" line.

Copy comes from macros written as {{key}}. Every macro is a customizable field, so a key only resolves if the template declares it. The conventional keys are headline, description, footer_text and checking_text. Use underscores, never hyphens.

Offer cards use single-brace macros, substituted once per offer: {offer_name}, {offer_image}, {offer_description}, {offer_instructions}, {offer_link}, {offer_difficulty}, {offer_id} and {offer_payout}.

Two things about those:

• {offer_payout} is not a payout. It is a non-monetary label meaning "this costs the visitor nothing", and it renders FREE for every offer. The locker payload is public, so no money figure is ever put in it.
• Every rendered card is wrapped in an element carrying data-oid, so clicks are tracked even if your card is a plain <a href="{offer_link}">. You do not need to write any click handling.

The prompt

Copy everything in the block below into your AI of choice, then replace the two lines at the end with what you actually want.

You are writing a custom content-locker design for the ToroAds platform.
Output exactly three fenced code blocks, in this order and nothing else:
1) HTML  2) CSS  3) OFFER CARD HTML

Follow this contract exactly. It is not stylistic advice; markup that breaks
it will not render.

HTML (the locker wrapper):
- Write the token %offers% exactly ONCE, on its own, where the offer cards
  belong. It expands to <div class="toro-offers" data-toro-offers></div>.
  Never wrap %offers% in another element you intend to style as the card
  container: style .toro-offers instead.
- Do NOT use id="toro-offers", {{offers}}, %offers(class)% or a second
  %offers%. All are rejected on save.
- Include an element with id="toro-progress" whose width is animated by the
  platform as offers complete, inside a track element you style yourself.
- Include an element with id="toro-progress-text" for the progress label.
- Write all visible copy as macros, not literals: {{headline}},
  {{description}}, {{footer_text}}, {{checking_text}}. Underscores only.
- Scripts, inputs, selects, forms and inline handlers ARE allowed here.
- Load any webfont with a <link> tag in this HTML.

CSS (the entire stylesheet, wrapper and cards):
- Do NOT use @import: it is stripped. Webfonts go in a <link> in the HTML.
- Do NOT use expression(), javascript: or data:text/html URLs; stripped too.
- Style .toro-offers for the card layout (grid or flex, with the gap).
- Mobile first. The locker is viewed mostly on phones.

OFFER CARD HTML (the markup of ONE card, repeated per offer):
- Use only these macros, single braces:
  {offer_name} {offer_image} {offer_description} {offer_instructions}
  {offer_link} {offer_difficulty} {offer_payout} {offer_id}
- {offer_payout} always renders the word FREE. Treat it as a badge, never
  as a number, and never write a currency symbol next to it.
- Make the whole card a link to {offer_link}. Click tracking is automatic;
  do not add onclick handlers or analytics.
- Offer values are HTML-escaped by the platform. Do not escape them again.

Design brief:
- Style: <DESCRIBE THE LOOK: e.g. dark glassmorphism, rounded, high contrast>
- Brand colours: <YOUR HEX COLOURS>

Using what it gives you

1. Open the locker, go to the Advanced tab, and paste each block into its matching box: HTML into Custom Template HTML, CSS into Custom CSS, card markup into Custom Offer HTML.
2. Preview before you save. The preview runs the same renderer as the live page, so what you see there is what visitors get.
3. Check it on a phone. Most locker traffic is mobile, and an AI will usually optimise for the desktop screenshot it is imagining.

When it comes out wrong

Nearly every failure is one of four things, and all four are quick to spot:

• No offers appear. The %offers% token is missing, misspelled, or was written as id="toro-offers".
• Cards have no spacing. %offers% was wrapped and the wrapper was styled instead of .toro-offers.
• The font did not load. @import was used in the CSS. Move it to a <link> in the HTML.
• Headings are blank. A copy macro was invented, for example {{title}} or {{head-line}}. Use the conventional keys with underscores.

A word of caution

Custom locker HTML is rendered as you author it, scripts included, because lockers are JavaScript-driven by nature. That means you are responsible for what you paste. Read generated code before you save it, and do not paste markup from a source you do not trust into a page your visitors will load.

Next

• Create your first content locker if you have not built one yet.