Skip to content

Instantly share code, notes, and snippets.

@knightad10

knightad10/index.html

Created May 12, 2025 19:17
Show Gist options
  • Save knightad10/a2ba29e3c6bb83168429d385002bba2e to your computer and use it in GitHub Desktop.
Save knightad10/a2ba29e3c6bb83168429d385002bba2e to your computer and use it in GitHub Desktop.
Download ZIP
Prompt Engineer
Raw
index.html
<html>
<head>
<title>Split Design Prompt Generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/slate/bootstrap.min.css">
<style>
.container {
padding-top: 50px;
}
.split-wrapper {
display: flex;
flex-wrap: wrap;
}
.left-half {
width: 50%;
padding-right: 10px;
}
.right-half {
width: 50%;
padding-left: 10px;
}
@media (max-width: 767px) {
.left-half, .right-half {
width: 100%;
padding-right: 0;
padding-left: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="split-wrapper">
<div class="left-half">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">What type of prompt?</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Write</a></li>
<li><a class="dropdown-item" href="#">Research</a></li>
<li><a class="dropdown-item" href="#">Imagine</a></li>
<li><a class="dropdown-item" href="#">Document</a></li>
</ul>
</div>
<div class="mb-3">
<label for="topicInput" class="form-label">Topic</label>
<input type="text" class="form-control" id="topicInput">
</div>
<form>
<div class="mb-3">
<label for="startersSelect" class="form-label">Starters</label>
<select class="form-select" id="startersSelect">
<option selected>Choose an option</option>
<option>Write an Article about {Topic}</option>
<option>Write a Blog Post about {Topic}</option>
<option>Research a {Topic}</option>
<option>Topic Data Collection</option>
<option>I don't know yet</option>
</select>
</div>
<div class="mb-3">
<label for="toneSelect" class="form-label">Tone</label>
<select class="form-select" id="toneSelect">
<option selected>Choose an option</option>
<option>Conversational</option>
<option>Informative</option>
<option>Persuasive</option>
<option>Sarcastic</option>
<option>Inspiring</option>
<option>Humorous</option>
<option>Thoughtful</option>
<option>Passionate</option>
<option>Objective</option>
<option>Professional</option>
</select>
</div>
<div class="mb-3">
<label for="explanationSelect" class="form-label">Explanation</label>
<select class="form-select" id="explanationSelect">
<option selected>Choose an option</option>
<option>Clear. Concise. No Jargon.</option>
<option>Conversational + Relatable</option>
<option>Punchy Writing that Pops</option>
<option>Persuasive Storyteller</option>
<option>Clarity Snippet</option>
<option>Clear + Thorough</option>
<option>Conversational English</option>
</select>
</div>
<div class="mb-3">
<label for="audienceSelect" class="form-label">Audience</label>
<select class="form-select" id="audienceSelect">
<option selected>Choose an option</option>
<option>General public</option>
<option>Niche audience</option>
<option>Experts</option>
<option>Beginners</option>
<option>Youth</option>
<option>Seniors</option>
<option>Women</option>
<option>Men</option>
<option>Geographically based</option>
<option>Demographically based</option>
</select>
</div>
<div class="mb-3">
<label for="purposeSelect" class="form-label">Purpose</label>
<select class="form-select" id="purposeSelect">
<option selected>Choose an option</option>
<option>Informative</option>
<option>Entertaining</option>
<option>Persuasive</option>
<option>Promotional</option>
<option>Thought leadership</option>
<option>Brand building</option>
<option>Customer engagement</option>
<option>Lead generation</option>
<option>SEO optimization</option>
<option>News and updates</option>
<option>Review</option>
<option>Compare and contrast</option>
<option>Q&A</option>
<option>Case study</option>
<option>Problem and solution</option>
<option>Interview</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Generate Prompt</button>
</form>
</div>
<div class="right-half">
<div class="mb-3">
<label for="generatedPrompt" class="form-label">Generated Prompt</label>
<textarea class="form-control" id="generatedPrompt" rows="6" readonly></textarea>
</div>
<button type="button" class="btn btn-primary">Copy to Clipboard</button>
<a href="https://chat.openai.com/" target="_blank" class="btn btn-primary">Chat with AI</a>
<div class="mt-3">
<label for="aiResponse" class="form-label">AI Response</label>
<textarea class="form-control" id="aiResponse" rows="6" readonly></textarea>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment