css/style.css

@@ -446,6 +446,14 @@ footer {
   --shadow-color: rgba(255,20,147,0.15);
   --shadow-lg-color: rgba(255,20,147,0.2);
   --hero-overlay: rgba(13,13,13,0.3);
+  --white: #16213e;
+  --pink-100: #2a1a2e;
+  --pink-200: #3a2a3e;
+  --pink-300: #e91082;
+  --pink-500: #ff69b4;
+  --pink-600: #ffb6d9;
+  --pink-700: #ffa8c8;
+  --pink-900: #ffcce0;
 }
 
 [data-theme="dark"] body {

pages/prompts.html

@@ -95,13 +95,14 @@
   </div>
   <div class="prompt-block">
     <span class="label">Few-Shot</span>
-    <h3>Show examples to guide behavior</h3>
+    <h3>Show examples to teach a pattern</h3>
-    <p>Include a few input-output examples in the prompt to teach the model the desired format or style.</p>
+    <p>Include a few input-output examples so the model infers a pattern it couldn't know from instructions alone.</p>
     <div class="example"><strong>Prompt:</strong><br>
-      "Classify the sentiment:<br>
+      "Convert words to star code:<br>
-      'I love this!' → Positive<br>
+      'hello world' → ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐⭐<br>
-      'This is terrible.' → Negative<br>
+      'cat' → ⭐⭐⭐<br>
-      'It's okay, I guess.' → ?"</div>
+      'I am happy' → ⭐ ⭐⭐ ⭐⭐⭐⭐⭐<br>
+      'The cat eats' → ?"</div>
   </div>
   <div class="prompt-block">
     <span class="label">Chain-of-Thought</span>
@@ -226,6 +227,11 @@
       <div style="margin-bottom: 0.8rem;">
         <label style="font-size: 0.8rem; font-weight: 700; color: var(--pink-600); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.3rem;">Your prompt</label>
         <textarea class="llm-mini-chat-input" id="prompt-input" rows="4" placeholder="Enter your prompt here..."></textarea>
+        <div id="prompt-hint" style="font-size: 0.78rem; color: var(--pink-500); margin-top: 0.3rem;"></div>
+      </div>
+      <div style="margin-bottom: 0.8rem;">
+        <label style="font-size: 0.8rem; font-weight: 700; color: var(--pink-600); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.3rem;">Full prompt that will be sent</label>
+        <pre id="prompt-preview" style="font-size: 0.78rem; white-space: pre-wrap; background: var(--pink-50); border: 2px solid var(--pink-200); border-radius: 10px; padding: 0.6rem 0.8rem; color: var(--pink-800); min-height: 2rem; max-height: 10rem; overflow-y: auto; font-family: var(--font-mono);"></pre>
       </div>
       <button class="llm-mini-chat-send" onclick="testPrompt()" style="width: 100%; padding: 0.7rem;">Send to LLM</button>
       <div class="llm-mini-chat-output" id="prompt-output" style="margin-top: 0.8rem;"></div>
@@ -245,13 +251,41 @@
 <script>
 (function(){
   var techniquePrompts = {
-    'zero-shot': 'Perform the task I describe. Do not add examples. Just answer directly.',
+    'zero-shot': '{task}',
-    'few-shot': 'Classify the sentiment of the following text. Here are examples:\n\n"I love this!" → Positive\n"This is terrible." → Negative\n"It\'s okay, I guess." → ?\n\n{text}\n→',
+    'few-shot': 'Convert each sentence into a "secret code" where every word is replaced by a number of stars equal to the word\'s length.\n\nExamples:\nhello world → ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐⭐\ncat → ⭐⭐⭐\nI am happy → ⭐ ⭐⭐ ⭐⭐⭐⭐⭐\n\n{task}',
     'chain-of-thought': 'Solve this step by step. Think through each step carefully before giving your final answer.\n\n{task}',
     'role': 'You are an expert in {domain}. {task}',
     'structured': 'Analyze the following text and return results as JSON with these keys: summary, sentiment, key_topics, action_items.\n\n{text}'
   };
 
+  var techniqueHints = {
+    'zero-shot': 'Try a direct question or request. The model answers without examples.',
+    'few-shot': 'Type any sentence. The model must infer the star-length rule from the examples alone.',
+    'chain-of-thought': 'Try a math or logic problem. Step-by-step reasoning beats direct answers.',
+    'role': 'Try asking for code review, writing advice, or expert analysis in any domain.',
+    'structured': 'Paste any text with products, data, or items to extract into JSON.'
+  };
+
+  (function() {
+    var select = document.getElementById('prompt-technique');
+    var hint = document.getElementById('prompt-hint');
+    var preview = document.getElementById('prompt-preview');
+    var input = document.getElementById('prompt-input');
+    function update() {
+      hint.textContent = techniqueHints[select.value] || '';
+      var base = techniquePrompts[select.value];
+      var user = input.value.trim();
+      if (!user) {
+        preview.textContent = base;
+      } else {
+        preview.textContent = base.replace('{text}', user).replace('{task}', user).replace('{domain}', 'general');
+      }
+    }
+    select.addEventListener('change', update);
+    input.addEventListener('input', update);
+    update();
+  })();
+
   function applyTechnique() {
     var technique = document.getElementById('prompt-technique').value;
     var basePrompt = techniquePrompts[technique];