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

A developer built a zero-dependency, client-side "AI Prompt Architect Matrix" widget that lets visitors assemble and copy Midjourney V6 prompt structures with a single click. The self-contained HTML, inline CSS, and JavaScript block is designed to drop into a 360px website sidebar or CMS HTML block, and includes a gamified session tracker aimed at increasing time-on-page metrics without server-side tracking frameworks or plugins.

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.