Descriptions:
Nate Herk walks through a complete workflow for building animated, Apple-style 3D product landing pages using Claude Code inside Visual Studio Code — with no prior web development experience required. The core technique uses two custom skill files: a front-end design skill and a video-to-website skill, both plain markdown documents that instruct Claude Code on animation best practices and implementation patterns. Herk makes both files available for free through his School community.
Setup requires VS Code with the Claude Code extension, an active Anthropic Pro or Max subscription, and a product video to use as input. The demonstration uses a blender product called “Obsidian Vortex,” showing how Claude Code autonomously plans the site architecture, extracts frames from the video using ffmpeg, then generates the full HTML, CSS, and JavaScript — including scroll-triggered animations, dynamic text reveals, and a branded color scheme — before serving a local preview for review. The model creates a task list and executes it sequentially in bypass-permissions mode to avoid constant approval prompts.
The video targets freelancers and agency builders looking to pitch and deliver high-end web work quickly. Herk positions the output as comparable to agency-built sites costing $10,000 or more, achievable in roughly 30 minutes of active work. The tutorial covers the full path from folder setup and skill installation to local testing and deployment, making it accessible to builders who have never opened Claude Code before.
📺 Source: Nate Herk | AI Automation · Published March 03, 2026
🏷️ Format: Hands On Build
