3D landing pages with Claude Code and Opus 5: the anti-slop workflow

A video by DesignCode is going around right now about building 3D landing pages with Claude Code and Opus 5. The result is striking: interactive Three.js scenes, weather and lighting changeable by voice, all in a file under one megabyte. More than the demo, it's the workflow that deserves attention. I summarize it here without having tested it myself: this is a review, not a firsthand report.

The real subject: escaping AI slop

AI slop is the default output. A vague prompt, a lazy model, and everyone gets the same lukewarm page. The video's thesis boils down to three levers to escape it:

1. The best reference - a real source of inspiration, with its animations and scroll, not a vague description.
2. The best model, pushed to the max - Opus 5 at maximum effort, not medium.
3. Molding - turning the initial replica into something personal.

The harness matters as much as the model

The central point: the agent no longer settles for a screenshot. With a mature harness (Claude Code, Codex), it drives a browser, downloads a reference video, dissects it frame by frame, and replays the scroll with a tool like Playwright to capture the interactions. It now has hands and legs.

In practice, you no longer describe the page by hand. You paste the reference URL and let the agent analyze it. The starting prompt is tiny:

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

Two settings are presented as non-negotiable. The auto mode (the agent acts without approving each step), and above all the model's maximum effort. The argument is the same as for a human: the more time you give, the more patient and deep the research. At medium, the model rushes.

References and MCP: feeding the agent

The quality of the output depends on the quality of the input. The video cites several modern inspiration sources, now rich in video rather than static screenshots:

• Mobin - wired in as MCP, the agent fetches the best UIs for a given need on its own.
• collectui.com and other galleries - reference points for taste and direction.
• GitHub - the most direct source: the code of open-source projects serves as a blueprint.

An MCP, here, is an interface that lets the agent access content without going through a human. You tell it « go to Mobin, find the best mobile UIs for a travel app » and it does the research alone. You build an interface so the AI doesn't produce slop.

Mold, don't replicate

The replica is only the base. The work starts after. In the video's example, a 2D Japanese inspiration (background image, large text, red gate) becomes a fully 3D Three.js scene: falling leaves, moving mist, orbiting camera, scene transitions. The prompt vocabulary makes the difference:

• Go 3D - « I want this in Three.js » rather than a background image.
• Transparent layers (PNG) - elements floating above the page, for a parallax effect.
• Textures - generated then applied to make stone, grass or temple realistic.
• Shader effects - via a tool like canvasui.dev, applied directly onto the UI (water, cloth, flame).

The AI can even act as art director: it proposes references, you approve yes or no, and you converge on the result through taste rather than chance.

Skills and super-prompt

What works, you freeze into a skill. The video mentions home-made skills for textures, weather effects, camera orbit, or anti-slop cleanup of the writing. Another useful idea: the super-prompt. Instead of generating first then molding, you turn a URL or a video into a complete description of the page. You can then change the brand or theme from the start, before the first generation.

An honest caveat from the video: many skills date from an era when the harness was less mature. Today, if the URL already contains everything (video, source code, method), the harness does much of the work on its own.

What it costs

The method isn't free. The video owns it clearly: downloading and dissecting a video, replaying a scroll, generating textures, all of that consumes a huge amount of tokens and time. Some generations shown run for 40 minutes and more. The trade-off is explicit: more tokens, more money, more time, in exchange for a result that doesn't look like everyone else's.