The Complete AI Website Prompt Cookbook

Building a website with AI is as simple as asking the right question. These 10 copy-paste prompts work with any AI assistant — ChatGPT, Claude, Gemini, or others. Just fill in the placeholder fields, paste into your preferred AI, and you'll get a complete, ready-to-publish HTML file.

Each prompt is designed to generate a single-file website with inline CSS and JavaScript, optimized for immediate deployment on htmlpub or any web host.

1. General Single-Page Website

Perfect for any topic where you need a clean, professional single-page site with multiple sections.

Create a single-page HTML website about [YOUR TOPIC]. Include these sections: [DESCRIBE SECTIONS - e.g., "hero with headline, about section, features grid, testimonials, contact form"]. Use inline CSS with a modern, clean design. Make it fully responsive for mobile. Include smooth scroll navigation. Add a <title> tag. Use a professional color scheme that fits the topic. All code must be in a single HTML file with inline styles and JavaScript.

2. Portfolio / Personal Site

Showcase your work and professional identity with a portfolio that highlights your best projects.

Create a portfolio website for [YOUR NAME], a [YOUR TITLE - e.g., "graphic designer" or "software developer"]. Include: a hero section with name and title, an about section with [YOUR BIO - 2-3 sentences], a projects grid featuring [PROJECT 1 NAME], [PROJECT 2 NAME], and [PROJECT 3 NAME] with placeholder images, a skills section listing [SKILL 1], [SKILL 2], [SKILL 3], and a contact section with [YOUR EMAIL]. Use inline CSS with a modern, minimal aesthetic. Make it responsive. Include smooth animations on scroll. Add a <title> tag. Output as a single HTML file.

3. Landing Page / Product Launch

Drive conversions with a compelling landing page that clearly communicates your product's value.

Create a product landing page for [PRODUCT NAME]. Tagline: [TAGLINE]. Include: a hero section with the tagline and CTA button, a features section highlighting [FEATURE 1], [FEATURE 2], and [FEATURE 3] with icons, a benefits section explaining [KEY BENEFIT], social proof with placeholder testimonials, pricing at [PRICE], and a final CTA section. Use inline CSS with a bold, modern design. Make it mobile-responsive. Add micro-interactions on hover. Include a <title> tag. All code in a single HTML file with inline styles and JavaScript.

4. Event Invitation / RSVP

Create a beautiful invitation page for weddings, parties, conferences, or any gathering.

Create an event invitation website for [EVENT NAME]. Details: Date: [DATE], Time: [TIME], Location: [LOCATION]. Include: an elegant hero section with event name and date, event details section with [DESCRIBE THE EVENT - e.g., "cocktail reception, dinner, dancing"], schedule/timeline of [LIST KEY MOMENTS], a simple RSVP form collecting name and email, and a map or directions section. Use inline CSS with an elegant, festive design appropriate for [EVENT TYPE]. Make it responsive. Add a <title> tag. Output as a single HTML file.

5. Restaurant / Small Business

Establish your local business online with a site that showcases what you offer and how to visit.

Create a website for [BUSINESS NAME], a [TYPE - e.g., "family-owned Italian restaurant" or "coffee shop"]. Include: a hero with business name and tagline, an about section describing [BRIEF DESCRIPTION], a menu/services section featuring [ITEM 1], [ITEM 2], [ITEM 3] with prices, location and hours ([ADDRESS], [HOURS]), and a contact section with [PHONE] and [EMAIL]. Use inline CSS with a warm, inviting design. Add a photo gallery section with placeholder images. Make it mobile-responsive. Include a <title> tag. Single HTML file output.

6. Resume / CV

Turn your professional experience into an interactive, shareable web resume that stands out.

Create an HTML resume for [YOUR NAME]. Title: [YOUR TITLE]. Include: a header with name and contact info ([EMAIL], [PHONE], [LINKEDIN]), a professional summary: [YOUR SUMMARY - 2-3 sentences], experience section with [JOB 1 TITLE] at [COMPANY 1] ([DATES]) - [KEY ACHIEVEMENTS], [JOB 2 TITLE] at [COMPANY 2] ([DATES]) - [KEY ACHIEVEMENTS], education section with [DEGREE] from [SCHOOL], and skills section listing [SKILL 1], [SKILL 2], [SKILL 3]. Use inline CSS with a clean, professional layout optimized for printing. Make it responsive. Include a <title> tag. Single HTML file.

7. Coming Soon / Waitlist

Build anticipation for your upcoming launch and capture early interest from potential users.

Create a "coming soon" page for [PROJECT NAME]. Description: [BRIEF DESCRIPTION - what it does and who it's for]. Launch date: [LAUNCH DATE]. Include: a centered hero with project name and description, a countdown timer to launch date, a waitlist signup form collecting email addresses, a features teaser section with [FEATURE 1], [FEATURE 2], [FEATURE 3], and social media links. Use inline CSS with a bold, anticipatory design. Add subtle animations. Make it mobile-responsive. Include a <title> tag. Output as a single HTML file with inline JavaScript for the countdown.

8. Documentation / Help Page

Organize information clearly so users can find answers quickly and understand your product.

Create a documentation website for [PRODUCT NAME]. Include: a sidebar navigation, a hero section introducing the docs, and content sections for: Getting Started ([GETTING STARTED CONTENT]), [TOPIC 1] ([DESCRIBE TOPIC 1]), [TOPIC 2] ([DESCRIBE TOPIC 2]), [TOPIC 3] ([DESCRIBE TOPIC 3]), and FAQs. Use inline CSS with a clean, readable design. Include a search functionality using JavaScript. Make the sidebar collapsible on mobile. Add syntax highlighting for code examples. Include a <title> tag. Single HTML file with inline styles and JavaScript.

9. Photo Gallery / Lookbook

Display images beautifully with a gallery that works perfectly on any device.

Create a photo gallery website titled [GALLERY TITLE]. Theme: [THEME/DESCRIPTION - e.g., "travel photography from Japan" or "2024 fashion collection"]. Include: a hero with gallery title and description, a masonry-style grid gallery with 12 placeholder images, lightbox functionality to view full-size images with previous/next navigation, filtering options by [CATEGORY 1], [CATEGORY 2], [CATEGORY 3], and an about section. Use inline CSS with an elegant, image-focused design. Make it fully responsive. Add lazy loading for images. Include a <title> tag. Output as single HTML file.

10. Interactive Calculator or Tool

Build a functional web tool that provides immediate value through calculation or data processing.

Create an interactive [TOOL NAME] calculator. Purpose: [DESCRIPTION - what it calculates/does]. Include: a header explaining the tool, input fields for [INPUT 1], [INPUT 2], [INPUT 3], a calculate button, a results display section showing [WHAT RESULTS SHOW], an explanation section describing the formula: [FORMULA/LOGIC], and example use cases. Use inline CSS with a clean, functional design. Implement the calculation logic with inline JavaScript: [DESCRIBE SPECIFIC CALCULATION]. Add input validation. Make it mobile-responsive. Include a <title> tag. Output as a single HTML file.

How to Publish

Once you have your AI-generated HTML:

1. Go to htmlpub.com
2. Paste your HTML code into the editor
3. Click "Publish"
4. Get your instant live URL

Your site is now live and shareable. No signup required, no configuration needed. You can edit and republish anytime.

For a detailed walkthrough of the entire process, check out our guide: How to Build a Website with ChatGPT.

---

Pro Tips:

• After generating your site, you can ask the AI to modify specific sections
• Request color scheme changes or different layouts
• Add more sections or remove ones you don't need
• Ask for specific fonts, animations, or interactive features

Happy building!