Ask HN: Im a back end dev, how do you go from designing the UI with AI?

3 pointscristyg010110d ago9 comments

As I was saying Im a backend dev, I lose my mind writing frontend code, given the power of the new designing tools, what is the typical workflow me as somebody not very good at design to make an UI and then implement it as a front end?

Lets say we use claude design, or the google tool.

9 comments

magicalhippo10d ago

I've made fully functioning and pretty decent looking frontends using just Claude Design and Claude Code without touching a single line of HTML, CSS or JS.

I got a decent design document describing what the app needs to do, including concrete user flows. I've made this with review help from Claude and ChatGPT to catch inconsistencies, or underspecified areas. If porting an old app, use them to reverse-engineer a lot of this from the old code.

I then uploaded that to Claude Design, along with perhaps some screenshots or crude box drawings for reference. Claude Design asks me questions and we iterate a bit.

The I export it to Claude Code and have it implement. I make it add tests using suitable test framework.

I then just iterate. Once the automated tests work I test it manually, describing the issues, eg top banner doesn't stick to the top, some container overflows, or changes I want made, attaching screenshots for reference in some cases.

I ask it to update the automated tests yo catch relevant issues I found, to avoid regression.

At least for fairly straight forward apps I found you come amazingly far without lifting the frontend bonnet.

cristyg0101OP10d ago

so basically you write everything up from scrath without using any UI kits?

magicalhippo10d ago

I didn't explicitly tell it, mostly because I wasn't familiar with UI kits, since I'm not a frontend guy.

That said Claude Design asks you if you have reference images from apps you want it to look like, so perhaps it uses them under the hood or reproduce them.

SashaMApps10d ago

UI is one thing, but there is also UX, otherwise you may get perfect look, but very inconvinient to the users. If you are using AI, especially Claude - try Claude Design. I found it really usefull for myself, but kind of expensive

cristyg0101OP10d ago

what is your usual workflow? if you have to start from scratch?

cristyg0101OP10d ago

The way I do it today is:

1. Find a UI kit ready, shadcn / shadcn-svelte

2. Define my fonts and borders and theme <- My design

3. Implement the business

But in that second step there might be much more to do.

NohatCoder10d ago

Have you actually learned to write HTML and CSS without any kit/framework?

I generally don't find that the frameworks help nearly as much as people think they do, and if you haven't learned the basics they easily get in the way of doing so.

cristyg0101OP10d ago

for sure I do know the basics, but you dont spin up html css bloat, that later becomes a nightmare to maintain, I tend to want to make frontends with web components, and each frameworks provides their own

NohatCoder10d ago

If usage of the basics become "bloat" and "a nightmare to maintain", then you haven't learned how to use them.

j / k navigate · click thread line to collapse

9 comments

magicalhippo10d ago

I've made fully functioning and pretty decent looking frontends using just Claude Design and Claude Code without touching a single line of HTML, CSS or JS.

I then uploaded that to Claude Design, along with perhaps some screenshots or crude box drawings for reference. Claude Design asks me questions and we iterate a bit.

The I export it to Claude Code and have it implement. I make it add tests using suitable test framework.

I ask it to update the automated tests yo catch relevant issues I found, to avoid regression.

At least for fairly straight forward apps I found you come amazingly far without lifting the frontend bonnet.

cristyg0101OP10d ago

so basically you write everything up from scrath without using any UI kits?

magicalhippo10d ago

I didn't explicitly tell it, mostly because I wasn't familiar with UI kits, since I'm not a frontend guy.

That said Claude Design asks you if you have reference images from apps you want it to look like, so perhaps it uses them under the hood or reproduce them.

SashaMApps10d ago

cristyg0101OP10d ago

what is your usual workflow? if you have to start from scratch?

cristyg0101OP10d ago

The way I do it today is:

1. Find a UI kit ready, shadcn / shadcn-svelte

2. Define my fonts and borders and theme <- My design

3. Implement the business

But in that second step there might be much more to do.

NohatCoder10d ago

Have you actually learned to write HTML and CSS without any kit/framework?

I generally don't find that the frameworks help nearly as much as people think they do, and if you haven't learned the basics they easily get in the way of doing so.

cristyg0101OP10d ago

NohatCoder10d ago

If usage of the basics become "bloat" and "a nightmare to maintain", then you haven't learned how to use them.

j / k navigate · click thread line to collapse