My Whole Claude Code Workflow for a 3D Website, From A to Z
1.7万 次观看 · 2026-11-03
UI 设计
I built this 3D website with Claude Opus 5.5, without opening Blender or writing a line of Three.js.
Get 20% off Mobbin, the sponsor of this video: https://mobbin.com/designcode
The Tracewood Site: https://tracewood.aura.build/
The article: https://fil.design/d/c17e7342-6cfb-4513-94fb-45ff3b9c1f7f/tracewood-article.pdf
Every prompt, the plan and the judge setup: https://fil.design/d/54798e8e-1399-4c21-a554-e1ccd3da30c1/tracewood-prompts-plan-judge.md
Site HTML: https://fil.design/d/598686bd-a7d9-48b3-9f38-f261a1f7410c/tracewood-site.html
This is my whole workflow, from A to Z: setting up Mobbin in Claude, finding references and turning two studios into one idea, the exact prompt, and the dream loop that took this room from a 4.6 to an 8.05 out of 10. Then how to install the loop yourself, how I filled a room that felt empty, and the mistakes that cost the most time. At the end, we do the math on whether Opus 5.5 can replace a 3D web designer.
Mobbin has more than half a million screens and flows from real apps and websites, web and iOS, and its MCP lets your agent search them right inside Claude.
This video is sponsored by Mobbin (paid partnership).
CHAPTERS
0:00 Can AI build a 3D website?
0:32 What you'll learn
1:15 The golden rule (sponsor: Mobbin)
2:06 Install the Mobbin MCP in Claude
2:54 Finding 3D references on Mobbin
3:27 Two studios, one idea
4:15 The prompt
5:44 Choosing the right medium
6:31 Round 1 scored 4.6: the dream loop
8:13 Install the dream loop skill
9:35 From empty to furnished
11:05 Mistakes, performance and phones
12:11 Can Opus 5.5 replace a 3D web designer?
THE PROMPTS
As I sent them in Claude Code with Opus 5.5, typos fixed. About ten messages over two days.
1. find inspiration on mobbin for 3D site
2. Build an immersive 3D-world landing page in the basement.studio / Poly style, where the whole page is one scene.
3. Use dream-loop to build a polished 3D scene.
4. Keep iterating the dream-loop on Tracewood. Spend up to another 6 Aura prompts if they help (for example a cleaner garden backdrop or a butcher-block texture), and try a new approach for the exterior and table.
5. Keep iterating toward 9? On the section "WORK", I want a score of 9/10 for visual on paper work. I want the service section to be interactive. I can click on the paper and show more information.
6. Resume the Work desk bake and keep iterating it toward 9/10.
7. Use dream-loop to build a polished 3D scene. I want a better visual for paper with stunning image with premium design and layout. The room looks plain and empty. Please add more decoration and furniture. I want a high-end and modern room.
THE PLAN
A fictional studio in an old print works in Lisbon. One line: every room starts as a line. Five chapters (Studio, Process, Work, Services, Contact), each a camera stop in the same room. The scroll only moves the camera, and one smooth progress value drives the camera, the sweep, the light and the text.
THE JUDGE SETUP
1. Screenshot the scene and ask an image model for a finished version of exactly that view. That's the target.
2. Each round, make a change, capture the live page from the same camera, and put it next to the target.
3. A fresh judge, with no memory of earlier rounds, scores it out of 10 (composition 3, lighting 3, materials 3, details 1) and lists what's still wrong.
4. Stop at 8 or above, or when the score stalls for two rounds and a big rethink doesn't move it.
Main view: 4.6, 5.3, 6.15, 6.05, 6.1, 6.65, 6.83, 6.60, 6.88, 7.85, 8.05.
INSTALL
Mobbin MCP: claude mcp add --transport http mobbin https://api.mobbin.com/mcp
Dream loop: npx skills add achimala/dream-loop
LINKS
Dream loop skill, by Anshu Chimala: https://github.com/achimala/dream-loop
Opus 5.5 pricing and the 40% figure: https://www.anthropic.com/claude-opus-5-5
Basement Studio: https://basement.studio
Poly: https://poly.app
POSTS SHOWN
Claude: https://x.com/claudeai/status/2111177834127601902
Edwin Arbus: https://x.com/edwinarbus/status/2102463453176979794
Leon Lin: https://x.com/LexnLin/status/2111582260818239777
Dilum Sanjaya: https://x.com/DilumSanjaya/status/2111864428010582082
Get 20% off Mobbin, the sponsor of this video: https://mobbin.com/designcode
The Tracewood Site: https://tracewood.aura.build/
The article: https://fil.design/d/c17e7342-6cfb-4513-94fb-45ff3b9c1f7f/tracewood-article.pdf
Every prompt, the plan and the judge setup: https://fil.design/d/54798e8e-1399-4c21-a554-e1ccd3da30c1/tracewood-prompts-plan-judge.md
Site HTML: https://fil.design/d/598686bd-a7d9-48b3-9f38-f261a1f7410c/tracewood-site.html
This is my whole workflow, from A to Z: setting up Mobbin in Claude, finding references and turning two studios into one idea, the exact prompt, and the dream loop that took this room from a 4.6 to an 8.05 out of 10. Then how to install the loop yourself, how I filled a room that felt empty, and the mistakes that cost the most time. At the end, we do the math on whether Opus 5.5 can replace a 3D web designer.
Mobbin has more than half a million screens and flows from real apps and websites, web and iOS, and its MCP lets your agent search them right inside Claude.
This video is sponsored by Mobbin (paid partnership).
CHAPTERS
0:00 Can AI build a 3D website?
0:32 What you'll learn
1:15 The golden rule (sponsor: Mobbin)
2:06 Install the Mobbin MCP in Claude
2:54 Finding 3D references on Mobbin
3:27 Two studios, one idea
4:15 The prompt
5:44 Choosing the right medium
6:31 Round 1 scored 4.6: the dream loop
8:13 Install the dream loop skill
9:35 From empty to furnished
11:05 Mistakes, performance and phones
12:11 Can Opus 5.5 replace a 3D web designer?
THE PROMPTS
As I sent them in Claude Code with Opus 5.5, typos fixed. About ten messages over two days.
1. find inspiration on mobbin for 3D site
2. Build an immersive 3D-world landing page in the basement.studio / Poly style, where the whole page is one scene.
3. Use dream-loop to build a polished 3D scene.
4. Keep iterating the dream-loop on Tracewood. Spend up to another 6 Aura prompts if they help (for example a cleaner garden backdrop or a butcher-block texture), and try a new approach for the exterior and table.
5. Keep iterating toward 9? On the section "WORK", I want a score of 9/10 for visual on paper work. I want the service section to be interactive. I can click on the paper and show more information.
6. Resume the Work desk bake and keep iterating it toward 9/10.
7. Use dream-loop to build a polished 3D scene. I want a better visual for paper with stunning image with premium design and layout. The room looks plain and empty. Please add more decoration and furniture. I want a high-end and modern room.
THE PLAN
A fictional studio in an old print works in Lisbon. One line: every room starts as a line. Five chapters (Studio, Process, Work, Services, Contact), each a camera stop in the same room. The scroll only moves the camera, and one smooth progress value drives the camera, the sweep, the light and the text.
THE JUDGE SETUP
1. Screenshot the scene and ask an image model for a finished version of exactly that view. That's the target.
2. Each round, make a change, capture the live page from the same camera, and put it next to the target.
3. A fresh judge, with no memory of earlier rounds, scores it out of 10 (composition 3, lighting 3, materials 3, details 1) and lists what's still wrong.
4. Stop at 8 or above, or when the score stalls for two rounds and a big rethink doesn't move it.
Main view: 4.6, 5.3, 6.15, 6.05, 6.1, 6.65, 6.83, 6.60, 6.88, 7.85, 8.05.
INSTALL
Mobbin MCP: claude mcp add --transport http mobbin https://api.mobbin.com/mcp
Dream loop: npx skills add achimala/dream-loop
LINKS
Dream loop skill, by Anshu Chimala: https://github.com/achimala/dream-loop
Opus 5.5 pricing and the 40% figure: https://www.anthropic.com/claude-opus-5-5
Basement Studio: https://basement.studio
Poly: https://poly.app
POSTS SHOWN
Claude: https://x.com/claudeai/status/2111177834127601902
Edwin Arbus: https://x.com/edwinarbus/status/2102463453176979794
Leon Lin: https://x.com/LexnLin/status/2111582260818239777
Dilum Sanjaya: https://x.com/DilumSanjaya/status/2111864428010582082