🎓 Prompt Engineering Guide
Internship Opportunities for High School Students
Code prompt for generating the UI as production-ready React/Tailwind output, with stronger design direction and stricter implementation constraints.
📝 Claude Code Prompt
Build a production-ready, high-converting, responsive landing page for a website called “Internship Opportunities for High School Students”.
Your goal is to create a polished student-focused platform that helps high school students discover internships, virtual programs, summer opportunities, and career-building experiences. Prioritize visual clarity, trust, conversion, and usability. Avoid generic template-like UI. Make it feel like a premium education and opportunity platform, not a basic brochure page.
✅ Output Requirements
✅ Generate clean, production-ready React + Tailwind CSS code.
✅ Use semantic HTML structure.
✅ Make the layout fully responsive for mobile, tablet, and desktop.
✅ Use accessible colors, keyboard-friendly interactions, and readable typography.
✅ Keep the code modular with reusable components.
✅ Prefer realistic content and polished UI details over placeholder filler.
✅ Ensure the page looks modern, premium, and credible.
Design Direction
Create a visual style that is:
Clean, modern, trustworthy, youthful, and professional.
Inspired by top-tier education platforms and high-quality landing pages.
Strong spacing, visual hierarchy, rounded cards, subtle shadows, elegant separation.
Subtle gradients and soft backgrounds, with light motion, not excessive animation.
No generic SaaS defaults, flat layouts, or overused template styling.
Use:
Premium blue-teal-white palette with one warm accent color for CTAs.
Clear typography hierarchy with bold headings and readable body text.
Card-based layouts for internships and categories.
Smooth hover states, active states, and micro-interactions.
Icons for categories, benefits, filters, and CTA reinforcement.
Page Structure
Header
Logo left, navigation links center/right, and a strong CTA button. Sticky header on scroll. Add a compact utility area for “Login” or “Post Internship” if it fits.
Hero Section
Headline: “Discover the Best Internships for High School Students”. Short supporting paragraph on skill-building, confidence, and future careers. Prominent search bar with category and location styling. Primary CTA “Find Internships”, secondary CTA “Explore Categories”. Right-side visual area with a modern student/career illustration.
🌟
Student Success Stories
Featured Internships — Card Fields
Show 6 internship cards in a responsive grid. Each card includes: 🏷️ title, 🏢 organization, 📂 category, 📍 location, ⏳ duration, 🎓 eligibility, 🏅 badges (Paid, Remote, Certificate, Class 11-12), and a 👉 Apply button. Make the cards feel real, useful, and highly scannable.
Smart Filters
🔎 Category
📍 Location
🏠 Remote/In-person
💰 Paid/Unpaid
🎓 Grade Level
Popular Categories
🔬
STEM
Science, tech, engineering & math roles.
📖
Research
Academic and lab research experience.
💼
Business
Entrepreneurship & corporate exposure.
✍️
Writing
Journalism, content & communication.
🎨
Design
Creative, UX & visual design roles.
🤝
Social Impact
Nonprofit & community-driven work.
🏛️
Government
Public policy & civic internships.
💻
Technology
Software, data & IT internships.
Why Internships Matter
India + Remote Spotlight
🇮🇳
Internships in India
Local opportunities to build skills close to home, with mentors who understand the Indian academic calendar and college goals.
Explore India Internships
🌐
Remote Internships
Flexible, from-anywhere roles that fit around school, letting students build real experience on their own schedule.
Explore Remote Internships
💬 Testimonials
Add student testimonial cards with avatars, names, grade levels, and short quotes. Make them believable and inspiring.
❓ FAQ
What are students asking?
Include 5-6 common questions about eligibility, applications, certificates, remote options, and deadlines, presented in an accordion style so students can quickly find answers.
📣 Ready to Launch
Strong closing banner with a clear action message, two CTA buttons, and a short reassurance line.
Find Internships
Explore Categories
🦶 Footer
Include navigation links, contact details, social links, newsletter signup, and copyright.
🧩 UX and Visual Quality Rules
✔️ Use a strong grid system and balanced whitespace.
✔️ Keep all sections aligned and consistent.
✔️ Make buttons large enough for mobile users.
✔️ Use readable contrast and avoid clutter.
✔️ Add subtle entrance animations only if they improve UX.
✔️ Cards should look polished enough for a real product launch.
🚫 No placeholder lorem ipsum.
🚫 No overly corporate or childish look.
🚫 No unnecessary complexity.
🛠️ Implementation Guidance
Break the page into reusable components:
Header
Hero
StatsBar
InternshipCard
FilterPanel
CategoryCard
TestimonialCard
FAQAccordion
CTASection
Footer
Use Tailwind utility classes cleanly and consistently. Structure the page for maintainability, and provide production-quality code that can be dropped into a real project.
🎯 Important Aesthetic Rules
🚫 Don’t look like a generic AI-generated template.
🚫 Don’t overuse gradients, neon, or glassmorphism.
🚫 Don’t use weak spacing or tiny text.
🚫 Don’t overcrowd the page.
✅ Feel like a credible startup or education platform built by a strong product team.
⚡ Optional Stronger Version
If you want even better results, add this line at the end:
“Before writing code, mentally plan the layout, visual hierarchy, and component structure. Then generate the final implementation only, with no explanation.”
This version is often better when you want Claude to stay focused on output quality rather than discussing design choices.
