Design Systems

Vibes

Complete aesthetic definitions for agentic front-end development. Color palettes, animations, and design language—encapsulated in 1-2 words. Copy the prompt. Ship the vibe.

01 — Deployed

Live Vibes

Active on promptengines.com. Switch between them with the perspective toggle.

Lab
Live

The default Prompt Engines aesthetic. Dark zinc, orange accent, high contrast. Technical, precise, developer-focused.

Dark Mode Monospace Grain Texture
Agent Prompt
Design with dark zinc (#09090b) background, orange accent (#F04D26), and high-contrast text. Use JetBrains Mono for technical elements, Inter for UI. Add subtle grain texture overlay. Keep it developer-focused: precise, minimal, functional.
Terminal
Live

Bloomberg terminal meets modern CLI. Phosphor green on black, monospace dominance, data density without clutter.

Phosphor Green Data Dense CRT Glow
Agent Prompt
Terminal aesthetic: phosphor green (#00e87b) on deep black (#080808). IBM Plex Mono throughout. CRT scanline texture. Dense data layout with clear hierarchy. Green glow effects on interactive elements. Financial terminal precision.
Military
Live

Tactical interface design. Desaturated olive, tactical orange, utilitarian precision. No decorative elements—pure function.

Tactical Olive Drab Utilitarian
Agent Prompt
Military/tactical interface: desaturated olive (#2d3329), tactical orange (#ff8c00) accents. Stencil or blocky typography. Corner brackets on containers. No gradients—flat colors only. Functional, utilitarian, mission-critical aesthetic.
Hacker
Live

Matrix aesthetic refined. Glowing green text on pure black, cascading code animations, system-level visual language.

Matrix Glowing Text Code Rain
Agent Prompt
Matrix/hacker aesthetic: pure black (#0a0a0a), matrix green (#00ff41) with glow effects. Cascading code animations. Terminal windows with rounded corners. "System" language—access, breach, decrypt. High-tech, subversive, digital underground.
02 — In Development

Draft Vibes

Defined and ready for implementation. These need animation refinement and real-world testing.

16-Bit
Draft

Super Nintendo era nostalgia. Dithered gradients, sprite-inspired icons, bold primary colors with visible pixel structure.

Pixel Art Dithered Sprite UI
Agent Prompt
16-bit console aesthetic: bold purples (#6b5b95), warm golds (#feb236), soft violets (#b8a9c9). Pixel-perfect icons with 1px outlines. Dithered gradients (simulate limited color depth). Sharp rectangular buttons. Nostalgic but functional.
Cyberpunk
Draft

Neon noir. Hot magenta and electric cyan on deep purple-black. Glitch effects, holographic overlays, dystopian tech sheen.

Neon Glitch Holographic
Agent Prompt
Cyberpunk aesthetic: neon magenta (#ff0080) and electric cyan (#00ffff) on deep purple-black (#0a0a0f, #1a0a2e). Glitch effects on state changes. Holographic glow overlays. Sharp geometric shapes. Dystopian tech sheen with Japanese typography accents.
Wasteland
Draft

Scavenged tech aesthetic. Rusted oranges, dried-blood reds, dusty browns. Distressed textures, warning symbols, makeshift UI.

Rust Distressed Hazard
Agent Prompt
Post-apocalyptic interface: rusted browns (#4a3728), hazard orange (#ff6b35), dried-blood red accents. Distressed textures—scratches, dust, corrosion. Warning symbols and radiation icons. Makeshift, scavenged tech aesthetic. Survivalist UI language.
Steampunk
Draft

Victorian industrial. Brass, bronze, copper. Gear mechanisms visible in UI, riveted metal borders, parchment textures behind glass.

Brass Victorian Mechanical
Agent Prompt
Steampunk aesthetic: brass (#d4af37), bronze (#cd853f), copper accents. Gear mechanisms in UI elements. Riveted metal borders with patina. Parchment textures behind glass overlays. Victorian typography with industrial machinery details. Warm, mechanical, ornate.
Taverncore
Draft

D&D tavern coziness. Warm wood tones, firelight amber, magical glowing accents. The feeling of a party resting at an inn.

Cozy Fantasy Firelight
Agent Prompt
Taverncore aesthetic: warm dark wood (#2d1810, #4a2c1a), firelight amber (#ffcc66), magical glow accents. Medieval fantasy UI with cozy tavern atmosphere. Leather textures, wooden planks, candlelight. Rounded corners like worn furniture. Party-at-rest feeling.
03 — Usage

How to Use Vibes

For Agents
Include the vibe prompt in your system instructions when building front-end components. The vibe defines:

1. Color Palette — Primary, secondary, accent, text, and surface colors with hex codes.
2. Typography — Font families, weights, and treatments (monospace vs. sans, display vs. body).
3. Animation Language — How things move: terminal cursors blink, cyberpunk glitches, steampunk gears rotate.
4. Texture & Depth — Grain, scanlines, glass, metal, wood, holographic overlays.
5. UI Shapes — Sharp corners vs. rounded, pixel edges vs. smooth, ornate vs. minimal.
6. Emotional Tone — The feeling the interface should evoke: technical, cozy, dystopian, magical.

Copy the agent prompt from any vibe card into your build instructions. The vibe encapsulates all design decisions in 1-2 words.