HN Explorer

Show HN: LangCSS – An AI Assistant for Tailwind (langcss.com)

108 points by langcss ↗ HN
Hi All

This is my personal project that is an IDE and AI assistant for creating tailwind components and pages. You can chat to create designs, then make small edits yourself, and continue chatting to refine them. I am always working to improve the UX.

I have a time limited demo page here: https://langcss.com/demo

Please let me know what you think! Feedback is welcome.

Tech wise, this just uses NextJS (Hosted on Docker) and Azure Open AI.

143 comments

[ 2.0 ms ] story [ 239 ms ] thread
janpmz
My thoughts:

I love the idea.

For a website that produces designs, your landing page looks a bit simple.

I asked it to generate a table. Now I'm not sure if the progress bar on top shows the code generation progress or if I'm running out of demo time.

It took a while but now I have a table, thats pretty cool :)

meerita
Imagine you need an AI to write some bespoke syntax. This is one of the reasons Tailwind is not good: they wrote unnatural syntax. Functional CSS must have natural syntax https://www.fcss.club/syntax, something you don't need cheatsheets or AIs to work.
ng12
What? This isn't a syntax generator it's building full components.
dartos
They’re making a joke.

Said another way (my interpretation):

Imagine that you need an AI to write the bespoke tailwind syntax for you instead of having it write normal css.

llamaimperative
`color--green:hover` is not a giant (or perhaps any) improvement over `hover:text-green-400`
meerita
what is the 400 for?
crucialfelix
https://tailwindcss.com/docs/text-color

Any tailwind class can have named colors ("green"), semantic colors "danger" and then you can chose the number of the gradient of that color.

There are thousands of them. Only the ones you use get compiled into the css file.

llamaimperative
To have more than one type of green. You can use Tailwind with only one green if you want, too, but it doesn't make any sense (either in Tailwind or in FCSS)
meerita
We solve that with color--green, color--light-green, color--lighter-green, color--lightest-green, etc.
nnnnico
Writing the whole css syntax as classes is almost like using the style="" attribute, and comes with an enormous css payload cost
crucialfelix
In practice it has a much smaller css payload cost than standard hand-written css classes.

> Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network. - https://tailwindcss.com/docs/optimizing-for-production

What does increase is the html or react payload. But at least it's only sending what you use.

Most websites are sending all of the styling for all of the pages and states, even though the user never sees it. It takes work to optimize that away, and things go wrong often.

There are many clever macros like `space-x-4` that compile to very tricky effects. You couldn't write that in the style attribute at all. https://tailwindcss.com/docs/space#add-horizontal-space-betw...

