Day 4 of Our Learning Journey: Building an AI-Powered Website Design Generator

Welcome to Day 4 of our coding adventure! Today, we tackled an exciting project: an AI-Powered Website Design Generator that turns natural language prompts into custom HTML and CSS code. This tool makes web design accessible to everyone, allowing users to describe their vision—like “a modern portfolio with a dark theme and bold buttons”—and instantly get professional-grade code. As beginners, we’re thrilled to share our progress, the requirements behind this project, and a link to the code on GitHub.

The Mission: Web Design for All

Our goal was to create a tool that empowers anyone, from entrepreneurs to hobbyists, to generate website designs without coding. By combining AI with a user-friendly interface, we’re making web design fast, intuitive, and inclusive. Day 4 was the perfect opportunity to stretch our skills and build something impactful.

The Tech Stack

We used a beginner-friendly stack to bring this project to life:

• Backend: Flask (Python) for the API, integrated with Google’s Gemini 1.5 Flash AI model to generate HTML and CSS.
• Frontend: React for a dynamic, dark-themed interface that displays live previews and generated code.
• AI: Google Gemini to process prompts and output structured JSON with HTML and CSS.
• Deployment: Backend on a custom server, frontend hosted on Vercel for seamless access.

Requirements

To build and run the Website Design Generator, here’s what we needed:

Backend Dependencies (requirements.txt)

These Python packages power the Flask backend and AI integration:

• Flask==3.0.3
• blinker==1.9.0
• click==8.2.1
• colorama==0.4.6
• itsdangerous==2.2.0
• jinja2==3.1.6
• markupsafe==3.0.2
• werkzeug==3.1.3
• idna==3.10
• python-dotenv==1.1.1
• requests==2.32.4
• urllib3==2.5.0
• charset_normalizer==3.4.2
• certifi==2025.6.15
• annotated-types==0.7.0
• cachetools==5.5.2
• google-ai-generativelanguage==0.6.15
• google-api-core==2.25.1
• google-api-python-client==2.175.0
• google-auth==2.40.3
• google-auth-httplib2==0.2.0
• google-generativeai==0.8.5
• googleapis-common-protos==1.70.0
• grpcio==1.73.1
• grpcio-status==1.71.2
• httplib2==0.22.0
• proto-plus==1.26.1
• protobuf==5.29.5
• pyasn1==0.6.1
• pyasn1-modules==0.4.2
• pydantic==2.11.7
• pydantic-core==2.33.2
• pyparsing==3.2.3
• rsa==4.9.1
• tqdm==4.67.1
• typing-extensions==4.14.1
• typing-inspection==0.4.1
• uritemplate==4.2.0
• flask-cors==6.0.1

Frontend Dependencies

The React frontend relies on:

• React (v18.x)
• TypeScript for type safety
• Vercel for deployment
• Basic HTML/CSS for styling (inline styles in the component)

Additional Requirements

• Gemini API Key: A Google API key for accessing the Gemini 1.5 Flash model, stored in a .env file.
• Node.js: For running the React frontend locally.
• Python 3.8+: For the Flask backend.
• Internet Access: For API calls to Gemini and frontend-backend communication.

What We Learned on Day 4

This project was a whirlwind of new skills:

• Backend Development: Setting up Flask routes, handling JSON, and integrating with an AI model taught us about APIs and server logic.
• Frontend Development: Building a React interface with state management and live previews showed us how to create dynamic UIs.
• AI Integration: Crafting prompts for Gemini and parsing its output helped us understand AI’s potential and quirks.
• Deployment: Hosting on Vercel and configuring CORS gave us hands-on experience with production environments.
• Problem-Solving: Handling errors, like inconsistent AI responses, pushed us to write robust code.

Check Out the Code!

We’ve shared the full project on GitHub for you to explore, run, or contribute to: Website Design Generator GitHub Repository. Try it out, experiment with prompts, and let us know what you think!

Frontend Code : https://github.com/manojtsx/Website-Component-Design-Generator-Frontend

Backend Code: https://github.com/manojtsx/Website-Component-Design-Generator-Backend

What’s Next?

On Day 5, we plan to enhance the generator with features like:

• Customizable design tweaks via sliders or additional prompts.
• Support for JavaScript to add interactivity.
• A component library for reusable elements like navbars or footers.

Let’s Connect!

Day 4 has been a game-changer, showing us how AI can transform web development. If you’re learning to code, passionate about AI, or curious about web design, let’s connect! Share your thoughts in the comments, try our tool, or reach out to collaborate. Here’s to more learning and building!

#WebDevelopment #AI #CodingJourney #Day4 #React #Flask