How to create professional looking web app with Claude.ai (or other tools) ?

Here's dilemma. claude.ai project (thanks for Brandon's tutorial!) doing half-decent job in creating functional backend code.

But every time I want to change or improve styles - it generates bunch of changes in HTML + JS files and as a result - code blows up and it takes me hours to fix it for new styles to work.

When claude.ai introduces bug in JS + HTML combo - it is having really hard time finding the cause and fixing it (and so as ChatGPT btw) and thus my ideas of any visual improvement are becoming big waste of time for no improvement in backend functions.

I also tried Brandon' suggestion of providing it a snapshots of desired UI look - and i did it with the same result - big changes in HTML+JS+CSS -> code blows up -> after 2 hours of trying to find an issue - I reverted to previous working version with less nice UI.

Luckily I setup github project with frequent updates.

My current project is Web app that allows to CRUD entries in Vector DB and then observe how these entries helps LLM's to deliver answers.

It is LangChain-based RAG customized for certain specific use cases.

Backend functions are all working.

On a frontend it involved few pages, with nav menus, tables, inputs, options, forms, view/update buttons etc. - which ideally i want to look cool, elegant and professional.

So I think that maybe the right approach should be slightly different:

I should pick a solid UI framework for Web app myself at the very beginning of the project - and guide claude.ai to use it.
Then any adjustments in a future look and feel will be minor (say framework already supports dark- and light modes, presets, different table styling, etc...)
Then i continue focusing on backend functions moving forward.

How does it sounds?

My problem is I am totally clueless in UI/frontend frameworks and thus inviting a discussion on this subject - with hopefully interesting outcomes that all will benefit from!

18 comments