From d2094cab14c887e1bf0fdf239276b972aceee3cf Mon Sep 17 00:00:00 2001
From: letieu <letieu8@gmail.com>
Date: Wed, 10 Dec 2025 05:09:31 +0700
Subject: [PATCH] add prompt

---
 index.html        | 30 +++++++++++++++++++++++++++---
 installation.html | 10 +++++++++-
 2 files changed, 36 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index e1e4ac9..f63ec0f 100644
--- a/index.html
+++ b/index.html
@@ -6,13 +6,16 @@
     <title>terminal.css - Terminal CSS Component Library</title>
 
     <!-- terminal.css Components (Bulma-style) -->
-    <link rel="stylesheet" href="./index.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.2/index.css"
+    />
 
     <!-- Tailwind for layout (optional) -->
     <script src="https://cdn.tailwindcss.com"></script>
 
     <!-- terminal.css JavaScript -->
-    <script src="./index.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.2/index.js"></script>
   </head>
   <body class="min-h-screen p-0 md:p-8">
     <!-- MAIN TERMINAL WINDOW -->
@@ -41,9 +44,16 @@
               >Installation Guide</a
             >
             <a class="button is-info" href="./showcase.html">Showcase</a>
-            <a class="button is-ghost" href="https://github.com/letieu/terminal.css">GitHub</a>
+            <a
+              class="button is-ghost"
+              href="https://github.com/letieu/terminal.css"
+              >GitHub</a
+            >
           </div>
           <hr class="mt-6" />
+          <div class="mt-4 has-text-primary button" onclick="copyAIPrompt()">
+            Copy AI Prompt
+          </div>
         </div>
 
         <!-- SECTION 1: TYPOGRAPHY -->
@@ -862,4 +872,18 @@
     <!-- Toast Container -->
     <div class="toast-container" id="toastContainer"></div>
   </body>
+
+  <script>
+    async function copyAIPrompt() {
+      const htmlText = document.querySelector("html").innerHTML;
+      const textToCopy = htmlText;
+      await navigator.clipboard.writeText(`
+This is terminal-like css framework, this is full html example, please check and build a landing page about my SaaS product use this css framework:
+
+${htmlText}
+
+`);
+      showToast("primary", "Primary", "Copied the propmt");
+    }
+  </script>
 </html>
diff --git a/installation.html b/installation.html
index c588a9a..4a373d4 100644
--- a/installation.html
+++ b/installation.html
@@ -129,13 +129,21 @@
                       >Components page</a
                     >
                   </li>
-                  <li class="mb-2">Find the component you want to use</li>
                   <li class="mb-2">Press <kbd>F12</kbd> to open DevTools</li>
                   <li class="mb-2">
                     Inspect the component and copy the HTML code
                   </li>
                   <li>Paste it into your project</li>
                 </ol>
+                <p class="has-text-muted text-sm mt-8 mb-2">Or Vibe coding</p>
+                <p>
+                  Just drop the full
+                  <a href="./index.html" class="has-text-primary"
+                    >Components page</a
+                  >
+                  html code to the AI Model, tell it that flow the component
+                  usage
+                </p>
               </div>
             </div>
 
