Website Builder AI Pack - 8-Stage Prompt Kit
Use these prompts in Claude Code (claude.ai/code) to build your business website step by step.
Replace all [bracketed placeholders] with your real details before sending.

========================================
STAGE 1: PROJECT SETUP
========================================
Prompt 1 - Start your project:

I am building a business website from scratch. I do not know how to code. Please help me build a clean, professional website using HTML, CSS, and a bit of JavaScript. Here is my project brief:

Business name: [Your business name]
What the business does: [One to two sentences describing your business]
Target audience: [Who your ideal client is]
Pages needed: Home, About, Services, Contact
Main action visitors should take: [e.g., Book a call, Buy a product, Sign up]
Style preference: [e.g., Professional and trustworthy, Bold and modern, Warm and friendly]
Colors: [e.g., Blue and white, Black and gold, Green and grey]

Start by creating the project folder structure and the main files I will need. Explain what each file does in plain language.

========================================
STAGE 2: HOMEPAGE
========================================
Prompt 2 - Build the homepage:

Build the homepage (index.html) based on my project brief. Include these sections:

1. Header with my logo name and navigation links to all pages
2. Hero section with a headline, a one-line tagline, and a CTA button that says: [Your CTA text]
3. Services overview section listing my [number] main services with short descriptions
4. A trust section with three to four points explaining why clients choose us
5. A simple testimonials section with two to three quotes (use placeholders I will replace)
6. Footer with business name, contact info placeholder, and navigation links

Make it mobile-friendly and use clean, modern design. The main color should be [your color].

========================================
STAGE 3: SERVICES PAGE
========================================
Prompt 3 - Build the Services page:

Build a Services page (services.html) using the same header and footer as the homepage. List the following services:

Service 1: [Name] - [Description] - Price: [Price or "Starting from X"]
Service 2: [Name] - [Description] - Price: [Price or "Starting from X"]
Service 3: [Name] - [Description] - Price: [Price or "Starting from X"]

Add a CTA button under each service that says: [Your CTA text]
At the bottom of the page add a FAQ section with these questions and answers:
Q: [Your FAQ question 1]
A: [Your answer]
Q: [Your FAQ question 2]
A: [Your answer]

========================================
STAGE 4: ABOUT PAGE
========================================
Prompt 4 - Build the About page:

Build an About page (about.html) using the same header and footer. Include:

1. A short intro paragraph about the business (I will write this): [paste your intro]
2. A "Our Mission" section: [paste your mission statement or I will add it later]
3. A team section with one to three team members (placeholders are fine)
4. A values section listing [number] core values with one-sentence explanations

Keep the tone [professional/friendly/warm]. Match the style of the homepage.

========================================
STAGE 5: CONTACT PAGE
========================================
Prompt 5 - Build the Contact page:

Build a Contact page (contact.html) using the same header and footer. Include:

1. A contact form with fields: Name, Email, Phone (optional), Message, Submit button
2. Wire the form to Formspree (https://formspree.io). I will create my Formspree account and replace the action URL you use as a placeholder.
3. My contact details section:
   - Email: [your email]
   - Phone: [your phone]
   - Address: [your address or "Remote - serving clients worldwide"]
4. A Google Maps embed showing: [your city or business address]
5. My business hours: [your hours]

========================================
STAGE 6: DESIGN REFINEMENT
========================================
Prompt 6 - Refine the visual design:

Review all pages and refine the visual design:

1. Typography: Make all body text slightly larger (at least 16px). Make headings bolder and more prominent.
2. Spacing: Increase padding between all sections so the pages breathe more.
3. Buttons: Make all CTA buttons more prominent with rounded corners and a hover effect.
4. Color: Ensure [your main color] is used consistently on buttons, links, and highlights.
5. Cards: Add a soft shadow to all service cards and team cards.

After updating, tell me what you changed so I can review it.

========================================
STAGE 7: INTERACTIVE FEATURES
========================================
Prompt 7 - Add interactivity:

Add these interactive features to the site:

1. Smooth scrolling: All nav links should smoothly scroll to the target section on the homepage.
2. Mobile menu: The navigation on mobile should collapse into a hamburger menu that opens and closes when tapped.
3. Testimonials: Make the testimonials section auto-advance to the next quote every five seconds.
4. Scroll animations: Add subtle fade-in animations when page sections come into view as the user scrolls.

Do not add any third-party libraries unless absolutely necessary. Keep the site fast and lightweight.

========================================
STAGE 8: PRE-LAUNCH REVIEW
========================================
Prompt 8 - Final review before launch:

Do a full pre-launch review of all pages. Check for and fix:

1. Broken links between pages
2. Any placeholder content I forgot to replace (look for [bracketed text], "Lorem ipsum", or "placeholder")
3. Missing alt text on all images
4. Any content that overflows or looks broken on mobile screens
5. Inconsistent fonts or colors compared to the homepage
6. Any JavaScript errors in the browser console (check using browser DevTools)

List everything you find and fix it. Then confirm the site is ready to deploy.

========================================
BONUS: DEPLOYMENT PROMPT
========================================
Bonus prompt - Deploy to Vercel:

I want to publish this website on Vercel (https://vercel.com). I have never done this before and I do not know how to use a terminal. Walk me through the exact steps to:

1. Create a free Vercel account
2. Upload and deploy my website folder
3. Get my live URL
4. Connect a custom domain if I have one

Use simple, step-by-step instructions without technical jargon.

========================================
HOW TO USE THIS PROMPT KIT
========================================
- Work through one stage at a time. Do not skip stages.
- After each prompt, review what Claude Code built before moving to the next stage.
- If something looks wrong, describe it in plain language: "The button color is too light. Make it darker."
- Save your CLAUDE.md file early (ask Claude Code to create one) so your project context is remembered.
- All prompts can be customized. Add or remove sections based on your specific business needs.

Website Builder AI Pack from https://coding180.com
