Modern Creator
JavaScript Mastery · YouTube

I Vibe Coded a $50K Website in One Weekend Using AI

A 21-minute breakdown of the 7-step agentic workflow that built a cinematic 3D basketball ecommerce site — and got the creator of Three.js to notice an anonymous developer.

Posted
3 months ago
Duration
Format
Tutorial
educational
Views
201.3K
8.3K likes
Big Idea

The argument in one line.

The gap between mediocre AI output and award-winning websites is not the model — it is the process: structured context, locked references, surgical iteration, and isolating one problem at a time.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • A frontend developer who has tried vibe coding and keeps getting messy, unusable output despite putting in real effort.
  • Someone who wants to build high-end 3D or interactive web experiences but assumed they needed years of shader or Three.js expertise.
  • A freelancer or solo builder who wants to understand how agentic workflows actually hold together across a real production project.
  • Anyone who has gotten good first-draft output from AI but does not know how to iterate toward something shippable without breaking what works.
SKIP IF…
  • You are looking for a beginner introduction to React, Three.js, or GSAP — this assumes you understand the stack and focuses on workflow, not syntax.
  • You want a passive watch — the value is in pausing and applying the seven steps, not absorbing them in one sit.
TL;DR

The full version, fast.

Vibe coding is not prompting randomly and hoping — it is a seven-step structured process. Before touching a tool, you study references and use AI to extract the design system. You lock goals with hard constraints. You generate a master prompt that prohibits AI from improvising. Then you iterate with specific, measurable feedback — always ending with "fix only these items, do not change anything else" — and you solve one isolated problem per conversation. The result here was a cinematic, scroll-driven 3D basketball site under 3 MB, built by one person with Gemini. The site earned five freelance clients and a job offer before anyone knew who built it.

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.

Create a free account →
Chapters

Where the time goes.

00:0002:40

01 · Introduction — the incognito mission

Cinematic demo of the Slam Dunk 3D site, reveal that the anonymous developer (the_bug_dev) was a team member on a mission to prove credentials do not matter, five clients and a job offer followed.

02:4003:55

02 · What this is not — and what it is

Distinguishes random AI prompting from structured agentic development. Announces the AI course waitlist.

02:4007:30

03 · Tech stack + site walkthrough

React 19, Three.js via React Three Fiber, GSAP, Gemini Pro. Scroll-driven 3D physics, aerodynamics section, procedural leather texture, Web Audio API cart sound, add-to-cart animation.

07:2608:14

04 · #1 Research before you prompt

Study reference sites before writing a single prompt. Use AI to extract the full design system — colors, typography, spacing, animation patterns.

08:1408:54

05 · #2 Define goals before you open the tool

Lock constraints first. AI performs better with constraints and regresses with vague instructions. List goals before any prompting starts.

08:5414:02

06 · #3 Build a master prompt

The biggest differentiator. A structured document that locks the reference, extracts the design system, and prohibits AI from improvising. Demo of morphen.ai SaaS that generates these automatically.

14:0215:40

07 · #4 Iterate surgically

Specific measurable feedback only. Always append: 'Fix only these items. Do not change anything else.' Vague feedback causes regression.

15:4016:38

08 · #5 One problem at a time

Each isolated problem gets its own conversation. Never ask AI to hold an entire project. Verify before moving on.

16:3817:16

09 · #6 Understand what you ship

You do not need to write shader math from memory but you must understand what each piece does. Blind paste-and-ship leaves you helpless at the first bug.

17:1617:56

10 · #7 Build in public

Share the messy middle — iterations, wins, failures. The anonymous developer's openness is what caught the Three.js creator's attention.

17:5621:16

11 · Is front end dead? — and the real conclusion

AI compresses years of specialized learning into weekends. The skill is no longer writing code — it is knowing what to build and describing it clearly. Developer becomes architect, AI becomes execution layer.

Atomic Insights

