Prompt Generator

Build a strong prompt from parts

A good prompt names who the AI should act as, the task, the audience, a tone, and a format. Fill the fields and the prompt updates live — then copy it.

HTML — the form controls (each id is used by the JS below)

<form class="pg" onsubmit="return false">
  <label>Act as a…
    <select id="role">
      <option>web design teacher</option>
      <option>marketing copywriter</option>
      <option>front-end developer</option>
      <option>senior software engineer</option>
    </select>
  </label>
  <label>Tone
    <select id="tone">
      <option>friendly</option><option>formal</option>
      <option>professional</option><option>concise</option>
    </select>
  </label>
  <label>Task — what should it do?
    <input id="task" type="text" value="explain CSS flexbox with a simple example">
  </label>
  <label>Audience
    <input id="aud" type="text" value="first-year students">
  </label>
  <label>Format
    <select id="fmt">
      <option>a short paragraph</option><option>a bulleted list</option>
      <option>step-by-step instructions</option><option>a code example with comments</option>
    </select>
  </label>
  <label>Length
    <select id="length">
      <option>brief and to the point</option><option>a standard length</option>
      <option>thorough and in-depth</option>
    </select>
  </label>
  <label>Reading level
    <select id="level">
      <option>a general audience</option><option>a complete beginner</option>
      <option>an intermediate learner</option><option>an expert</option>
    </select>
  </label>
  <label>Must include (optional)
    <input id="must" type="text" placeholder="e.g. a real-world example and a common mistake to avoid">
  </label>
  <label><input type="checkbox" id="step"> Ask it to think step by step</label>
  <label><input type="checkbox" id="ask"> Let it ask me questions first</label>

  <div class="out-wrap">
    <label for="out">Your prompt</label>
    <textarea id="out" readonly></textarea>
    <button type="button" class="copy" id="copy">Copy</button>
  </div>
</form>

CSS

.pg { display: grid; gap: 12px; max-width: 560px; }
.pg label { display: block; font-size: .82rem; font-weight: 600; color: #374151; }
.pg input, .pg select {
  width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1;
  border-radius: 8px; font-size: .88rem; font-family: inherit; color: #111; background: #fff;
}
.pg input[type="checkbox"] { width: auto; }
.out-wrap { position: relative; }
.pg textarea {
  width: 100%; min-height: 96px; padding: 12px 14px;
  border: 1px solid #a855f7; background: #faf5ff; color: #3b0764;
  border-radius: 10px; font-size: .9rem; line-height: 1.55; resize: vertical; font-family: inherit;
}
.pg .copy {                              /* sits over the box */
  position: absolute; top: 8px; right: 8px;
  background: #a855f7; color: #fff; border: none; border-radius: 7px;
  padding: 6px 12px; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.pg .copy.done { background: #22c55e; }

JavaScript — assemble & copy

// grab each control by the id from the HTML above
const role   = document.getElementById('role');
const tone   = document.getElementById('tone');
const task   = document.getElementById('task');
const aud    = document.getElementById('aud');
const fmt    = document.getElementById('fmt');
const length = document.getElementById('length');
const level  = document.getElementById('level');
const must   = document.getElementById('must');
const step   = document.getElementById('step');
const ask    = document.getElementById('ask');
const out    = document.getElementById('out');
const copy   = document.getElementById('copy');

function build() {
  let s = `Act as a ${role.value}. ${task.value} for ${aud.value}, ` +
          `written for ${level.value}. Use a ${tone.value} tone, ` +
          `keep it ${length.value}, and respond as ${fmt.value}.`;
  if (must.value.trim()) s += ` Be sure to include ${must.value.trim()}.`;  // optional
  if (step.checked) s += ` Think through it step by step first.`;            // checkbox
  if (ask.checked)  s += ` Ask me clarifying questions before you begin.`;
  out.value = s;
}

// rebuild whenever any field changes
const inputs = [role, tone, task, aud, fmt, length, level, must, step, ask];
inputs.forEach(f => { f.addEventListener('input', build); f.addEventListener('change', build); });
build();   // run once so the box isn't empty

copy.addEventListener('click', () => {
  navigator.clipboard.writeText(out.value);
  copy.textContent = 'Copied!'; copy.classList.add('done');
  setTimeout(() => { copy.textContent = 'Copy'; copy.classList.remove('done'); }, 1500);
});

Keep building

More on working with AI in Using AI, and form controls in Form Patterns — or browse the full Component Library.