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

> Source: <https://dev.to/dev_alex_matrix/building-a-zero-dependency-cyberpunk-ai-prompt-widget-for-website-sidebars-full-source-code-23aa>
> Published: 2026-09-16 11:05:30+00:00

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.