Free kit

How to make 3D websites with Claude

Every website in my reel was made with Claude, and they all run in a normal browser tab. In one you can steer a boat down a river, and in another you can take a robot jellyfish apart. Here is the free kit behind them, with all the links.

The free 3D website kit

First the prompts, then the Claude skills, then the free 3D tools.

  1. 1

    Meng To's full prompt

    Meng To (@MengTo) · the prompt behind Sakura River Valley

    Meng To made this whole 3D river valley with Claude Opus 5.5. You can steer a boat through Japanese landscapes while the weather changes and day turns to night. He shared the full prompt for free. You will find it in the replies under his post.

    Sakura River Valley, a 3D river at dusk with a boat, mist, cherry trees and a pagoda, made with Claude
    Sakura River Valley by Meng To, from my reel. It runs live in your browser at valley.mengto.here.now.
    Open his post on X
  2. 2

    Elvar's 9 prompts

    Elvar (@elvar_official) · the prompts behind Visual Learning

    Elvar made Visual Learning with Claude. It has 40 machines you can open up, like a V8 engine and a robotic jellyfish. In this free article he shows his setup and the 9 prompts he uses.

    A 3D robotic jellyfish simulator on the Visual Learning website, made with Claude
    The robotic jellyfish on Visual Learning by Elvar, from my reel. Open it at visual-learning.app.
    Read his article on X
  3. 3

    Leon Lin's 8 rules

    Leon Lin (@LexnLin)

    In this free article he explains how he prompts AI to build good looking demos. He starts big demos with 9 to 12 reference images, and he tells the AI to match them almost exactly.

    Read his article on X
  4. 4

    taste-skill

    Leon Lin · 108K stars on GitHub · free

    It gives Claude real design taste. Claude plans the look before it starts, and it checks its own work in a browser.

    Open taste-skill on GitHub
  5. 5

    Anthropic's official skills

    Made by Anthropic · 187K stars on GitHub

    Anthropic makes Claude, and these are its official skills. The one you need here is frontend-design. It stops your site from looking like every other AI website.

    Open the skills on GitHub
  6. 6

    unlazy

    Leon Lin · free

    It stops Claude from finishing early. Claude splits a big job into lots of small tasks and works through every one.

    Open unlazy on GitHub
  7. 7

    teardown

    Elvar · free

    Elvar packed his whole 3D workflow into this one Claude skill. It turns any machine into a 3D simulator you can take apart.

    A V8 engine cut open in 3D on the Visual Learning website
    The V8 engine, cut open, on Visual Learning by Elvar, from my reel.
    Open teardown on GitHub
  8. 8

    Motion Primitives

    ibelick · free and open source

    It has free animated parts for your website, like text effects.

    Open Motion Primitives on GitHub
  9. 9

    Canvas UI

    DavidHDev · free to use

    It puts moving 3D effects (WebGL) on top of your real web page.

    You can use it on your own sites and client sites. You just cannot sell the effects themselves.

    Open Canvas UI on GitHub
  10. 10

    Paper Shaders

    Paper · free and open source

    It gives you backgrounds that move on their own, like soft gradients and flowing liquid.

    Open Paper Shaders on GitHub
  11. 11

    ThreeUI

    Meng To's three.js library

    It has ready-made 3D scenes for websites. Meng To says 150 of the 450+ scenes are free and open source.

    Open ThreeUI
  12. 12

    Poly Haven

    Free 3D models, textures and skies

    Download them and give them to Claude, so your scene looks real.

    Open Poly Haven
  13. 13

    21st.dev

    Copy-paste website sections

    It has ready-made website sections, and each one comes with a prompt you can paste into Claude.

    A free account lets you copy 2 prompts a day.

    Open 21st.dev
  14. 14

    Sketchfab

    Free 3D models to download

    It has lots of free 3D models you can download and give to Claude.

    Check the licence on each model before you use it.

    Open Sketchfab
  15. 15

    Meshy

    Turns a picture into 3D · free plan

    You give it a picture, and it will make a 3D model of it. Then give that model to Claude.

    The free plan gives you 10 model downloads a month. Free models are CC BY 4.0, so credit Meshy on your site.

    Open Meshy

A prompt to start your own 3D website

Copy this into Claude Code. Add your topic and your reference images first.

Prompt
Build me a one-page 3D website about [your topic] with three.js.

My reference images are in this folder: [add 9 to 12 images you like]. Match their look as closely as you can.

1. Make one big 3D scene that fills the whole screen. It should move slowly on its own, and react when I move my mouse or scroll.
2. Use soft light, shadows and a little fog, so it looks like a film.
3. Keep the text short and big, on top of the scene.
4. Make it load fast and work on phones.