Lines worth screenshotting.

  • Telling AI 'the layout feels off' creates more chaos — telling it 'hero container should be max-width 1200px and centered' gets it fixed in one round.
  • Always end an AI iteration prompt with 'Fix only these items. Do not change anything else.' Without that line, regression is guaranteed.
  • Asking AI to build a 3D ecommerce website in one prompt gives you a shitty website. Each isolated problem deserves its own conversation.
  • The creator of Three.js noticed an anonymous developer's work within weeks of posting — not because of credentials, but because the work and process were shared openly.
  • AI compressed years of shader documentation into a single afternoon — not by being smarter, but by having the right constraints and feedback.
  • A master prompt is a structured document that locks the reference design as the only source of truth and explicitly prohibits AI from redesigning, simplifying, or reinterpreting any element.
  • You do not need to write shader math from memory, but you must know what each piece does — blind paste-and-ship leaves you helpless at the first bug.
  • The 3D-to-2D cart animation required translating coordinate systems, calculating a curved flight path, and making it work across all screen sizes — it failed multiple times before converging.
  • Procedural leather texture took 4-5 iteration rounds of specific feedback: 'bumps too large,' 'seams too thick,' 'surface too uniform — add variation.'
  • The entire Slam Dunk site ships under 3 MB — the basketball is pure math, not an image file.
  • AI wrote the shaders. AI did not decide a basketball should fly into a shopping cart. Vision and taste are not compressible.
  • The model where you grind years on one narrow skill set and that carries your career is changing — AI compresses specialized learning into weekends.
Takeaway

Seven rules for getting real work out of AI.

WHAT TO LEARN

Vibe coding only produces junk when the process is missing — lock the reference, isolate every problem, and mandate that AI touch nothing you did not ask about.

01Introduction — the incognito mission
  • An anonymous online presence can attract serious professional attention when the work itself is consistently high-quality and publicly documented.
  • Credentials and credentials alone do not determine what opportunities come to you — demonstrated output does.
03Tech stack + site walkthrough
  • Browser-native APIs like Web Audio can synthesize sounds in real time with no file downloads, keeping bundle size small while adding sensory richness to an interface.
  • Bridging 3D canvas coordinates to 2D HTML coordinates is a genuinely hard problem — expect multiple rounds of iteration, not a first-draft solution.
04#1 Research before you prompt
  • Before prompting, use AI to analyze reference designs and extract the full design system — treating the analysis phase as a separate step produces better input for the build phase.
  • Asking what makes an animation functional versus decorative is a more useful question than asking what looks cool.
05#2 Define goals before you open the tool
  • AI performs better with constraints and regresses when asked to fix broad problems — so reduce ambiguity before the first prompt, not after the first failure.
  • Listing specific, measurable project goals (immersive 3D, scroll-driven storytelling, all visuals from code) creates natural quality criteria you can test against.
06#3 Build a master prompt
  • A master prompt is not a description of what you want — it is a structured governance document that tells the AI how to behave for the entire project.
  • Extracting typography, color palette, layout structure, and animation patterns from a reference before prompting is the step most people skip, and it is where most AI output falls apart.
  • The instruction 'do not try to improve the design' is necessary because AI defaults to adding unsolicited enhancements that break the reference.
07#4 Iterate surgically
  • Specific, measurable feedback — pixel counts, named elements, exact behaviors — gets fixes done in one round. Vague feedback multiplies problems.
  • Ending every correction prompt with 'do not change anything else' is not politeness — it is the only reliable way to prevent AI from breaking working code while fixing broken code.
08#5 One problem at a time
  • Isolating each problem into its own conversation prevents context contamination — the AI can focus fully on one constraint set without the noise of the entire project.
  • Prompts like 'generate a 3D ball using custom geometry in Three.js' or 'synthesize a click sound using the Web Audio API' are complete, verifiable tasks. 'Build me a 3D ecommerce site' is not.
09#6 Understand what you ship
  • Being unable to write something from scratch is fine. Being unable to explain what it does is a liability — the next bug will expose the gap.
  • Letting AI write the first draft and then reading it to understand the structure before shipping is a discipline, not a formality.
