"vibe coding" with phoenix liveview is next level, any tips and tricks?

I know alot of people hate the concept of vibe coding & ive tried it with several languages didnt really like it, but for some reason it just works so well for me with liveview & elixir. Maybe it’s elixir declarative syntax or liveview simple mental model, but it feels like I’m flying while using claude to generate liveview code all for 20 bucks a month. I have hated writing frontend code for so long, but now it feels like my illness has been cured, claude generates seemingly okay css, html and js that works with no hitch, it also seems to understand how phx works. I cannot complain, ive gone from maybe 4 hours of flicking through css and mdn docs in order make a subpar unresponsive UI to generating a great UI in under 30 minutes

any tips or recommendations to enhance this experience, especially for elixir/phx i know jose has tidewave and i will check it out, but is there any other must have toolsets, price saving models etc to surf the “vibe”

1 Like

I don’t even have a paid subscription, the free version gets the job done for me :slight_smile:

I first prototype a page/app on v0.dev, then take the markup and adapt it to HEEX either myself, or with Claude/ChatGPT. And then I work with it in the editor (zed), with some help from Claude for the final touches. The actual LiveView I write myself, maybe sometimes I ask AI to write a component, or a JS hook.

Some recent prompts:

page is not optimized for dark mode. Let’s fix it

footer is not looking good, especially on mobile. fix it

Adapt help page, according to the information on the homepage

1 Like