In this part, you'll learn how to kick off your project by generating a real, working design with AI.
The way I started with Minibreaks was using DeepSite, a powerful tool that can generate beautifully designed landing pages from simple text prompts. This becomes the foundation of your site's design system.
Introducing DeepSite
DeepSite is available at: https://huggingface.co/spaces/enzostvs/deepsite
This is completely free, but with very limited number of uses. But if you get your prompt right, you should get what you want with one or two attempts.
Keep in mind:
This HuggingFace workspace does not build a complete website. Instead, it generates a beautifully designed landing page (homepage) to serve as the foundation of your site's design system. The expectation is creating the design system of your website, and then you can use other AI tools to expand from there.
Getting Your Domain Name
Before we continue, you actually need another thing: a domain name. This is important because you should include it in the prompt when generating your website design.
Here I will use one of my ideas (that I am not going to pursue as an example...😏) to create a prompt. The motivation is that I have some old toys that I do not want to keep and I want to sell them to people who really like them, but unlike other marketplaces, I want this website to send a message that the sellers are serious and the items are truly rare.
If you recall from the previous part, here is the prompt I am using:
I want to create a website that for users to sell their collectables. For starters, I'm thinking to sell toys, comics, art works, or vintage gears. As an MVP, what should I focus on first, while keeping future growth in mind?
I also discussed with AI to use the domain name: collectibles.sale
(BTW, at the time of the writing, this domain name is still available)
Crafting Your Design Prompt
Here is the prompt I am using for DeepSite:
Design a clean, premium homepage for a collectibles marketplace called "collectibles.sale", focused on serious collectors selling rare vintage toys and comics. The site should feel professional and aspirational, with a modern, minimal aesthetic, neutral/dark tones, and elegant typography. Key MVP features to highlight: a hero section with a strong headline and CTA to list or browse items, a "Featured Listings" grid showing rare toys and comics with clear photos, a simple search bar, category filters (e.g., Vintage Toys, Comics), and a "How it Works" section in 3 steps. Design for mobile-first, uncluttered, and serious — avoid playful or generic e-commerce styles.
Notice how specific this prompt is about:
- Brand positioning: "serious collectors," "professional and aspirational"
- Visual style: "modern, minimal aesthetic, neutral/dark tones"
- Key features: Specific sections and functionality
- Target audience: Clear about who this is for and what to avoid
The Generated Result
Here is the result:
You can also visit my HuggingFace space to view this generated page:
https://huggingface.co/spaces/hongincanada/collectibles-sale
Honestly, it's a very good starting point. Copy the source code, and create a new file in your local machine (anywhere is fine), call it generated.html, paste the entire code to there. We will use it in the next section.
Technical Notes
Two technical notes about the generated code:
It uses Tailwind CSS v3, a popular utility-based framework for styling. Tailwind v4 exists now, but v3 is still perfectly fine for a prototype.
The page references Tailwind via a CDN (cdn.tailwindcss.com) — this is great for testing but not recommended for production.
Don't worry about these details yet. I'll remind you about updating them later when we prepare for deployment.
Your Homework
Before moving to Part 6, complete this design exercise to create your website's foundation:
generated.html💡 Pro tip: Be as specific as possible in your prompt about the mood, target audience, and key features you want to highlight.
In the next part, we'll expand on this and turn it into a functioning website!