Create Websites using AI

This Page Will be updated tomorrow with more info and prompts, please save the youtube video or this page to come back here tomorrow.

Step 1 - Create Website using AI

Here a prompts you can use to create different kind of websites.

Use Code – letscreateyourwebsite

1. The Variable Input

Fill these three details before using the prompt below:

Restaurant Name: [Insert Name]
Color Scheme: [Primary Color, Secondary Color, and Background Tone]
Cuisine & Vibe: [e.g., Rustic Italian, Modern Japanese Fine Dining, High-End Vegan Bistro]

Role: You are an expert Full-Stack Developer and UI/UX Designer specializing in the hospitality industry. Objective: Create a high-fidelity, responsive multi-page website for [Insert Restaurant Name], which is a [Insert Cuisine & Vibe] establishment.

Language: Use clean, semantic HTML5 and modern CSS3 Only

Visual DNA & Branding:

Color Palette: Use [Insert Color Scheme]. Implement these using CSS variables for site-wide consistency.
Typography: Pair a high-contrast Serif font for headings (for a sophisticated feel) with a clean, highly-legible Sans-Serif for body text.
Layout Philosophy: Use an Asymmetrical Editorial Grid. Avoid “boxy” layouts; use overlapping elements, varying image sizes (portrait vs. landscape), and generous white space to mimic a premium lifestyle magazine.

Required Page Structures:

The Homepage (The Journey):
- Hero Section: A cinematic, full-screen background image placeholder with a centered, minimalist heading and a “Book a Table” primary CTA.
- The Teaser: A Z-pattern layout introducing the atmosphere through high-quality imagery and brief, elegant copy.
- Visual Menu Mosaic: A 6-tile interactive CSS grid. Mix photo tiles with text tiles (e.g., “Seasonal Specials,” “Wine Selection”) that have hover-state transitions.
The Menu Page (The Artisan Catalog):
- Categorization: Clear sections for Starters, Mains, Desserts, and Drinks.
- Styling: Use thin horizontal dividers, ample padding, and a “Chef’s Recommendation” callout box with a subtle border in the secondary brand color.
- Utility: Include a floating “Dietary Key” (Vegan, GF, Nut-Free icons) for user convenience.
Our Story Page (Philosophy & Team):
- Narrative Flow: Use large-scale “Behind the Scenes” photography placeholders alternating with text columns.
- Team Bios: A minimalist grid for the Head Chef and Sommelier with sophisticated, short biographies.
The Booking & Contact Page (The Concierge):
- Reservation Form: A centered, minimalist form with custom-styled inputs for Date, Time, Guests, and Special Occasions.
- Contact Split: Left side: Minimalist Map integration. Right side: Opening hours and a “Direct Line” button.
The Global Footer (The Anchor):
- Layout: A 4-column sophisticated layout using a high-contrast background (the darkest shade of the color scheme).
- Section 1 (Branding): Restaurant logo placeholder and a one-sentence brand philosophy.
- Section 2 (Navigation): Quick links to all main pages.
- Section 3 (Connect): Social media icons (Instagram, Facebook, etc.) and a minimalist “Newsletter Signup” with a single-line input field.
- Section 4 (Location): Address and a summary of opening hours.
- Bottom Bar: Copyright information and legal links separated by a thin, elegant hairline border.

Technical Requirements:

Responsiveness: Mobile-first approach. Navigation must collapse into a sleek hamburger menu on mobile.
Interactivity: Include smooth-scroll behavior, fade-in animations on scroll, and elegant hover states for all interactive elements.

3. Logic & Design Cues (Internal Guidelines)

To ensure the AI produces the “expensive” look from your reference, this prompt forces these specific behaviors:

The “Z-Pattern”: This forces the AI to avoid a boring “image-left-text-right” repetition, instead creating a rhythmic flow that keeps the user engaged.
Asymmetrical Grid: By explicitly naming this, you prevent the AI from defaulting to a standard Bootstrap-style layout, resulting in a more custom, high-end feel.
Editorial White Space: This ensures the site doesn’t feel cluttered, which is the hallmark of luxury web design.
CSS Variables: By asking for variables, you make it incredibly easy to change the colors later without digging through hundreds of lines of code.

