AI Website Creation Workflow - Victor

Executive Summary

This note captures Victor's workflow for building polished, AI-generated websites without traditional design or coding. The key idea is not simply to ask AI to “make a website.” The workflow depends on a strong design reference, careful image generation, background animation, responsive layout checks, and controlled prompting.

The process combines:

• 🎨 Design inspiration from current Dribbble trends
• 🖼️ AI image generation using Nana Banana, ChatGPT, and Figma refinement
• 🎞️ Background animation using Kling and Grok
• 🧱 AI website generation and editing using Anti-Gravity
• 🚀 Hosting and deployment through Hostinger, Docker, GitHub, and domain setup
• 📱 Responsive testing for desktop and mobile before publishing
• 📣 Social proof through screen recordings and demo-based posts

Core Workflow at a Glance

%%{init: {  
"theme": "base",  
"themeVariables": {  
"background": "transparent",  
"primaryColor": "#102a43",  
"primaryTextColor": "#ffffff",  
"primaryBorderColor": "#22c55e",  
"lineColor": "#a7f3d0",  
"fontSize": "16px",  
"fontFamily": "Inter, Segoe UI, Arial"  
}  
}}%%  
flowchart TD  
A[🎯 Find design inspiration] --> B[🧹 Simplify reference screenshot]  
B --> C[🖼️ Generate image assets]  
C --> D[🎞️ Create background animations]  
D --> E[🧱 Build website with AI]  
E --> F[📄 Create matching project pages]  
F --> G[📱 Test desktop and mobile]  
G --> H[🚀 Deploy to hosting]  
H --> I[📣 Record demo and promote]  
  
classDef step fill:#102a43,stroke:#22c55e,stroke-width:2px,color:#ffffff;  
classDef publish fill:#14532d,stroke:#86efac,stroke-width:3px,color:#ffffff;  
class A,B,C,D,E,F,G,H step;  
class I publish;  
linkStyle default stroke:#a7f3d0,stroke-width:2px;

1. AI-Driven Website Creation Process

Victor demonstrated a full workflow for creating a high-quality AI-generated website without manually designing or coding every part.

1.1 Start with Strong Design Inspiration

The workflow begins by searching for fresh design ideas on Dribbble, especially trending designs from the last month.

This matters because AI performs better when it has a strong visual reference. A weak or vague prompt usually creates generic output. A strong reference gives the AI a design direction, structure, composition, spacing, and mood.

Why Dribbble is useful

• It exposes current visual trends.
• It gives strong layout references.
• It helps avoid generic AI website design.
• It provides examples of typography, spacing, contrast, and visual hierarchy.

1.2 Simplify the Reference Before Rebuilding

Victor simplified design screenshots before giving them to AI. The goal was to remove unnecessary complexity while preserving the structure, text, background, and layout.

This makes it easier for the AI builder to recreate the design accurately.

Practical method

1. Find a high-quality inspiration screenshot.
2. Remove distracting or unnecessary elements.
3. Keep the core layout and visual style.
4. Use the cleaned screenshot as the reference for AI rebuilding.
5. Customize the content for the actual use case, such as a personal portfolio.

2. Image and Animation Generation

The visual quality of the website depended heavily on generating strong image assets and background animations.

2.1 Image Generation Tools

Victor tested multiple tools:

• Nana Banana
• ChatGPT
• Grok
• Figma AI tools
• Kling

Nana Banana was preferred for higher-quality image generation, especially for character visuals and composition control.

2.2 Figma for Image Extension and Cleanup

When AI-generated images were cropped or incomplete, Victor used Figma to extend and adjust them.

This is a smart step because AI-generated assets often look good but are not immediately usable in a real website layout.

Common image issues

• Cropped characters
• Awkward framing
• Missing background space
• Poor aspect ratio for hero sections
• Visual mismatch between image and layout

2.3 Background Animation with Kling and Grok

Victor used Grok and Kling to generate looping animated backgrounds.

Kling was preferred because the output was more minimal, smoother, and less distracting. Grok produced video with voice elements, which was not suitable for subtle website background use.

What makes a good background animation?

• Smooth looping
• No distracting cuts
• Minimal movement
• Silent playback
• Consistent mood with the page
• Low visual noise behind text

3. Website Building with Anti-Gravity

Anti-Gravity was used as the main AI website development environment.

3.1 What Anti-Gravity Was Used For

Anti-Gravity supported:

• Uploading images and videos
• Recreating design from screenshots
• Editing website code locally
• Previewing the site
• Testing desktop and mobile layouts
• Generating prompts for consistent design replication
• Creating additional pages with matching style

3.2 Prompting for Design Recreation

Victor used precise prompts to instruct the AI to recreate the design style, layout, fonts, spacing, and animations while changing the content.

The prompt was not vague. It included clear visual requirements and relied on the screenshot reference.

Good prompting pattern

Use this screenshot as the design reference.
Recreate the layout, typography, spacing, colours, and visual mood.
Keep the design minimal and polished.
Replace the content with my portfolio content.
Preserve similar text length where possible so the layout does not break.
Make the page responsive for desktop and mobile.

4. Multi-Page Website Structure

The workflow did not stop at a single homepage. Victor also generated additional project pages with consistent style and transitions.

4.1 Consistency Across Pages

Each page followed the same design language:

• Similar fonts
• Similar colour palette
• Minimalistic backgrounds
• Matching animation style
• Smooth transitions
• Cohesive visual identity

This is important because many AI-generated websites look good on the homepage but fall apart across inner pages.

