Hero Designs, and the Exact Prompt Behind Each One

The seven prompts are all below, written out properly rather than squeezed onto a slide. Copy any one of them, paste it in as your first message, and you will have that page in front of you in a few minutes.

Read the next minute first, though, because there is one habit underneath all seven and it is the difference between getting a page you are pleased with and getting the same beige page everybody else gets.

Describe the feeling, then the furniture

Most people describe a layout. A header, a headline, a button, an image on the right. You get exactly that, and it looks like every other site, because a layout is the part that is already obvious.

The part the assistant cannot guess is the mood. So say it first, in the words you would use to a friend:

Warm and calm. Cream, sage green, lots of space.

Eighties neon. Hot pink and cyan, loud, a bit silly.

Almost white and enormous. Almost no colour. Type doing all the work.

Then describe the furniture: what is in the nav, what the headline says, what the button does, what sits on the right. Mood first, furniture second. Every prompt below is built that way, and you can see the shape once you know to look for it.

Two more things worth copying:

Name two or three colours, not a palette. "Deep navy, teal, a bit of violet" is enough to steer the whole page. Ten hex codes is a spec, and a spec produces something that looks specified.

Do not name a technique. You do not need to know what any of this is called. "Ribbons of colour drifting slowly behind the words" gets you the aurora. Naming a library or an effect just narrows what you might have been given.

1. Aurora

A sleep programme. Slow ribbons of colour drifting behind the words, on a background that is almost black. Calm and expensive, and not one pixel of it is a photograph.

The Northlight hero: teal and violet ribbons drifting across an almost black page, a light serif headline, and a frosted glass card showing last night's sleep score

Build a one page site for Northlight, a six week sleep programme. The hero should fill the screen: a very dark navy background with soft ribbons of teal, blue and violet drifting slowly across the top like the northern lights, and a scattering of tiny stars behind them. Calm and expensive, nothing loud. Across the top, the logo, four links, a Sign in link and a white Start free button. On the left, a small green pill saying "Now open to everyone", then a big headline in a light serif with one word in italic picked out in a teal to violet gradient, a short paragraph, a bright teal Start button and a Watch how it works link, and a row of overlapping circles with a line of social proof next to them. On the right, a frosted glass card showing last night's sleep score as a big number, a seven day bar chart, and three rows of stats underneath.

Swap in: any product with a number people check. A running app, a savings tracker, a habit streak. The frosted card is doing the work here, and it works for anything you can put a score on.

2. Living Mesh

A yoga studio. Four warm colours breathing into each other, so slowly you only notice if you watch. It never quite repeats.

The Meadow hero: peach, sage and dusty pink blooms blurred into a warm cream page, a serif headline, and a white card listing today's classes

Build a one page site for Meadow, a small yoga studio in Bristol. Warm cream background with four big soft colour blooms behind everything, peach, sage green, dusty pink and pale yellow, heavily blurred and very slowly breathing in and out, with a faint paper grain over the top. Calm, expensive, a bit handmade. Nav with the studio name in a serif, four links, and a Book a class button as an outline pill. On the left, a small uppercase line saying "Bristol, est. 2016", a huge serif headline with one word in green italic, a paragraph, a dark pill button, an underlined "Your first class is free" link, and three stats sitting on a hairline rule. On the right, a soft white card headed "Today at Meadow" listing four classes with the time, the name, the teacher and how many spaces are left, and a green Reserve a mat button at the bottom.

Swap in: a salon, a pottery studio, a small restaurant. Anything where the thing people want from the homepage is what is on today.

3. Retro Sun

A synth festival. A striped sun, a neon grid running to the horizon, and a ticker along the bottom. 1984, entirely on purpose.

The Vector 84 hero: a striped sunset sun over a glowing cyan grid running to the horizon, with an enormous gradient headline and a scrolling ticker

Build a one page site for Vector 84, a three night synth festival. Make the whole hero an eighties poster: a purple to pink sunset sky, a big striped sun sitting high and centre, a glowing cyan horizon line, and a neon grid floor running away into the distance in perspective and scrolling slowly towards the viewer. Fine scanlines and a bit of grain over everything. Loud and a bit silly. Nav across the top in spaced out uppercase mono: the festival name with a cyan triangle, four links, and a solid cyan Get tickets button. Centre the content low on the page. The dates and venue in spaced out cyan mono, then an enormous uppercase headline in a white to yellow to pink gradient, a short paragraph, a hot pink Wave 2 tickets button and a cyan outline button, then the lineup as spaced out uppercase names separated by little pink diamonds. A bright cyan ticker along the very bottom scrolling "Wave 2 on sale now" over and over.

Swap in: a club night, a games launch, a record label. This one is the easiest of the seven to overdo, and overdoing it is mostly the point.

4. Waves

A surf school. Three layers of water rolling at three different speeds, with the booking form sitting calmly on top.

The Tidepool hero: three layers of blue waves rolling along the bottom of a sunrise gradient, with a booking card sitting beside the headline

