A step-by-step rebuild of AG1's landing page for a demo creatine brand, using an AI ecommerce builder and nothing but reference screenshots and prompts.
Posted
1 weeks ago
Duration
Format
Tutorial
educational
Views
388
22 likes
57 · 43
Big Idea
The argument in one line.
Reverse-engineering a proven landing page section by section, then feeding an AI site builder cropped reference screenshots and specific numeric corrections, produces a professional ecommerce page in an afternoon without a designer.
Who This Is For
Read if. Skip if.
READ IF YOU ARE…
A brand owner or solo ecommerce operator who wants a landing page that converts but cannot afford a $10,000 to $20,000 agency build.
Someone evaluating AI website builders who wants to see the real prompt-by-prompt workflow, mistakes included, not a polished demo.
A marketer who wants to study why a top-converting homepage works so they can model the same structure for their own product.
SKIP IF…
You're looking for a general no-code tutorial outside ecommerce; this workflow is specific to building a product landing page.
You already have a dedicated designer and just need inspiration, not a step-by-step AI prompting process.
TL;DR
The full version, fast.
A creator rebuilds AG1's landing page, reported to anchor over $600 million in 2026 revenue, for a demo creatine brand called C1 using Amboras, an AI-native ecommerce platform with Claude and other models built in. Working section by section (hero, three-tier product cards, ingredient carousel, comparison table, featured products, FAQ), he uploads a screenshot of each AG1 section as a reference and prompts the AI to rebuild it in his brand colors, then critiques the result against the original and re-prompts with tighter instructions. Sixteen prompts later the page closely matches the reference. The lesson: first-pass AI output rarely lands; cropped references and specific numeric corrections are what get it there.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Promise stated, AG1 framed as the blueprint, why its homepage carries the whole selling job for the brand.
02:02 – 02:40
02 · Starting the C1 demo store
Blank Amboras store for the demo brand C1, product photos loaded, the AI chat panel introduced as the build tool.
02:40 – 04:40
03 · Building the header and hero
Reference screenshots uploaded, three rounds of prompting to match AG1's nav, hero image crop, and copy length, ending with the em-dash fix.
04:40 – 05:36
04 · Product cards and tiers
Three-tier product cards rebuilt in one prompt, the 'most popular' middle tier, and the price-per-serving framing.
05:36 – 06:16
05 · Comparison table and Visual Edits
Comparison table recreated with new tiers, then a logo color fix handled with the click-to-edit Visual Edits tool.
06:16 – 07:52
06 · Ingredient images and looping carousel
Original ingredient photography generated in brand colors, then the looping carousel refined through four rounds of prompting to get the frosted-glass look right.
07:52 – 08:40
07 · Featured products and image assignment
Featured Products section split into a layout prompt and an image-assignment prompt; the AI flags a mismatched product photo.
08:40 – 09:15
08 · FAQs and finishing touches
A nine-question FAQ added, plus small polish requests like spacing fixes and AG1-style hero arrows.
09:15 – 09:53
09 · Build recap and takeaways
Sixteen prompts totaled, cost comparison to an agency build, and the closing note that AI output still needs iteration to match a specific vision.
Atomic Insights
Lines worth screenshotting.
AG1 sells essentially one product through its own website, so its homepage is reported to carry the entire selling job for a business projected at over $600 million in 2026 revenue.
A three-tier pricing section converts better when the middle tier is visually distinct and marked 'most popular,' since most buyers default to the middle option when given three choices.
A comparison table that fills the top tier's column with checkmarks while the cheaper tiers trail off into dashes nudges readers toward the premium option without saying so directly.
Pairing every subscription price with a 'price per serving' figure showing the smallest possible number makes the monthly cost look lower than the sticker price suggests.
A full-page screenshot forces an AI builder to guess what matters; cropping the screenshot down to just the nav bar or just the hero copy produces a far more accurate rebuild.
Giving an AI builder a specific number, like 'bring the image down 10 to 20 percent from the bottom,' produces a usable fix where a vague instruction like 'bring it down a bit' does not.
AI-written subtext defaulted to em dashes until explicitly told not to use them, which the creator calls the fastest way to signal that copy was written by AI.
An ingredient carousel that loops endlessly, pauses on hover, and blurs the background behind each caption reads as premium even though the only real new asset is a close-up photo.
A visual-edit tool that lets you click the exact element you want changed, like a logo, outperforms describing where that element sits on the page in a text prompt.
The entire AG1-style landing page took sixteen prompts across one afternoon to approximate work the creator says an agency would price between $10,000 and $20,000.
An AI builder that flags a mismatched product photo, such as a gummy shot that wasn't actually a gummy, catches content errors a human might miss when uploading images in bulk.
Takeaway
Specific References Beat Vague AI Prompts
AI BUILD WORKFLOW
A proven landing page can be rebuilt section by section with an AI site builder, but only by feeding it cropped reference screenshots and specific numeric corrections instead of vague descriptions.
01Intro and the AG1 reference
AG1 is widely reported as the category leader in greens supplements with 2026 revenue projected over $600 million, and it sells almost entirely through its own website, so its homepage is positioned to do all of the selling.
Before building anything, study the proven page section by section and ask what job each section does, rather than copying the layout blindly.
02Starting the C1 demo store
An AI-native ecommerce platform that plugs directly into Claude, OpenAI, and other AI models handles fulfillment and orders the way Shopify does, but edits happen through a chat panel instead of a page builder.
Starting from a blank page with no nav bar or hero section makes it easier to see exactly what each prompt adds, rather than fighting an existing template.
03Building the header and hero
Uploading a screenshot of the reference page's section alongside your own hero image and asking the AI to match colors, structure, and copy gets closer results than describing the layout in words.
A full-page screenshot forces the AI to guess what you actually care about; cropping the screenshot down to just the nav bar or just the hero copy produces a far more accurate fix.
Giving the AI a specific number, like 'bring the image down 10 to 20 percent from the bottom,' works where a vague instruction like 'bring it down a bit' does not.
AI-generated subtext defaults to em dashes; explicitly prompting 'don't use any em dashes' is necessary to avoid the most common tell that copy was AI-written.
04Product cards and tiers
A three-tier pricing section gives every visitor a 'door' that matches their intent, from the person who only wants the cheapest product to the one who wants the full stack.
Marking the middle tier as 'most popular' and making it visually distinct works because most buyers default to the middle option when given three choices.
Showing a 'price per serving' figure under a monthly price displays the smallest possible number, which makes a subscription feel cheaper than the sticker price.
One well-specified prompt, with reference screenshots and the actual product images attached, can recreate a three-card pricing section almost exactly on the first try.
05Comparison table and Visual Edits
A comparison table that fills the top tier's column with checkmarks while the cheaper tiers trail off into dashes visually steers readers toward the premium option without saying so.
For a small, specific change like a logo's color, clicking the exact element on the page with a visual-edit tool is faster and more accurate than describing its location in a text prompt.
06Ingredient images and looping carousel
Generating original ingredient photography in your own brand colors, matched to the reference's shot style and lighting, avoids using a competitor's actual photography while keeping the same premium feel.
A carousel that loops endlessly, pauses on hover, and blurs the background behind each caption reads as more expensive than one that simply scrolls once and stops.
Recreating a highly detailed visual section like a frosted-glass carousel takes multiple rounds of prompting: a description first, then a close-up reference screenshot, then explicit bug fixes.
07Featured products and image assignment
Splitting a complex section into two prompts, layout first with placeholders and then the real product images, lets you fix structure before worrying about photography.
An AI builder that flags a mismatched product image, like being asked for a gummy shot but given something else, catches content errors a human might miss when uploading images in bulk.
A 'new' badge and an introducing banner give returning visitors a reason to buy again, while a row of other products next to the hero product signals a wider ecosystem, not just one item.
08FAQs and finishing touches
A short, typical FAQ section at the bottom of a landing page gives space for final objections like dosing, side effects, and subscription terms, and makes the page feel complete.
Small polish requests, like nudging a section up to close a gap or adding arrows to flip between audience-specific hero slides, are worth doing last once the main structure is locked.
09Build recap and takeaways
Sixteen prompts across one afternoon produced a landing page the creator says would otherwise cost $10,000 to $20,000 from an agency.
The first prompt gets you most of the way to a finished section, but the AI doesn't know your vision, so matching a specific reference still takes repeated, more specific iterations.
Glossary
Terms worth knowing.
Amboras
An AI-native ecommerce platform that replaces a traditional site builder like Shopify, letting a store owner describe changes in plain language to an AI model that edits the live page and also handles fulfillment and orders.
Visual Edits
A targeted editing mode in an AI website builder where you click the exact element on the page you want changed instead of describing its location in a text prompt.
NSF Certified for Sport
A third-party testing certification supplement brands use to show a product is free of banned substances, commonly cited as a trust signal on supplement landing pages.
Comparison table
A pricing section that lines up a brand's tiers or products side by side with checkmarks and dashes, designed to make the most expensive option look like the obvious choice.
“if you give people three options, most of them go for the middle”
a one-line pricing psychology rule anyone can apply immediately→ newsletter pull-quote↗ Tweet quote
08:51
“sixteen prompts in one afternoon, and we've got something that would have cost ten to twenty thousand dollars from an agency”
concrete cost comparison that proves the whole premise of the video→ TikTok hook↗ Tweet quote
09:20
“the AI doesn't know your vision, so you have to keep iterating to get something that matches what you actually want”
honest closing caveat that reframes the whole tutorial→ newsletter pull-quote↗ Tweet quote
The Script
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
17px
metaphor
In this video, I'm going to show you how to build a $10 ,000 per month landing page using Claude. And we're using one of the best landing pages in e -commerce as the blueprint. ag1 if you haven't heard of them they're the greens powder you've probably seen advertised on half the podcast you listen to ag1 is widely reported as the category leader in their market with their 2026 revenue projected at over 600 million dollars here's why that matters for us since the start of the brand ag1 has sold essentially one product and it's sold almost entirely through their own website so their home page isn't just built to look nice it's doing the selling for a business making hundreds of millions of dollars a year if you want to know what a landing page that actually makes money looks like, this is it.
If you run a brand, you probably know the problem. You've got a good product, but your store, it looks like every other template out there and it's not converting. And you probably want a page that looks like these million dollar brands, but you don't want to pay thousands of dollars for an agency to do it for you.
And if you've tried building with AI, you've probably ended up with something that screams that AI built it. And nobody buys from a page that looks like that. So here's what you're going to walk away with.
A full $10 ,000 a month landing page for your brand built in one afternoon. with Claude. This is the kind of page an agency would charge $10 ,000 to $20 ,000 for.
You don't need to code and you don't need a designer. Today, we're going to be using Imborus. It's an e -commerce platform that plugs directly into Claude, OpenAI, and many other AI models.
It manages fulfillment, handling your orders, and everything else Shopify does. But we're going to use it today because it has Claude and all the other AI models directly into it. And we're not copying it blindly.
A page like AG1 makes money because every section has a purpose. So for each one, I'll show you exactly what AG1 is doing. why it converts.
Then we rebuild it for our own brand. I'm using a demo creatine brand called C1, so everything green on their site will become blue for our brand. We'll go down the page in order.
The top of the page, the product lineup, the ingredients carousel, and the featured products. Fair warning, it won't be perfect first try, but I'm not going to edit it out. You'll see every prompt I use, including where Claude gets things wrong.
Knowing how to spot what's off and actually fix it is what separates a page that sells versus one that doesn't. So I'm on the Amboras homepage and I'm going to jump straight into my store. And this is where we're just starting.
No nav bar, no hero, just a title and a shop now button. It's basically a blank page. I've already got some product images ready for my brand, the pouch, the gummies, and the satchets.
You can use your own product images or just generate them directly in the platform. And I'm actually going to generate a few later so you can see exactly how it works. On the left over here, this is the AI assistant.
This is where we'll do all the building. Quick disclaimer, everything in this video is for educational purposes. C1 is a demo brand.
The certifications, the prices, the products, they're all placeholders. We're not affiliated with AG1 and we're not using any of their photography. I've screenshotted the top of AG1's page and I'm uploading that along with the image that I want for our hero.
Swap their green for our blue, a sales banner in that monofonts with a back to routine code. C1 top logo on the left, shop science and explore with a little blue bar below it. Cart and sign inside on the right, then the hero in the trust strip.
it to write all the copy and use the images i attached look it's taking a screenshot of the page and verifying things and letting me know what it's done i want to see what this looks like properly so i'll hit publish in the top right then the preview icon so i can view it full screen okay the banner looks right there's the blue bar in the mono font it even wrote the copy strength simplified the layout has the right idea but there's a few things that are off everything in the navbar looks too small especially the logo and it's not using the width of the page the way ag1 does the hero copy isn't filling the space and the image looks compressed and it stops way too high up on the page.
So I'm going to give it better references. I'm just screenshotting the nav and then the hero copy so it can zoom in on exactly what I mean. Here's a quick tip.
The more specific the screenshot, the better the result is going to be. If you give it a full page screenshot, it has to guess what you actually care. When I prompted it, notice how I gave it a number for the image.
Bring the image down a bit. is too vague but when i say stop 10 to 20 from the bottom it can actually do what i want and you can see it taking screenshots zooming in and checking its own work okay the logo is way bigger the fonts are much closer to ag ones and now the image runs down the page properly now but it over corrected the headline is huge and the text is eating up the page the nav links aren't lined up with everything else and the subtext is long and it's full of m dashes which is honestly the fastest way to see that you're using ai to write your copy I'm just going to ask it for a few more tweaks.
Center the shop, science, and explore links in the nav. I mentioned how the text is taking up way too much of the hero and to cut all the subtext under the headline so it's shorter and don't use any em dashes. I also attach the reference images again so it can see what I'm asking for.
As it's generating, this is already looking so much better. The links are centered, the subtext is shorter, and there's no em dashes. Sometimes it just takes a few extra prompts to get it to look perfect.
If I was being really picky, I would say the title text is still a little bit big and the body copy is too, and the trust strip is slightly different from AG1's, but it's good enough. So I'm leaving it and moving on.
You can always come back later as well. Three prompts and the top of the page is done. Now it's time for the next section, the three product cards.
We'll be using AG1 for every single one. The job of this section is to give every visitor a door. Someone who hates seeing the powders sees the gummies.
Someone who just wants the full thing sees the top tier. So instead of seeing one product you either want or don't, there's an option for whoever is on the page. Look at the middle card.
It's the one that stands out visually with a most popular badge on it. If you give people three options, most of them go for the middle. So that's the only one they make hardest to miss.
And under every monthly price, there's a price per serving that shows the smallest number. Right under that, there's a comparison table. Notice how the top tiers column fills with check marks while the others trail off to dashes.
I'm uploading a screenshot of this section and the three images for the cards. And I'm asking it to rebuild it with rounded corners, the same fonts we're using. Call it C1 for everyone and asking it to make up the tiers, prices, and the benefits.
And honestly, in one prompt, it recreated it almost exactly. There's the header, the three rounded cards, and the blue most popular card in the middle. A supplement facts link on each click.
I don't need to change anything on this part. Now, the comparison table. For the prompt, I'm just asking it to recreate it exactly, but invent three new tiers for our brand.
I'm also making sure it copies the spacing and proportions exactly. All right, it's really close. It has the three tiers and the blue check marks.
The one thing I don't like is the C1 logo at the top. Right now they're blue, but I'd much rather them be black. This is a small specific change, so I'll use the visual edits for this.
Head to the chat box, select visual edits, and then click the exact element on the page. For this, I'm clicking the C1 logo, and now it knows exactly which element I mean. I don't need to describe where it is on the page.
For more detailed changes like this, visual edits is the way to go. You can also just change these things manually in the store without needing to prompt it at all. All right, that worked.
All three of the logos are black now. Next is the quality ingredients section. There's a dark green panel and tall cards with one ingredient per card.
hard and it's always moving. Here's why it's there. The ingredients on the label are very hard to picture, so they break it down into ingredients and give each one a beautiful close -up photo.
This carousel loops forever. There's no edge, so you can just drag it and it keeps going. Then there's details.
The ingredient name sits at the top and the blurred look makes it feel very expensive. Now, I'm not taking photos. Those are theirs.
Instead, I'm uploading screenshots of the section and asking Boris to generate our own versions in the same style. I'm having it use the ingredients that actually make sense for a creatine brand in our brand colors. You can see that images are generating right here in the chat.
It's matching the shot style, the reference, the lighting, the macro shot, but this time it's using our colors. We have creatine powder, sea salt crystals, magnesium, and a blueberry. It also went ahead and built the section, which saves me a step.
But when you put it next to AG1's, it still doesn't look the same. There's no blur behind the captions or anything. So I'm going to make sure it adds the blur and also it doesn't scroll forever.
So I made sure it goes in a loop. Now it loops. There's a nice blur in the background and it pauses when you hover over it.
So it's not sliding away when someone's reading, but the frosted part still isn't there. It says it added it. but it doesn't look the same as AG1.
So instead of describing it again, I'm just gonna give it a screenshot. I'm uploading a closeup of one of their cards plus the whole section again so it has all the context it needs. All right, it's much closer now.
It has the real frosted glass, but it's not exactly like AG1's. If I wanted it to be pixel perfect, I could just keep prompting, but this is a good place to start. Two last things though.
There's a weird bar sitting above the blur and the bottom corners are pointed instead of rounded. So I just prompted it to fix those two changes and it did that really well. The bars are gone and the corners are rounded.
That was four prompts for this whole section, but it's the most complex thing on. page with generating images a carousel and the frosted glass next up featured products it's a big banner introducing their newest product then a row of product cards with badges and crossed out prices two things going on here first novelty there's always something new a new badge and introducing banner it gives returning visitors a reason to buy again second the ecosystem it's not just the hero product anymore there's other products sitting right next to it i'm splitting this one into two prompts the layout first with the placeholders then the product images that way i can get the structure right before i worry about the photos okay the section looks good now i just need to upload my product images i'm just telling it which image is which and letting it assign it itself and they drop straight in one thing you'll notice the single has a white background so it looks a little bit out of place compared to the others that's just the product photo not the build so a better photo will fix it it also caught that i asked for gummies but none of the four images i sent was
actually a gummy shot. I sent the wrong one. It's nice that it flagged it instead of just guessing.
All right, now just for the last few bits, page like this needs somewhere for the final objections to go. So I'm adding an FAQ at the bottom. I prompted it to create a typical FAQ section and put it at the bottom of the page just to make it look more complete.
FAQs are in. Nine questions covering the dosing, bloating, testing, and subscriptions. And they open and close when you click them.
Then two finishing touches. The C1 for everyone's section is sitting too far down from the trust banner. So I just want it brought up slightly without touching anything else.
And the AG1's hero has arrows on the left and right to flip between the slides. That's how they speak to different audiences from the same page. And then I prompted it to add something similar.
I don't have the swiping functionality, but I just had it added as a base. So that's the full page. 16 prompts in one afternoon.
And we've got something that would have cost $10 ,000 to $20 ,000. from an agency. And here's why the AG1 page works.
It feels premium before you even read a word. It answers the credibility problem straight away. It gives every visitor a product that fits their needs, and it makes upgrades obvious.
It turns the ingredients into something you can actually see, and there's always something new to look at. On the building side, the first prompt gets you most of the way there. Just remember, the AI doesn't know your vision, so you have to keep iterating to get something that matches what you actually want.
Thanks for watching. The prompts I used and the link to the platform is in the description if you want to try it out for yourself. We'll be doing a lot more rebuilds and interesting videos in the future, so follow along to see what we do next.
The Hook
The bait, then the rug-pull.
The promise lands before the first minute is up: a landing page an agency would charge $10,000 to $20,000 for, built in a single afternoon with nothing but a screenshot of AG1's homepage and a prompt box. What follows is a real-time rebuild of that page for a demo creatine brand, prompt by prompt, wrong turns included.
Frameworks
Named ideas worth stealing.
01:37list
Section-by-Section Reference Rebuild
Nav and hero
Three-tier product cards
Comparison table
Ingredient carousel
Featured products
FAQ
Instead of cloning an entire reference page in one prompt, break it into its structural sections and rebuild each one with its own screenshot, images, and copy prompt.
Steal forrebuilding any multi-section landing page with an AI site builder
04:35concept
Three-Door Pricing
A three-tier product lineup gives every visitor an option that matches their intent, with the middle tier marked 'most popular' and visually distinct so indecisive buyers default to it.
Steal forany product or service page selling more than one tier or package
CTA Breakdown
How they asked for the click.
VERBAL ASK
09:20link
“The prompts I used and the link to the platform is in the description if you want to try it out for yourself.”
Low-pressure resource CTA delivered during the sign-off, pointing to the description for the platform link and prompt sequence rather than pushing a sale.
Add Modern Creator as a preferred source and Google shows you more of our breakdowns in Search, Top Stories, and AI Overviews. It only changes what you see, and you can undo it in your Google settings anytime.
Add to Preferred SourcesOpens your Google source preferences with us pre-loaded. Tick the box and you're done.
A breakdown of four patterns found across 10,000 email campaigns for 150 ecommerce brands, several of which contradict standard email marketing advice.
A paid-social agency opens a real Meta ads account on screen to show why three to five ads carry most accounts, and the weekly system that keeps new winners coming before the old ones fatigue.
A 17-year ecommerce operator with $460 million in sales explains why one AI tool erased big brands' structural edge on Shopify, and the two moves that took a bootstrapped two-person brand from zero to a $1M/year pace in seven months.
A 12-minute teardown of real landing-page heroes, showing exactly when a photo, illustration, or AI-generated face helps the pitch and when it quietly kills it.
A 38-minute walkthrough of a nine-step agency workflow that turns a curated swipe file, an ad-data MCP and an image model into hundreds of launch-ready static ads a week.
00:11
00:16
00:29
00:31
00:40
00:48
00:56
01:03
01:14
01:25
01:34
01:37
01:50
01:54
02:01
02:09
02:24
02:31
02:39
02:46
02:54
03:01
03:06
03:25
03:30
03:38
03:49
03:53
04:00
04:05
04:15
04:23
04:30
04:39
04:45
04:52
05:07
05:17
05:22
05:26
05:37
05:45
05:59
06:06
06:15
06:21
06:29
06:37
06:43
06:51
07:02
07:13
07:21
07:27
07:35
07:42
07:51
07:58
08:05
08:19
08:27
08:34
08:39
09:00
09:03
09:09
09:21
09:27
09:34
09:41
09:54
11:08
18:28
12:31
12:42
38:03