How To Use Claude Code To Build Amazing Sites With Opus 5.5

How to use Claude Code efficiently: Claude Code for beginners, with Claude Code setup and tips. Thanks to CodeRabbit for sponsoring this video! Check them out at https://coderabbit.link/ad-ai-labs-001 and start a free 14-day trial, no credit card, 2-click setup. Community with All Resources: https://ailabspro.io/?v=DP7mgLUKN_U The Roundup, our daily newsletter covering the AI stories that matter. Join now: https://www.theroundup.so/ Hallmark Skill: https://www.usehallmark.com/ Scroll world: https://github.com/oso95/scroll-world Aura Build: https://www.aura.build/ What we cover in this video How to Use and Setup Claude Code - How to use Claude Code for beginners: what it is, and how it differs from the Claude AI web app (it can create and edit files on your computer) - Installing Warp as the terminal, then installing Claude Code with one command - Installing VS Code so you can see the files Claude Code creates - Opening a project folder so Claude Code works inside it How to Use Claude Code in Terminal - Basic terminal commands (ls, cd, mkdir) to move between folders and start new projects - Opening new tabs in Warp and running more than one Claude Code session - Terminal mode: running terminal commands from inside Claude Code with an exclamation mark Claude Code Tips: How to Use Claude Code Effectively - Choosing your model: we used Fable 5.1 for design, and Opus or Sonnet work for simpler tasks - Pressing Escape to interrupt Claude and give it a correction - Using @ to point Claude at a specific file - Managing the context window with the context, compact, and clear commands - Saving chats with rename and coming back to them with resume - Pressing Escape twice to go back to a point where everything worked Claude Code Tutorial: How to Use Claude Code to Build a Website - Stage 1, Plan: using plan mode so Claude asks the right questions before building anything - Stage 2, CLAUDE.md: saving the business context so every new session remembers why the site exists - Stage 3, Hallmark: a design skill that moves Claude away from the generic AI-generated look - Stage 4, design.md: locking your colors, fonts, and spacing with a file from Aura.build - Stage 5, Deploy: saving checkpoints with GitHub and putting the site live on Vercel - Stage 6, Scroll World: turning the landing page into a cinematic scrollable website with AI-generated video clips How to Use Claude Code Efficiently as You Build - Skills save you from explaining the same process in every prompt - CLAUDE.md means you don't repeat your project details in each new chat - A design.md keeps your branding the same, even when you revamp the whole site - The GitHub CLI and Vercel CLI let Claude Code handle uploads and deployment fixes for you Shipping Safely with GitHub, Vercel, and CodeRabbit - Commits, branches, and pull requests explained without code - Reviewing the Scroll World pull request with CodeRabbit: 11 issues found, sorted by risk, each with a prompt you can give Claude Code - Running CodeRabbit's AI Deep Scan across the whole project, which flagged a security risk in our form's email field Claude Code How to Use: A-Z - How to use Claude Code A-Z: from installing it to a live, scrollable website on your own link - Built for vibe coding: you describe what you want, Claude Code builds it, and you never need to read the code - The AI tools used: Claude Code, Warp, VS Code, GitHub, Vercel, Aura.build, Runway, and CodeRabbit What This Video Doesn't Cover - How to use Claude Code for free: we don't cover free access here, but CodeRabbit's trial is free for 14 days - How to use subagents in Claude Code: this video builds the basics first (plan mode, skills, CLAUDE.md), not subagents - Claude Cowork: everything here is done in Claude Code in the terminal, not Claude Cowork 00:00 Intro 00:50 Setup 03:03 Terminal Commands 03:54 Claude Code Basics 05:33 Planning 08:01 CLAUDE.md 10:02 Hallmark Skill 11:42 Design File 14:06 Deployment 18:16 Scroll World 21:58 Code Rabbit Review 25:05 Final Site Hashtags #ai #claude #ClaudeCode #ClaudeAI #vibeCoding #aiTools #ClaudeCowork #HowToUseClaudeCode