I tried to generate pages with claude code and fluxon ui.
I ask to claude code to generate real world page samples, the results are these.
How do u feel? For me, it’s awesome. I’m newbie to frontend dev and always struggle to get well designed page without paying effort. These pair might give me a magic wand to make beautifully layouted page
Awesome! Can you share how you managed to get these results?
I just ask to claude code to make sample pages with fluxon UI for several usecases.
With this simple prompt, claude code generated these pages. Before I did vibe coding for vanila react/typescript but results pages are messy.
I ask claude code why u can generate such well designed pages. He responded it’s because of well considered implementation of fluxon ui.
Each components are designed with harmonized color, consistent space, accessibility.
For claude code, I think elixir and fluxon ui are probably little bit minor but fluxon ui has good abstraction for components design, so the knowledge of claude code for good design seems to utilize such abstraction to generate well designed pages.
I don’t understand how ui library should be and i’m not sure these claude opinion is right or not. Though, these results are really acceptable for me.
that looks better than anything I have gotten claude to generate, but then again I just use vanilla css I will try and use fluxon ui next time
The abstraction for component design what I said above is not special thing which only fluxon supoorts, probably other library like tailwind plus and shadcn support too.
But fluxon is designed for liveview. I didn’t use fluxon well until now, just scratch the surface. It’s paid library but if using it support ui making works well, I think it worth it.
I’ll try fluxon for my vibe coding. If I found something new, I’ll report again.
claude code response -----------------------
In magic_of_fluxon_ui.md, u
summerieze how fluxon works to
create bettern design. other
library like shadcn,tailwind plus
also support same functionality
from the view point of style
making?
Great question! Yes, other
libraries like shadcn/ui and
Tailwind UI provide similar
functionality. Let me compare
them:
Design System Libraries
Comparison
Fluxon (Phoenix LiveView)
<.button variant="solid"
color="blue" size="lg">
<.icon name="hero-shopping-cart"
/>
Add to Cart
</.button>
shadcn/ui (React)
<Button variant="default"
size="lg" className="w-full">
<ShoppingCart className="mr-2
h-4 w-4" />
Add to Cart
</Button>
Tailwind UI (HTML/React/Vue)
<button class="inline-flex
items-center justify-center
rounded-md bg-blue-600 px-4 py-2
text-sm font-medium text-white
hover:bg-blue-700">
Add to Cart
</button>
Key Similarities
All provide the same 4 Refactoring
UI principles:
What Makes Each Special
Fluxon (Phoenix/Elixir)
shadcn/ui (React)
Tailwind UI (Multi-framework)
The Real Answer
Yes, they all support the same
design-making functionality! The
magic isn’t unique to Fluxon -
it’s about having:
Why Your Task App Was Messy vs
This Project
Without design system: Manual
decisions for every color,
spacing, font size
With any design system: Automated
good design decisions
The difference is having a design
system vs not having one, not
specifically Fluxon vs others.
Fluxon works well for you because:
All these libraries solve the same
core problem: turning design
decisions into reusable,
consistent components.
© Copyright Elixir Forum | Terms | Privacy & Cookies