Build a one page site for Tidepool, a surf school on the north coast. Background is a gradient from a warm sunrise at the top down to pale blue, with a soft sun haze on the right. Along the bottom, three layers of waves in three blues, each one rolling sideways at a different speed, with a white foam fade at the very bottom. Fresh and friendly. Nav with the logo, four links, a Conditions link and a dark Book a session button. On the left, a small white pill with a green dot saying today's surf conditions, a big heavy headline with the last two words in teal, a paragraph, an orange Book a lesson button, a white secondary button, and three stats. On the right, a white frosted booking card headed "Check availability" with fields for session, date, people and email, a row underneath showing high tide, water temperature and wind, and a teal button saying how many times are available.

Swap in: a boat trip, a climbing wall, a campsite. The booking card is the whole hero here, and putting it beside the headline rather than three screens down is most of the reason it works.

5. Pixel Field

An encrypted notes app. A few thousand squares fading up and breathing. It reads as serious software without a screenshot of code anywhere.

The Bitfold hero: a field of tiny mint and indigo squares pulsing across an almost black page, with a mock app window showing an encrypted note

Build a one page site for Bitfold, an encrypted notes app. Almost black background covered in a grid of tiny squares that fade in from the right and then gently pulse, in mint, teal, indigo and dark grey, with the left side faded out so the text over it stays readable. Serious and technical, one mint accent and nothing else. Nav with the logo, four links, a Docs link and a mint Get Bitfold button. On the left, a small mono badge saying "v3.0, local first", a heavy headline with the last word in mint, a paragraph, a white Download for Mac button, an outline Read the audit link, and a dashed box showing the install command with two key caps in it. On the right, a mock app window: a title bar with three dots and a lock, a sidebar of note folders with one highlighted in mint, and an open note showing a title, a couple of lines of text, some grey placeholder bars, and a mint box of hex that looks encrypted.

Swap in: any developer tool, any privacy product, anything technical. The fake app window is worth more than a real screenshot at this size, because you control exactly what it says.

6. Light Rays

A coffee roaster. Warm rays coming through the dark with the product stood in them.

The Solstice hero: amber light rays fanning down through a dark warm room with a black coffee bag standing in the beam and a price card beside it

Build a one page site for Solstice, a coffee roaster. Very dark warm brown background with amber light rays fanning down from the top right and swaying very slowly, floating dust specks in the light, and a soft glow on the floor. Moody and expensive, like a shop window at night. Nav with the brand name in spaced out serif capitals next to a small sun mark, four links, and an outline Basket button. On the left, a small amber line saying the origin, a huge light serif headline with one word in amber italic, a paragraph, a cream pill button, an underlined link, and four small tasting note pills. On the right, the product photo standing in the beam, a small dark glass card beside it with the coffee name, the weight, the price and an amber Add to basket button, and another small card below it saying when the next roast is.

About the photo. This is the only one of the seven that needs an image, and it is not generated for you. Take the picture yourself, or use one you already have, and attach it to your message with the paperclip beside the chat box. Then ask for it to be moved into the site and used as the product shot. A photo with the background already cut out is what makes it stand in the light rather than sit in a box.

Swap in: candles, whisky, skincare, headphones. Anything where one object is the whole sell.

7. Dot Matrix

A type foundry. A field of dots swelling and sinking behind stark black type. Almost white, enormous, and completely still on the left.

The Halo Type hero: an almost white page with an enormous headline set across three lines and a field of dark dots swelling across the right side

Build a one page site for Halo Type, a small type foundry. Almost white background with a field of small dark dots on the right that swell and shrink in slow drifting waves, faded out on the left so the type over it stays clean. Stark and editorial, black and almost white, no other colour. A full width nav with a thin rule under it: the foundry name in heavy capitals next to a ring mark, four mono links, a Test drive link and a solid black Buy fonts button. Then a row of small mono spec labels, and an enormous uppercase headline across three words where the first is black and heavy, the second is light, and the third sits on its own line in outline only. Under a hairline rule, a short paragraph on the left and two square buttons on the right. Along the very bottom, a four column strip showing the word "Handgloves" set in light, medium, bold and italic, with the weight name under each one.

Swap in: an architecture practice, a design studio, a photographer. When you have nothing to sell but taste, this is the one.

The second message is the real one

None of these will be right first time, and they are not meant to be. What you get back is a draft to react to, and reacting is the fast part.

Say what is wrong, specifically:

The ribbons are moving too fast, slow them right down.

The headline is too big, drop it by about a third.

Swap the card and the text, put the card on the left.

Everything is too evenly spaced. Give the headline much more room and tighten the rest.

"Make it better" gives the assistant nothing to work with. One specific complaint gets fixed in one go, and you can make ten of them in ten minutes.

Ask for one change at a time. Six changes in one message gets you five of them and a surprise.

Then publish it

A page sitting in a tab is not a website. Publishing puts it on your own address with the padlock already on, and you can send someone the link straight away.

Every version is saved as you go, so publishing early costs you nothing. If tomorrow's idea turns out worse than today's, today's is still there.

All seven of these were built on one site, and the free plan gives you a site, an address and enough credits to build something and change your mind a few times. No card.

Start free at gledit.app →