How I Build Insane Three.js Websites With Claude Opus 5 (DesignCode / Meng To)

Why Claude Code desktop, and the local setup

Everything is local in the desktop app, which gives the agent more access to your files, projects, browser, and computer use. The app is mid-transition and a bit cluttered (Home/Code tabs, Projects, Artifacts, Scheduled, Dispatch), but the important tab is Code, the closest thing to Codex. Projects are just folders on your computer, so you can reference any of your other projects as design input. The presenter keeps everything under a Downloads/projects/ tree with subfolders (React, HTML, etc.) and an HTML folder full of single-file experiments, because doing one small, specialized thing per file is how you avoid slop (vague, over-broad asks produce the same standard output everyone gets).

References, inspiration-by-video, and MCP

Because the harness has a browser, the agent can gather its own references. The presenter's inspiration sources include collectui.com, recent.design, and mobbin.com; he also uses GitHub (for version history, hosting, and open-sourcing) and X. The shift that matters: modern inspiration is video, not screenshots, so the agent captures animation, story, scroll, and interactions, which makes the output far richer and less generic. MCP (an interface that lets the agent reach a service directly) closes the loop: instead of you browsing, you tell the agent "go to Mobbin, find the top UI for a travel app," and it does the research itself. You can often install an MCP just by giving the agent the URL.

The reference-first build: one short prompt

The mindset shifttreat AI like a camera. Anyone can point it at anything, but not everything becomes art; you mold it with taste, using references as a mood board. So you don't describe the design in words up front. You copy the reference URL, open a project (an HTML file is enough), paste the URL, and use one short prompt.

Two settings before you run it. First, permission mode: leave it on Auto (it used to be manual approve-everything; Auto is safer and fine for 99% of people, and he no longer bothers with bypass-permissions). Second, effort: always run Opus 5 (and Codex) at extra-high. Low or medium effort means less research and less patience, like a student cramming five minutes before an exam versus preparing for days. Extra effort is the floor for designs that aren't slop.

Let the agent inspect motion and scroll

The reason one short prompt works now is the harness's browser and computer use. Given a reference video, the agent downloads it, dissects it, and understands each frame, so it grasps things like "the scrolling from this website" that earlier models couldn't. Given a live site with no video, it uses a tool like Playwright to scroll and screen-record the page itself, then feeds that back as context. It also self-verifies: when a file:// path renders as a data-URL snapshot and the preloader hangs at 0%, the agent serves the folder over HTTP, reads the console, and re-navigates until the scene loads clean.

Molding: 3D, transparent layers, parallax, and textures

The recreation is only the base; your job is to mold it into something original (and credit the inspiration). For the "Kage" project, inspired by Daniel Snow's Japanese-temple concept, the presenter kept the essence (Japanese style, foreground grass, huge hidden text, a red gate) but turned a flat image/video into real 3D Three.js: an orbiting 3D scene, falling leaves, drifting wisps, scroll-driven scene changes, and a cloth/shader effect via canvasui.dev (shaders applied on top of HTML). For depth, ask for transparent PNGs (foreground elements that can float over anything) and lay them out as parallax layers, the work you'd previously do by hand in Figma. Generate textures and assets with the Higgsfield CLI (which has an MCP and spans models like Seedance 2.5 for video, GPT image 2, and 3D models), and let the AI act as an art director, offering reference options ("model it after this temple? yes/no") until your taste lands on the result.

Save decisions as skills, then prototype and share

Anything you want to remember and reuse (a texture recipe, a weather effect, an orbit/rotation, a "super prompt" that describes a whole site so you can re-theme it from the start) should be turned into a skill. The presenter open-sourced his own skill set (about 4,700 GitHub stars) and points to skills.sh for others (grill-me, front-end-design, and "write like a human"/"no AI slop" skills for stripping AI tells). His caveat: as harnesses mature, many capture/inspiration skills matter less, because handing the agent a reference URL already carries the video, the build, and the source.

Finally, prototype before committing: don't stop at the reference recreation. Ask the agent (Claude Design-style) for options to play with typography, color, layout, and styling, pick what you like, make those changes permanent, then swap the images/video for your theme (Higgsfield for generation), try light and dark modes and canvas-UI effects, mold it to a new theme (a restaurant, a game, a Japanese temple, a Dark Souls castle), and open-source the result. The finished pieces stay under ~1 MB because the entire 3D scene is code.

Tools and resources

Claims to verify

• The presenter is Meng To (DesignCode); the app greets him as "Meng." His open-source skill set (Video to Super Prompt, HTML to Interaction Prompts, Stitched Full Page Capture, Daily UI Inspiration) is the same set attributed to "Mangto" in the AI LABS Claude-design-skills video captured the same day; "Mangto" is an auto-caption rendering of "Meng To."
• "Under 1 MB" and "game quality in the browser" are the presenter's characterizations of his demos; impressive but not independently measured here.
• Model/effort claims ("Opus 5 is the best in the world for front-end design," extra-high beats medium) are the presenter's opinion and workflow, not a benchmark.
• Star counts (one project ~866 stars/155 forks; the skills repo ~4.7k stars) are as shown on screen at recording time.
• The auto-caption garbles some tool names ("3 GS" = Three.js, "Higgs Field"/"Hexfield" = Higgsfield, "C Dance"/"seedance" = Seedance, "Cloud Code" = Claude Code); corrected here from the on-screen UI.

Glossary

• Three.js: a JavaScript library for rendering interactive 3D graphics in the browser using WebGL.
• Claude Code desktop: the Claude app's local coding environment (Code tab) with file access, a built-in browser, and computer use, as opposed to the terminal-only Claude Code.
• harness: the tool/environment wrapping the model (browser, file access, permissions, MCPs) that lets an agent do real work; here, Claude Code desktop or Codex.
• reference-first: a workflow that starts from an existing design (its URL/video) rather than a written description.
• AI slop: generic, standard-looking output a model produces when the ask is too vague or the effort is too low.
• effort (low/medium/extra-high): a model setting controlling how much research/reasoning time it spends; extra-high does more work for more tokens.
• Auto (permission mode): the setting that lets the agent act without approving each edit, browse, or command individually.
• MCP (Model Context Protocol): an interface that lets an agent connect to and query a service (like Mobbin) directly.
• Playwright: a browser-automation tool the agent uses to scroll and screen-record a live reference site for context.
• molding: iteratively transforming a faithful recreation into an original design using your taste (e.g. 2D to 3D, new theme).
• transparent PNG: an image with no background that can float over other elements, used to build layered/parallax scenes.
• parallax: a depth effect where layered elements move at different speeds as you scroll.
• shader: a small GPU program that produces visual effects (cloth, water, glow); canvasui.dev applies shaders on top of HTML.
• skill (agent): a portable SKILL.md folder capturing a repeatable prompt, workflow, or recipe an agent can load and follow.
• super prompt: a generated full description of a site that you can edit (e.g. change the brand/theme) to regenerate variations from the start.
• Higgsfield: a generation tool/CLI (with an MCP) for images, video, and 3D across multiple models (Seedance, GPT image 2).
• Seedance: a video-generation model (2.5) usable via Higgsfield to animate a hero instead of building 3D.
• open-sourcing: publishing your project's source publicly, which the presenter uses for audience, portfolio, and trust rather than direct revenue.