Prompt - Create a School Website

The Variable Input

Fill these three details before using the prompt below:

School Name: [Insert Name]
Color Scheme: [Primary Color, Secondary Color, and Background Tone]
School Type & Vibe: [e.g., Prestigious Private Academy, Innovative Montessori, Modern Arts & Science Charter, Traditional Boarding School]

Role: You are an expert Full-Stack Developer and UI/UX Designer specializing in the Education Sector. Objective: Create a high-fidelity, responsive multi-page website for [Insert School Name], which is a [Insert School Type & Vibe] institution.

Language: Use clean, semantic HTML5 and modern CSS3 Only.

Visual DNA & Branding:

Color Palette: Use [Insert Color Scheme]. Implement these using CSS variables for site-wide consistency.
Typography: Pair a high-contrast Serif font for headings (to evoke tradition and authority) with a clean, highly-legible Sans-Serif for body text.
Layout Philosophy: Use an Asymmetrical Editorial Grid. Avoid “boxy” educational layouts; use overlapping elements, varying image sizes (portrait vs. landscape), and generous white space to mimic a premium academic prospectus or high-end magazine.

Required Page Structures:

The Homepage (The Vision):

Hero Section: A cinematic, full-screen background video or image placeholder of the campus, featuring a centered, minimalist heading and “Schedule a Tour” & “Apply Now” primary CTAs.
The Excellence Teaser: A Z-pattern layout introducing the school’s mission through high-quality imagery of students in action and brief, elegant copy.
Campus Life Mosaic: A 6-tile interactive CSS grid. Mix photo tiles (Labs, Sports, Arts) with text tiles (e.g., “98% University Placement,” “Global Exchange”) that have hover-state transitions.

The Academics Page (The Knowledge Hub):

Categorization: Clear sections for Primary/Junior, Middle, and Senior levels (or Subject Departments).
Styling: Use thin horizontal dividers, ample padding, and a “Signature Program” callout box with a subtle border in the secondary brand color to highlight unique offerings.
Utility: Include a floating “Key Stats” bar (Student-Teacher Ratio, Average SAT/IB Score, Number of Clubs).

Faculty & Leadership (The Mentors):

Narrative Flow: Use large-scale photography of the Head of School and senior leadership alternating with text columns.
Staff Bios: A minimalist grid for department heads with sophisticated, short biographies and their academic credentials.

Admissions & Contact (The Gateway):

Inquiry Form: A centered, minimalist form with custom-styled inputs for Student Name, Grade of Entry, Parent Contact, and “How did you hear about us?”
Visit Split: Left side: Minimalist Map integration showing the campus location. Right side: Important dates (Open Houses, Application Deadlines).

The Global Footer (The Anchor):

Layout: A 4-column sophisticated layout using a high-contrast background.
Section 1 (Branding): School crest/logo placeholder and a one-sentence educational philosophy.
Section 2 (Navigation): Quick links to Parent Portal, Alumni, Careers, and Term Dates.
Section 3 (Connect): Social media icons and a “Community Newsletter” signup with a single-line input.
Section 4 (Contact): Full address, Registrar’s office phone, and email.
Bottom Bar: Copyright information, Privacy Policy, and Accreditation logos separated by a thin, elegant hairline border.

Technical Requirements:

Responsiveness: Mobile-first approach. Navigation must collapse into a sleek, full-screen overlay menu on mobile.
Interactivity: Include smooth-scroll behavior, fade-in animations on scroll, and elegant hover states for all interactive cards.

3. Logic & Design Cues (Internal Guidelines)

The “Legacy” Look: By using an asymmetrical grid and high-end typography, we avoid the “cluttered government site” look common in education, instead positioning the school as an elite, well-funded institution.
Z-Pattern Storytelling: This guides the parent’s eye from the school’s “hook” (the image) to the “proof” (the text) repeatedly, building trust.

White Space for Clarity: In education, information can be dense. Use “Editorial White Space” to ensure the curriculum doesn’t feel overwhelming.

Prompt - Dentist Website