How I build sites that look like they cost thousands, without writing a single line of code myself

You have seen them. Sites that feel expensive. Text that glides in as you scroll. Images that reveal themselves. A hero that moves with a weight and smoothness that ordinary websites never have.

For years that look required a developer and a real budget. It does not anymore. This is the exact process I use, the same tools in the same order, plus the prompts I paste in at each stage. You never write code. You describe what you want, one layer at a time, and let the AI build it.

What actually makes a site look premium

Before you build anything, it helps to know what you are aiming for. Premium is not one thing. It is a stack of small decisions working together:

• Smooth, weighted scrolling, so the page moves with a little inertia instead of the default jumpy scroll.

• Scroll triggered reveals, so headings, text, and images animate into view as you reach them.

• Restraint, meaning lots of whitespace, a tight color palette, and two fonts at most. Expensive sites remove more than they add.

• One signature moment, such as a horizontal scroll section, a pinned image, or a large heading that reveals on scroll. One is enough.

• Considered motion, with natural easing and staggered timing. Nothing bouncy, nothing distracting.

Every step below is aimed at one of these ingredients.

My tool stack

This is the exact set of tools I use, and what each one is for:

1. Claude Design for the design. This is where I shape the look, layout, and feel before anything gets built.

2. Claude Code for the build. It turns the design into a real, working site with the scroll effects.

3. Magnific (connected as an MCP) for the visuals. I generate the images and video here so everything is original and on brand.

4. Inspect (browser developer tools) for review and edits. I go through the live site and fine tune spacing, text, and details directly.

5. GitHub plus your preferred host and domain for deployment. Push to GitHub, connect a host, choose your domain, and go live.

You do not need to understand the code these tools produce. You only need to describe the effect you want, and the tools handle the rest.

The core principle: build in layers

The single biggest mistake people make is asking for everything at once, such as "build me a premium animated scrolling website for my brand." You get a generic mess.

Instead, build in layers, one prompt at a time:

1. Structure first, the skeleton.

2. Style second, making it look expensive.

3. Smooth scroll third, the feel.

4. Animations fourth, the reveals.

5. One signature moment fifth, the wow.

6. Mobile and polish last.

After each step, look at the result before moving on. If something is off, fix that one thing before adding the next layer. This is the whole trick.

The process, step by step

Step 0: Gather 2 or 3 references

Before you prompt anything, find 2 or 3 sites whose feel you want to borrow. Save the screenshots or the URLs so the AI has a target instead of guessing. Then write one sentence describing the vibe, for example: "Minimal, lots of whitespace, near black and cream palette, big confident typography, calm and expensive."

Step 1: Design it in Claude Design

Start in Claude Design and shape the look before a single thing gets built. Describe the whole site and let it lay out the design on the canvas, then refine.

Design prompt:

Design a single page marketing website for [describe your business in one line]. Lay it out with these sections in order: a full screen hero with a headline and one call to action button, a short intro section, a features or services section with 3 or 4 items, a visual showcase section, a testimonial or social proof section, and a footer with a final call to action. Use a premium, minimal aesthetic with generous whitespace, a refined palette of only [2 or 3 colors], a bold display font for headings, and a clean sans serif for body text. Strong typographic hierarchy. High contrast, uncluttered, and intentional, similar in feeling to [reference site].

Refine one thing at a time: "Make the hero headline much larger," or "Add more space between sections," or "The accent color is too loud, make it more muted." Get the design right here, because everything after this is built on top of it.

Step 2: Build it in Claude Code

Take the approved design into Claude Code and have it build the real site, then add the scroll magic in layers.

Build prompt (structure and style):

Build this design as a single page website with clean, semantic markup. Match the layout, spacing, palette, and typography from the design exactly. Keep it minimal and let every section breathe. Do not add animations yet.

Smooth scroll prompt:

Add smooth, inertia based scrolling to the entire page so it feels weighted and fluid rather than jumpy.

Scroll animations prompt:

Add scroll triggered animations throughout the page. As I scroll: headings and paragraphs fade in and slide up gently as they enter view, images and cards reveal with a subtle scale up or clip effect, and grouped elements such as a row of cards animate in a staggered sequence rather than all at once. Give the hero a gentle parallax so the background moves slightly slower than the foreground. Use natural easing, nothing bouncy or overshooting. Keep it tasteful and restrained.

Signature moment prompt (pick one):

Turn the showcase section into a horizontal scroll gallery: as I scroll down the page, the cards move sideways across the screen, pinned while the horizontal scroll happens, then release and continue down the page.

or: Pin the image in the features section while I scroll, and fade the text descriptions through one at a time as I move down, then release the pin when the section ends.

or: Add a large full width statement heading that reveals as I scroll into it, filling in word by word or wiping into view. Make it a moment.

Review the full scroll after each prompt. Common fixes: "The animations are too slow, speed them up," or "Trigger the reveals a little earlier as they come into view," or "This is too much, keep the animation only on headings and images."

Step 3: Generate the visuals with Magnific

With Magnific connected as an MCP, generate the images and video directly instead of using stock. This is what makes the site feel original and expensive.

Image prompt example:

Generate a [orientation] hero image for [business]: [describe the scene, mood, lighting, and color palette so it matches the site]. High end, editorial, clean composition with space for text overlay.

Video prompt example:

Generate a short, looping background video for the hero: [describe the motion and subject], slow and subtle, muted color grade that matches the palette.

Drop the generated assets into the build, and ask Claude Code to place them: "Use this image as the hero background," or "Add this video as a muted, looping hero background with the headline on top."

Step 4: Review and edit with Inspect

Open the live site and use your browser developer tools (Inspect) to go through it end to end. This is where you catch the small things: a heading that is slightly too large, spacing that feels tight, text that needs rewriting, a color that is a touch off.

Note what needs changing, then either adjust it live to test, or hand the list back to Claude Code in one go: "In the hero, reduce the headline size slightly and add more top padding. In the features section, tighten the gap between cards. Fix the footer link color to match the accent."

Then check it on a real phone. Preview windows lie about smoothness.

Mobile prompt:

Make the entire site fully responsive on mobile and tablet. Simplify or reduce the heavy animations on small screens so scrolling stays smooth, especially parallax and horizontal scroll. Readable text, large tap targets, no horizontal overflow.

Polish prompt:

Add a sticky navigation bar that subtly shrinks or gains a background as I start scrolling, with smooth scroll links to each section. Add refined hover states on buttons and links, and an elegant load in for the hero so nothing snaps into place. Keep everything consistent with the current style.

Step 5: Deploy with GitHub

When the site is ready, push it to GitHub, connect your preferred host, and choose your domain name. The host builds and serves the site, and your domain points to it. Ask Claude Code to walk you through the exact steps for your chosen host if you want them spelled out.

That is the full process, from blank canvas to a live premium site.

My favorite: build the whole thing in Framer

The stack above gives you full control. But my personal favorite, and what I used to design and build my own site at inspring.design, is Framer.

Framer is an all in one tool where you design, build, and host in the same place, with no code and with scroll animations built right in. It is the fastest way I know to ship a premium scrolling site.

If you go this route, the same principles apply:

• Build in layers: structure, then style, then scroll effects, then your signature moment.

• Use the built in scroll and appear effects for reveals, parallax, and pinned sections. Keep the motion restrained.

• Bring in your Magnific generated images and video for original visuals.

• Two fonts and three colors, maximum.

• Publish and connect your domain directly inside Framer.

Same premium result, fewer moving parts.

The copy and paste prompt library

In order. Fill in the [brackets].

1. Design (Claude Design): Design a single page marketing website for [business]. Sections in order: full screen hero with headline and one CTA button, short intro, features or services with 3 or 4 items, visual showcase, testimonial section, footer CTA. Premium minimal aesthetic, generous whitespace, palette of only [2 or 3 colors], bold display font for headings, clean sans serif for body, strong hierarchy, high contrast and uncluttered, like [reference].

2. Build (Claude Code): Build this design as a single page website with clean semantic markup. Match the layout, spacing, palette, and typography exactly. Minimal, let sections breathe. No animations yet.

3. Smooth scroll: Add smooth, inertia based scrolling to the whole page so it feels weighted and fluid, not jumpy.

4. Scroll animations: Add scroll triggered animations: headings and text fade and slide up on entry, images and cards reveal with a subtle scale or clip, grouped elements stagger in sequence, gentle parallax on the hero. Natural easing, nothing bouncy, tasteful and restrained.

5. Signature moment: [Pick one from Step 2: horizontal scroll gallery, pinned image with changing text, or big reveal heading.]

6. Visuals (Magnific): Generate a [orientation] hero image for [business]: [scene, mood, lighting, palette]. High end, editorial, clean composition with space for text.

7. Mobile: Make it fully responsive. Simplify heavy animations on mobile, tone down parallax and horizontal scroll on small screens. Readable text, large tap targets, no horizontal overflow.

8. Polish: Add a shrinking sticky nav with smooth scroll links, refined hover states, and an elegant hero load in. Keep it consistent with the current style.

When the AI breaks something (it will)

This is normal. The fix is always the same shape:

• Change one thing at a time. If you ask for five changes, you cannot tell which one broke it.

• Be specific about what and where. Not "make it better," but "in the hero, make the headline larger and remove the parallax."

• Name what broke. "That change made the images disappear on scroll. Bring them back, and instead only [do the smaller thing]."

• Revert freely. "Undo the last change, I preferred it before." Then try different wording.

• Keep a good version. When something looks right, commit it to GitHub before your next big experiment. That is your save point.

Pro tips

• Steal structure, not pixels. Reference real sites for feel and layout, then make it yours with your palette and words.

• Two fonts, three colors, maximum. Constraint is what reads as premium.

• Motion is seasoning. If you are unsure whether an animation is too much, it is too much. Remove it.

• Generate your own visuals. Original images and video separate your site from every template.

• Write your real copy early. Placeholder text hides layout problems, real words expose them.

That is the whole process. Design in Claude Design, build in Claude Code, generate visuals in Magnific, review with Inspect, deploy through GitHub, or build the entire thing in Framer if you want it all in one place.

Now go build something worth scrolling.