10#7 Build in public
  • Sharing iterations, failures, and process is more attention-generating than a finished portfolio because it gives others something to engage with at every stage.
  • Starting before you have a perfect body of work is not a workaround — it is the mechanism by which the body of work gets built.
11Is front end dead?
  • AI compresses years of specialized learning into weekends — the implication is not that expertise is worthless but that the time cost of acquiring it has dropped sharply.
  • The work that AI cannot do — deciding what to build, why it matters, what the interaction should feel like — is exactly the work that differentiates one developer from another at the output level.
  • Spending less time writing syntax and more time designing systems is a shift in what 'being a developer' means, not a threat to whether developers are needed.
Glossary

Terms worth knowing.

Agentic development
A structured workflow where a developer directs an AI agent through defined steps and constraints rather than issuing one-off prompts, treating the AI as a programmable execution layer rather than an autocomplete tool.
Master prompt
A project-level document given to the AI at the start of a build that locks the reference design, specifies the design system (typography, colors, spacing), and prohibits the AI from making creative decisions outside the brief.
Context engineering
The practice of deliberately structuring the information and constraints given to an AI so that its outputs stay consistent and on-target across many conversation turns.
Spec-driven development
Writing explicit specifications for what you want — goals, constraints, edge cases — before any prompting begins, so the AI has a measurable target rather than an open-ended invitation.
React Three Fiber
A React renderer for Three.js that lets developers build and manage 3D scenes using React component syntax rather than raw Three.js imperative code.
GSAP
GreenSock Animation Platform — a JavaScript library for high-performance, timeline-based animations often used for scroll-driven sequences on the web.
Procedural texture
A texture generated entirely by code (typically shader math) at render time rather than loaded from an image file, allowing infinite resolution and zero file size overhead.
Web Audio API
A browser-native API for synthesizing, processing, and playing audio entirely in JavaScript without loading any audio files.
Resources

Things they pointed at.

Quotables

Lines you could clip.

06:15
The skill isn't writing code anymore. The skill is knowing what to build, why build it, and being able to describe it clearly enough so that AI can execute.
Quotable thesis with no setup needed — lands as a standalone insightTikTok hook↗ Tweet quote
15:18
Without that line at the end — fix only these items, do not change anything else — AI will try to be helpful and fix things you don't ask about. That's how regression happens.
Specific tactical advice with a memorable consequenceIG reel cold open↗ Tweet quote
14:09
I never asked AI to build me a 3D ecommerce website. That prompt will give you a shitty website.
Blunt opener that reframes what vibe coding actually requiresTikTok hook↗ Tweet quote
18:33
AI didn't decide that a basketball should fly into a shopping cart. AI didn't think — what if ecommerce felt like a video game? That was vision, taste, a sense of what should exist.
Clean reframe of what AI cannot replacenewsletter 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.

