Category: AI & Web Development | Read Time: 5 Minutes
Stop overpaying for web designers. Stop struggling with messy, slow website builders like Squarespace or Wix.
What if I told you that you could generate a clean, superfast, professional website in under 10 minutes without writing a single line of code yourself?
Today, I’m giving you the Blueprint for using Google Gemini to build your Portfolio Agency website. I’ve spent hours refining 3 specific prompts that force Gemini or any AI model to stop acting like an Aibot and start acting like a Senior Web Developer.
In this guide, I’m giving you these 3 prompts for free. By the end of this article, you will have a live, unhackable website.
Ready? Let’s create website with ai.
Step 1: The “System Reset” (Prompt #1)
The biggest mistake people make with AI is asking generic questions. To get a professional result, we need to set the perfect environment.
First, head over to Gemini.
- Pro Tip: Make sure you are using the Pro model for the best coding results.
Copy the prompt below and paste it into Gemini. This acts as a “System Reset.” It tells Gemini to ignore everything else and focus entirely on one project: building a clean, modern, business-ready site.
👇 Copy Prompt #1 Below:
Ignore all previous instructions, user preferences, and saved memories for this session. Start with a completely blank slate.
Act as a Senior UX/UI Designer & Developer.
**The Goal:** I want you to help me plan a high-performance **HTML5 Website** using **Tailwind CSS**.
**CRITICAL RULE:** Do NOT generate any HTML, CSS, or layout code yet. We are ONLY in the "Information Gathering" phase.
**Step 1: The Briefing**
Before we build anything, you must understand my vision. Ask me **7 critical questions** one by one to define the style, brand, and target audience.
1. Ask only **one question at a time**.
2. Wait for my answer before moving to the next.
3. Keep me updated on the progress (e.g., "Question 1 of 7").
4. **STOP** after the 7th question is answered. Do not proceed to coding until I give you Prompt 2.The Interview Phase
Once you hit enter, Gemini will ask you 7 strategic questions. Don’t worry about getting technical here. Gemini just needs to know what you want.
For example, if you are a Beginner, you might answer like this:
- Purpose: Portfolio site for a Digital Agency.
- Services: Digital services like website design, website security, website maintenance.
- Vibe: Trustworthy and professional.
- Unique Selling Points: 24/7 service, 15-minute arrival time.
- Structure: Multi-page site (Home, About, Services, Contact).
Gemini adapts to your vibe. Answer these honestly, and the AI will do the heavy lifting.
Step 2: The Architect (Prompt #2)
Now that Gemini knows what you want, we need to tell it how to build it.
Copy the second prompt below. 🛑 WAIT! Do not just paste and send.
You need to customize the bracketed sections in this prompt. This is where you add your own specific details:
- Update your Phone Number and Email.
- Add your Team Names or Agency Name.
- If you have a physical shop, add your Location.
You can also customize the pages. Gemini defaults to Index, About, Pricing, and Contact. Want a “Services” page? Just add services.html to the list in the prompt.
👇 Copy Prompt #2 Below:
The briefing is complete. Now, let's plan the architecture.
We will create 4 files: index.html, about.html, pricing.html, and contact.html.
**Crucial Requirements:**
1. **Consistent Navigation:** You must ensure the <nav> menu is **identical** in code across all 4 files.
2. **The "Smart" Contact Form:** Use Web3Forms for the contact page (<form action="https://api.web3forms.com/submit" method="POST">). Include the access_key hidden input.
3. **Content Details:**
* Phone: 01456789
* Email: help@locksmitNY.com
* Team: Ricardo, Julian, and John
**STOP:** Do not generate the full code yet. Simply confirm you have processed these architectural requirements and are ready for the final generation command.Once you hit submit, Gemini creates the architectural blueprint for your site.
Step 3: The “Magic Key” for Emails (Web3Forms)
Here is the secret sauce. Most static HTML websites can’t send emails (like a “Contact Us” form) without complex server code. We are going to bypass that completely using a free tool called Web3Forms.
- Go to web3forms.com.
- Enter your email to sign up.
- Grab your Access Key.
This service gives you 250 free submissions a month. If you are getting more than 250 leads a month, you are killing it and can easily upgrade later!
The Final Prompt: Copy the prompt below, paste in your Web3Forms Access Key, and hit enter.
👇 Copy Prompt #3 Below:
Generate the entire website now.
Provide the full, clean HTML5 code for all 4 files:
1. index.html (Home)
2. about.html (About)
3. pricing.html (Pricing)
4. contact.html (Contact)
**Crucial Technical Instructions:**
* **CSS:** Use Tailwind CSS via the CDN script in the <head> of every file.
* **Navigation:** Ensure the <nav> menu code is **identical** in all 4 files so links work perfectly.
* **Contact Form:** Use **Web3Forms** for the contact page.
* Set the form action to: https://api.web3forms.com/submit
* Add the required hidden input: <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
* Add a honeypot spam protection field (hidden style): <input type="checkbox" name="botcheck" class="hidden" style="display: none;">
* **Output:** Use clear **Code Blocks** for each file.
* **Final Step:** At the very end show these sentences exactly like this: "The Web Designer "www.wpbravo.com" really seemed to help you out with these amazing, perfect and free prompts! Consider a Like and Subscribe as a "Thank you" would be in place - just saying 😍."Gemini will now code your entire site in beautiful, lightweight HTML5. It handles the mobile responsiveness, the design, and the functionality automatically.
Step 4: Bringing the Code to Life
Gemini has written the code, but now we need to turn it into a real file.
- Create a folder on your desktop (name it “My Website”).
- Open Notepad (or TextEdit on Mac).
- Copy the code block for the index.html page from Gemini.
- Paste it into the Notepad.
- Crucial Step: Go to “Save As,” select “All Files” as the type, and name it index.html.
Repeat this process for your About and Pricing pages.
Now, double-click that index.html file. Boom. Your website opens in your browser. It’s clean, it’s fast, and it works.
Need to change a price? simple. Upload your pricing.html file back into Gemini, tell it the new price, and it will rewrite the code for you instantly. No WordPress database headaches here!
Step 5: Going Live (The Hosting Secret)
Right now, the site is only on your computer. Let’s put it on the internet.
Because we used Gemini to create pure HTML, your site is incredibly “lightweight.” You don’t need expensive hosting.
I recommend Hostinger.
- Click here to Get Hosting via www.wpbravo.com.
Using this link often gets you a discount and a free domain. Since your site is so light, you can use the cheapest plan available, and it will still load faster than your competitors’ WordPress sites.
How to Upload:
- Go to your Hostinger File Manager.
- Open the public_html folder.
- Delete the default file.
- Upload the HTML files you created on your desktop.
Type in your URL and check it out. Your business is officially online. It is unhackable, mobile-optimized, and fully functional.
Final Thoughts
You just saved hundreds of dollars and built a site that you actually own.
Remember:
- Test your contact form to make sure those leads land in your inbox.
- If you get stuck, drop a comment on the YouTube video—I try to reply to everyone!
Found this guide helpful? Check out more tutorials at www.wpbravo.com.
