Tutorial: building a 3D landing page with Claude Code and Opus 5

This tutorial follows, step by step, the video by DesignCode (348K subscribers): building 3D Three.js landing pages with Claude Code and Opus 5. The sections mirror the video's order, with timestamps. It's a faithful walkthrough of what the creator shows, not a personal firsthand report: all figures and durations cited are those of his demo.

What the demo shows [00:00]

The video opens on three Three.js sites, each under one megabyte, fully 3D and interactive. You can ask the AI to change the weather, the lighting, the modeling. Rain effects, towers with animations, lighting from sunset to night. The creator insists: « game quality, but inside the browser ».

The reason for his enthusiasm is Opus 5. In his view, Three.js (often said as « 3JS ») is today the only real way to stand out, because everything else looks like AI slop. The three projects shown are open source: you can grab the source code, which he presents as the shortest path to a good result. One already shows 866 stars and 155 forks, and has been tested on mobile.

Move to Claude Code on desktop [03:47]

First step: download the Claude desktop app (macOS). It matters because everything must stay local, and the harness is far more powerful as an app than in the terminal: it accesses the computer, the files, all projects, but also the browser and computer use, which makes research much better.

The app is in transition, a bit messy in his words: it has Design, Chat, Cowork, and Code. You focus on Code, because most people know Claude through Claude Code in the terminal, and because Code is the closest to Codex, where the most professional work happens. An artifact is an isolated website (or something else); Dispatch is for mobile.

Organize your projects as folders [05:51]

A project is a folder on your computer, as always in development. The point of being local: being able to reference any of your other projects to give the right design references. To add a project, you reference the folder and open it.

His setup: everything starts from the Downloads folder (where he starts all work, downloads and references). Inside, a projects folder, and inside it subfolders per tech (React, HTML). A new habit: an HTML folder containing a list of standalone HTML files.

Why? To drop the idea that you must build a complex site every time. His definition of AI slop: when you try to do too much, ask something too vague, you get something extremely standard because you're not specializing, and the likelihood of slop becomes very high.

The built-in browser: the heart of the system [08:15]

This is where we're heading, he says. A side note: Codex stopped working on Atlas, its own AI browser, to bring everything into Codex/ChatGPT. The agent can go to any site (he cites GitHub and X, which he visits the most) to find a reference point and inspiration.

His recent inspiration sources:

• collectui.com - UI inspiration gallery.
• recend.design - another gallery cited.
• mobin.com - UI references, wireable as MCP.

He admits Claude Code's browser isn't as mature as Codex's yet, and that he prefers Codex for its more mature harness (browser, computer use). But Claude Code has a superpower: Opus 5 and Fable. Many love Fable; Opus 5 divides opinion, but for product design and landing pages he finds it really good.

Wire in the inspiration MCP (Mobin) [11:59]

Inspirations five years ago had no video; today everything is video. Good news: thanks to the harness, the agent has hands and legs. It no longer grabs just a screenshot, it grabs the inspiration with its animations, story, scroll, interactions. That makes the landing page far less slop, and the richness of the result makes a huge difference.

An MCP is an interface that lets the agent access that content. Instead of browsing yourself, you say: « go to Mobin, find the best mobile UIs for a travel app », and the agent connects to Mobin, does all the research and gets that richness on its own. You build an interface so the AI doesn't produce slop.

Installation: on Mobin there's an « install » option. Depending on harness maturity, sometimes you just give the URL and say « install this MCP ». For less mature harnesses, you follow the instructions one by one and run a few commands. When in doubt, give the URL and the agent does most, if not all, of the work.

The secret prompt: tiny [14:54]

Three to six months ago, you had to type everything by hand. He doesn't anymore. His analogy: think of AI as a camera. Anyone can shoot with their iPhone, but not everything becomes art: you must mold it, think of the reference as a mood board. Except here, you can build anything you imagine.

So: you copy the reference URL, open a project (here HTML), paste the URL and the deliberately short starting prompt:

recreate this in a single HTML file.
Self-verify until it's perfect.

That's all you need to start, and it's « the secret sauce ». The fine description (serif typography, etc.) comes later, after mood-boarding.

Two settings before launching: auto mode and Opus 5 [17:06]

Before, the mode was manual: you had to approve every edit, every browser use, every authentication. Now you enable auto mode. That's what he recommends all the time: safer than the full bypass-permissions (which he used before), and enough for 99% of people.

Second point, the most important: Opus 5 is the best in the world at front-end design, in his view. Many are disappointed because they use it at low or medium. His secret: always at extra (like Codex at extra high). At medium, it's clearly not as good.

Why? At low or medium, effort is low: less research, less patience, less time spent. Like a human, the more time, the better. His analogy: studying for an exam 5 minutes, 12 hours, or a week ahead isn't the same. Extra is his bare minimum to avoid slop and stay as close as possible to the inspiration.

What the harness does while it works [19:27]

Once launched, you see it works a lot. The difference from before is the amount of capabilities: browser and computer use. It understands the URL, downloads the video, dissects it, understands each frame, and gains a huge amount of context.

Before, if you said « I want the scroll from this site », it didn't understand what that meant. Now, even without a video, from a plain site URL to recreate, the AI can use a tool like Playwright to do the scroll for you, do the screen recording, then add all that context to build your landing page.

The only downside, he owns it: yes, it burns a lot of tokens; yes, it costs more; yes, it takes much longer. But if you value quality and want to avoid slop: (1) the best inspirations and references, (2) the best model and harness for all that analysis and perfect replication, (3) the molding, which he's about to teach.

