onnimonni

onnimonni

Developing great frontends with LLM assistance?

Hey,

I’ve been extensively using claude code for backend development and data wrangling in the last 6 months and it has worked very well.

I generally feel that LLMs work much better in the backend than they do in the frontend and most of the time the resulting UX is not that great unless I do heavy supervision.

I’m wondering if you have had a great experiences on developing beautiful frontends with Elixir? What are you using and how are you instructing your LLM agents?

Liveview components? Hologram? Something completely different?

I’m developing both local apps and web apps.

Most Liked

rhcarvalho

rhcarvalho

Hi Onni! Between frontend and backend, where would you consider yourself more experienced and where do you hold more opinions?

The topic you bring up reminds me of the Gell-Mann Amnesia Effect, which is the idea that we see the flaws in things we’re intimately familiar with, but fail to identify issues on other areas and instead tend to take information as truth.

My experience has been getting good results intertwined with hair-pulling-throw-everything-away moments, across a broad spectrum of subjects and tasks.

The way I see it, each of our personal bar for what “success” means makes all the difference when coming out online to talk about our experiences.

In particular, designing user interfaces and thinking of the intended experience is something that I find more challenging to describe and set deterministic automated tests or conditions, specially when you don’t know what you’re looking for. It’s easy to become hostage to the vibes.

What LLMs have shown to be able to do with greater consistency is replicating existing patterns with adaptations. So, e.g., maintaining a vetted set of core UI components helps.

tfwright

tfwright

My experience has been the opposite. Very bad results on the BE but fine for whippping up some basic UI prototype (have not yet tried to let Claude loose on our very messy React FE).

We have just started experimenting with “AI driven development” and so far the results have been abysmal. I am much more BE focused and the code we get from Claude there has been straight up stupid out of the box at almost every level. Far far below what I’ve seen from juniors in quality, if not quantity. Lots of boneheaded mistakes like not being aware of default values, or figuring out on its own that there is a structure file that should let it know certain fields can’t be null etc. Also will construct some elaborate abstraction to add a missing piece of logic, when actually a single new pattern match clause can do the same thing (and various similar existing pieces are implemented that way). But by far the scariest is the high level stuff. For example, proposing to fix db pool timeouts by just arbitrarily imposing timeouts on random queries. That’s just what I’ve seen this week.

That said, I’m certain we are just not doing it right yet. What I seem to be hearing from everyone making a serious attempt at this is that there is a massive amount of configuration, context massaging, “prompt engineering” etc required to get good results from Claude. We are iterating on all of that but I am still very skeptical about the possibility of getting good code from these things yet. I guess I will know for sure when we inevitably bring in one of the coming wave of AI consultants and see if they can actually deliver acceptable results. My joke is that having “robot skills” is going to be the new “people skills” resume buff.

On a positive note, we integrated Claude in our PR review flow and it has been absolutely invaluable, catching a ton of stuff that regularly gets missed because people do not review things nearly as close as a robot is willing to do. And the occasional whiff is easy to just ignore so there’s very little downside compared to the actual development process.

FlyingNoodle

FlyingNoodle

Maybe my Claude was drunk but I have the same frontend skill and the stuff it produces is god awful.

Text with colour primary on a primary background. Elements with a border but no margin. Like somebody who learned html yesterday.

Must be a skill issue on my end.

Where Next?

Popular in AI / LLMs Top

ricksonoliveira
Hey folks, I have been looking for an alternative to good old VsCode for a while. Have tried some vim and emacs editors with their plugi...
New
AndyL
Elixir has rapidly changing hex packages, both public and private. For people who use AI Coding Tools (Aider, Cursor, Windsurf, etc.), h...
New
dewetblomerus
Setting up Cursor Background Agents to work with Elixir was a pain, which led me to publish a Docker image just for this and write a blog...
New
New
Cheezy
I spent the month of January building and refining a tool to help with Team / AI collaboration. Several friends have provided feedback an...
New
ken-kost
Agreed; I just want to add that IMO Ash amplifies this even further. Especially since the dawn of usage rules. :cowboy_hat_face:
New
sergio
Smart people online are talking about loops. Frankly I don’t understand what these things are in terms of tangibles. I use opencode a...
#ai
New

Other popular topics Top

Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement