Ask HN: How Are People Designing Apps in the Age of AI?
21 comments
I'll be honest, mostly I just ask AI to keep generating boilerplate vanilla JavaScript+jQuery and CSS until I truly hit a point where that is infeasible. Then I switch to React and Bootstrap (yes, I still use Bootstrap).
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.
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.
I prefer weird, marketable designs rather than doing generic design faster.
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.
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.
It seems to me that AI-based coding assistants are better at writing code for more established frameworks, which has led me to defaulting to vanilla or tried-and-true/"boring technology" because AI has trouble with newer or more frequently changing stuff. Curious if this has been the case for anyone else.
Not with shadcn/ui but I get what you mean. For me Gemini is frustrating, ChatGPT is outdated and Claude is actually useful.
Balsamiq. It's a step up from paper and whiteboard. I do the first iteration in it to test out the flow. After that, I switch to Figma for the design system, branding and colors. Then I code.
All the designs are mostly suggestions, I usually don't try to be pixel perfect, just to be consistent visually.
All the designs are mostly suggestions, I usually don't try to be pixel perfect, just to be consistent visually.
I use it and love it. A great way to get a feel of the ui and ui copy. Makes it easy to add simple interactivity if you need a click through demo.
Nicely separates UX + ui from graphic design.
Nicely separates UX + ui from graphic design.
I've moved to create metadata driven applications. This approach works well with AI as AI can be used to generate the metadata which powers the application.
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:
https://wine.iceburg.ca
"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.
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:
https://wine.iceburg.ca
"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.
My most productive workflow, is take a stab at what I want first and use gpt/claude to generate boiler plate code. I use the base components from tailwind components and ask Claude/GPT to tailor them to my needs.
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.
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.
Try pairing Claude / GPT with Aider if you're not already. Not having to leave my terminal and having changes directly made in the repo ramps up the automation a bit. I turn the auto-commit flag off though, I don't know why that's the default.
https://aider.chat
https://aider.chat
Because AI is not there yet. Boilerplates are the better option until AI generation catches up. Here is what I do:
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.
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.
+1 for v0. Good for creating starting base design. I then ask Claude to organise codebase, then take it to Cursor.
Should mention I'm non-technical and building a scrappy mvp this way. It could end up super scrappy...
Should mention I'm non-technical and building a scrappy mvp this way. It could end up super scrappy...
It's good to not have an empty canvas. Like a writer and an empty page. But the output is not that good yet imo.
I think it depends what you ask for. Notion style webpages, fine. Yesterday I asked for gauge charts and it didn't perform well at all, I'll need to get better at prompting.
The value of frameworks is reduced by the growth of AI-powered coding assistants. Frameworks were supposed to save you some time and improve maintainability, but with GenAI this seems to be not the case anymore (or soon).
(also future GenAI friendly frameworks may be not really programmer friendly)
(also future GenAI friendly frameworks may be not really programmer friendly)
Magicpatterns.com. It's similar to v0.dev but seems to just produce better looking UI.
Midjourney for stock images, or branded content. Sometimes it's even useful for icons.
Midjourney for stock images, or branded content. Sometimes it's even useful for icons.
Yes I can help with this!
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...
[1] - https://www.reddit.com/r/SideProject/s/bG8ssXiBRR
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...
[1] - https://www.reddit.com/r/SideProject/s/bG8ssXiBRR
Hey mate, I tried your extension and I love the idea. I don’t want to be rude, just honest, but in my opinion, it’s in such an early development stage that it can be quite frustrating and overall not very good.
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 )
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 )
Sure thing, feel free to email me at this dev email:
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
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
TailwindUI you still need some design + UI/UX skills but it works great for web apps.
mostly they're going straight to code, designing in code
it'd be cool to have generative ux tools for wireframing though, if that's what you're getting at
it'd be cool to have generative ux tools for wireframing though, if that's what you're getting at
Yes, I love using the code and AI tools like Claude, Github CoPilot are great at it. But when solving a business problem, we still need to "see it" before start writing the code (at least this is my preferred way)
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.