metaphoranalogystory
00:00Check this out. A basketball you can almost feel through the screen. Scroll driven animations that move the three d model through sections like a cinematic sequence.
00:10Click add to cart and the ball jumps across the page and lands into the icon. With hover effects and sound effects, it's a full product showcase.
00:20And this whole thing was vibe coded entirely using AI. One developer, no team and no agency, just one person and an AI agent having a very long conversation.
00:34Now here's where it gets interesting. The developer goes by the bug dev on X. No real name, no portfolio, and no credentials.
00:42They showed up out of nowhere, started posting these AI built projects, and within weeks, the creator of Three.
00:50Js himself noticed their work. Five client projects followed and even a job offer. But what nobody online knows yet is that the bug dev is actually a member of our team.
01:04I sent them on an incognito mission to answer one question. Can the work speak entirely for itself with zero reputation behind it?
01:14It did. So today, I'm gonna rip this entire project apart. Every feature, every decision, and most importantly, the exact process we used to vibe code this with AI so that by the end, you'll have a system you can use to build projects like this for yourself and your clients.
01:35Now before we go deeper into this project, let me clarify something important. What you're seeing here isn't AI magically building a website. This is a process.
01:45Right now, most developers experimenting with AI are still using it like autocomplete. They paste the screenshot, they type build this and hope it works. Sometimes it does, but most of the time the result is messy.
01:58What we're doing here is different. We're using a structured workflow for agentic development, a system for working with AI instead of randomly prompting it.
02:08And I've been documenting this entire process while building projects like this one. And because so many people have been asking how this actually works behind the scenes, I'm turning it into a full course on agentic development. It covers the exact workflow we are using here, the master prompting system, spec driven development, context engineering, and how to actually build production projects with AI.
02:31So if you wanna learn this properly, join the waitlist in the description. But first, let me break down exactly how this project was built.
02:40Tech stack includes React nineteen, Three. Js through React three Fiber for the three d, and GSAP for scroll animations, all vibe coded through Gemini and Google AI Studio.
02:53When you first land on the site, it looks like a clean product page. Then you scroll. And as you scroll, the basketball physically moves, rotates, and morphs into different stages.
03:06And if you keep scrolling, you'll transition into aerodynamics with ball repositions, camera angle shifts, and text floats perfectly synced with the three d model.
03:17The ball isn't decoration, it's telling a story. First, there's the physics section, then podium, and then the product showcase.
03:27And the hard part wasn't even the scrolling itself. It was keeping the three d ball and the flat two d text perfectly aligned on every screen size, phone, laptop, four k monitor.
03:42Gemini even built a custom react hook that constantly recalculates the three d scene dimensions to match the website layout.
03:51If you zoom in on the basketball, can you see that texture? That pebbled leather surface, the seam line and the subtle bump that makes it look like you could reach through the screen and feel the grip?
04:03How did we get to that? Well, I went to Gemini and prompted, generate a procedural leather texture with pebbled surface using noise.
04:13It should feel like a realistic three d basketball. The first output wasn't even close. Four or five rounds of iteration make the bumps smaller, seams are too thick, or surface looks too uniform so add more variation.
04:29Each time AI adjusted and each time we got closer to reality. Then a performance problem.
04:37Generating high resolution noise was killing the frame rate. Too much math per frame. So back to Gemini, I said, this is slow.
04:45Fix it. And one conversation later, Gemini found redundant calculations and suggested dynamic resolution scaling.
04:54Could you, as a developer, figure this out manually? Sure. Over weeks of reading shader documentation.
05:02AI compressed it into a single afternoon. And same approach went for audio. Implement a cool sound effect when the user clicks add to cart.
05:13The browser will produce a sound using the Web Audio API with no audio files downloaded. It just works in real time.
05:22But the cart animation was super difficult. See, this three d ball lives inside a canvas with its own coordinate system with depth and perspective. The cart icon lives in a regular HTML, two different worlds entirely.
05:38To make the ball fly into the cart, you need to translate the three d position to two d screen coordinates, calculate a curved flight path, animate along that curve while shrinking the ball, and make all of it work across all screen sizes. One bad calculation and the ball flies into the wrong corner, which happened multiple times.
06:02I was yelling at Gemini, arc is too flat or it's overshooting on mobile, but each round we get closer until it worked.
06:11Notice the pattern here? It's never one prompt. It's a conversation.
06:17Specific feedback, targeted corrections build toward the result.
06:22That's the process. Now the process I'm about to show you is the part that most people never see. On X or LinkedIn, you'll mostly see the result of a cool demo, a a finished website, or maybe a viral post.
06:36What you rarely see is the workflow behind it. The prompts, the iteration loops, and the way you structure context so that AI actually understands what you want.
06:48This is exactly the system we've been developing internally while building projects like this one, and it's the core of the AI course we're working on right now.
06:57Most people use AI at maybe 30% of its potential. Open up a chatbot, type build this, paste the screenshot, and pray.
07:07Sometimes it works, and most of the times you get mediocre output and blame the tool. The gap between average AI output and what you saw isn't the tool. It's the process around the tool.
07:20So as I promised, let me teach you my system so that you can fully replicate it on your own websites. It has seven steps, so let's start with the first one.
07:30Research before you prompt. Most people skip this. Before writing a single prompt, we studied references, car configurators, awards winning sites, and three d product experiences.
07:43Not just that looks cool, but we broke each one of them down. What's the layout structure?
07:50What's the spacing rhythm? How is typography organized? Are animations decorative or functional?
07:56And how does the responsiveness work? And here's the kicker, we used AI to do the analysis. Feed a reference design into Gemini and ask it to extract the entire design system, colors, spacing, typography, and even animation patterns, all before building anything.
08:14Step two is to define goals before you open up the tool. AI performs better with constraints, worse with vague instructions, regresses when asked to fix broad problems, and improves when given scoped instructions.
08:31Your job is to reduce ambiguity before you start prompting. For this project, goals were locked before any prompting started.
08:41Immersive three d ecommerce, scroll driven storytelling, real time customization, every visual and sound generated from code, clear constraints, no room for AI to wander around.
08:54And step three is to build a master prompt. This is the biggest differentiator. The master prompt is a structured document that tells AI exactly how to behave for the entire project.
09:07I spent so much time tweaking this master prompt, so much in fact that I decided to turn it into a SaaS application. We've been testing it internally and essentially, it allows you to go from something like this to something much more animated and creative like this.
09:24The only difference being the master prompt that literally takes you seconds to generate. So you can head over to the dashboard, click new prompt, and simply upload your design reference.
09:34It can be an image or a video in case it has animations, and then click analyze design. And it'll analyze your design, which can take a moment or a couple depending on the complexity of your reference, and you'll immediately be redirected to a new prompt page where you can preview or edit this master prompt that was created for you.
09:54What I like to do here is just scroll to the bottom and save the prompt, which will then move it over into your prompt library where you can check it out in more detail, see the reference image you uploaded, and then use this prompt in whichever builder you prefer to use. I prefer Codex or ClodCode for more back end heavy tasks and then Gemini and Google AI Studio for these very creative landing pages.
10:17But for now, I just wanna go over the prompt with you. The master prompt starts with establishing authority.
10:24We tell it to act as an expert front end engineer and creative UI developer, and then we give it a goal which is to recreate the website shown in the attached screenshot with pixel perfect accuracy. Then step two is to lock the reference. We tell it to not redesign, not simplify, and not reinterpret any element.
10:46The reference image is the only source of truth. Follow all instructions below with extreme precision. This is so that it doesn't try to do something on its own rather that it tries to properly and accurately recreate the attached design.
11:00Then we have some general rules such as that all important design elements like layout, typography, color, and spacing must match the screenshot exactly, and if there are any images, it can source them from free image sites like these.
11:15But what matters even more is extracting the design system. Here I'm talking about typography, different fonts that it can find on the website and font sizes for every different type of text on the website.
11:28Of course, next to text, we have the color palette. So it was also able to extract the primary colors, the accents, the secondary colors, buttons, and more. And then there's the layout structure where we give it some guidelines to know where to place elements.
11:44And then we go further into the section breakdown. Basically here, we're telling it rebuild layout exactly as shown. Preserve the section order, alignment and container widths and proportions of all the different sections.
11:58Don't make any creative alterations. If there is specific imagery, such as the basketball here, we're telling it to use a hyper realistic isolated basketball image, but again, this is something that I significantly tweaked later on through the conversation with AI after I used this initial prompt where first I thought, yeah, it can be an image, but then later on we transitioned it to pure math so that the ball isn't even an image but rather a three d element that moves on the screen.
12:26The master prompt is great to start with, but then as you'll see with the further steps of my entire process, you still have to speak with it to get to the final output. Here, you can also see some animations and if you fed it a video, it will be able to generate these in a much more detail and have a whole section on it, responsive behavior, performance, and now this is what matters, visual accuracy.
12:49We tell it that all font sizes, weights, and letter spacing must match the screenshot.
12:55All spacing, alignments, and proportions must be pixel perfect, and all colors must match the screenshot exactly. So do not simplify or omit elements. Basically, don't invent things.
13:08Don't modify things. Don't skip the details. Do not try to improve the design.
13:14That's what AIs love to do, improve, but not often do we actually need those improvements. And finally, we tell it to return the final implementation. All instructions above must be followed with extreme precision.
13:26You can generate this master prompt yourself if you pass the reference design into any kind of an AI chat interface. But again, I did that so much that I decided to turn it into a SaaS so that I can create it more easily. Either way works.
13:39The next step is to then copy that master prompt, go to your preferred website builder, and paste it into your preferred website builder. But don't forget to also pass in the reference design itself, then run it and see what it's gonna come up with. Go ahead and experiment with a couple of different websites to see just how different these master prompts will get.
13:57You'll understand that they all follow the same structure but are a bit different depending on the reference design. And then that brings us to the step four of our process and that is to iterate surgically.
14:09I'll explain what I mean by that. But at this point, you'll already have a great looking landing page. It'll be significantly better than what you would have gotten if you just pasted the screenshot and told it, hey, build this website.
14:21But even the best master prompt won't produce perfection on the first try, which is completely normal. The mistake here is giving vague feedback. If you tell it that the layout feels off, it'll create even more chaos.
14:37But if you tell it hero container should be max width of 1,200 pixels and centered, it'll get it fixed in one round. Like, just compare these two approaches. If you tell it something looks wrong with the scroll, it's not gonna be good.
14:50But if you tell it scroll should transition from hero section to the second section where the ball size increases, appears in half, rolls over to section two, and then in section three reduces to normal size and sits centered. That's much more specific and measurable and targeted, and this is super important.
15:08Whenever you ask it to make some changes, always end with fix only these items. Do not change anything else. Without that line at the end, AI will try to be helpful and fix things you don't ask about.
15:23That's how regression happens. It'll break more things that it'll fix. So go ahead and exchange a couple of messages with your AI, try to do it surgically pointing to specific things that need to be fixed and improved, be specific, and let me know how far you can get.
15:38But another super important piece of advice is the step five of the process which is one problem at a time. I never asked AI to build me a three d ecommerce website. That prompt will give you a shitty website.
15:52Instead, focus on isolated problems. Each one is a separate conversation.
15:58For example, generate a three d ball using custom geometry and color maps in Three. Js.
16:05This is much more specific. Or write a shader that creates a nebula effect. Scroll the three d ball from hero section down with smooth the GSAP animations.
16:17Or synthesize a click sound using the Web Audio API. That way, you're isolating each problem. You're not just asking AI to hold an entire project in its head.
16:27You're giving it one job at a time and verifying each one works before moving to the next. So give it a shot and try to solve a couple of problems one problem at a time, and then continue with step six, and that is to understand what you ship.
16:43See, AI wrote code that we couldn't have written from scratch, shader math, procedural noise functions, coordinate system translations, but I made sure to understand what the code does before shipping it.
16:58If you blindly paste AI output without understanding it, the first time something breaks, you're stuck.
17:05You don't need to be able to write a shader from memory, but you do need to know what each piece does and why it's there. Let AI write the first draft, but you own the final version.
17:16And step seven is to just build in public. This is the lesson from that incognito mission that we did. We didn't wait until everything was perfect.
17:26We shared the process, the iterations, the wins and failures, And that openness is what caught mister Dub's attention.
17:34Not a polished portfolio, not credentials, but just the work and honesty found its audience.
17:40You don't need a perfect portfolio to start. You need to start. Share that messy middle part because that's where interesting stuff actually happens.
17:49If you follow all these seven steps, you should get very, very far in, well, very creative award winning websites. Iteration is the key, So follow the process a couple of times with a couple of different websites that you like and that you wanted to build for years but just didn't have the time to, and go ahead and build them this weekend.
18:08But if you'll actually be able to do this, and I promise you that you will because we did it, that brings us to a very important question. Is front end dead? Well, front end as we knew it, at least.
18:21The model where you grind for years mastering one narrow skill set and that carries your whole career, well, that model is changing fast because AI compresses years of specialized learning into weekends. You just watch the proof.
18:36But developers aren't useless, Not even close.
18:41AI wrote the shaders, but AI didn't decide that a basketball should fly into a shopping cart. AI didn't think what if ecommerce felt like a video game.
18:52AI didn't look at these boring product pages and decide to fix them. That was vision, taste, or a sense of what should exist.
19:03The skill isn't writing code anymore. The skill is knowing what to build, why build it, and being able to describe it clearly enough so that AI can execute.
19:15The vision and the taste is what you need to be able to stay relevant. And this incognito mission also proved something else. You don't need a big name.
19:25You don't need a following. We showed up anonymously, built incredible things with a clear process, shared them openly, and the work spoke louder than any resume could.
19:36People noticed, not because of credentials, but because of the work.
19:40So this is why learning this properly matters. AI isn't replacing developers. It's changing the role of what we do.
19:48So instead of spending most of your time writing syntax, you spend more time designing systems, defining constraints, and directing the implementation.
19:57The developer becomes the architect, and the AI becomes the execution layer, and that shift is happening right now.
20:06That's exactly why I'm building this AI course to teach developers how to actually operate in this new model. Again, if you wanna be notified when it launches, the wait list is in the description. But, yeah, this was how we built Slam Dunk three d, a three d basketball website where the browser builds its own textures, creates its own sounds, and runs its own shaders.
20:28The whole thing is under three megabytes. One developer, one AI agent, and a result that can actually speak for itself.
20:36So if you have a vision and a process, whether you're a senior developer or someone who picked up coding last month, AI just handed you a serious upgrade. Go follow the bug dev on x to watch the journey continue.
20:48There, we'll share our biggest successes. And if you're more into the exact workflow behind these projects, join the AI course waitlist below. But more importantly, go build something, experiment, break things, and share the process.
21:02Because right now, we are in a moment where one developer, one AI agent, and one good idea can produce work that used to take entire teams. So the real question is, what are you going to build?
The Hook

