I Built $10000 Website With Free Al Tools In 10 Minutes | Free Resources

Build an AI Website With Free Tools

This video demonstrates how to create an animated cursor-tracking website using AI tools, starting with visual assets and ending with a live website that can be shared with clients. The workflow uses free or free-credit tools for image creation, animation, website generation, and deployment.

Step 1: Create the Character Asset

The first step is finding a suitable character or person image to use as a reference. The creator searches for character art and selects an image that can work as a moving character on the website.

Step 2: Generate and Edit the Image

ChatGPT or other AI-powered image editing tools can be used to modify the reference image. In the demonstration, the character is adjusted to look toward the camera with a normal smile and is prepared in a 16:9 aspect ratio for website use.

Step 3: Create the Animation With Kling

The creator uses Kling's image-to-video feature to animate the character. Two images are prepared as the starting and ending frames, with the character looking in different directions.

The two images are exported and uploaded to Kling's multi-shot image-to-video workflow. A simple animation prompt is used, with a short four-to-five-second generation selected to reduce credit usage.

Step 4: Generate the Website

After creating the animation, the next step is building the website. The creator takes a website prompt from Motion Sites AI and uses it with Google AI Studio.

Google AI Studio generates a responsive website from the prompt. The creator then replaces the website's video link with the newly generated Kling animation without changing the existing functionality.

Step 5: Customize the Website

The generated website can be customized using additional natural-language instructions. In the demonstration, the page colors are changed so that the content uses white text, creating the final animated landing-page design.

Step 6: Publish the Website

The video demonstrates two publishing approaches. The website can be published directly through Google AI Studio, or the generated project can be downloaded and deployed through Vercel.

For the Vercel workflow, the project is downloaded as a ZIP file, extracted, uploaded as a new deployment, and published. Once deployed, a custom domain can be connected and website statistics can be viewed.

Step 7: Find Clients

The creator recommends using Twitter as a long-term channel for designers to showcase AI-generated websites and attract potential clients. The suggested strategy is to post short screen recordings of completed websites and include a clear call to action for people who want a similar website.

How to Sell the Website

The video suggests directing interested prospects to a booking page such as Calendly. During the sales call, the creator recommends presenting a clear website package and focusing on the value and result delivered rather than emphasizing whether AI was used to create the website.

Complete Workflow

1. Find a suitable character reference.
2. Generate or edit the character image.
3. Create multiple poses or directions for the character.
4. Animate the images with Kling.
5. Find a suitable website prompt.
6. Generate the website with Google AI Studio.
7. Replace the website's video with the generated animation.
8. Customize colors and design with AI instructions.
9. Deploy the website through Google AI Studio or Vercel.
10. Connect a domain and share the live website.
11. Showcase the result on Twitter.
12. Use a booking page to convert interested prospects into clients.

Key Takeaways

1. AI can accelerate the creation of interactive website assets.
2. Image-to-video tools can turn static character images into animated website elements.
3. Google AI Studio can generate responsive websites from natural-language prompts.
4. Existing website functionality can be modified through additional AI instructions.
5. Projects can be deployed to a live domain using services such as Vercel.
6. Screen recordings can be used to showcase AI-generated website work.
7. Social media can serve as a client-acquisition channel for designers.