Free guide · Scroll-scrubbing sites

Build an Award-Style Animated Website From One Prompt

Connect Higgsfield to Claude, write one structured prompt, get back a live, responsive, scroll-animated site.

These are the sites where scrolling plays a film. One prompt, one live URL, no code.

Connect the MCP→One structured prompt→Live animated site

Step 1 is the connection that builds and hosts the sites:

Start building here Create your Higgsfield account see the examples first ↓

See what you are aiming for first

Open a couple of these before you start. They were all made with one prompt each, and knowing the ceiling makes your own prompt much better:


What you need

Claudeclaude.ai — this is where you will work.
HiggsfieldBuilds, animates and hosts the site. Link in Step 1.
One product photoOptional — you can ask for generated assets instead.

ise.creates on Instagram
Follow the journey @ise.creates

I am building this in public: every new video made with this exact workflow, what it earned, and what I would do differently. Come along for the next one.

Follow on Instagram

Step 1 · one-time setup

Connect Higgsfield to Claude

This is the account that generates the film and hosts the live URL:

Create your Higgsfield account here Then come back and connect it to Claude

Once only, and it takes about a minute.

Useful trick: ending your message with "with Higgsfield MCP" makes Claude reach for the website skill instead of trying to answer in chat.

Step 2 · the whole guide in one section

The prompt formula

Every one of those example sites uses the same seven-slot structure. Fill the slots and you get their quality; skip them and you get a generic template.

1
Brand name

Invent one and write it in capitals. It anchors the whole identity — LOOMERE, VELLARO, STACKED.

2
Source

Either "from the attached photo" or "with generated, IP-free assets" if you have no photo.

3
Palette

Three base colours, named evocatively rather than as hex codes: olive, terracotta, reed beige.

4
Two fonts

A display font and a body font. Cabinet Grotesk with Inter Tight is the safe pairing; Unbounded with Onest is bolder.

5
One accent

Exactly one, and say "only". This single constraint is what makes the result look designed instead of decorated.

6
The film

The transformation the scroll plays out: A becoming B. This is the most important slot.

7
Chapters + features

Five or six chapters, plus the real functionality: cart, booking form, preorder modal, contact details.

Slot 6 deserves its own note

The film is what separates these sites from a nice landing page. It is always a transformation with a direction: a thread becoming a shirt, a harvest becoming a bottle, a burger assembling layer by layer, a journey from a bedroom to a mountain summit.

Before you write your prompt, finish this sentence: "as you scroll, ______ turns into ______." If you cannot finish it, you do not have a film yet — and the site will feel flat no matter how good the colours are.

Step 3

Write it

Fill in the template:

Prompt · template
Build the [BRAND] [category] website from the attached
[photo of your product].

Use [colour 1], [colour 2], [colour 3], [display font] and
[body font], with [accent colour] as the only accent.

Show [thing A] becoming [thing B] across [five/six] chapters,
with [a cart / a booking form / a preorder modal / accounts],
[contact details and any legal line], and full mobile support.

with Higgsfield MCP

A worked example

Prompt · worked example
Build the AURELLO ceramics website from the attached mug photo.

Use clay brown, chalk white, and slate grey, Cabinet Grotesk
and Inter Tight, with burnt orange as the only accent.

Show a spinning lump of clay becoming the finished glazed mug
across six chapters, with a shop, a cart drawer, a workshop
booking form, Lisbon contact details in euros, and full mobile
support.

with Higgsfield MCP

Attach your photo in the same message. Claude plans the site, generates the film, wires it to the scroll, builds the pages and deploys — it takes a while, so let it run.


Step 4

Review and fix

You get a live URL on a higgsfield.app subdomain. Open it on your phone as well as your laptop, then send fixes as normal messages:

Every change needs a redeploy. Ask for it explicitly — the live link keeps serving the previous version until the site is deployed again.

Step 5

Publish and share

Two separate things, and people confuse them:

Before publishing, ask Claude to fill in the page metadata — title, description, favicon, preview image. A site with an empty title is invisible on the feed and looks broken when the link is shared on WhatsApp or X.

There is also a running Higgsfield contest you can enter with your site plus the social links promoting it. Worth doing if the site turned out well: it is a free second shot at reach.

How to make money with this

Sell the sites

A local restaurant, a ceramicist, a personal trainer, a photographer — all of them are quoted thousands for a site like this and told to wait six weeks. You can deliver in an afternoon. Charge for the result, not for the hours.

Build the demo first, pitch second

The strongest version of this: make the site for a business that never asked, send them the live link, and ask if they want it. The demo does the selling. It costs you an hour and a few credits.

Be honest about the ceiling

These sites look excellent and they are genuinely fast to make. They are not a bespoke agency build — an award-circuit site is months of custom WebGL. Sell them as what they are: a beautiful, working site delivered in a day. That is already a strong offer.


Where people go wrong

Vague prompt

"Make me a nice website for my shop" produces exactly what you would expect. The seven slots are not optional decoration; they are the reason those examples look the way they do.

Three accent colours

The single-accent rule is doing enormous work. The moment you allow two or three, the result stops looking designed.

No transformation

If the scroll has nothing to reveal, the animation is just movement. Decide your A-to-B before you write anything.

Burning credits on rebuilds

Generating the film costs credits, and asking for a full rebuild regenerates it. Batch your feedback into one message instead of sending ten separate fixes.

Using a real brand

Do not build a fake Nike site with their logo and photos. Invent the brand, or use a real client who gave you their assets.


Quick checklist

You have the formula. This is the account that turns it into a live site:

Start building here Create your account and ship your first site today