Getting Started
Running Claude
Download it. Open your terminal. Start building.
01
Download
You need a Claude Pro plan ($20/mo at claude.ai) to use Claude Code. Sign up first, then install Node.js from nodejs.org. Open your terminal and run:
npm install -g @anthropic-ai/claude-codeCopied
02
Open Terminal
Mac: Cmd + Space, type "Terminal"
Windows: Win + R, type "cmd"
Windows: Win + R, type "cmd"
03
Start Claude
Type
claude and hit enter. Sign in when prompted. You're in.claudeCopied
Using images or videos? Download them to your computer, then tell Claude: "Use the file called hero-photo.jpg" and it will locate it and add it to your site. That's it.
Other ways to use Claude: Desktop app (Mac & Windows), VS Code extension, or claude.ai/code in the browser.
The Foundation
The DESIGN.md System
The single biggest unlock for Claude website building. A DESIGN.md file acts as persistent memory. Claude reads it at the start of every session and stays consistent.
Design Tokens
Every CSS custom property with context. Not just the value, but what it's for and when to use it.
Typography System
Every font, every weight, every size, every line-height. Where each is used.
Component Patterns
Recurring UI with exact CSS. Button states, card hover, form focus. All documented.
Animation Principles
Your easing curves, durations, motion philosophy. Claude won't break your scroll story.
Do Not Touch List
The intentional decisions Claude should never "fix". Protects your design choices.
Spacing Scale
Your grid, your rhythm. Claude stops making up margins.
Starter Template
Session Starter Prompt
Prompt Arsenal
28 prompts that actually work
Not generic "be a senior developer" prompts. Specific, tested, designed for the exact moments Claude drifts.
Design References
Where to find the good stuff
Every site worth bookmarking for inspiration, fonts, colours, icons, and animation.
Claude Hacks
20 things most people don't know
CLI flags, gotchas, code patterns, workflow tricks. The stuff that separates fighting Claude from flowing with it.
The Workflow
8 steps from zero to shipped
The order matters. Skip a step and errors compound fast.
Real Income Strategies
How to actually make money with this.
The pack gives you the tools. These strategies show you exactly where to point them.
AI Video & Image Generation
Start generating at muapi.ai →
Start generating at muapi.ai →
Generate images and video for 30% less
Every workflow in this pack uses AI-generated images and video. Access them all through one platform, cheaper than going direct.
Muapi API
One dashboard. 500+ AI models. Pay per generation, no subscriptions. Failed tasks cost $0. About 30% cheaper than going to each provider directly.
500+
AI models
~30%
cheaper
$0
failed tasks
01
Create an account at muapi.ai
Sign up, add credit (start with $5-10). No monthly subscription. Your balance only goes down when a generation succeeds.
02
Pick your model
For hero images: FLUX Kontext or Midjourney. For video flyovers and reveals: Seedance 2.0 or Kling v3. For text-to-video: Veo 3.
03
Generate via dashboard or API
Use the web dashboard for quick one-off generations. For batch work, use the API. Claude can write the API calls for you.
04
Use the output in your builds
Download the generated image or video. Tell Claude to use it by name. It handles lazy loading, aspect ratios, and compression.
Your prompt is everything.
A bad prompt burns credit and gives you unusable output. A good prompt gets it right first try. Be specific about camera angle, lighting, movement direction, duration, and mood. Don't say "a nice video of a car." Say "cinematic low-angle tracking shot, black Porsche 911 on wet tarmac, golden hour side-light, slow dolly forward, 5 seconds." Use Claude to write your generation prompts.
Seedance 2.0
The best image-to-video model available right now. Give it a photo, tell it how to move, and it creates cinematic video. This is what we use for drone flyovers, product reveals, and hero animations.
#1
image to video
5-10s
video length
20%
off via Muapi
Best for
01
Golf course drone flyovers
Upload a course photo, prompt a slow aerial tracking shot. Outputs look like real drone footage.
02
Real estate property reveals
Take a listing photo, add cinematic push-in motion. Great for hero sections on booking sites.
03
Product launch videos
Car reveals, watch close-ups, luxury items. Any still product photo becomes a cinematic reveal.
Best image-to-video quality right now
Handles camera direction prompts well
Great for product reveals and flyovers
Slower generation (1-3 min)
Struggles with fast complex motion
Needs a strong source image
Kling v3
The most versatile video generation model. Handles complex motion, human subjects, and dynamic camera work better than anything else at its price point. Our second pick after Seedance.
v3
latest version
5-10s
video length
Fast
generation
Best for
01
Videos with people
Kling handles human subjects and faces better than Seedance. If your video needs people, use this.
02
Complex motion scenes
Multiple moving elements, dynamic camera angles, action sequences. Kling keeps up where others break.
03
Quick iterations
Faster generation times than Seedance. When you need to test multiple prompts quickly, start with Kling.
Handles complex motion better than most
Good with human subjects
Multiple duration options
Occasional warping on edges
Can hallucinate details not in source
Quality inconsistent between runs
All Models
Every AI model we use across the workflows in this pack. All accessible through Muapi.
Seedance 2.0
Image to Video
Top pick
Best image-to-video quality right now
Handles camera direction prompts well
Great for product reveals and flyovers
Slower generation (1-3 min)
Struggles with fast complex motion
Needs a strong source image
Kling v3
Image to Video
Top pick
Handles complex motion better than most
Good with human subjects
Multiple duration options
Occasional warping on edges
Can hallucinate details not in source
Quality inconsistent between runs
FLUX Kontext
Text to Image
Fast
Extremely fast generation
Great at following complex prompts
Good text rendering in images
Can feel slightly "AI" on faces
Less artistic than Midjourney
Needs detailed prompts for best results
Veo 3
Text to Video
Powerful
Best text-to-video quality available
Understands cinematic language
Great for concept videos from scratch
More expensive per generation
No image input (text only)
Longer generation times
Midjourney
Text to Image
No sub
Most artistic/stylised output
Great for hero images and mood boards
No subscription needed via Muapi
Slower than FLUX
Less precise prompt following
Tends to over-stylise realistic scenes
Runway
Image to Video
Smooth
Very smooth, cinematic motion
Good at subtle camera moves
Reliable output quality
Limited duration (4-10s)
Less creative with complex scenes
Higher cost per generation
Suno
Text to Music
Audio
Full songs from a text description
Great for background/ambient tracks
Multiple genre support
Lyrics can sound generic
Less control over arrangement
Not ideal for precise sound design
Hunyuan
Text to Video
Free tier
Very affordable generations
Good for quick drafts and tests
Decent quality for the price
Lower quality than Veo 3
Struggles with complex prompts
Limited resolution options
Prompt + Result
What one prompt actually produces.
The exact prompt we used, and the raw output. Seedance 2.5 4K. No post-production.
The prompt we used
Create a cinematic, high-fashion editorial video using the supplied frames as strict visual references. Preserve the exact same woman, facial structure, hairstyle, clothing, glasses, proportions, lighting direction and environment throughout the entire sequence.
The woman is wearing sleek futuristic black wraparound eyewear in a dark studio environment. She holds the glasses naturally near her face, delicately pinching the frame and slightly lowering them so her eyes remain visible. The glasses should remain physically consistent throughout the shot: same shape, same reflective black lenses, same proportions and materials.
The movement should feel like a luxury fashion campaign rather than conventional cinematic camera movement. Use exaggerated 0.5x ultra-wide editorial perspective, intimate macro pushes, subtle lateral camera shifts and controlled perspective distortion. The camera should feel physically close to the subject.
Movement must be smooth, deliberate and confident. Allow foreground objects to become dramatically enlarged as the camera passes close to them. Use shallow depth of field, realistic optical focus transitions, subtle motion blur and premium commercial lighting.
IMPORTANT: Treat the supplied images as fixed keyframes. Move naturally from one supplied composition into the next. Do NOT create new compositions between them. Do NOT invent additional poses, hairstyles, facial expressions, accessories, clothing, glasses or environmental elements.
Do not regenerate or reinterpret the woman's face. Do not add hair, remove hair, reposition bangs, change hair length or alter individual visible strands. Do not modify her facial proportions, eyes, nose, lips, jaw, skin texture or expression.
The subject should feel effectively frozen while the CAMERA creates the progression.
High-end experimental fashion editorial. Photorealistic skin texture. Natural imperfections. Realistic optics. No artificial beauty smoothing, morphing, face warping or AI-generated facial characteristics.Copied
The result — Seedance 2.5 4K
The prompt we used
Create an ultra-premium 360° product animation of the exact sunglasses shown in the supplied reference images.
The environment must be absolute pure black (#000000) from edge to edge. Nothing else exists in the scene. No floor, horizon, pedestal, scenery, particles, smoke, gradients, text, graphics or reflections from an environment.
Show ONE pair of sunglasses only, floating perfectly centred in the black space.
Preserve the exact product design throughout: identical black bezel/frame, exact translucent coloured lenses, exact lens shape, temples, hinges, bridge, proportions, thickness and materials shown in the supplied reference.
DO NOT redesign the glasses between angles.
Begin from the supplied front/three-quarter product orientation and perform ONE COMPLETE, CONTINUOUS 360° ROTATION.
The rotational progression must clearly travel:
0° FRONT → 45° FRONT 3/4 → 90° SIDE → 135° REAR 3/4 → 180° BACK → 225° REAR 3/4 → 270° OPPOSITE SIDE → 315° FRONT 3/4 → 360° FRONT.
The movement should have the perceived temporal smoothness of 240fps, extremely fluid, precise and premium. No jitter, sudden acceleration, snapping or robotic movement.
Use high-end macro product cinematography with subtle controlled camera movement. Allow tiny perspective shifts and extremely gentle push-ins during the rotation to reveal the frame edges, hinges, translucent lens material and rear construction, but keep the full glasses clearly readable.
Lighting should be minimal and extremely controlled. Thin studio highlights should travel naturally across the black frame and translucent coloured lenses as they rotate. Preserve realistic refraction and transparency through the lenses.
PRODUCT GEOMETRY MUST BE COMPLETELY LOCKED. The glasses must behave like one rigid physical object.
Do not change the lens shape. Do not change the frame thickness. Do not change the bridge. Do not change the temples. Do not alter the hinges. Do not change lens colours. Do not invent screws, logos, buttons, sensors, decorations or additional components.
DO NOT CREATE DOUBLES. Never duplicate the glasses, lenses, arms, hinges or any component.
The temples must remain physically connected and structurally consistent throughout the rotation. They must not fold, disappear, intersect, stretch, detach or change length.
NO MORPHING BETWEEN ANGLES. Every intermediate frame should represent a physically plausible viewing angle of the exact same rigid pair of glasses.
The glasses should feel like a real physical product photographed in a completely black studio, not a generic CGI model.
Use premium 85–100mm product/macro lens characteristics, extremely high material detail, realistic depth of field, controlled focus breathing, subtle cinematic motion blur and 4K-quality commercial rendering.
FULL 360° ROTATION IS MANDATORY.
At approximately halfway through the video, the glasses should be at the 180° rear view.
They must then continue rotating through the opposite side.
BY THE FINAL FRAME, THE GLASSES MUST HAVE COMPLETED THE ENTIRE 360° ROTATION AND RETURNED TO THE EXACT ORIGINAL FRONT-FACING ORIENTATION.
Do not end at 90°, 180°, 270° or any intermediate angle.
The final 360° FRONT position must match the opening orientation in product geometry, scale, camera position and framing. Briefly hold this position at the end so the animation can function as a seamless loop.
ABSOLUTELY NO: extra glasses, duplicate components, morphing, folding, floating parts, exploded views, changing lens colours, changing frame design, invented product details, people, hands, text, logos, floor, horizon, scenery, particles, smoke, camera cuts, crossfades or random transitions.
Overall aesthetic: luxury neo-editorial eyewear campaign — black-on-black macro product cinematography with colourful translucent optical glass, incredibly smooth 240fps-style motion and one unmistakable full 360° rotation.Copied
The result — Seedance 2.5 4K
The prompt we used
Create a continuous high-fashion editorial camera sequence using the supplied images as STRICT KEYFRAMES.
The woman, headphones, hair, face, clothing, hand position, skin texture and environment must remain completely consistent with the supplied imagery.
She has black hair with bangs, visible natural freckles, a chartreuse/lime long-sleeve top, white pants and metallic deep-blue over-ear headphones. The headphones maintain exactly the same geometry, blue metallic earcups, blue mesh cushions, headband and metallic hardware throughout.
Begin from the wider editorial composition of the woman leaning toward the camera while touching one headphone earcup.
The camera performs a smooth, controlled 0.5x ultra-wide editorial push toward her. Transition progressively from the wide portrait toward the straight-on composition.
Continue pushing closer toward the side of her face and the blue headphone. The movement should feel physical—as though a real camera is travelling through the existing scene—not as though one image is morphing into another.
Progress into the supplied close-up where the composition becomes approximately 50/50 between the blue headphone/hand and her eye/face.
Continue the same uninterrupted camera trajectory toward her eye. Gradually transition from portrait photography into extreme macro photography. Her eye becomes increasingly dominant while the headphone naturally leaves the frame due ONLY to the camera moving closer.
Push directly toward the iris.
Transition into an extreme macro iris shot until the dark pupil/iris completely overwhelms the frame and the final image becomes FULL BLACK.
The black ending must feel like the camera has physically entered the pupil—not a conventional fade-to-black.
CRITICAL CONSISTENCY RULES: Do not invent intermediate imagery. Do not generate new poses. Do not change her expression. Do not regenerate her face. Do not change her facial structure. Do not add or remove freckles. Do not add hair. Do not remove hair. Do not move or redesign her bangs. Do not make strands appear/disappear between frames. Do not change her hairstyle. Do not change the headphones. Do not alter the earcup geometry. Do not change her hand anatomy or finger placement. Do not change her clothing. Do not introduce additional objects or backgrounds.
The supplied frames dictate the composition. INTERPOLATE BETWEEN THEM; DO NOT REIMAGINE THEM.
Movement comes predominantly from the camera, not from the woman.
Style: experimental fashion editorial, luxury headphone campaign, extremely photorealistic, macro photography, 0.5x wide-angle perspective transitioning naturally into macro optics, subtle handheld physicality, smooth dolly movement, shallow depth of field, realistic focus breathing, natural motion blur, authentic skin pores and texture.
No CGI appearance. No beauty-filter skin. No facial morphing. No surreal transitions. No artificial hair movement. No invented frames.
The entire sequence must feel like one real camera physically travelling from the wide portrait, across the headphone and face, directly into her eye and finally into complete blackness.Copied
The result — Seedance 2.5 4K
The prompt we used
Create a 9-second luxury architectural campaign film for the Maison Azur website, using the supplied garage image as the exact opening frame and visual reference. Full-screen 16:9 composition, 4K-quality detail, beautifully fluid 240-fps-style movement, and refined editorial cinematography.
ONE SINGLE CONTINUOUS SHOT. No camera cuts, transitions, hidden edits, angle resets, or sudden reframing.
Begin at the reference's low viewpoint outside the open garage. The red Ferrari 488 Pista sits motionless within the warm limestone and timber interior. Preserve the exact vehicle, architecture, cabinetry, lighting fixtures, proportions, and placement of every object.
Over nine seconds, execute a slow, controlled forward camera push into the garage, travelling approximately one metre along a straight path. Maintain the same front three-quarter viewing angle of the Ferrari throughout. Use a fixed 28 mm lens, camera approximately 35 cm above the floor, perfectly level horizon, and stable architectural verticals. No orbit, sideways movement, tilt, roll, digital zoom, or focal-length changes.
0–2 seconds: Establish the complete composition while beginning an almost imperceptible forward glide. Pale stone paving leads into the garage; the Ferrari remains surrounded by generous architectural space.
2–7 seconds: Continue the same smooth push. Natural parallax gradually separates the entrance, Ferrari, and timber cabinetry behind it. Reveal increasingly fine details in the stone floor, wood grain, carbon-fibre splitter, wheels, and paint. Keep the entire car comfortably within the frame. The architecture remains a major part of the composition.
7–9 seconds: Ease gently into the final position without an abrupt stop. Hold a balanced editorial composition with the Ferrari low in the frame and generous uncluttered space above for website typography. Do not fade to black.
LIGHTING AND MATERIALS:
Preserve the reference's late-afternoon sunlight entering from camera-right, warm recessed interior lighting, and softly shaded garage. The Ferrari must look physically present: restrained red paint, realistic reflections of the doorway and timber walls, subtle limestone colour bounce, and convincing contact shadows beneath every tyre. Reflections change naturally with the moving viewpoint; the light sources remain fixed.
Render tactile limestone, authentic timber grain, softly reflective stone flooring, detailed rubber, glass, and carbon fibre. Beautiful highlight roll-off, deep readable shadows, subtle organic film grain, and natural colour separation. Warm ivory, honey-toned timber, charcoal accents, and rich Ferrari red. Avoid excessive orange grading, artificial showroom gloss, crushed blacks, oversharpening, or plastic-looking surfaces.
MOVEMENT AND CONTINUITY:
Exceptionally smooth motion with delicate natural motion blur and consistent detail from frame to frame. No flickering textures, exposure pumping, focus hunting, wobbling lines, or morphing reflections. The Ferrari remains parked: wheels still, doors closed, lights unchanged. Furniture, cabinetry, plants, and architectural elements remain fixed.
No people, additional vehicles, visible camera equipment, text, logos added over the image, watermarks, or generated website interface. Deliver clean cinematic footage ready to sit behind the site's editorial typography.
The overall feeling is quiet, confident Mediterranean luxury: a beautifully photographed private residence with an exceptional car inside. One restrained camera movement, one consistent angle, one uninterrupted nine-second take.Copied
The result — Higgsfield AI 4K
What to look for
Parallax separation — entrance pillars, car, and rear cabinetry shift at different rates as the camera pushes forward
Contact shadows — all four tyres cast soft, physically accurate shadows onto the limestone floor
Reflection continuity — the doorway and timber walls slide across the Ferrari's paint as the viewpoint changes
Material fidelity — limestone pores, timber grain, carbon-fibre weave on the splitter, rubber tread on the tyres
Locked verticals — architectural lines stay perfectly straight, no barrel distortion or wobble
28mm low-angle perspective — the floor stretches wide, the ceiling compresses, giving the garage a cavernous feel from 35cm height
Warm colour bounce — limestone reflects a warm ivory onto the car's lower panels and the underside of the timber shelving
Ease-out termination — the push decelerates naturally in the last 2 seconds instead of stopping dead
The prompt we used
Create a 9-second luxury lifestyle editorial film. 4K resolution, 16:9 composition, cinematic 24fps with beautiful motion blur and film-like texture. One single continuous shot, no cuts or transitions.
A young man in his early 20s with thick curly dark brown hair sits casually atop the roof of a dark green golf cart on a pristine, expansive golf course at golden hour. He wears a full cream/oatmeal monochromatic outfit: a short-sleeve textured knit hoodie with the hood draped loosely behind his neck, relaxed-fit beige trousers, and clean white sneakers with visible soles. A thin bracelet on his right wrist. His posture is relaxed and confident, one leg dangling off the edge of the cart roof.
The golf cart is dark forest green with a tan canvas roof. A full bag of golf clubs sits mounted on the rear. The course is lush emerald green, freshly manicured with gentle rolling contours. Mature oak and pine trees line the fairways in the background. Scattered cumulus clouds in a warm sky.
0-2 seconds: Ultra-low camera angle, approximately 15cm above ground level, looking upward. Lush grass blades fill the extreme foreground, softly out of focus. The full golf cart is visible in the wide frame — wheels, chassis, roof, clubs. The subject sits on top silhouetted against the golden sky, gazing out to the right. The setting sun sits just above the tree line at camera-right, casting long warm shadows across the fairway and producing a natural lens flare. The camera begins an imperceptible forward push and slow vertical rise.
2-4 seconds: The camera continues pushing forward and rising smoothly. The grass foreground drops out of frame as the angle shifts from ground-level upward to roughly chest height. The subject's face and upper body become more prominent. He begins turning his attention downward, reaching for something. The golf cart's roof structure and club bag create layered depth. Warm backlight rims his curly hair with golden highlights. The background trees separate through parallax, revealing dappled light on the fairway behind him.
4-6 seconds: Medium shot now. The camera has risen to roughly the subject's seated eye level, still pushing gently forward. He holds a white golf ball in his right hand, turning it thoughtfully between his fingers, examining it with a quiet, contemplative downward gaze. His left hand rests on his thigh. The knit texture of his hoodie is clearly visible. The sweater draped around his shoulders catches soft amber light. Shallow depth of field renders the golf course behind him as a creamy green and gold bokeh wash with soft tree shapes.
6-8 seconds: Tight medium close-up, slight three-quarter angle from below. The subject's face, shoulders, and hands fill the frame. He continues studying the golf ball with an introspective expression — relaxed brow, lips slightly parted, eyes focused on the ball. Golden hour light wraps around the right side of his face and neck, with the left side falling into soft, warm shadow. His curly hair is richly detailed with individual strands catching backlight. The bracelet on his wrist catches a small glint.
8-9 seconds: The push eases to a near-stop. Final composition is a balanced editorial portrait — subject slightly off-centre left, the sunlit golf course stretching out of focus behind his right shoulder, generous sky space above. He remains absorbed in the golf ball. The sun flares gently through the distant trees. Hold this frame. Do not fade to black.
LIGHTING: Natural golden-hour backlight from camera-right. Sun is low, approximately 10-15 degrees above the horizon. Warm amber key light on the subject's right side, soft fill from sky bounce on the left. Long shadows on the grass. No artificial lighting, reflectors, or studio feel.
COLOUR AND GRADE: Warm, desaturated editorial palette. Rich deep greens in the grass, golden amber in the highlights, creamy ivory in the subject's clothing, warm brown skin tones. Avoid oversaturated greens or heavy orange teal grading. Subtle lifted blacks, gentle film grain, beautiful highlight roll-off. The overall tone is warm ivory and green with golden accents.
MOVEMENT: Exceptionally smooth dolly-style forward push combined with a gentle crane rise. Total camera travel approximately 3-4 metres forward and 1 metre upward over 9 seconds. Constant, fluid velocity with a gentle ease-out in the final second. No handheld shake, no jitter, no sudden speed changes. Natural motion blur on foreground elements as they pass.
CONTINUITY: The subject's clothing, hair, posture transitions, and the golf ball remain consistent frame-to-frame. No morphing, flickering textures, or warping. Wind is minimal — only the slightest movement in his hair. The golf cart, clubs, and all environmental elements remain fixed and stable.
No text, logos, watermarks, or generated UI. No other people or vehicles. Clean cinematic footage ready for editorial overlay.
The overall feeling is quiet luxury, youthful confidence, and golden-hour serenity. An aspirational lifestyle moment — fashion meets sport, captured in one unbroken take.Copied
The result — Higgsfield AI 4K
What to look for
Dolly + crane composite — camera pushes forward and rises simultaneously, two axes of motion in one unbroken take
Backlit hair rim — individual curls catch golden-hour light as a bright edge separation against the darker sky
Foreground rack focus — grass blades in the first 2 seconds are soft and fall away naturally as the camera rises past them
Skin subsurface scattering — warm amber light transmits through ears and fingertips, not just bouncing off the surface
Shallow depth rolloff — background trees dissolve into a creamy green-gold bokeh, consistent with an 85mm f/1.4 wide open
Natural lens flare — sun at camera-right produces a soft horizontal streak, not a CGI starburst
Fabric texture hold — the knit hoodie weave stays consistent and doesn't smooth out or morph between frames
Editorial framing progression — wide establishing → medium → close-up, each composition could be a standalone magazine frame
Pro
Website Templates & Components
21 production websites with full source code. 50+ UI components with copy-paste code. Live preview everything.
Real Build
How we built a luxury real estate site. Start to finish
A scroll-driven cinematic website using a drone video, FFmpeg, React, and Claude Code.
Real Build #2
How we built a premium headphone product page.
Scroll-scrubbed video, GSAP animations, ReactBits ports, and Apple-level product reveals. All vanilla JS.