Variant

Hello world

I’ve used em to create colorguesser.xyz . What i did is different compared to what others have said in the comments, 1. Droped a vague prompt that i need to build, variant ui give pretty results based on what the prompt is. 2. It gives you 6 generation at the start, pick one you like and go to edit mode to generate more variants of that. 3. Once you are happy ask it to generate 2-3 screens based on the user flow you need, like i need dashboard, login screen etc. 4. Copy them in a design.md file and give it to cursor or any coding agent to use that as reference for building ui for the app. 5. I went ahead and asked my agent to create re usable components with the design reference i have already. With that i can create custom components as well if needed. 6. When there is a need for a new component, AI agent pretty much understand what the ui style is and creates based on it. It really works for me with the workflow i have.

Better plant health. Designed in @variantui, built with @Lovable Pro tip - export the React code from Variant instead of the prompt, much more accurate.

It’s not too late to alter the timeline... One-shot GUI straight out of Evangelion/Sci-fi with @VariantUI Just use style code: --sref 1ad713

For the past few weeks I’ve been trying to make my portfolio a bit more interactive Tried way too many AI tools… but most outputs were questionable. Then I found @variantui and it lowkey cooks Here's a first look of what I’m building (still WIP). Built with @variantui, with @claudeai helping generate some code to run it on Next.js.

spring is here 🪻 🔊 made with @variantui and @CodeWordsAI growyourflowers.codewords.run

yeah @variantui cooks

Make something every day at @ListenLabs #58 and I decided I still wasn't done playing with @variantui yet! continually impressed with what I get back on these and it's been really fun to finesse the instructions to get specific things back like aspect ratios of devices, making sure the knobs adjust low/mid/high, and screen display style types. the visualizer is webgl! #listenmakesit

i love what these guys have been cooking

Remembered a toy from childhood! Digitised it. It's called "Aquarings" Lives in browser at aquarings.vercel.app Give it a try in your next tea/coffee break ☕️☕️ Made using @variantui & Codex

Make something every day #57. This time I was noodling on @variantui with that fun sref code they handed out to make some audio visualizers that are @ListenLabs branded. Really impressive how well some of these outputs work for how little goes into the prompting end on a one-shot. #listenmakesit

literally no excuse to have boilerplate tailwind css in your vibecoded ui anymore @variantui has singlehandedly turned my ai slop into something I’m proud to share

Variant is CRAZY good. Basic prompt: Build design board showing websites srefs d51101 // 0a4329 // 826b1b // a7eeb4 First time AI design has really blown me away.

By the way, it's super easy to make gadgets like these in @variantui using style code: --sref d51101

Really impressed by @variantui. Shared a quick look on Xiaohongshu(RedNote) and it got 3K+ likes and saves already! Easily one of the best tools I’ve found for making vibe coding look actually aesthetic.

narrow exploration of a workspace with @variantui

Brainstorming → refining → polishing → code Been iterating on blob spins in @variantui Love that moment when an abstract visual starts feeling less like an experiment and more like interface language

Made a little @openclaw tamagotchi that sits on my desktop He occasionally comments on what he sees (mercilessly)

Browsing @variantui generations is my new timepass...

Pro Tip for FRONTEND DEVS: > Don’t just “pick some Tailwind classes” and vibe. > Build a real design system once, then reuse it everywhere: - Define a small, strict set of primitives: colors, spacing scale, radii, typography, shadows - Wrap them into components (button, input, card, modal, etc.) that you actually use across projects - Document when to use which variant so your UI doesn’t feel random > Then back it with tokens + a linter: - Put all colors, spacing, font sizes, z-indexes into tokens (JS/TS, CSS vars, or Tailwind config) - Add a custom linter / ESLint rule / stylelint rule that screams if someone hardcodes `#fff`, `16px`, or `margin: 37px` - Fail PRs that don’t use tokens or try to sneak in one-off styles Do this once and every new screen ships faster, looks consistent, and is way easier to refactor later.

Definitely agree on adding more effort though but AI can design visually more than a number of designers at this point. These are AI generated.