Premium AI website workflow

How to Build a Premium Website With AI, Starting From Zero

By Shreyas Raj. Written from my YouTube video, about 20 minutes long.

Video: I Built a $10,000 Premium Website with Claude Design for FREE on the AI with Shreyas Raj YouTube channel.

Short answer: Start from a design inspiration, ask an AI model for image prompts in JSON, generate the images and looping videos in Google Flow, then give the media and a one-shot prompt to a coding agent. The agent builds the site and you review it locally.

What you will learn

Use Pinterest as your inspiration source and screenshot a design you like
Ask an AI model for at least 10 image visuals as JSON prompts
Generate images free in Google Flow and loop videos with matching start and end frames
Tell the coding agent exactly which video goes in which section
Ask the agent to deploy locally so you can review the result

Start with inspiration, not a blank page

A premium website needs two things: an inspiration and visuals. I am not an originalist, so I take inspiration from existing designs. The place I go for premium website designs is Pinterest. In this build the client niche is a yacht club, so I searched for yacht website and picked a design I liked.

I screenshot that design and use it as an anchor for the AI. The site itself is just a wireframe until you add images and videos, so the next job is getting those visuals.

The reason I start with an inspiration is simple. You are giving the AI an anchor. Without a reference, you are asking it to invent a design and the results are usually generic. With a screenshot, every later prompt has something to hold onto.

Ask an AI model for the image visuals

I put the screenshot into Perplexity with a Claude Sonnet model and thinking mode on. If you want a fully free route, ChatGPT or Gemini will also work. I dictated the prompt: I am building a site like this for a client who owns a yacht business, give me image visuals for all the sections, the hero is a yacht cutting through water from a side angle with text on the left, output in JSON, at least 10 visuals.

The first answer was not in the format I wanted. So I use a JSON image generator prompt from the guide document in the video description. I paste it in and say give me image prompts in this JSON format for all the images. It has rules such as output only the JSON, no explanation. This is how I get crisp image outputs.

One small detail on the tool choice. Perplexity is paid, although I mention a student price, and I use it because I like it. The point of this step is not the tool. It is that the AI looks at your inspiration screenshot and tells you which visuals the website will need, section by section.

Build the site while the visuals generate

Do not wait for the images. In parallel I take the one-shot rebuild prompt from the document and paste it into my AI coding agent. You can use Claude Code, Antigravity or Codex. I used Windsurf, which in the video I describe as free for 14 days with access to Claude Opus models.

I open a new folder in a new window, paste the prompt into the sidebar, pick Claude Opus at medium effort, which is more than enough, and press enter. The agent starts building the wireframe while I make visuals.

The guide document also contains isolated components, like the ripple effect that follows the cursor and the double-opening sidebar, so you can reuse them in other projects.

The coding agent works from the prompt alone for now, so the site comes together as a skeleton with the structure, menu and layout in place. When the visuals are ready, the agent only has to place them, which is a much smaller job.

Generate the images in Google Flow

Open Flow and paste the JSON prompts one by one. Image generation there is free; video generation needs a one-month trial that you can cancel. Download the results at upscaled quality.

The fleet section needs three boats seen from above, so I asked Perplexity for a bird's eye view of three yachts in different colors, black, white and silver, in 9 by 16 format, as JSON prompts. When I wanted more visuals, I pasted the earlier image prompts back in and asked for more based on them.

Because there are only so many images in a first pass, I went back to the AI and asked for more. I took the image prompts section from the earlier answer and said: use these image prompts as the basis for more visuals and give me more image prompts. It returned a fresh batch that I could generate straight away. One of them I had to regenerate in 9 by 16 because I had used the wrong ratio first.

Turn the images into looping videos

For video, you can describe the motion yourself or ask the AI agent for looping video prompts for every visual. The loop trick is that the same image is used as both the first frame and the last frame, so the clip loops automatically.

For the hero, my prompt said the ship cuts through the sea at high speed, the camera stays still and the ship never leaves the frame, with a cinematic and majestic feel. Match each video prompt to the right visual, or the result will be wrong. If the menu shows the fleet in 9 by 16, generate those clips in 9 by 16 too.

If you are not confident writing video prompts, ask the agent for a looping video prompt for every visual. They do not need to be in JSON for video. You then match each prompt to its image, which is why naming files clearly matters.

Give the agent a media map

I create a media folder in the project, drop all the downloaded videos in, copy the folder path and paste it to the agent. Then I explain where each file goes. Videos named boat moving straight are the three fleet entries, the ship cutting through is the hero video, and some clips can be used anywhere. I also note that if the ship sits on the left of a video, the text must be on the right.

Without that map the AI will misplace the videos. Finally I ask it to deploy the site locally so I can view it.

I downloaded the upscaled version of each clip. One clip was still downloading while I was already copying the rest, so I waited for all four before pasting the whole set into the media folder.

The explicit instruction at the end was: I have given you everything I know, fill the rest out for me. That tells the agent to make reasonable decisions for anything I did not specify.

Review the result

When it was ready I scrolled through it. The hero and the fleet menu worked, and there were a few small bugs I would refresh and fix. This is normal. You review, tell the agent what is wrong, and iterate. The full build in the video took me about 35 minutes of recording, and I mention I had to redo it once because the first recording was corrupted.

In the video I note a few bugs in the first render, so I refreshed the page to check them. The hero and the fleet menu worked, and I said I had nothing much to complain about. Treat the first result as a draft and ask the agent to fix whatever looks wrong.

Watch the full video to see the whole build, the prompts in action and the finished site from start to finish.

Watch the full video See EducateXAI

Results vary and depend on your effort. Read the results disclaimer.

Questions people ask

Why use JSON image prompts?

In my experience a plain prompt performs worse than a structured JSON one. A JSON prompt with clear rules gives crisper, more consistent outputs, which matters when the images become hero sections on a website.

How do I make a video loop?

Use the same image as both the first frame and the last frame when generating the video. Then the end of the clip returns to the start and plays as a continuous loop.

Do I need a paid tool for every step?

No. Image generation in Google Flow is free, and the coding agent had a free trial period. Video generation in Flow needed a one-month trial that you can cancel, as I describe in the video.

How do I stop the AI misplacing my videos?

Give the agent the folder path and a clear map of which file name belongs in which section, including text alignment notes. Without that, it will guess and often place videos in the wrong sections.

More from the channel

Prefer short reads? Start with the EducateXAI guides.