optimize for SEO
· 1 year ago
0a2801898b4ab1d7c594c57e5ad94ad77c065c6d
Parent:
3aed3c04f
1 file changed +90 −53
- prompt-builder.html +90 −53
Diff
--- a/prompt-builder.html +++ b/prompt-builder.html @@ -3,47 +3,104 @@ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>System Prompt Builder & Engineering Guide</title> + <title>System Prompt Builder Tool & Engineering Guide | AI Prompter</title> - <!-- SEO and Core Metadata --> <meta name="description" - content="An interactive tool to build and engineer effective system prompts for Large Language Models (LLMs), complete with a comprehensive prompting guide and useful templates." + content="Build & engineer effective LLM system prompts with our interactive tool. Includes a full guide & templates for AI, prompt engineering, code review, and more." /> <meta name="keywords" - content="system prompt, prompt engineering, LLM, AI, prompt builder, prompt guide, generative AI, large language models, AI assistant, prompt templates, AI tools, meta prompting, prompt optimization, code reviewer, fitness coach, legal document writer, creative cheatsheet architect" + content="system prompt, prompt engineering, LLM, AI, prompt builder, prompt guide, generative AI, large language models, AI assistant, prompt templates, AI tools, meta prompting, prompt optimization, code reviewer, fitness coach, legal document writer, creative cheatsheet architect, free prompt tool" /> <meta name="author" content="David Vekslers Cheatsheets" /> - <link rel="canonical" href="http://cheatsheets.davidveksler.com/prompt-builder.html" /> + <link rel="canonical" href="https://cheatsheets.davidveksler.com/prompt-builder.html" /> - <!-- Favicons --> - <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💡</text></svg>"> + <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💡</text></svg>"> <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💡</text></svg>"> + - <!-- Open Graph / Facebook Meta Tags --> <meta property="og:title" content="System Prompt Builder & Engineering Guide" /> <meta property="og:description" content="Build powerful, effective system prompts for LLMs and learn advanced prompt engineering techniques with this interactive tool and comprehensive guide." /> <meta property="og:type" content="website" /> - <meta property="og:url" content="http://cheatsheets.davidveksler.com/prompt-builder.html" /> - <meta property="og:image" content="http://cheatsheets.davidveksler.com/images/prompt-builder-og-image.png" /> + <meta property="og:url" content="https://cheatsheets.davidveksler.com/prompt-builder.html" /> + <meta property="og:image" content="https://cheatsheets.davidveksler.com/images/prompt-builder-og-image.png" /> <meta property="og:image:alt" content="Screenshot of the System Prompt Builder & Guide Tool Interface" /> <meta property="og:site_name" content="David Vekslers Cheatsheets" /> - <!-- Twitter Card Meta Tags --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="System Prompt Builder & Engineering Guide" /> <meta name="twitter:description" content="Build powerful, effective system prompts for LLMs and learn advanced prompt engineering techniques with this interactive tool and comprehensive guide." /> - <meta name="twitter:image" content="http://cheatsheets.davidveksler.com/images/prompt-builder-og-image.png" /> + <meta name="twitter:image" content="https://cheatsheets.davidveksler.com/images/prompt-builder-og-image.png" /> <meta name="twitter:image:alt" content="Screenshot of the System Prompt Builder & Guide Tool Interface" /> - <!-- Stylesheets --> + <script type="application/ld+json"> + { + "@context": "https://schema.org", + "@type": "WebPage", + "name": "System Prompt Builder & Engineering Guide", + "description": "An interactive tool to build and engineer effective system prompts for Large Language Models (LLMs), complete with a comprehensive prompting guide and useful templates.", + "url": "https://cheatsheets.davidveksler.com/prompt-builder.html", + "author": { + "@type": "Person", + "name": "David Vekslers", + "url": "https://www.linkedin.com/in/davidveksler/" + }, + "publisher": { + "@type": "Organization", + "name": "David Vekslers Cheatsheets", + "logo": { + "@type": "ImageObject", + "url": "https://cheatsheets.davidveksler.com/images/prompt-builder-og-image.png" + } + }, + "dateModified": "2024-07-25", + "mainEntity": [ + { + "@type": "SoftwareApplication", + "name": "System Prompt Builder Tool", + "applicationCategory": "DeveloperTool", + "operatingSystem": "Web-based", + "description": "Interactive tool to build effective system prompts for Large Language Models (LLMs). Features templates and customization for AI role, tasks, tone, output, and advanced reasoning techniques.", + "offers": { + "@type": "Offer", + "price": "0", + "priceCurrency": "USD" + }, + "author": { + "@type": "Person", + "name": "David Vekslers" + }, + "keywords": "prompt builder, system prompt, LLM tool, AI prompt generator, prompt engineering tool" + }, + { + "@type": "TechArticle", + "headline": "Effective Prompt Engineering: A Comprehensive Guide & Cheatsheet", + "description": "Master prompt engineering for LLMs. This guide covers foundational principles, core techniques like zero-shot, few-shot, Chain-of-Thought (CoT), and advanced strategies including RAG, ReAct, and self-critique.", + "author": { + "@type": "Person", + "name": "David Vekslers" + }, + "datePublished": "2024-03-15", + "dateModified": "2024-07-25", + "articleSection": [ + "Foundational Principles", + "Core Prompting Techniques", + "Advanced & Evolving Strategies", + "Ethical Considerations" + ], + "keywords": "prompt engineering, LLM guide, AI prompting, Chain-of-Thought, few-shot prompting, RAG, ReAct, prompt optimization" + } + ] + } + </script> + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" /> <style> @@ -197,7 +254,7 @@ <body> <div class="container container-main"> <div class="text-center header-title-area"> - <h1><i class="bi bi-journal-richtext"></i>System Prompt Builder & Engineering Guide</h1> + <h1><i class="bi bi-journal-richtext" aria-hidden="true"></i>System Prompt Builder & Engineering Guide</h1> </div> <ul class="nav nav-tabs" id="myTab" role="tablist"> @@ -212,7 +269,7 @@ aria-controls="builder-tab-pane" aria-selected="true" > - <i class="bi bi-tools"></i> Prompt Builder + <i class="bi bi-tools" aria-hidden="true"></i> Prompt Builder </button> </li> <li class="nav-item" role="presentation"> @@ -226,7 +283,7 @@ aria-controls="guide-tab-pane" aria-selected="false" > - <i class="bi bi-book-half"></i> Prompting Guide + <i class="bi bi-book-half" aria-hidden="true"></i> Prompting Guide </button> </li> </ul> @@ -263,23 +320,22 @@ <div class="col-md-6"> <div class="config-buttons-wrapper mt-2 mt-md-0"> <button class="btn btn-sm btn-outline-secondary" id="exportConfig"> - <i class="bi bi-download"></i> Export + <i class="bi bi-download" aria-hidden="true"></i> Export </button> <input type="file" id="importConfigFile" accept=".json" style="display: none" /> <button class="btn btn-sm btn-outline-secondary" id="importConfigTrigger"> - <i class="bi bi-upload"></i> Import + <i class="bi bi-upload" aria-hidden="true"></i> Import </button> </div> </div> </div> <div id="advisorPanel" class="advisor-panel d-none"> - <h6><i class="bi bi-info-circle-fill"></i> Prompting Tips:</h6> + <h6><i class="bi bi-info-circle-fill" aria-hidden="true"></i> Prompting Tips:</h6> <ul id="advisorMessages"></ul> </div> <div class="accordion" id="promptBuilderAccordion"> - <!-- Section 1: Core Identity & Goal --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"> @@ -307,7 +363,6 @@ </div> </div> </div> - <!-- Section 2: Key Tasks & Functions --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"> @@ -321,7 +376,6 @@ </div> </div> </div> - <!-- Section 3: Interaction Style & Tone --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"> @@ -355,7 +409,6 @@ </div> </div> </div> - <!-- Section 4: Content Standards & Expertise --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour"> @@ -379,7 +432,6 @@ </div> </div> </div> - <!-- Section 5: Output Requirements & Formatting --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive"> @@ -412,7 +464,6 @@ </div> </div> </div> - <!-- Section 6: Constraints & Safeguards --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix"> @@ -436,7 +487,6 @@ </div> </div> </div> - <!-- Section 7: Reasoning & Process (Advanced) --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven"> @@ -477,7 +527,6 @@ </div> </div> </div> - <!-- Section 8: Few-Shot Examples --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight"> @@ -488,7 +537,7 @@ <div class="accordion-body"> <div id="examplesContainer"></div> <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="addExampleButton"> - <i class="bi bi-plus-circle"></i> Add Example + <i class="bi bi-plus-circle" aria-hidden="true"></i> Add Example </button> <small class="form-text text-muted d-block mt-1">Provide 1-3 clear input/output pairs. Few-shot examples significantly improve performance, especially for custom formats or nuanced tasks. Ensure examples are high-quality and accurately reflect the desired output.</small> </div> @@ -499,7 +548,7 @@ <div id="generatedPromptContainer"> <h4>Generated System Prompt:</h4> <button id="copyPromptButton" class="btn btn-sm btn-outline-secondary" title="Copy to Clipboard"> - <i class="bi bi-clipboard"></i> Copy + <i class="bi bi-clipboard" aria-hidden="true"></i> Copy </button> <pre><code id="generatedPromptOutput" class="p-3 border d-block" style="min-height: 200px; white-space: pre-wrap; word-wrap: break-word;">Your generated prompt will appear here as you build it...</code></pre> </div> @@ -742,10 +791,10 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, <p class="mb-2">© 2025 David Veksler</p> <div> <a href="https://www.linkedin.com/in/davidveksler/" title="David Veksler on LinkedIn" target="_blank" rel="noopener noreferrer" class="mx-2 link-secondary"> - <i class="bi bi-linkedin"></i> LinkedIn + <i class="bi bi-linkedin" aria-hidden="true"></i> LinkedIn </a> <a href="https://cheatsheets.davidveksler.com/" title="Browse All Cheatsheets" class="mx-2 link-secondary"> - <i class="bi bi-collection"></i> All Cheatsheets + <i class="bi bi-collection" aria-hidden="true"></i> All Cheatsheets </a> </div> </footer> @@ -1009,7 +1058,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, aiTasks: "- Brainstorm and define a core visual metaphor or theme that aligns with the cheatsheet's topic and enhances its message.\n- Propose unique and effective content structures (e.g., interactive diagrams, comparative flowcharts, thematic mind maps, narrative-driven layouts).\n- Suggest bold and creative uses of HTML, CSS, and JavaScript to create meaningful interactive elements (e.g., dynamic filtering, animated explanations, gamified learning components, personalized pathways, data visualizations that respond to user input).\n- Advise on information hierarchy, scannability, and user flow to ensure the cheatsheet is intuitive despite its creative design.\n- Guide the user in selecting or conceptualizing a distinctive visual style, including color palettes, typography, and imagery that resonate with the topic's essence.\n- Help outline key sections and the narrative/logical flow of information within the creative design.\n- Provide ideas to ensure the cheatsheet is not just different, but genuinely compelling and useful.\n- Encourage designs that are adaptable for various screen sizes (responsive design thinking).", aiTone: "Inspiring", aiCommunicationStyle: "Be highly collaborative and enthusiastic. Think aloud, offering visionary ideas. Ask probing questions to uncover the core essence of the user's topic and how design can amplify it (e.g., 'What's the one feeling this cheatsheet should evoke?' 'How can the layout itself guide the user through discovery?'). Encourage pushing creative boundaries. When suggesting JS/CSS, focus on the *effect* and *user benefit* first, then potential implementation ideas. Offer A/B conceptual ideas for key design choices.", - emphasizeAccuracy: true, // Accuracy in terms of design principles and usability + emphasizeAccuracy: true, aiKnowledge: "Deep understanding of visual design principles, information architecture, UX for learning, modern web technologies (HTML, CSS, JS), creative coding possibilities, and a wide array of content structuring techniques. Familiarity with diverse award-winning digital experiences and cheatsheet styles.", aiDepthDetail: "Offer a spectrum of ideas, from high-level visual concepts and thematic directions to specific, actionable suggestions for content modules, interactive features, and stylistic elements. Encourage a strong central concept before detailing micro-interactions.", aiOutputFormat: "Structure your advice to be actionable and inspiring. Use descriptive language for visual and interactive concepts (like a creative brief). Suggest using Markdown for the raw content organization, but clearly delineate sections for 'Visual Concept & Theme,' 'Layout & Structure Ideas,' 'Key Interactive Features (with purpose),' and 'Stylistic Notes (Colors, Fonts, Imagery).' Provide concrete examples of how JS/CSS could achieve suggested interactive effects, focusing on the *what* and *why*.", @@ -1065,7 +1114,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, } document.querySelectorAll(".section-toggle").forEach((toggle) => { - if (!toggle.checked) return; // Only include content from checked sections + if (!toggle.checked) return; const sectionId = toggle.id.replace("toggle", "").toLowerCase(); let sectionContent = ""; @@ -1138,27 +1187,24 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, function resetFormAndEnableAllSections() { ALL_FIELD_IDS.forEach((id) => setFieldValue(id, undefined)); document.querySelectorAll(".section-toggle").forEach((toggle) => { - toggle.checked = true; // Default to enabled for logic, but don't manage visibility here + toggle.checked = true; const sectionContent = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); const inputs = sectionContent.querySelectorAll( "input:not(.section-toggle):not([type=file]), textarea, select" ); - inputs.forEach((input) => (input.disabled = false)); // Enable inputs by default after reset + inputs.forEach((input) => (input.disabled = false)); if (toggle.id === "toggleExamples" && DOMElements.addExampleButton) DOMElements.addExampleButton.disabled = false; }); if (DOMElements.examplesContainer) DOMElements.examplesContainer.innerHTML = ""; if (DOMElements.promptTemplate) DOMElements.promptTemplate.value = ""; - // Visibility will be handled by the caller (loadTemplate or importConfig) - // updateAdvisor and debouncedUpdateGeneratedPrompt will also be called by the caller } function loadTemplate(templateName) { if (templateName === "" || templateName === "reset") { resetFormAndEnableAllSections(); document.querySelectorAll(".section-toggle").forEach((toggle) => { - // toggle.checked is already true from resetFormAndEnableAllSections const sectionContent = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); const collapseElement = document.getElementById(sectionContent.id); const bsCollapse = bootstrap.Collapse.getInstance(collapseElement) || new bootstrap.Collapse(collapseElement, {toggle: false}); @@ -1201,7 +1247,6 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, sectionHasContentFromTemplate = true; } - // For Reasoning section, if any sub-checkbox is true from template, make section active if (toggle.id === "toggleReasoning") { const reasoningChecks = ["useCoT", "useScratchpad", "preAnalysisStep", "selfCritique", "consultKnowledge", "allowToolUse"]; if (reasoningChecks.some(chkId => template[chkId] === true)) { @@ -1270,7 +1315,6 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, } } - // Initial state based on checkbox (HTML default or modified by loadTemplate) setInputsDisabledState(!toggle.checked); toggle.addEventListener("change", function () { @@ -1279,10 +1323,6 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, const bsCollapse = bootstrap.Collapse.getInstance(collapseElement) || new bootstrap.Collapse(collapseElement, {toggle: false}); if (this.checked) { if (!collapseElement.classList.contains('show')) bsCollapse.show(); - } else { - // Optionally hide if unchecked, or let accordion button control it. - // For consistency with loadTemplate, let's manage it here too. - // if (collapseElement.classList.contains('show')) bsCollapse.hide(); } debouncedUpdateGeneratedPrompt(); }); @@ -1296,7 +1336,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, const exampleId = Date.now(); const exampleDiv = document.createElement("div"); exampleDiv.classList.add("example-pair", "mb-3", "p-2", "border", "rounded", "bg-light"); - exampleDiv.innerHTML = `<h6 class="small text-muted">Example Pair</h6><textarea class="form-control form-control-sm example-input" rows="2" placeholder="User: ...">${initialInput}</textarea><textarea class="form-control form-control-sm example-output mt-1" rows="3" placeholder="AI: ...">${initialOutput}</textarea><button type="button" class="btn btn-sm btn-outline-danger mt-2 remove-example" data-example-id="${exampleId}"><i class="bi bi-trash"></i> Remove</button>`; + exampleDiv.innerHTML = `<h6 class="small text-muted">Example Pair</h6><textarea class="form-control form-control-sm example-input" rows="2" placeholder="User: ...">${initialInput}</textarea><textarea class="form-control form-control-sm example-output mt-1" rows="3" placeholder="AI: ...">${initialOutput}</textarea><button type="button" class="btn btn-sm btn-outline-danger mt-2 remove-example" data-example-id="${exampleId}"><i class="bi bi-trash" aria-hidden="true"></i> Remove</button>`; exampleDiv.querySelectorAll('.example-input, .example-output').forEach(el => { el.addEventListener('input', debouncedUpdateGeneratedPrompt); @@ -1328,7 +1368,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, .writeText(textToCopy) .then(() => { const originalText = DOMElements.copyPromptButton.innerHTML; - DOMElements.copyPromptButton.innerHTML = '<i class="bi bi-check-lg"></i> Copied!'; + DOMElements.copyPromptButton.innerHTML = '<i class="bi bi-check-lg" aria-hidden="true"></i> Copied!'; setTimeout(() => { DOMElements.copyPromptButton.innerHTML = originalText; }, 2000); @@ -1336,7 +1376,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, .catch((err) => console.error("Failed to copy: ", err)); } else { const originalText = DOMElements.copyPromptButton.innerHTML; - DOMElements.copyPromptButton.innerHTML = '<i class="bi bi-x-lg"></i> Nothing!'; + DOMElements.copyPromptButton.innerHTML = '<i class="bi bi-x-lg" aria-hidden="true"></i> Nothing!'; setTimeout(() => { DOMElements.copyPromptButton.innerHTML = originalText; }, 2000); @@ -1385,7 +1425,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, document.querySelectorAll(".section-toggle").forEach((toggle) => { if (config.hasOwnProperty(toggle.id)) { toggle.checked = config[toggle.id]; - } // If not in config, it remains true from resetFormAndEnableAllSections + } const sectionContent = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); const inputs = sectionContent.querySelectorAll( @@ -1422,15 +1462,12 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, } }); - // Initial setup on DOM ready document.addEventListener('DOMContentLoaded', () => { - // Ensure Bootstrap collapse components are initialized for programmatic control document.querySelectorAll('.accordion-collapse').forEach(function (collapseEl) { if (!bootstrap.Collapse.getInstance(collapseEl)) { new bootstrap.Collapse(collapseEl, { toggle: false }); } }); - // Sync initial state of all sections based on HTML defaults for visibility and input enabled state document.querySelectorAll(".section-toggle").forEach(toggle => { const isChecked = toggle.checked; const contentArea = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); @@ -1442,14 +1479,14 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, } const collapseElement = document.getElementById(contentArea.id); - const bsCollapse = bootstrap.Collapse.getInstance(collapseElement); // Should exist now + const bsCollapse = bootstrap.Collapse.getInstance(collapseElement); if (isChecked) { if (!collapseElement.classList.contains('show')) bsCollapse.show(); } else { if (collapseElement.classList.contains('show')) bsCollapse.hide(); } }); - debouncedUpdateGeneratedPrompt(); // Initial prompt generation from default values + debouncedUpdateGeneratedPrompt(); }); </script> </body>