Claude Opus 5.5 Is Actually INSANE for Web Design
DVxUI · 2026-09-28 · community · 11,033 views
What's in the video
Description written by Gemini, which watched and listened to the whole video.
Summary
This video is a step-by-step web design tutorial created by Divyanshu (DVxUI), demonstrating how to build an interactive, responsive portfolio website using Anthropic’s Claude Opus 5.5 model. The presenter details his asset generation workflow using Google Gemini and Google Flow before feeding structured prompt instructions into Claude to generate and refine HTML, CSS, and JavaScript.
What is shown
- Finished Website Preview [00:06 - 00:39]: Interactive hero section featuring cursor-controlled 3D video scrubbing, draggable/dropping stickers on click, marquee animations, horizontal scrolling project cards, testimonials, and footer.
- Preparation & Prompt Guide [00:49 - 01:21]: Review of a detailed, multi-step prompt guide (
promptguide.md) containing design system specs, CSS variables, and layout guidelines. - Asset Creation Workflow [01:22 - 02:49]: Finding inspiration on Pinterest, generating 3D renders with Google Gemini, and using Google Flow with specific camera movement prompts to render an 8-second video (
Video Scrub.mp4). - Initial Setup with Claude Opus 5.5 [03:08 - 04:30]: Opening the project folder in Claude’s desktop/coding interface, selecting Claude Opus 5.5, and running Prompt 1 to generate
index.html,style.css,script.js, and a minimal Node static server. - Design System & Hero Integration [05:39 - 08:58]: Iteratively supplying design system styling tokens (iOS-style glass effect), floating glass navigation, hero structure, and cursor-driven canvas video scrubbing code.
- Additional Sections & Completion [09:35 - 12:40]: Batched prompts generating the loader overlay, text marquees, physics-like interactive falling sticker badges, horizontal project cards, and testimonial cards.
- Mobile Responsive Testing [13:06 - 13:44]: Testing the resulting website in browser developer tools across mobile viewports to verify responsive styling.
Claims & numbers
- The presenter notes that Claude Opus 5.5 was recently launched and is capable of handling complex, multi-section coding prompts in a single turn [00:01, 09:51].
- Gemini was prompted to generate 3D reference images at 1400×1000 resolution [01:45].
- Google Flow was tasked with generating an 8-second video at 1920×1000 resolution, costing 12 credits [02:00].
- The video scrub implementation extracts 96 video frames into memory as downscaled ImageBitmaps (max 1280px dimension) for smooth cursor scrub playback [08:18].
- The site uses Google Fonts' Oswald across weights 300, 400, 500, 600, and 700 [03:31].
Notable quotes
- "As you know, Opus 5.5 was recently launched, and it is pretty powerful." [00:01]
- "Since Opus is a very powerful model, and it can handle all these sections in one go." [09:51]
- "Because AI is no magic. If you provide the step-by-step guide, it will create the amazing website." [11:27]
Assessment
This is a real community developer workflow demo showcasing Claude Opus 5.5’s code generation capabilities in combination with image and video generation tools. The waiting periods for Claude and Google Flow were edited out for pacing, but the resulting website runs locally and works interactively in the browser as shown.
Described by gemini-3.8-flash on 2026-09-29 from the video's audio and frames.