Mold: transform the replica (Daniel Snow) [21:42]

The replica is only the base; it will grow. The work: growing your vocabulary, your taste, your ability to test what works and to see where the AI will struggle. One of his projects looks nothing like its first version, maybe 10% resemblance. His inspiration came from Daniel Snow (on Instagram).

Like any inspiration (Apple draws from Dieter Rams), the essence remains, the taste. Choosing your reference is already a key decision, to be practiced, drawing on the people you follow and their own inspirations. Shared traits with the reference: Japanese style, grass in the foreground, large text partly hiding.

But he chose to make it 3D, whereas the original is an image (or a transitioning video) in the background. Same grass, same large text in front, same little red Japanese gate (the Kyoto torii). He explicitly asked for Three.js. So you can put that in the prompt if you want to stand out: something cartoon you want in 3D, HTML you want in Three.js.

The vocabulary to develop, from his additions: falling leaves, moving wisps, orbiting 3D, the scroll moving from one scene to another.

Textures, transparent PNGs and shader effects [24:52]

He shows a very good cloth effect, via a site called canvasui.dev, which adds shader effects on top of the HTML. Concretely: crazy effects (water, cloth) directly on the UI rather than in a separate layer. « If you don't understand, that's fine: it's cool, give it a try. »

What he spent the most time on: asking the AI to add textures. Today you can use a recent video model (he cites Kling 2.5) to generate a video instead of doing 3D, or an image model (Higgsfield and its model, GPT Image 2, or new models of comparable quality).

A key thing to ask for: transparent PNGs. Elements that can sit on top of any element or site, rather than a framed image that can't overlay anything. In the Daniel Snow case, it would be a transparent PNG image: the branches, the leaves, the gate. You stack the layers this way to create the landing page's parallax effect.

Before, you organized all that manually in Figma - doable, but time-consuming. Now you drive it by prompt: « I want transparent layers, in front, orbiting, with parallax ». That's the kind of vocabulary to use when prompting these changes.

In the demo, at 12 minutes of generation, it's still not done: it really takes its time, and that's not a bad thing. You see him using the Higgsfield CLI (mentioned in a previous video, with an MCP) to generate images and videos across several models (Kling, GPT Image 2), even 3D models.

On the Japanese temple shown: at first it lacked detail. He gave more references, generated more, and let the AI guide him like an art director: it proposes references (« this Japanese temple, shall we model after this image? yes/no »), and you converge on the wanted result through taste.

Freeze what works into skills [30:12]

Skills are one of the most important things. He published his own skills (everything he does with Codex and Claude Code) and was surprised to reach 4.7k stars: demand is huge. He uses them daily, including to fetch his daily inspiration, or to automate a result he likes into different styles and textures.

For 3D and game development, he creates skills for textures, weather effects, camera orbit, rotation. Anything you want to remember and reuse, you ask the AI to turn into a skill: style, weather effect, time of day.

A favorite: turning a video or a URL into a super-prompt. The super-prompt describes the whole site; since it's a description, you can ask the AI to change the brand from the start, instead of getting the result first then molding it. Caveat: many skills date from a less mature harness. Today, if the URL already contains everything (video, method, source code), you have it all: from that prompt, you can say « I want this but in western style », « with a knight and a castle ». That's where you use your imagination instead of exact replication.

Finding skills: skills.sh [33:45]

To add skills, he recommends the site skills.sh. Examples cited:

• Grill me - when you have an app idea and want the AI to grill you and give blunt, cutthroat feedback.
• Front-end design - once amazing, now less necessary: the technique shown is far more efficient, and the agent browser is a harness job.
• Write like a human / anti-slop - remove phrasings that sound like AI, very useful in design as in code (he cites « kill AI slop »).

He notes it's better to go straight to the source code of an already open-source project: you use it without fear of being too similar.

The result, then prototype [35:38]

After 40 minutes, the result is there and it's accurate. To be used as a study, he says: he won't use it as is, it's for studying. Comparing to the inspiration, the replication is stunningly faithful.

Then comes what Claude design introduced: options to prototype. You can customize the style, the words, the content. That's what you should do in the creation stage: never settle for the reference, always experiment with the layout. You can ask the AI to prototype and give options to play with typography, layout, colors, text, styling, borders.

Once satisfied, you tell the AI: « I'm happy with this one, make these changes permanently », and you move on. Another important point: change the images. In Codex, image generation is embedded; in Claude Code, you go through a tool like Higgsfield. « Generate new images in a new theme »: for example a restaurant, but in this layout style, in a rustic version.

Then you may move to video: not every concept fits, but you can say « animate this, turn it into a video ». It's good for the hero, fairly inexpensive, with a recent model (Kling 2.5). You also experiment with light/dark mode, textures, and add effects from canvasui.dev: you copy an effect's prompt (e.g. a flame) and paste it in the input to apply it.

Publish and open-source [38:47]

His final advice: once happy with the workflow (a small skill, a component, or the whole landing page), turn it into skills, make it yours and very different, recreate new themes, open-source and share.

On GitHub, he advises getting into it as you gain confidence: version history, hosting, collaboration. And above all open source, which he long neglected and which brings him a lot of success - not the kind you'd expect: an audience, a portfolio. Many engineers use GitHub as a showcase (stars, a following) to convince people to hire them. Today, since anyone can build anything with AI, open source shares the lessons learned: people can look at the source and use it as a blueprint for their landing page. Win-win-win.

The demo ends at 44 minutes without being finished: it works very hard, simply because it's Opus 5 and it can run for hours, in exchange for the best result - all the 3D in code, under one megabyte.