4.2 Project Page Design

Project pages used visuals such as animated moons and thematic background videos to maintain brand unity.

The project navigation avoided long scrolls and used a more focused single-screen style with “next project” navigation.

Why this works

• Keeps user attention focused
• Reduces clutter
• Makes each project feel premium
• Avoids endless scrolling
• Creates a more app-like portfolio experience

5. Mobile Responsiveness and UX

Victor checked both desktop and mobile layouts before publishing.

5.1 Mobile-Specific Adjustments

Mobile responsiveness required layout changes, not just automatic resizing.

Examples included:

• Reordering content and videos
• Placing videos above text on smaller screens
• Adding gradient transitions
• Smoothing visual breaks between sections
• Ensuring text remains readable

5.2 Loader Animations

Victor added loader animations to improve perceived performance during page loads and video buffering.

This makes the site feel smoother and more intentional.

Benefits of loader animations

• Reduces perceived waiting time
• Makes transitions feel deliberate
• Helps with video-heavy pages
• Improves polish and user confidence

6. Hosting and Deployment

Victor demonstrated moving from AI-generated code to a live hosted website.

6.1 Local Development Workflow

The site was downloaded and opened locally in Anti-Gravity. This allowed proper review and testing before publishing.

The local workflow included:

• Running the website locally
• Checking responsiveness
• Testing navigation
• Reviewing page transitions
• Confirming desktop and mobile behaviour

6.2 Hostinger Deployment

Hostinger was recommended as a cost-effective hosting option for web apps and websites.

The setup involved:

• Domain registration
• Hosting setup
• Docker deployment
• GitHub URL integration
• Publishing the live site

7. Content Automation and Prompt Reuse

A major part of the workflow was using prompts and screenshots repeatedly to maintain consistency across pages.

7.1 Reusable Prompt Templates

Anti-Gravity generated prompts that could be reused for additional pages.

This makes it easier to create multiple pages without manually restyling each one.

Benefits

• Faster page creation
• Consistent visual identity
• Less manual design work
• Easier scaling for client websites
• Lower redesign effort

7.2 Screenshots as Design References

Screenshots were used as direct references for layout, positioning, spacing, and style.

This is powerful because screenshots communicate visual details that text prompts often miss.

8. Business Impact

This workflow lowers the barrier to creating professional websites and makes it easier for freelancers, creators, and small agencies to ship polished demos quickly.

8.1 Why This Matters

The process can help with:

• Faster website prototyping
• Lower design and development cost
• Better client demos
• Faster turnaround
• More professional social proof
• Scalable multi-page portfolio creation

8.2 Social Media Demonstration Strategy

Victor used screen recordings to showcase the website interaction and animations.

This is important because animated websites are hard to explain with static screenshots.

Suggested promotion workflow

1. Record a short screen demo.
2. Show page transitions and animations.
3. Mention the AI tools used.
4. Explain the business use case.
5. Share the result as a social post.

9. Tool Stack Summary

10. Key Lessons

The real lessons

• AI website builders still need strong direction.
• Current design inspiration improves output quality.
• Image generation must be refined before use.
• Animation should be subtle and purposeful.
• Mobile layout needs explicit attention.
• Consistency across pages matters more than homepage beauty.
• Prompt reuse is essential for scaling.
• Demo videos are powerful for selling the result.
• Hosting outside closed builders gives more control.

Action Checklist

Design and Inspiration

• Explore Dribbble for current design inspiration.
• Filter inspiration by recent or trending designs.
• Choose a reference with strong layout and visual hierarchy.
• Simplify the screenshot before using it as an AI reference.

Image and Animation

• Generate character images with Nana Banana and ChatGPT.
• Compare image quality and composition.
• Use Figma to extend or fix cropped images.
• Generate background videos using Kling and Grok.
• Select the smoothest, least distracting animation.
• Use looping muted videos for hero backgrounds.

Website Build

• Upload screenshots, images, and videos into Anti-Gravity.
• Prompt AI to recreate the design style and layout.
• Keep text length similar to the reference where possible.
• Add responsive behaviour for desktop and mobile.
• Add loader animations if the site uses heavy videos.

Multi-Page Structure

• Create additional project pages using the same visual language.
• Reuse prompt templates for consistent styling.
• Add matching transitions between pages.
• Use project navigation instead of long scrolling where suitable.

Deployment

• Download and open the generated code locally.
• Test desktop layout.
• Test mobile layout.
• Fix responsiveness issues.
• Deploy through Hostinger.
• Connect the domain.
• Use Docker and GitHub integration where applicable.

Promotion

• Record a short screen demo.
• Show animations, transitions, and mobile responsiveness.
• Prepare a social media post explaining the workflow.
• Mention the AI tools used.
• Position the result as a real client-ready workflow, not just an experiment.

Personal Notes

What to Apply in My Own Work

• Use AI builders only after finding a strong visual reference.
• Treat screenshots as design contracts.
• Build reusable prompts for repeatable website creation.
• Focus on one polished demo rather than many unfinished experiments.
• Test mobile early, not at the end.
• Record demos because movement and interaction sell the result better than text.

Strategic Angle

Potential offer framing:

“I help businesses turn rough website ideas into polished, animated, mobile-ready websites using AI-assisted design, custom assets, and fast deployment.”

Tags

#AIWebsite #AIDesign #WebDesign #PromptEngineering #ObsidianNotes #AntiGravity #Hostinger #Kling #Figma #PortfolioWebsite