Flow Devs Pack

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"

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

26 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

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.

Start generating at muapi.ai →

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

Start generating at muapi.ai →

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

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.

An AI workflow packdriven by everythingyou just watched.

Running Claude

The DESIGN.md System

26 prompts that actually work

Where to find the good stuff

20 things most people don't know

8 steps from zero to shipped

How to actually make money with this.

Generate images and video for 30% less

What one prompt actually produces.

How we built a luxury real estate site. Start to finish

How we built a premium headphone product page.

An AI workflow pack
driven by everything
you just watched.