The All-in-One Color & Device Staging Lab: "Generate living gradients, simulate color vision deficiency, and stage production mockups in seconds.

My_Bad_Einstein — Sun, 08 Nov 2026 02:44:25 +0000

Hey everyone! I'm 16 and I've spent the past few months building Vivio Studio — a fast, client-side color and visual staging lab.

The Problem

When designing modern UI, designers usually have to shuffle between 4 different tools: one to generate a gradient, one to check WCAG accessibility contrast, another for CVD color-blindness simulation, and Figma/Photoshop for device mockups. It breaks your flow.

What I Built

I wanted to combine the entire workflow into a single, cohesive browser studio:

🎨 Organic Color Transitions: Multi-stop gradients engineered to prevent muddy gray midpoints.
📱 Instant 3D Staging: Preview your palettes mapped in real time across phone, desktop, and frosted card mockups.
👁️ Accessibility Built-in: Instant WCAG contrast audits and CVD simulations (Protanopia, Deuteranopia, Tritanopia).
⚡ Zero Friction: Runs 100% client-side in the browser. No signup or account required.

Try it live:
👉 https://viviostudio.pages.dev

(Free to explore, generate, and preview in your browser — optional Pro unlock available for advanced 3D exports.)

Would love any feedback on the UI, the controls, or the color transitions! What should I add next?

DEV Community: My_Bad_Einstein

The All-in-One Color & Device Staging Lab: "Generate living gradients, simulate color vision deficiency, and stage production mockups in seconds.