The bait, then the rug-pull.

An anonymous developer showed up on X with no name, no portfolio, and no credentials — and within weeks, the creator of Three.js himself had noticed their work. Five client projects followed. What nobody online knew was that this was a deliberate incognito mission to answer one question: can the work speak entirely for itself?

Frameworks

Named ideas worth stealing.

07:26list

The 7-Step Agentic Workflow

  1. Research before you prompt
  2. Define goals before you open the tool
  3. Build a master prompt
  4. Iterate surgically
  5. One problem at a time
  6. Understand what you ship
  7. Build in public

A sequential process for working with AI on production frontend projects. Each step reduces ambiguity before AI has a chance to wander.

Steal forAny client project where you are using AI to generate UI — run through these steps before opening a single chat window
10:23model

Master Prompt Structure

  1. Establish authority (role + goal)
  2. Lock the reference (no redesign, no simplification)
  3. General rules (layout, typography, color must match screenshot exactly)
  4. Design system extraction (typography, color palette, layout structure)
  5. Section breakdown (preserve order, alignment, proportions)
  6. Animation spec (if video reference is available)
  7. Visual accuracy mandate (pixel-perfect, do not omit elements)
  8. Output format (final implementation only, no commentary)

The full schema of the master prompt that prevents AI from improvising on any design decision.

Steal forAny pixel-perfect recreation task or design-to-code workflow
CTA Breakdown

How they asked for the click.

VERBAL ASK
02:04product
Join the waitlist in the description

First CTA appears at 02:04 mid-intro, before the product walkthrough even starts. Second CTA at 20:06 in the close. Both soft — no urgency pressure, just a link. The morphen.ai SaaS gets a full demo in the middle of the tutorial (09:15-14:06) that functions as its own embedded pitch.

Storyboard

Visual structure at a glance.

hook — Slam Dunk demo
hookhook — Slam Dunk demo00:00
incognito mission reveal
hookincognito mission reveal00:53
process vs random prompting
promiseprocess vs random prompting02:40
master prompt demo
valuemaster prompt demo08:54
morphen.ai SaaS walkthrough
valuemorphen.ai SaaS walkthrough10:23
is front end dead?
valueis front end dead?17:56
CTA — course waitlist + go build
ctaCTA — course waitlist + go build20:36
Frame Gallery

Visual moments.

Watch next

More from this channel + related breakdowns.

Chat about this