Before you show me anything, open the page in a browser, take screenshots and compare them with my references. Fix what does not match. Do not stop until it matches.

Show me still screenshots of the main view first. Add the animation after I say yes.

How to make your first 3D website

  1. 1

    Install the skills

    Open Claude Code and just say: install taste-skill and unlazy for me. Paste their two GitHub links from this page.

  2. 2

    Collect 9 to 12 reference images

    Take screenshots of websites, films or 3D scenes you like. Put them all in one folder.

  3. 3

    Paste the prompt

    Use the prompt above, or Meng To's full prompt with your own topic. Now give some time to Claude, and it will build the whole thing for you.

  4. 4

    Let it check its own work

    Claude opens the page, takes screenshots and fixes what does not match your images. Let it go round a few times.

  5. 5

    Put it online for free

    When you like it, just say: put this site online on Vercel. Vercel has a free plan.

Questions people ask

Were these websites really made with Claude?

Yes, all three creators said so on X. Meng To used Claude Opus 5.5 for Sakura River Valley, and Elvar built Visual Learning with Claude and his own skill. Kevin Ngo made "a small light" with Claude Opus 5. It has 25 tiny rooms in one file, with no images at all. Open Kevin Ngo's site

Do I need to know how to code?

No. You talk to Claude in plain English. I do not write code myself.

Is all of this free?

The prompts, the skills and the tools on this page are free. Meshy has a free plan. You need a paid Claude plan to use Claude Code.

What is three.js?

It is a free tool that draws 3D scenes in a web browser. Meng To's river valley is built with it. You do not need to learn it. Claude writes that part for you. Open three.js

Want AI set up like this for your business?We build AI setups and run ads for businesses.

Talk to us

Each website in my reel was made with Claude by its own creator: Sakura River Valley by Meng To, Visual Learning by Elvar and "a small light" by Kevin Ngo. The prompts, skills and tools are made by Meng To, Elvar, Leon Lin, Anthropic, ibelick, DavidHDev, Paper, Poly Haven, 21st.dev, Sketchfab and Meshy. All credit to them.

More free prompts

Edit your videos with Claude Every tool Claude used to edit my reel, most of them free, plus a prompt to start your own edit.Is your job safe from AI? Microsoft offered 60,000 people money to quit. Check your own week with two questions.Tesla Roadster demo, timestamped Where to watch the fans, the thrusters and the flip in Tesla's full demo.OpenCode: a free AI coding agent Like Claude Code, free, with NVIDIA's Nemotron model on its free list.Minecraft mod: Claude builds for you Press K, type what you want, and Claude Code builds it in your world.51 free apps in one repo HeyPuter's Everything: free, open-source apps you can open right in your browser.GTA, Halo and COD in a browser The three browser game projects from my reel, with the safety notes.Free copies of 7 Adobe apps Photoshop, Premiere Pro and five more, rebuilt with AI by ArtCraft. Free and open source.Free Word, Excel and PowerPoint Three free, open-source copies that open your normal Office files.Cheap AI models, with prices Five low-cost models from Anthropic, OpenAI, Google and Mistral, and two ways to cut your AI bill.Build a 3D game with Claude Code Five free tools: game-dev skills, Godot MCP, TripoSR, Colyseus and MCP Unity.Build a 3D website with AI ChatGPT, Meshy and Claude Code: a website with real 3D models you can spin and zoom.Claude Code on DeepSeek Set up Claude Code to run on DeepSeek in 4 steps, then add a free skill for motion graphics.Launch video from one prompt A free Claude Code skill that writes, scores and exports a launch video for your product.Co-op any single-player game A free Claude Code playbook that adds co-op to single-player games, so friends can join over Steam.Claude Duet: 5 things to ask it Who can get Anthropic's new agent app now, how to join the waitlist, and the first five things to ask it.Give Claude Code ears Earshot, a free tool that lets Claude hear sounds, check your video audio and make sound effects.4 free Claude Code plugins Superpowers, Frontend Design, Playwright and Claude Security, with one prompt that installs all four.CLAUDE.md + AGENTS.md prompt One prompt that reads your business folder and writes the files Claude Code and Codex read first.Edit your video by voice Say your edits out loud while filming. Claude Code or Codex makes each one at that moment.Design a website in Paper Two prompts that get Claude Code to interview you and design a full landing page.Humanize skill Turns flat, AI-sounding writing into something people want to read.A 3D video made in code How the Opus 5.5 Clawd video was built, with the prompt and the free kits.