A step-by-step guide to building a cinematic, scroll-controlled AI website, and embedding your video offer without ads ruining it.
The site looks stunning, then a YouTube ad rolls right inside your hero. A skip counter, an unrelated brand, and the whole illusion breaks in one second.
Upload the same video to a platform with no ads and a fully customizable player, then embed that. Clean, on-brand, no interruptions.
Follow them in order. Every command and link you need is right here.
Skills are free add-ons that teach Claude Code a specific craft. Three of them turn it from a generic template maker into a senior-level designer. Install each one: open Claude Code and paste the command, or just send Claude the GitHub link and ask it to install.
A design brain: 84 styles, ~190 color palettes, ~74 font pairings and UX rules. Gives Claude commands like design, ui-styling, brand.
The anti-generic pack: premium styles (minimalist, soft, editorial, redesign) that stop the site from looking like a template.
# in your terminal: npx skills add Leonxlnx/taste-skillThe motion pack (by the author of Sonner and Vaul): premium animation and transition craft, easing, reduced-motion, GPU-only movement. This is what makes the scroll feel expensive.
# in your terminal: npx skills add emilkowalski/skillsAn MCP is a connector that gives Claude a new ability. Magnific lets Claude generate the images and video for your scene right inside the chat, your studio shot, the camera fly-through, everything.
Sign up at magnific.ai. Generation uses credits (paid), and video costs more than images, so top up before you start.
In the Claude app: Settings, Connectors, Add custom connector. Paste this URL and confirm:
https://mcp.magnific.comPrefer the terminal? claude mcp add --transport http magnific https://mcp.magnific.com
Claude will ask you to sign in to Magnific once (OAuth). Approve it, and the image and video tools become available in the chat.
Use the template below. The reference site is already filled in for you (my finished build), so Claude has a concrete style to match. Replace the highlighted slots with your own product, photo, objects and texts, then paste it into Claude Code and attach your photo.
This is the ad-free part. Instead of YouTube, host your video offer on Kinescope, a video platform with no ads at all.
In Kinescope, style the player so it belongs to your site instead of looking like a foreign box.
In Kinescope, open your video and copy the embed code (an <iframe>...</iframe> snippet). Send it to Claude and say: "insert this embed into the video preview block." Done, an ad-free video living inside your AI-built site.
Everything in orange is a slot for your own info. The reference link is pre-filled. Replace the rest and paste into Claude Code.
Build a premium, cinematic, single-page landing site for [WHAT THE SITE IS ABOUT, e.g. an online course, an app, a personal brand]. # Visual direction Match the look, feel and quality of this reference site: https://obscura-course.pages.dev (dark, cinematic, one warm accent color, premium fonts, film grain, a camera-viewfinder overlay). You may pick your own accent color: [#HEX]. Do not make a generic template. # Hero: a scroll-controlled tour of one scene The first screen is one continuous scene built around a video. Generate the assets with the Magnific MCP: 1) A wide, detailed frame of [THE SCENE, e.g. a film studio / office / workshop] with [MY MAIN SUBJECT, e.g. me / a product] in the centre and these objects clearly spread apart across the frame: [OBJECT 1], [OBJECT 2], [OBJECT 3]. Use my photo as a character reference: [ATTACH YOUR PHOTO]. Keep my face and features consistent. 2) From that frame, generate an ~8s video with Seedance. Give it a second-by-second camera route where the viewpoint flies from the subject to each object in turn and holds on each: 0-1s wide; push in on [OBJECT 1], hold; glide to [OBJECT 2], hold; move to [OBJECT 3], hold. Objects stay static, only the camera moves. Scroll behaviour: ONE scroll gesture = ONE flight to the next object. IMPORTANT: PLAY the video segment between key points, do NOT scrub currentTime frame-by-frame (that stutters on Windows). Re-encode the video all-keyframes for smooth playback. After the last object, the next scroll releases the page to the sections below. At each object a short chapter text fades in near the end of the flight, in the EMPTY part of the frame (opposite the object): - [OBJECT 1] to "[CHAPTER 1 TITLE]" + 3 short bullet points - [OBJECT 2] to "[CHAPTER 2 TITLE]" + 3 bullets - [OBJECT 3] to "[CHAPTER 3 TITLE]" + 3 bullets Add a subtle camera viewfinder overlay: corner frames, a REC dot, a running timecode. # Sections below the hero - A video preview block, leave a clearly marked placeholder, I will paste an embed code later. - Pricing: [YOUR PRICE + what is included]. - A minimal footer. Use the placeholder brand name [BRAND NAME] instead of a real brand. # Tech Single HTML + CSS + JS, no build step. Responsive, tuned for desktop capture. Fully self-contained so it can be deployed to Cloudflare Pages. Save a backup version before big changes. When the site is ready, I will paste my Kinescope embed code and ask you to insert it into the preview block.
[WHAT THE SITE IS ABOUT]Your product in one line: a course, an app, a service, your personal brand.[#HEX]One accent color for the whole site (e.g. warm amber #F0A94B).[THE SCENE]Where the tour happens: a studio, an office, a workshop, a kitchen.[MY MAIN SUBJECT] + [PHOTO]You or your product in the centre. Attach 1 photo, or 3 to 4 from different angles for a much better likeness.[OBJECT 1..3]The things the camera flies to. Pick items that represent the stages of your offer.[CHAPTER TITLES]The text at each object: a title plus three short points.[YOUR PRICE]Price and what is included.[BRAND NAME]A placeholder name so it is not tied to a real company.Comment the word Design and I will send you everything.