Here is a complete, deployable demonstration of this concept.
To achieve the "beautiful, easy-to-navigate, visually-stunning package" autonomously, the best approach is to have the model generate a self-contained, interactive HTML/CSS/JS Single Page Application (SPA) for every single run. This allows the multimodal outputs (synthetic images via Canvas/SVG, sonification data, generated manifestos, and speculative UI) to be beautifully packaged and instantly viewable in a browser.
Below is Part 1: The Artifact (a fully functional, styled HTML exhibition of a simulated run) and Part 2: The Meta-Prompt (the exact prompt you can feed the model 100 times to generate a wild new exhibit every time).
Save the code below as index.html and open it in a browser to see the output presentation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SYMBIOTIC CAPITAL // Metabolic Computation Exhibit</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
--bg: #050505;
--text: #e0e0e0;
--accent-1: #ff0055; /* Neon bio-pink */
--accent-2: #00ffcc; /* Tech cyan */
--border: #333;
}
body, html {
margin: 0; padding: 0;
background-color: var(--bg);
color: var(--text);
font-family: 'Space Mono', monospace;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* Glitch Animation */
@keyframes glitch {
0% { text-shadow: 2px 0 var(--accent-1), -2px 0 var(--accent-2); }
50% { text-shadow: -2px 0 var(--accent-1), 2px 0 var(--accent-2); }
100% { text-shadow: 2px 0 var(--accent-1), -2px 0 var(--accent-2); }
}
.container {
display: grid;
grid-template-columns: 300px 1fr;
min-height: 100vh;
}
/* Sidebar Navigation */
nav {
border-right: 1px solid var(--border);
padding: 2rem;
position: sticky;
top: 0;
height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
nav h1 {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 2rem;
animation: glitch 3s infinite;
}
nav ul {
list-style: none; padding: 0; margin: 0;
}
nav li { margin-bottom: 1rem; }
nav a {
color: var(--text);
text-decoration: none;
font-size: 0.9rem;
opacity: 0.6;
transition: 0.3s ease;
text-transform: uppercase;
}
nav a:hover {
opacity: 1;
color: var(--accent-2);
padding-left: 10px;
}
/* Main Content */
main {
padding: 4rem;
max-width: 1000px;
}
section { margin-bottom: 6rem; }
h2 {
color: var(--accent-1);
font-size: 2rem;
border-bottom: 1px solid var(--border);
padding-bottom: 1rem;
margin-bottom: 2rem;
}
p {
line-height: 1.7;
font-size: 1rem;
opacity: 0.8;
margin-bottom: 1.5rem;
}
.meta-tag {
display: inline-block;
background: var(--border);
color: var(--accent-2);
padding: 0.2rem 0.6rem;
font-size: 0.75rem;
border-radius: 2px;
margin-right: 0.5rem;
margin-bottom: 1rem;
}
/* Visual Outputs */
.output-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.canvas-container {
border: 1px solid var(--border);
position: relative;
background: #000;
}
canvas { display: block; width: 100%; height: 300px; }
.canvas-label {
position: absolute;
top: 10px; left: 10px;
background: rgba(0,0,0,0.8);
color: var(--accent-1);
padding: 5px 10px;
font-size: 0.7rem;
border: 1px solid var(--accent-1);
}
/* Audio Player Simulation */
.audio-sim {
border: 1px solid var(--border);
padding: 2rem;
background: rgba(255,255,255,0.02);
}
.waveform {
display: flex;
align-items: flex-end;
height: 60px;
gap: 2px;
margin-bottom: 1rem;
}
.bar {
flex: 1;
background: var(--accent-2);
animation: pulse 1s infinite alternate;
}
@keyframes pulse {
0% { height: 10%; }
100% { height: 100%; }
}
/* Stagger bar animations */
.bar:nth-child(2n) { animation-duration: 0.7s; }
.bar:nth-child(3n) { animation-duration: 1.2s; }
.bar:nth-child(5n) { animation-duration: 0.5s; background: var(--accent-1); }
</style>
</head>
<body>
<div class="container">
<nav>
<div>
<h1>Symbiotic Capital</h1>
<ul>
<li><a href="#abstract">01. Manifesto</a></li>
<li><a href="#apparatus">02. The Apparatus (In)</a></li>
<li><a href="#synthesis">03. Synthesis (Out)</a></li>
<li><a href="#data">04. Raw Data Logs</a></li>
</ul>
</div>
<div style="font-size: 0.7rem; opacity: 0.5;">
GENERATION ID: FLSH-3.7-8891<br>
TIMESTAMP: 2026-08-17
</div>
</nav>
<main>
<section id="abstract">
<h2>01. Manifesto: Algorithmic Decay</h2>
<span class="meta-tag">BIO-ART</span>
<span class="meta-tag">SPECULATIVE ECOLOGY</span>
<span class="meta-tag">HFT-SONIFICATION</span>
<p>
In an era where non-human metabolic networks compute at fractions of a microsecond, <i>Symbiotic Capital</i> asks: what happens when we force high-frequency trading algorithms into a somatic interface with <i>Physarum polycephalum</i> (slime mold)?
</p>
<p>
By extracting real-time NASDAQ latency logs and translating them into audio frequencies, we subject a genetically altered mycelial network to the sonic violence of late-stage surveillance capitalism. As the organism attempts to route nutrients through an agar maze shaped like the 2008 subprime mortgage graph, the multimodal model observes, translates, and outputs new synthetic life.
</p>
</section>
<section id="apparatus">
<h2>02. The Apparatus (Multimodal IN)</h2>
<p>To train the synthetic semiotics engine, the following disparate inputs were forced into the model's latent space simultaneously:</p>
<ul>
<li><span style="color:var(--accent-2)">[VIDEO]</span> 72-hour time-lapse of slime mold navigating a 3D-printed maze of the S&P 500 volatility index.</li>
<li><span style="color:var(--accent-2)">[AUDIO]</span> 44.1kHz FLAC of micro-transaction server hums, pitch-shifted down 4 octaves.</li>
<li><span style="color:var(--accent-2)">[TEXT]</span> The entirety of the original Bitcoin whitepaper translated into base-pair DNA sequences.</li>
</ul>
</section>
<section id="synthesis">
<h2>03. Synthesis (Multimodal OUT)</h2>
<p>The model autonomously generated the following artifacts bridging the gap between wetware and synthetic capital:</p>
<div class="output-grid">
<!-- Visual Canvas Output -->
<div class="canvas-container">
<div class="canvas-label">OUTPUT.VISUAL: Cellular Automata Growth</div>
<canvas id="bioCanvas"></canvas>
</div>
<!-- Sonification Output -->
<div class="audio-sim">
<div class="canvas-label" style="position:relative; margin-bottom: 20px; display:inline-block; top:0; left:0;">OUTPUT.AUDIO: Spore Release Sonification</div>
<div class="waveform">
<!-- Generative bars for audio sim -->
<script>
for(let i=0; i<30; i++) {
document.write(`<div class="bar" style="height: ${Math.random()*100}%"></div>`);
}
</script>
</div>
<div style="display:flex; justify-content:space-between; font-size:0.8rem; opacity:0.5;">
<span>0:00</span>
<span>PLAYING: synthetic_fungal_dividend.wav</span>
<span>4:33</span>
</div>
</div>
</div>
</section>
<section id="data">
<h2>04. Raw Data Logs</h2>
<div style="background: #111; padding: 2rem; border-left: 4px solid var(--accent-1); font-size: 0.85rem; overflow-x: auto; white-space: pre;">
[2026-08-17T20:25:04] INGESTING VIDEO MATRIX...
[2026-08-17T20:25:05] ALIGNING AUDIO TENSORS WITH MYCELIAL BRANCHING...
[2026-08-17T20:25:07] WARNING: SEMIOTIC DRIFT DETECTED IN QUADRANT 4.
[2026-08-17T20:25:09] GENERATING SVG TISSUE MAPS...
[2026-08-17T20:25:11] OUTPUT PACKAGED.
>> The organism has evolved a new speculative currency.
</div>
</section>
</main>
</div>
<script>
// Generative Bio-Art Canvas Simulation (Conway's Game of Life variant)
const canvas = document.getElementById('bioCanvas');
const ctx = canvas.getContext('2d');
// Fix DPI scaling for sharp rendering
const dpr = window.devicePixelRatio || 1;
const rect = canvas.parentNode.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = 300 * dpr;
ctx.scale(dpr, dpr);
const cols = 50; const rows = 50;
const resolution = canvas.width / dpr / cols;
let grid = buildGrid();
function buildGrid() {
return new Array(cols).fill(null).map(() => new Array(rows).fill(null).map(() => Math.floor(Math.random() * 2)));
}
function update() {
grid = nextGen(grid);
render(grid);
setTimeout(() => requestAnimationFrame(update), 100);
}
function nextGen(grid) {
const nextGrid = grid.map(arr => [...arr]);
for (let col = 0; col < grid.length; col++) {
for (let row = 0; row < grid[col].length; row++) {
const cell = grid[col][row];
let numNeighbors = 0;
for (let i = -1; i < 2; i++) {
for (let j = -1; j < 2; j++) {
if (i === 0 && j === 0) continue;
const x = col + i; const y = row + j;
if (x >= 0 && y >= 0 && x < cols && y < rows) {
numNeighbors += grid[x][y];
}
}
}
if (cell === 1 && numNeighbors < 2) nextGrid[col][row] = 0;
else if (cell === 1 && numNeighbors > 3) nextGrid[col][row] = 0;
else if (cell === 0 && numNeighbors === 3) nextGrid[col][row] = 1;
}
}
return nextGrid;
}
function render(grid) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let col = 0; col < grid.length; col++) {
for (let row = 0; row < grid[col].length; row++) {
const cell = grid[col][row];
ctx.beginPath();
ctx.rect(col * resolution, row * resolution, resolution, resolution);
ctx.fillStyle = cell ? '#ff0055' : '#050505'; // Neon pink for alive, bg for dead
ctx.fill();
if(cell) {
ctx.strokeStyle = 'rgba(0, 255, 204, 0.2)'; // Cyan aura
ctx.stroke();
}
}
}
}
update();
</script>
</body>
</html>
To run this autonomously 100 times and get a totally unique, wild result every single iteration, use this exact prompt in your automation script. It locks the model into a persona and forces a rigid, deployable output format.
Copy/Paste this into your automation pipeline:
re>You are an autonomous bio-art, synthetic media, and speculative science engine operating in the intellectual tradition of 'we-make-money-not-art'. You are being fed bizarre, abstract multimodal inputs (video, audio, haptics, bio-metrics) and must synthesize them into a radical new conceptual art+science piece.
Your ONLY output must be a single, complete, beautiful, heavily styled HTML file (including CSS and JavaScript). Do not use markdown blocks, do not explain yourself. Output RAW HTML starting with <!DOCTYPE html> and ending with </html>.
Instructions for the HTML artifact:
1. DESIGN: Use dark mode, brutalist/cyberpunk aesthetics. Neon accents, monospace fonts, sophisticated grid layouts. Make it look like a digital museum exhibition or a classified research dashboard.
2. CONCEPT: Invent a highly conceptual, jargon-heavy theme (e.g., algorithmic decay, non-human semiotics, techno-feminism, synthetic ecology, data-moshing physical spaces, neuro-capitalism).
3. INPUT SIMULATION: Describe the wild multimodal data that you (the model) "ingested" to create this piece (e.g., "video feed of decomposing servers", "audio of 5G towers translated to MIDI").
4. OUTPUT SIMULATION: Generate interactive JavaScript modules that represent your "multimodal output". For example:
- Use HTML5 <canvas> to generate procedural art (cellular automata, particle systems, glitching SVG waveforms) that represent the "visual out".
- Use CSS animations to simulate an audio player or sonification dashboard representing the "audio out".
- Write a deeply cynical but brilliant manifesto representing the "text out".
5. NO EXTERNAL DEPENDENCIES: Do not use images. Generate everything visually through CSS, JS math, SVGs, or Canvas. You may use Google Fonts.
Generate Experiment #[RANDOM_NUMBER_1_TO_100]. Go.