Piece 5.5 is outrageous for web design. In this total walkthrough, I reveal just how I construct a Japanese-inspired 3D web site in Claude Code, with interactive homes, a 3D phone, graphes, water and scroll results.
Sponsored by Mobbin: https://mobbin.com/designcode
I show the recommendations and prompts I utilized to steer the style, then prolong it right into a brand name guide and marketing mockups.
Real-time site: http://sunset.mengto.here.now
Site made throughout the tutorial, with triggers: http://sunset-tutorial.mengto.here.now
Boat scene: valley.mengto.here.now
Ship scene: ship.mengto.here.now
Download the project documents and triggers: https://drive.google.com/file/d/1t19Wagret1CjFjP0FGeGiBo-TGBipxiF/view?usp=drivesdk
The download consists of sunset.html, sunset-brand. html, sunset-ads. html, and the complete sunset-brand, sunset-ads and sunset-3d folders, plus a composed overview and multiple-use motivates adapted from the video.
I go through the procedure in Claude Code: collecting Mobbin screenshots, planning the sections, defining a Japanese sunset motif, picking which properties belong in 3D, and boosting materials, lighting and movement. Then I provide the brand guide and ads their very own jobs.
You’ll additionally see the develop after concerning an hour, with the components I would boost next. The job takes numerous motivates and iterations.
Tools and resources
Mobbin: https://mobbin.com/
Claude Code: https://claude.com/product/claude-code
Three.js: https://threejs.org/
Higgsfield: https://higgsfield.ai/
Mood: https://www.aura.build/
Solar symbols: https://icon-sets.iconify.design/solar/
ThreeUI: https://threeui.com/
DesignCode training courses and community: https://designcode.io/
Phases
00:00:00 The finished 3D touchdown web page
00:00:50 3D worlds and usable scenes
00:02:06 Mobbin referrals and sponsor intro
00:03:09 Pricing, reviews and scoring the design
00:06:12 Set up Claude Code and Mobbin
00:08:45 Find solar internet site references
00:09:46 Ask for screenshots and combine areas
00:11:50 Plan the internet site areas
00:14:30 Prompt the Japanese 3D art direction
00:17:34 Choose 3D, pictures and symbols
00:20:16 Improve textures, lights and information
00:21:41 Choose the right tool for each and every scene
00:26:23 Orbit, water, shader switches and parallax
00:29:45 Give the representative time to work
00:31:02 Explore logo designs in a separate task
00:33:47 Create the brand guide
00:34:20 Create marketing mockups
00:35:15 Set a costs limitation for image generation
00:38:08 Reuse in-depth prompts and ThreeUI examples
00:42:56 Review the operate in development
00:46:12 Project documents, programs and closing