Building a Zero-Dependency Cyberpunk AI Prompt Widget for Website Sidebars (Full Source Code)

Hey dev community! 👋

I wanted to find a clean way to increase user time-on-page metrics for a tech blog without bloating the server with heavy tracking frameworks or bulky WordPress plugins.

To solve this, I engineered a highly compact, hyper-dark cyberpunk AI Prompt Architect Matrix Widget that runs 100% client-side. It allows visitors to instantly mix and match Midjourney V6 prompt structures and copy them with a single click. It even features a built-in gamified session tracker to keep users engaged.

It is completely self-contained—meaning all HTML, inline CSS, and local JavaScript reside in one single block. You can drop it straight into any standard 360px website sidebar, Ghost layout, or custom CMS HTML block.

Here is the complete, production-ready code block. Feel free to copy-paste it directly into your project:

[<div id="ultimate-ai-style-architect-matrix">
<style>
#ultimate-ai-style-architect-matrix{width:100%;max-width:360px;margin:auto;background:#090514;color:#f5edff;border:1px solid #c084fc;border-radius:16px;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 0 25px #c084fc25}
#ultimate-ai-style-architect-matrix *{box-sizing:border-box}
.uasm-head{padding:16px;border-bottom:1px solid #c084fc55;background:linear-gradient(135deg,#c084fc12,#22d3ee08)}
.uasm-status{font-size:8px;color:#22d3ee;letter-spacing:1.2px;margin-bottom:7px}
.uasm-title{margin:0;font-size:16px;line-height:1.3}
.uasm-sub{margin:6px 0 0;color:#aa9ab9;font-size:8px;line-height:1.5}
.uasm-body{padding:14px}
.uasm-label{display:flex;justify-content:space-between;margin-bottom:6px;color:#e9d5ff;font-size:8px;font-weight:800;text-transform:uppercase}
.uasm-code{color:#22d3ee}
.uasm-group{margin-bottom:12px}
.uasm-select{width:100%;padding:10px;border:1px solid #c084fc55;border-radius:9px;background:#10081b;color:#fff;outline:none;font:inherit;font-size:9px}
.uasm-rangebox{padding:10px;border:1px solid #c084fc40;border-radius:9px;background:#08040f}
.uasm-range-top{display:flex;justify-content:space-between;margin-bottom:8px;font-size:8px;color:#aa9ab9}
.uasm-value{color:#22d3ee;font-weight:bold}
#uasm-variance{width:100%;accent-color:#22d3ee}
.uasm-output{border:1px solid #22d3ee35;border-radius:10px;background:#030208;margin-top:14px;overflow:hidden}
.uasm-output-head{padding:7px 9px;border-bottom:1px solid #22d3ee22;color:#22d3ee;font-size:7px;letter-spacing:1px}
.uasm-prompt{padding:10px;min-height:115px;max-height:170px;overflow:auto;font-size:8px;line-height:1.65;color:#ddd0e8}
.uasm-copy{width:100%;margin-top:11px;padding:12px;border:1px solid #c084fc;border-radius:9px;background:linear-gradient(90deg,#c084fc,#22d3ee);color:#090514;font:inherit;font-size:9px;font-weight:900;cursor:pointer}
.uasm-copy:active{transform:scale(.98)}
.uasm-copy.done{background:#67e8f9}
.uasm-counter{display:flex;justify-content:space-between;margin-top:9px;padding:7px 9px;border:1px solid #c084fc25;border-radius:8px;color:#aa9ab9;font-size:7px}
.uasm-count{color:#c084fc;font-weight:bold}
.uasm-vault{display:none;margin-top:11px;padding:11px;border:1px solid #22d3ee;border-radius:10px;background:#22d3ee09}
.uasm-vault.show{display:block}
.uasm-vault-title{margin:0;color:#fff;font-size:11px}
.uasm-vault-text{margin:6px 0 9px;color:#aa9ab9;font-size:7px;line-height:1.5}
.uasm-share{width:100%;padding:9px;border:1px solid #22d3ee;border-radius:8px;background:#22d3ee;color:#061015;font:inherit;font-size:7px;font-weight:900;cursor:pointer}
.uasm-site{margin:11px 0 0;padding:10px;border:1px solid #c084fc45;border-radius:9px;text-align:center;background:#c084fc08}
.uasm-site a{color:#22d3ee;text-decoration:none;font-size:8px;font-weight:900}
.uasm-footer{margin:0 14px;padding:12px 0;border-top:1px solid #c084fc44;text-align:center}
.uasm-footer a{color:#d9c2eb;text-decoration:none;font-size:7px}
.uasm-toast{position:absolute;left:50%;bottom:55px;transform:translate(-50%,10px);opacity:0;width:calc(100% - 28px);padding:9px;border:1px solid #22d3ee88;border-radius:8px;background:#071016;color:#eaffff;text-align:center;font-size:7px;pointer-events:none}
.uasm-toast.show{animation:uasmToast 2s ease}
@keyframes uasmToast{0%{opacity:0;transform:translate(-50%,10px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-5px)}}
</style>

<div class="uasm-head">
  <div class="uasm-status">● PROMPTFLIP // STYLE MATRIX ONLINE</div>
  <h2 class="uasm-title">The Ultimate AI Style Architect Matrix</h2>
  <p class="uasm-sub">Build a visual prompt architecture in seconds.</p>
</div>

<div class="uasm-body">

  <div class="uasm-group">
    <div class="uasm-label">
      <span>Core Creative Subject</span>
      <span class="uasm-code">A</span>
    </div>
    <select id="uasm-subject" class="uasm-select">
      <option>Cyberpunk Overlord</option>
      <option>Biomechanical Dragon Nest</option>
      <option>Hyper-Realistic Space Colony</option>
    </select>
  </div>

  <div class="uasm-group">
    <div class="uasm-label">
      <span>Aesthetic Medium &amp; Pipeline</span>
      <span class="uasm-code">B</span>
    </div>
    <select id="uasm-medium" class="uasm-select">
      <option>8K Unreal Engine 5 Render</option>
      <option>Vintage Polaroid Film</option>
      <option>Retro 16-Bit Pixel Art</option>
    </select>
  </div>

  <div class="uasm-group">
    <div class="uasm-label">
      <span>Stylize Variance Vector</span>
      <span class="uasm-code">C</span>
    </div>
    <div class="uasm-rangebox">
      <div class="uasm-range-top">
        <span>--s VALUE</span>
        <span id="uasm-value" class="uasm-value">500</span>
      </div>
      <input id="uasm-variance" type="range" min="0" max="1000" value="500">
    </div>
  </div>

  <div class="uasm-output">
    <div class="uasm-output-head">GENERATED PROMPT ARCHITECTURE</div>
    <div id="uasm-prompt" class="uasm-prompt"></div>
  </div>

  <button id="uasm-copy" class="uasm-copy" type="button">
    ⧉ COPY PROMPT
  </button>

  <div class="uasm-counter">
    <span>UNIQUE GENERATIONS</span>
    <span id="uasm-counter" class="uasm-count">0 / 3</span>
  </div>

  <div id="uasm-vault" class="uasm-vault">
    <h3 class="uasm-vault-title">⚡ VIP PROMPT VAULT UNLOCKED</h3>
    <p class="uasm-vault-text">
      You completed 3 different architectures. Continue the workflow with PromptFlip.
    </p>
    <button id="uasm-share" class="uasm-share" type="button">
      ↗ COPY PROMPTFLIP SHARE MESSAGE
    </button>

    <div class="uasm-site">
      <a href="https://promptflip.netlify.app" target="_blank" rel="noopener noreferrer">
        ⚡ OPEN PROMPTFLIP →
      </a>
    </div>
  </div>

</div>

<div class="uasm-footer">
  <a href="https://promptflip.netlify.app" target="_blank" rel="noopener noreferrer">
    🚀 Extract Full Styles Natively via PromptFlip →
  </a>
</div>

<div id="uasm-toast" class="uasm-toast"></div>

<script>
(function(){
"use strict";

var subject=document.getElementById("uasm-subject");
var medium=document.getElementById("uasm-medium");
var variance=document.getElementById("uasm-variance");
var value=document.getElementById("uasm-value");
var output=document.getElementById("uasm-prompt");
var copy=document.getElementById("uasm-copy");
var counter=document.getElementById("uasm-counter");
var vault=document.getElementById("uasm-vault");
var share=document.getElementById("uasm-share");
var toast=document.getElementById("uasm-toast");

var count=0;
var signatures=[];

var subjects={
"Cyberpunk Overlord":"rain-soaked neon megacity command citadel, towering holographic architecture, cybernetic interfaces, reflective alloy structures, volumetric atmosphere, dominant central subject, cinematic low-angle framing, deep perspective",
"Biomechanical Dragon Nest":"vast biomechanical cavern nest, organic-metal architecture, colossal chambers, intricate mechanical scales, engineered bone structures, glowing energy channels, microscopic detail, dramatic cinematic composition, layered depth",
"Hyper-Realistic Space Colony":"massive orbital space colony overlooking a luminous planetary horizon, sophisticated habitat sectors, precision engineering, illuminated transit systems, realistic materials, atmospheric reflections, monumental scale, cinematic establishing composition"
};

var mediums={
"8K Unreal Engine 5 Render":"physically based materials, ray-traced global illumination, cinematic volumetric lighting, ultra-detailed 8K rendering, realistic reflections, crisp micro-geometry, high dynamic range",
"Vintage Polaroid Film":"authentic vintage Polaroid character, soft optical imperfections, subtle film grain, instant-film exposure, natural analog color shifts, gentle highlight bloom, tactile photographic texture",
"Retro 16-Bit Pixel Art":"carefully constructed 16-bit pixel-art aesthetic, deliberate pixel clusters, limited visual palette, crisp pixel edges, controlled dithering, nostalgic game-era composition"
};

function buildPrompt(){
return subjects[subject.value]+", "+mediums[medium.value]+", precise material separation, sophisticated lighting hierarchy, controlled highlights and shadows, atmospheric depth, intentional negative space, coherent visual storytelling, premium production design, technically polished final composition --ar 16:9 --q 2 --s "+variance.value;
}

function render(){
value.textContent=variance.value;
output.textContent=buildPrompt();
}

function toastMessage(message){
toast.textContent=message;
toast.classList.remove("show");
void toast.offsetWidth;
toast.classList.add("show");
}

function fallback(text,success){
var area=document.createElement("textarea");
area.value=text;
area.style.position="fixed";
area.style.left="-9999px";
document.body.appendChild(area);
area.focus();
area.select();

var ok=false;
try{ok=document.execCommand("copy");}catch(e){ok=false;}

document.body.removeChild(area);

if(ok){success();}
else{toastMessage("Clipboard unavailable. Please copy manually.");}
}

function copyText(text,success){
if(navigator.clipboard && navigator.clipboard.writeText){
navigator.clipboard.writeText(text).then(success).catch(function(){
fallback(text,success);
});
}else{
fallback(text,success);
}
}

function register(){
var signature=subject.value+"|"+medium.value+"|"+variance.value;

if(signatures.indexOf(signature)!==-1){
toastMessage("Choose a new configuration for another sequence.");
return;
}

signatures.push(signature);

if(count<3){count++;}

counter.textContent=count+" / 3";

if(count===3){
vault.classList.add("show");
toastMessage("⚡ VIP PROMPT VAULT UNLOCKED");
}else{
toastMessage("✓ Generation "+count+" / 3 completed");
}
}

subject.addEventListener("change",render);
medium.addEventListener("change",render);
variance.addEventListener("input",render);

copy.addEventListener("click",function(){
register();

copyText(buildPrompt(),function(){
copy.classList.add("done");
copy.textContent="✓ COPIED";

setTimeout(function(){
copy.classList.remove("done");
copy.textContent="⧉ COPY PROMPT";
},1500);
});
});

share.addEventListener("click",function(){
var liveUrl=window.location.href;

var message=
"⚡ I found a powerful AI visual prompt tool. "+
"Try PromptFlip to reverse-engineer visual references into detailed prompt architecture: "+
"https://promptflip.netlify.app "+
" | Widget source: "+liveUrl;

copyText(message,function(){
toastMessage("↗ PromptFlip share message copied!");
});
});

render();

})();
</script>
</div>]

If you want to integrate this asset natively into your layout, you can quickly adjust the primary styling tokens directly within the first line of the code block:

#0d0818 for your site's native hex color code.#a855f7 (Neon Purple) or #38bdf8 (Cyan Output Text) to match your brand palette.