nnnnico
Yes! I was talking about the fcss framework and syntax proposed by the parent poster ( which doesn't have a "compilation" step for reducing the amount of unnecessary css as tailwind does )
werdnapk
You should have an option to output regular CSS. This tool looks handy, but I don't use tailwind.
crucialfelix
Even though the tailwind docs are great and easily searchable, all the time I ask github copilot to translate legacy css to tailwind classes. Or ask it how to get a certain layout using tailwind classes. (grid, flex ... arg); or tell it what's wrong and ask why it's broken and how do I fix it.

For anyone still wondering why wouldn't I just write css? Because my codebase is littered with orphaned dead css. You can try to use strict naming conventions to connect it to the component it was meant for, but in practice you end with more css, dead css, and you have to read two source code files: component and css.

foxandmouse
I'd love a VS code extension that lets my type css and converts it to Tailwind.
[deleted]
(comment deleted)
satvikpendem
Use PandaCSS, that's what I use for my CSS needs rather than Tailwind. It's a compile-time CSS-in-TS that works on the className attribute same as Tailwind, so no naming required.
rfz13
Cool idea. On mobile, I can't see the features for each plan. I see check marks in each card, but I don't know what they represent.
IncreasePosts
FYI I can keep using the app past the demo mode if I just delete the modal that pops up.
[dead] casper14
[flagged]
[deleted]
(comment deleted)
sanitycheck
All I'll say is that the I understand completely why the demo is time limited, however it took about 2.5 minutes to fully respond to my first instruction, though it did write some code eventually. There was no time left to see how well it could refine/fix what it had created.

I'm not in the market for this (not convinced by Tailwind or by the AI assisted coding, yet) but people who are may need more than a few minutes to properly judge it.

langcss
I see this comment alot, I have upped it to 20 minutes to err on the side of caution. Deploying now...
naiv
nice tool. would be great to see different breakpoints in the preview
skilled
This is a lot slower to use than simply copying components from a pre-built UI library and making your own changes, or giving syntax to ChatGPT and asking for edits. You wouldn’t use Tailwind and any of its surrounding products unless you knew the syntax and what it does.

And the pricing is outrageous, this is more expensive than subscribing to ChatGPT, with not much benefit other than a visual preview that can be accomplished with copy/paste.

langcss
Thanks for the feedback.

> This is a lot slower to use than simply copying components from a pre-built UI library and making your own changes

Correct. This is something I am aware of, and next steps would be to make it easier to search and add free (open source) components to build up the UI. In retrospect I probably should have started with that, and then AI'd it.

> You wouldn’t use Tailwind and any of its surrounding products unless you knew the syntax and what it does.

This is true, but often as a Tailwind user I am stumpted on "how to create the thing in my mind". A good example is gradient text, but where the bottom of a letter like g is not cropped.

> And the pricing is outrageous, this is more expensive than subscribing to ChatGPT, with not much benefit other than a visual preview that can be accomplished with copy/paste.

It might be. The $30/m price for an ChatGPT wrapper has to have very good fit for someone, and I am probably not there yet.

salomonk_mur
30 USD per month is extremely expensive for most web services in general.
[dead] ramon156
[flagged]
[deleted]
(comment deleted)
danvoell
The future is wild, pretty cool! Would love to see something like this in replit. Right now its too much copy pasting from other tools.
[dead] mvkel
[flagged]
[deleted]
(comment deleted)
dvaun
AI tools have been fun to play with since ChatGPT initially came out. However, I’m finding that I lose my “sharpness” if I rely too heavily on any LLM for performing random tasks.

Until something comes out which performs auto generation of boilerplate/project code (against technical specs) I’m going to stick with test generation, as that is the only consistent output from LLMs that makes sense in my workflow.

[deleted]
(comment deleted)
sprobertson
On the other hand it seems like LLMs' inability to generate perfect boilerplate, requiring me to go through and fix all the bugs and nits, is all that's keeping my "sharpness" at this point.
ansanabria
Pretty cool idea! Though I tried to generate some styling for a modal, the LLM answered but nothing was shown on the editor. The other thing is that when I am typing in the chat input and press Enter I would expect the input to submit, but it just creates a new line.
lghh
I gave it 1 sentence of instructions and it took beyond the 5 minutes to finish the response. It seems like a neat concept though!
tristanb
Interesting, I have found ChatGPT struggles with CSS, and Tailwind. I tried this prompt for both ChatGPT and this; "Make me a three column layout using Tailwind where the first and second column are fixed widths, and the center column will expand to take the remaining space, but will ellipse any text that overflows it."

You were able to deliver, ChatGPT was not.

gogogo_allday
V0.dev is an alternative as well, but focuses on shadcn and react.

Congrats on the launch. I enjoyed that it gave me progress updates as it worked.

langcss
Amazingly similar, and has many of the ideas I want to go to. Damn VCs going to commodotize their compliment!
rbren
This is neat! Which model are you using in the backend?

We're working on a similar--but general-purpose--LLM-based software agent[1]. General purpose tasks are very hard, and we too are finding that tackling narrow use cases one at a time works much better!

I have an open PR to start moving in this direction [2]

[1] https://github.com/opendevin/opendevin

[2] https://github.com/OpenDevin/OpenDevin/pull/1238

langcss
At the moment I will be honest: Just GPT-4 + a meaty system prompt. More work goes into the parsing of results to intepret what is code, and update the preview in real time.
ccleve
The designs don't look great.

Here's an idea: produce designs that use the commercial Tailwind components. Your designs will look great. Have a link for the user to buy the components if they don't already own them. Work out an affiliate deal with Tailwind Labs. You can get rid of the time limits and the pricing.

If you start generating money for them they may buy your app.

simple10
Yes, agreed. Modifying the tool to use other tailwind based UI frameworks would be useful. I'd pay for a fast tool that lets me describe an app UI or landing page concept and then shows me previews rendered in different frameworks, themes, and layouts. Most of my time wasted on frontend projects is fidgeting with initial layouts and themes. If I want to switch a tailwind theme from say square to rounded corners on all the components and cards, it's a pain unless I override the helper classes. So an AI tool for theming would be worth it IMO.
langcss
I agree with both of you, this would be a next step. Hopefully enough to salvage this a bit.
gigatree
From what I’ve seen, Tailwind Labs isn’t a fan of collaborating with other companies - no knock on them just seems like they don’t feel the need to
LauraMedia
I tried it out, asking it to create a button and a tabbar, modern styled. After 4 minutes, it came back with just the tabbar, that was unstyled.

Not the best demo, to be honest.

jgalt212
so many AI tools give me this experience. it makes me wonder if any AI hype men or bulls have actually used any of the tools in this space.
JTyQZSnP3cQGa8B
Around me, most people who drank the AI kool-aid are "ideas guys" who have never wrote a single line of code, or junior-level coders who believe I paste code from StackOverflow all day long.

In a 8 hours day of work, I must write code at most for 2 or 3 hours, and any AI would certainly not help me unless it can understand the meaning and intention of weird C++ code. We're relatively safe for the moment.

harel
The simple form I asked to create took nearly all the free time allotted and by the time it finished I couldn't see it because the pricing model was on top. Either way, I could have copy pasted components quicker, so speed is important here. Maybe provide some ready made prompts which take a known amount of time. I would have used one if I had the option instead of coming up with one.
TIPSIO
I predict we still have a few years left before someone totally figures out AI and web UI.

Tailwind will be a no brainer for it since it's all one line and would still be readable/tweakable to the user.

Candidly, producing components from scratch like this, I just haven't seen anyone do a great job.

Now, rewriting, tweaking, and plugging in content? Really good at modifying if you can get it to be fast.

teaearlgraycold
I think one major failing here is you aren’t a designer yourself. The landing page makes that clear. Sorry, I know that’s harsh.