How to Build a $10,000 Website With Free AI Tools (No Code, No Design Skills)

Here's a full step-by-step breakdown of how to create a polished travel website (Paris-themed, in this example) with a smooth scroll animation — completely free, with no coding and no manual design work. We'll use ChatGPT, Google AI Studio, Flow AI, Clipchamp, EZGIF, and Antigravity IDE.

🧰 Tools You'll Need

ChatGPT — generating images, prompts, and website copy

Google AI Studio — generating the design for each website section

Flow AI — generating video transitions between frames

Clipchamp — free video editor for merging clips

EZGIF — converting video into a sequence of JPG frames

Antigravity IDE — AI code editor for assembling the final site with scroll animation

Cloudinary — image hosting (to get direct URLs)

Pinterest — finding design references

Step 1. Create the Hero Animation (Plane Window → Clouds → Eiffel Tower)

Find a reference image on Pinterest — for example, a view from a plane window.

Upload the image to ChatGPT and ask it to:recreate it in a 16:9 aspect ratio

remove all text

slightly widen the window frame

Refine the prompt until the result looks right (e.g., "make the frame wider").

Generate a second key frame — the Eiffel Tower in the same color palette, with soft clouds around it for visual consistency.

Create a middle frame — a scene made entirely of clouds (camera positioned as if inside the clouds). This is needed to split the animation into two separate videos that will later be merged smoothly.

Result: you now have 3 images — plane window, clouds, and the Eiffel Tower.

Step 2. Generate Video Transitions in Flow AI

Open Flow AI and upload all three images.

Select the video generation mode that uses a starting and ending frame.

Video 1: start — plane window, end — clouds.

Video 2: start — clouds, end — Eiffel Tower.

For each video, ask ChatGPT to write a short, effective prompt describing the camera movement, paste it into Flow AI, and generate the clip.

Result: two separate videos with a smooth camera movement "flying through the clouds."

Step 3. Merge the Videos in Clipchamp

Open Clipchamp → "Create a new video."

Import both video files (My media → Import media).

Drag both clips onto the timeline, one after the other.

Slightly increase the playback speed of both clips for a smoother, faster feel.

Add a transition effect between the two clips for a seamless connection.

Export the final merged video to your computer.

Step 4. Break the Video Into Frames (EZGIF)

Go to EZGIF → the "Video to JPG" section.

Upload your exported video.

Set the duration to about 10 seconds and the frame rate to 30 fps.

Click "Convert to JPG."

Download the resulting ZIP archive and extract it — you'll have a full sequence of JPG frames.

Step 5. Set Up Antigravity IDE

Download Antigravity IDE from the official website (Product section → Antigravity IDE), choosing the version for your OS.

Install and open it, then click "Open Folder."

Create a new project folder (e.g., travel-site) and open it in Antigravity IDE.

Drag the folder containing all your JPG frames into the project window.

Then drag that same folder into the AI chat panel on the right.

Use this prompt:

"Create a smooth scroll animation using the provided image sequence. Don't add any extra components, text or UI elements. Keep the animation smooth and generate a local host preview link."

Approve any permission prompts while the AI generates the project.

Open the resulting local link — your base scroll animation is ready.

Step 6. Design the Website Sections in Google AI Studio

Search Pinterest for banner and section design references.

Upload your chosen reference to Google AI Studio with a prompt like:

"Use this as a reference and recreate the banner. Keep the same layout and text structure, remove the background, use a solid black background instead. Apply the VM sense font, use pure white text, and maintain the overall composition."

Refine with follow-up prompts covering details like headline size, spacing, card size, icons, and glassmorphism effects. For example:

"Keep the banner height at 900 pixels… Reduce the headline size to 54 pixels with a medium font weight… apply a transparent glassmorphism effect with a blurred background to both cards."

The big advantage of AI Studio: your prompts don't need to be perfect — just describe the changes you want in plain language, and the design improves with each iteration.

Generating Copy

At the same time, ask ChatGPT to write the text content for 4–5 sections of the site (headlines, subheadings, card descriptions) and paste it into AI Studio as you design each section.

Repeat for the Remaining Sections

For each additional section:

find a reference on Pinterest;

recreate it in AI Studio, keeping the style consistent with previous sections;

refine with follow-up prompts;

add the copy generated by ChatGPT.

For a final section, you could ask for something like the Eiffel Tower centered with info cards around it (two on the left, two on the right), leaving the center empty for the main visual.

Step 7. Export the Design and Merge It With the Scroll Animation

In Google AI Studio, click Code → Export → Download as ZIP.

Extract the archive and open the src folder.

Drag it into the chat panel of Antigravity IDE.

Use this prompt:

"The uploaded files contain the components and content for our website. Integrate this layout into the scroll animation that we created earlier. As the user scrolls, each section should appear smoothly one after another."

Wait for the generation to finish, then open the new local link — all sections now appear one after another as you scroll, synced with the animation.

Step 8. Final Touches

Through the Antigravity IDE chat, you can make targeted adjustments, such as:

centering the headline, subheading, and CTA button in the hero section;

adding a gradient background to cards that look "flat";

swapping out images: generate a new one in ChatGPT, upload it to Cloudinary, copy the direct URL, and paste it into your Antigravity prompt (the AI works better with URLs than local files).

Micro-interactions

Finally, ask Antigravity to add:

"smooth hover effects, entrance animations, and small interactions across the website"

This gives the site a more "alive" feel — smooth hover states, entrance animations, and small interactive touches throughout.

Summary

The full workflow:

Pinterest (reference) → ChatGPT (images/copy) → Flow AI (video transitions) → Clipchamp (merging) → EZGIF (frames) → Antigravity IDE (scroll animation) → Google AI Studio (section design) → Antigravity IDE (integration + polish)

This approach lets you assemble a full, visually premium website with a cinematic scroll animation in just minutes — no code, no Photoshop/Figma, and no design team required.