Opus 5.5 is ridiculous for website design. In this total walkthrough, I show how I build a Japanese-inspired 3D website in Claude Code.
Sponsored by Mobbin: https://mobbin.com/designcode
I show the references and triggers I utilized to guide the style, then extend it into a brand name guide and advertising mockups.
Real-time website: http://sunset.mengto.here.now
Site made during the tutorial, with motivates: http://sunset-tutorial.mengto.here.now
Boat scene: valley.mengto.here.now
Ship scene: ship.mengto.here.now
Download and install the task data and motivates: 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 full sunset-brand, sunset-ads and sunset-3d folders, plus a written overview and recyclable triggers adjusted from the video clip.
I walk via the procedure in Claude Code: collecting Mobbin screenshots, preparing the areas, defining a Japanese sunset style, selecting which assets belong in 3D, and improving products, lighting and motion. Then I give the brand guide and advertisements their own jobs.
You’ll likewise see the build after concerning an hour, with the parts I would certainly enhance next. The work takes several triggers and models.
Resources and tools
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/
Chapters
00:00:00 The ended up 3D landing page
00:00:50 3D worlds and usable scenes
00:02:06 Mobbin recommendations and enroller introduction
00:03:09 Pricing, testimonies and racking up the layout
00:06:12 Set up Claude Code and Mobbin
00:08:45 Find solar site referrals
00:09:46 Ask for screenshots and integrate areas
00:11:50 Plan the website sections
00:14:30 Prompt the Japanese 3D art direction
00:17:34 Choose 3D, images and icons
00:20:16 Improve textures, illumination and detail
00:21:41 Choose the right medium for every scene
00:26:23 Orbit, water, shader switches and parallax
00:29:45 Give the representative time to function
00:31:02 Explore logo designs in a different job
00:33:47 Create the brand name guide
00:34:20 Create advertising and marketing mockups
00:35:15 Set an investing restriction for photo generation
00:38:08 Reuse thorough motivates and ThreeUI examples
00:42:56 Review the job in development
00:46:12 Project documents, courses and closing