Ultimate AI Prompting 2026: Master Context Engineering

<system_prompt>
  <context>
    You are working on [PROJECT NAME]. Target audience: [AUDIENCE]. 
    Technology stack: [LANGUAGES / FRAMEWORKS].
  </context>

  <thinking>
    Analyze the task step-by-step. Resolve potential edge cases before writing the primary response.
  </thinking>

  <instructions>
    1. [STEP 1: Core requirement]
    2. [STEP 2: Architectural boundaries]
    3. [STEP 3: Performance & Accessibility requirements]
  </instructions>

  <negative_constraints>
    - Do NOT use third-party libraries unless explicitly specified.
    - Do NOT use generic fallback colors or standard browser typography.
  </negative_constraints>

  <output_format>
    Return production-ready code split clearly into individual file blocks:
    index.html, style.css, script.js
  </output_format>
</system_prompt>

Write a prompt to create a simple landing page for a company that provides offline tuition classes. The purpose of the page is to promote the tuition services and attract new students. Build the landing page using HTML, CSS, and JavaScript. The design should be clean, modern, responsive, and easy to navigate. Include sections such as a hero banner, about the tuition classes, courses offered, benefits, testimonials, contact form, and a strong call-to-action for enrollment.

Create a modern, attractive, and fully responsive landing page for an offline tuition classes company using HTML, CSS, and JavaScript. The goal of the website is to promote tuition services, attract new students, and increase enrollments through a professional and engaging design. The landing page should include SEO-friendly meta tags, semantic HTML structure, fast loading performance, and smooth animations for a polished user experience. Design the page with a clean educational theme, modern typography, appealing colors, soft shadows, and easy navigation. Include a sticky navigation bar with menu links, a hero section with a strong headline, supporting text, attractive visuals, and clear call-to-action buttons such as "Enroll Now" and "Book Free Demo." Add an About Us section introducing the tuition classes and teaching approach, a Courses Offered section with visually appealing course cards, a Benefits section highlighting advantages like experienced teachers and personalized attention, a Testimonials section with student and parent feedback, and a Contact/Enrollment Form with JavaScript validation and success messages.

<project_specification>
  <brand>BrightMind Tuition Classes (Offline Academy)</brand>
  <tech_stack>Pure HTML5, Vanilla CSS3 (Custom Variables), Native JS (ES6+)</tech_stack>

  <design_system>
    <colors>
      Primary: #0f172a (Deep Navy), Accent: #2563eb (Vibrant Blue), 
      Highlights: #059669 (Emerald) & #7c3aed (Violet)
    </colors>
    <typography>Display: 'Sora', sans-serif | Body: 'Inter', system-ui</typography>
    <effects>Backdrop blur (8px), Glassmorphism cards, CSS keyframe entrance animations</effects>
  </design_system>

  <sections>
    1. Sticky Header with logo, smooth-scroll nav, and CTA pill button.
    2. Hero Banner with stats badge (1200+ Students, 98% Pass Rate) and SVG illustration.
    3. Interactive Course Cards grid (Maths, Science, English, Competitive Prep).
    4. Two-Column Enrollment Form with real-time JavaScript regex validation.
    5. Testimonial Carousel with smooth slide controls and star ratings.
  </sections>

  <deliverables>
    Output complete code inside separate files: index.html, style.css, script.js. No external UI frameworks.
  </deliverables>
</project_specification>

<header class="navbar">
  <div class="container nav-flex">
    <a href="#" class="brand-logo">🎓 BrightMind</a>
    <nav class="nav-links">
      <a href="#courses">Courses</a>
      <a href="#enroll" class="cta-btn">Enroll Now</a>
    </nav>
  </div>
</header>

:root {
  --color-navy: #0f172a;
  --color-blue: #2563eb;
  --color-emerald: #059669;
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
}

.glass-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
}

document.getElementById('enrollForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const phone = document.getElementById('phone').value;
  const phoneRegex = /^[0-9]{10}$/;
  
  if (!phoneRegex.test(phone)) {
    showError('Please enter a valid 10-digit mobile number');
    return;
  }
  showSuccess('Enrollment request received successfully!');
});