Skip to content
Ulunavia
Book a meeting

Build log — no-code is a lie, this is the real stack

Build a product website that looks expensive.

Two AI images, one terminal, four tools. This is the exact sequence I use — every prompt below is copy-ready, and the links go straight where you need to be.

  • 4 steps
  • ~2–6 hours, honestly
  • Beginner-friendly

Part one

The two images that carry the whole page

Everything starts here. You need a start image (your product whole) and an end image (the same product exploded). Later, the scroll animates between them — that's the effect people mistake for video.

Paste these into ChatGPT, Gemini, Google Flow — all free. Or Fal.ai if you want more control; it needs credits, but they're cheap.

Type it once and it drops into both prompts below, so Copy gives you something finished.

Start prompt

Fully assembled

High-end studio product photograph of [PRODUCT], fully assembled and intact, floating dead center against a seamless matte light-grey studio background. Straight-on view, perfectly level camera, soft even studio lighting, one subtle soft shadow directly beneath the product, photorealistic, ultra sharp, high detail. Clearly show the product's overall form, proportions, materials, and defining design features. Keep the product small enough in frame that there is generous empty space on every side. No text, no watermark, no hands, no props, no brand logos. Landscape 16:9.

End prompt

Exploded / teardown

High-end studio product photograph of the same [PRODUCT] as a clean exploded view: the outer shell, main body, and major components or layers separated and floating in an organized, evenly spaced arrangement along one axis, like a technical teardown render. Same straight-on view, same perfectly level camera, same soft even studio lighting, same seamless matte light-grey studio background, one subtle soft shadow beneath. The core body of the product stays in the exact center at the same size, with the parts spreading outward around it in a clean, logical arrangement. Show only the major visible parts and construction layers relevant to the product. Photorealistic, ultra sharp, high detail. No text, no watermark, no hands, no props, no brand logos. Landscape 16:9.

Why both prompts repeat themselves. The lighting, camera angle, background and framing are word-for-word identical on purpose. If those drift, the two images won't line up and the scroll transition falls apart.

Part two — while the images render

Assemble the stack

Four pieces, in this order. Each one fixes a specific way AI-built sites give themselves away.

  1. Install Claude Code

    Claude Code runs locally on your machine, in your terminal. One command and you're in.

    Install
    npm install -g @anthropic-ai/claude-code
    Then run
    claude

    Requirements. Node.js 18+ installed. Sign in with your Anthropic account when it asks.

    Why this matters. Claude Code reads your whole project, edits many files at once, and runs commands. That is what makes it different from pasting code out of a chat window one block at a time.

  2. Add animation — Framer Motion

    Default AI-generated sites are static and lifeless. Animation is the single biggest thing that makes a site feel premium.

    Install
    npm install framer-motion

    Then tell Claude Code

    Paste in your project

    Use Framer Motion for all animations. Apply scroll-triggered fades, staggered reveals, and smooth hover transitions on interactive elements.

    What changes. Hero sections breathe. Cards slide in on scroll. Buttons feel alive. This one addition is most of the distance between “AI website” and “agency website”.

  3. Add a design skill

    Claude Code supports skills — reusable instruction sets that shape how it approaches a job. A design skill teaches it taste: spacing, hierarchy, typography, colour, layout.

    1. Create a .claude/skills/ folder in your project root.
    2. Add a SKILL.md file holding your design rules.
    3. Claude Code references it automatically whenever it builds UI.

    What goes in it

    • A typography scale — a real type system, not arbitrary sizes
    • A spacing system — an 8px base grid
    • Colour tokens — primary, neutral, accent. No stray hex codes
    • Component patterns — button states, card structure, form layouts
    • Explicit “avoid the generic AI aesthetic” instructions

    Why this matters. With no design skill, Claude Code falls back on generic Tailwind patterns. With one, every component follows a single consistent system.

  4. Pull components from 21st.dev

    Don't reinvent the wheel. 21st.dev is a library of production-ready, properly designed components you can drop straight into your project.

    1. Visit 21st.dev.
    2. Browse — heroes, pricing tables, testimonials, navbars, footers.
    3. Copy the component code.
    4. Paste it into your project and hand it to Claude Code.

    The integration prompt

    Paste after the component

    Integrate this 21st.dev component into our landing page. Match it to our design tokens, replace the placeholder content with our copy, and add Framer Motion entrance animations.

    Why this matters. Every component is already designed by a professional, and Claude Code adapts it to your brand. You skip most of the design work and land on a site that looks expensive.

Reference

The full stack, end to end

Swipe the table sideways on a phone →

StepToolWhy, and how
Write the promptsChatGPT, Gemini or Google Flow — free. Or Fal.ai / Higgsfield, cheap credits.AI reads prompts better than people do. Give it these two and it gives you a flow video, so you can build the site around it — and add it as a scroll animation.
Install Claude CodeWhile the images render, download it and play. Don't wait.This is your website builder — the architect for your ideas.
Install Framer MotionStraight after Claude Code.Makes every animation smooth instead of janky.
Add a design skillWrite your own, or start from any public one.The important one. Nobody expects you to be an expert overnight — you can ask Claude Code to help you get this step done and it will walk you through it.
Grab components21st.devWhere the detail work lives. Change how buttons look, or take a whole page. Pick the ones you like, paste them, hand them to Claude Code — the structure is already there and you only have to paint.
Generate the videoHiggsfield or Fal.ai — SeeDance, Kling, or whatever's current.Feed it your start and end image and it fills in the middle. Later you hand that to Claude Code for the scroll integration. You do have to buy credits — no free model does this properly, and it's the one place worth spending.
Node.js 18+ and npmnodejs.org — download the version your system needs, or paste the question into any LLM.Required. Nothing else runs without it.
Deploy itVercel — sign in with GitHub.Turns localhost:3000 into a real address. Push a change and it redeploys itself. Tell Claude Code to deploy via Vercel and it will walk you through — and at the end of that, you have a website.

Read this before you start

Five things people get wrong

  • 01

    Those scroll sites aren't videos

    If they were, the page would lag constantly. The first scroll triggers the start image, the second triggers the middle frames generated on Fal.ai or Higgsfield, the third triggers the end image. Stitched together it reads as video — it isn't one.

  • 02

    It costs money, but not much

    Image credits, and a Claude Code subscription if you don't already have one. That's the whole bill. It should not be expensive.

  • 03

    You will not finish in an hour

    AI influencers present it that way to get views. If you're a beginner, expect a few hours or a few days. You'll get faster and better — you are not behind.

  • 04

    ChatGPT can make your logo

    Most people will disagree with me on this. Describe it well enough and you get an excellent logo.

  • 05

    Finding the client is the whole game

    Go for a walk and find places with no website. Search Google Maps. Or go advanced with Apollo and Instantly.ai. Or just ask Claude or ChatGPT where to look.

If you'd rather not

Everything above is free. Doing it is the expensive part.

That is the real trade: the method costs nothing and the hours cost plenty. If you want the result without the weekend, that is what we do — and it is the same stack, run by someone who has already made the mistakes.

See what we build

Or just email me — I'll answer either way.