| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Concepts - EduPrompt</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| } |
| }, |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .concept-card { |
| transition: all 0.3s ease; |
| } |
| .concept-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-900 font-sans"> |
| |
| <nav class="bg-white shadow-sm py-4"> |
| <div class="container mx-auto px-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center"> |
| <i data-feather="zap" class="text-white"></i> |
| </div> |
| <span class="text-xl font-bold text-gray-900">EduPrompt</span> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="/" class="text-gray-600 hover:text-primary-600">Home</a> |
| <a href="/eduprompt.html" class="text-gray-600 hover:text-primary-600">Playground</a> |
| <a href="/concepts.html" class="text-primary-600 font-medium">Concepts</a> |
| <a href="/demos.html" class="text-gray-600 hover:text-primary-600">Demos</a> |
| <a href="/glossary.html" class="text-gray-600 hover:text-primary-600">Glossary</a> |
| <a href="/about.html" class="text-gray-600 hover:text-primary-600">About</a> |
| </div> |
| <button class="md:hidden text-gray-600"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <header class="py-16 bg-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl font-bold mb-4">Prompt Engineering Concepts</h1> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Learn the five prompt moves that make any request clearer and more reproducible</p> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| <div class="grid md:grid-cols-2 gap-8"> |
| |
| <div class="concept-card bg-white rounded-xl shadow-sm overflow-hidden"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4"> |
| <i data-feather="user" class="text-white"></i> |
| </div> |
| <h2 class="text-xl font-bold">Role Prompting</h2> |
| </div> |
| <p class="text-gray-700 mb-4">Assigning a specific role to the AI helps it understand the context and perspective from which to respond.</p> |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> |
| <h3 class="font-medium text-gray-900 mb-2">Weak Prompt:</h3> |
| <p class="text-gray-600 italic">"Explain photosynthesis"</p> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-medium text-gray-900 mb-2">Strong Prompt:</h3> |
| <p class="text-gray-600 italic">"As a biology teacher, explain photosynthesis to 8th grade students in simple terms with examples"</p> |
| </div> |
| <button class="mt-4 text-primary-600 hover:text-primary-800 flex items-center copy-btn" data-text="As a biology teacher, explain photosynthesis to 8th grade students in simple terms with examples"> |
| <i data-feather="copy" class="mr-1"></i> Copy Strong Prompt |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="concept-card bg-white rounded-xl shadow-sm overflow-hidden"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4"> |
| <i data-feather="target" class="text-white"></i> |
| </div> |
| <h2 class="text-xl font-bold">Goal + Constraints</h2> |
| </div> |
| <p class="text-gray-700 mb-4">Clearly defining what you want and setting boundaries helps the AI produce more focused and useful responses.</p> |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> |
| <h3 class="font-medium text-gray-900 mb-2">Weak Prompt:</h3> |
| <p class="text-gray-600 italic">"Write about climate change"</p> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-medium text-gray-900 mb-2">Strong Prompt:</h3> |
| <p class="text-gray-600 italic">"Goal: Write a 300-word article about climate change for a general audience. Constraints: Focus on solutions, avoid technical jargon, include 3 actionable steps"</p> |
| </div> |
| <button class="mt-4 text-primary-600 hover:text-primary-800 flex items-center copy-btn" data-text="Goal: Write a 300-word article about climate change for a general audience. Constraints: Focus on solutions, avoid technical jargon, include 3 actionable steps"> |
| <i data-feather="copy" class="mr-1"></i> Copy Strong Prompt |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="concept-card bg-white rounded-xl shadow-sm overflow-hidden"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4"> |
| <i data-feather="list" class="text-white"></i> |
| </div> |
| <h2 class="text-xl font-bold">Stepwise Thinking</h2> |
| </div> |
| <p class="text-gray-700 mb-4">Breaking complex tasks into sequential steps helps the AI organize its thinking and produce more structured responses.</p> |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> |
| <h3 class="font-medium text-gray-900 mb-2">Weak Prompt:</h3> |
| <p class="text-gray-600 italic">"Plan a marketing campaign"</p> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-medium text-gray-900 mb-2">Strong Prompt:</h3> |
| <p class="text-gray-600 italic">"Step 1: Identify target audience for eco-friendly water bottles. Step 2: List 3 key messaging points. Step 3: Suggest 2 social media platforms. Step 4: Create sample post for each platform"</p> |
| </div> |
| <button class="mt-4 text-primary-600 hover:text-primary-800 flex items-center copy-btn" data-text="Step 1: Identify target audience for eco-friendly water bottles. Step 2: List 3 key messaging points. Step 3: Suggest 2 social media platforms. Step 4: Create sample post for each platform"> |
| <i data-feather="copy" class="mr-1"></i> Copy Strong Prompt |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="concept-card bg-white rounded-xl shadow-sm overflow-hidden"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4"> |
| <i data-feather="book-open" class="text-white"></i> |
| </div> |
| <h2 class="text-xl font-bold">Example-Driven Prompts</h2> |
| </div> |
| <p class="text-gray-700 mb-4">Providing examples helps the AI understand the desired format, style, and level of detail for its response.</p> |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> |
| <h3 class="font-medium text-gray-900 mb-2">Weak Prompt:</h3> |
| <p class="text-gray-600 italic">"Write a product description"</p> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-medium text-gray-900 mb-2">Strong Prompt:</h3> |
| <p class="text-gray-600 italic">"Write a product description like this example: 'Revolutionary wireless earbuds with 30hr battery life. Crystal-clear sound with noise cancellation. Sweat-resistant for workouts. $129.99' - Now describe a smart water bottle that tracks hydration"</p> |
| </div> |
| <button class="mt-4 text-primary-600 hover:text-primary-800 flex items-center copy-btn" data-text="Write a product description like this example: 'Revolutionary wireless earbuds with 30hr battery life. Crystal-clear sound with noise cancellation. Sweat-resistant for workouts. $129.99' - Now describe a smart water bottle that tracks hydration"> |
| <i data-feather="copy" class="mr-1"></i> Copy Strong Prompt |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="concept-card bg-white rounded-xl shadow-sm overflow-hidden md:col-span-2"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4"> |
| <i data-feather="tool" class="text-white"></i> |
| </div> |
| <h2 class="text-xl font-bold">Tool-Aware Formatting</h2> |
| </div> |
| <p class="text-gray-700 mb-4">Specifying output formats that work well with tools helps automate workflows and integrate with other systems.</p> |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> |
| <h3 class="font-medium text-gray-900 mb-2">Weak Prompt:</h3> |
| <p class="text-gray-600 italic">"List project tasks"</p> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-medium text-gray-900 mb-2">Strong Prompt:</h3> |
| <p class="text-gray-600 italic">"Create a JSON array of project tasks for a website redesign. Include keys: id, title, priority (high/medium/low), deadline (YYYY-MM-DD). Limit to 5 tasks."</p> |
| </div> |
| <button class="mt-4 text-primary-600 hover:text-primary-800 flex items-center copy-btn" data-text="Create a JSON array of project tasks for a website redesign. Include keys: id, title, priority (high/medium/low), deadline (YYYY-MM-DD). Limit to 5 tasks."> |
| <i data-feather="copy" class="mr-1"></i> Copy Strong Prompt |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.copy-btn').forEach(button => { |
| button.addEventListener('click', () => { |
| const text = button.getAttribute('data-text'); |
| navigator.clipboard.writeText(text); |
| |
| const icon = button.querySelector('i'); |
| const originalIcon = icon.getAttribute('data-feather'); |
| icon.setAttribute('data-feather', 'check'); |
| feather.replace(); |
| |
| setTimeout(() => { |
| icon.setAttribute('data-feather', originalIcon); |
| feather.replace(); |
| }, 2000); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
