Specifically, with frameworks like TailwindUI, TailwindCSS, and ShadCN being mature and widely available, why does designing quickly and efficiently still feel like a challenge? Is there a gap between the tooling available and the ability to build great UX fast?
Also, how do people handle UX variants when designing and iterating on their apps? Do tools exist that simplify managing and testing different versions of the UI?
Would love to hear about how people are approaching app design, especially in small or one-person teams, and whether there are tools or processes that bridge this gap effectively.
But I hail from the underground catacombs of system administration. Creaky venerable lovable command line tools. Heck, even "traditional" engineering (my degree was in EE, and my first love was physics). Design is both not my strong suit, and also something I have strange opinions about (I'd probably be classed as a "power user" for just about every program I regularly pay conscious attention to). I'm doing this mostly to finally become the 'true' full-stack engineer I've dreamed of being since I was a kid, who understands what's happening to some level from the electron.
All that to say: I really suck at it, and AI puts me on the lower end of mediocre. Progress!
f I was living in my own hermetically sealed chamber, everything I make would look and feel like https://github.com/hiAndrewQuinn/finstem , but I'm not. And that's a good thing! I'm a cantankerous dude at times, it's great that even I can get pulled out of my shell to mess around with like, AJAX and modal dialogs and such.
Like instead of a generic progress bar to your next payment, it should look like an hourglass that changes from sand to blood when your payment is overdue. For some reason, the PMs didn't like this, though. Nor did they like the idea of sending threatening Suno-generated music on WhatsApp instead of push notifications.
But the more intelligent AIs are quite good at this. I've been doing moodboards, like taking snippets from comic books and asking AI to design it to that style, with thick bordered buttons and full screen notifications that "BAM!" at you. Haven't tried with o1 but it seems perfect for it.
All the designs are mostly suggestions, I usually don't try to be pixel perfect, just to be consistent visually.
Nicely separates UX + ui from graphic design.
For example I created an open source metadata crm called IceburgCRM iceburg.ca (available in Django / Laravel) recently. Without AI involved you could configure the crm by inserting data in the database. For example you add an entry for accounts, contacts, etc in the modules table and your crm will have menu links and a module section setup for accounts, contacts.
With AI you can now generate metadata needed to create custom crms. For example typing in "create a wine crm" in the AI prompt I build I can generate:
"create a crm for bee keeping": https://beekeeping.iceburg.ca
"create a coffee lovers crm": https://coffee.iceburg.ca
Using AI in traditional applications opens up a new dimension for us crud developers. I think we will see a shift to more metadata applications in the future as the benefits become clear. It's a new field using a different type of creativity and some old school design patterns.
Been working great! I proofread almost everything of course but moving really fast and not having to muck around with which tailwind class is really nice.
1. Explore an idea, research what competitors do, etc.
2. Use my own boilerplate for a greenfield project https://achromatic.dev (sorry for self-promo)
3. Write down what I actually want and paste the text and screenshot to v0 to see if it can generate something useful.
4. Improve/write the initial code by hand.
5. Paste the code into Claude and improve it more manually in an iterative fashion.
6. Make sure it is consistent with the rest of the codebase.
PS: I'm deep into developer tools now. Have forked the original drawIO/mxGraph, resolved all monkey patches, translated everything to TypeScript, added Multiplayer and more (~250k slocs) - ready as a base to explore some tools like one that solves your described problem. Here is a screenshot: https://i.imgur.com/opiu7z4.png I do envision Achromatic as a dev/design tool company.
Should mention I'm non-technical and building a scrappy mvp this way. It could end up super scrappy...
(also future GenAI friendly frameworks may be not really programmer friendly)
Midjourney for stock images, or branded content. Sometimes it's even useful for icons.
I go straight to code, but I use my design copilot chrome extension [0][1] to constantly give me component-level design feedback as I build.
It basically forms my entire design system now.
Currently it’s a manual process - you use the built in screenshot tool and it kicks off the design feedback flow.
But I’ve been playing with adding data-attributes for automatic feedback whenever the component changes :)
Try it out and leave a review, it’s 100% free and operates on a BYO API key model to remain free. You can get a free Google Gemini API key with a very awesome free tier
I’m a solo dev but I’ve started using my tool at work! I also used the tool itself to design its own look and feel
[0] - https://chromewebstore.google.com/detail/design-copilot/hgal...
I won’t go off-topic with actual details (many of which I’m sure you’ve already considered), but I’d be more than happy to share some ideas if you’d like And not on the Chrome store, because I don't want to rate it just yet. (5* for the concept though )
h e l l o <at> p a p i l l o n s o f t w a r e <dot> d e v
it'd be cool to have generative ux tools for wireframing though, if that's what you're getting at
