Show HN: LangCSS – An AI Assistant for Tailwind

[langcss]

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, or you can sign up for free and use one of the 3 models for free.

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

Originally this used NextJS (Hosted on Docker) and Azure Open AI. It now uses Vite/.NET (Still on Docker) in order to use a more familiar back end language. DB is postgres. AI is Groq/OpenAI Azure/Claude. (Groq for free version).

I think my next focus will be to make it so you can select parts of the design and run AI on those parts, which gets around the speed and context issues of working on larger designs. I also want to make a vanilla CSS (so no Tailwind!) mode. And look at integrating DaisyUI for the Tailwind users.

Previous submission: https://news.ycombinator.com/item?id=40143498

Since then there is now a proper back end, rather than just losing your work when you close the tab! It will save your session and you can have many projects. It also handles the custom @apply and custom Tailwind config, but admitedly not as well as play.tailwind.com yet!

[dev213]

Looks really nice, and works well too! I just have two little UX gripes:

- Allow submission of a message with some sort of keyboard shortcut (enter and shift + enter only add a new line)

- Disable the "Send" button while the completion is loading, this prevents accidentally clicking send twice, causing the process to fail.

edit: formatting and typo

[langcss]

Thanks for the spot! I'll fix these up maybe after the HN traffic has died down :-).

[abiraja]

If you're looking for a open source version of the same, check out https://github.com/abi/screenshot-to-code

[cunningfatalist]

I tried to:

- Make a simple admin CRUD layout

- Add some widgets

- Add a login/logout section in the navbar

- Make it all responsive

The first three steps worked amazingly. But the final step was probably just too difficult and I got some broken-looking site.

Still nice though, good job.

[dmix]

Wow I tried it and it was surprisingly good. The best one of these I've used so far (which isnt many).

Most of the other 'studio' apps for CSS frameworks assume you're non-technical and overly hide the code or get too fancy with the output/editing.

I'm assuming the demo hides the code part because they want you to pay, so people don't just use the 20min demo repeatedly? It would have been nice to try to see how my own manual changes are handled.

[langcss]

The demo also shows the code. You can use the demo repeatedly or sign up for free. The paid version has more models though.

[jamisonbryant]

I tried to recreate the Xbox "Achievement Unlocked" snackbar notification, including the animated text (text slides in and notification expands to contain, then the reverse happens). The model produced a decent-looking notification layout but was unable to grasp the concept of the notif. container expanding/contracting as the text slid in/out. I am not a frontend developer, so perhaps what I was asking it for is not possible, but it seemed to me like it shouldn't have been that difficult to do.

One other unusual (but slightly entertaining) thing the model did was it used a different image for the notification "icon" every go-round. I have absolutely zero idea where it was getting the little icons (hallucinating?? maybe making a HTTP request??) but it was really interesting to see.

A neat tool, I will send it to my frontend guy at work and see what he thinks.

[Brajeshwar]

Here is a thought you might want to consider and see if it makes sense. This is personal, but I also believe this is where design codes (especially CSS) are going to go.

It is not going to be Tailwind or more new frameworks. Honestly, I think all of these Bootstrap, Foundation, and Tailwind, etc. are like middle-layer abstractions are for designs that are neither small nor large. Bootstrap won because of the out-of-the-box UI designs that looked nice overall, and so did Tailwind. By the way, I love Tailwind's color palette, and I continue to steal from it all the time.

CSS (the actual raw CSS) has become so usable, easy and just works while browsers are so advanced these days, that I don't think we even need to reset/normalize/sanitize the styles.

The tools we need will soon be the ones that will integrate directly with IDEs, akin to how the likes of Figma are going. Imagine a designer either does an overall design or works on modules of components or StyleTiles that are reflected in the CSS either on its own or part of the Javascript-ified HTML markups. When a developer changes something, it is reflected back to the designer's tool so that the designer also knows what changed.

I believe this is where the AI-assisted ones will shine — their ability to bridge the relationship between the design and the code. The interface to interact with that can be the drawing tools (Photoshop, Affinity, Figma) for designers, prompts, or harry's wand (it does not matter).

In fact, for small projects, finish it off with a prompt and get a single Stylesheet blob with HTML, and for the larger ones, it can spit out its own Tailwind that talks back to the design tool.

References;

- https://getbootstrap.com

- https://get.foundation

- https://tailwindcss.com

- https://meyerweb.com/eric/tools/css/reset/

- https://necolas.github.io/normalize.css/

- https://csstools.github.io/sanitize.css/

- https://www.figma.com

- https://styletil.es

[sabbaticaldev]

totally agree with that. Tailwind is a crutch but a real bad one (coming from someone that used it extensively the past 2 years).

[sgt]

Seems like it failed at the 2nd instruction I gave it:

> make me a nice round button

Success! Ok, let's try something very basic.

> it needs to have two parts, image on left side and text on right side

Then I got a system error

[langcss]

Thanks - taking a look. May have hit rate limits...

[ramon156]

So what does this do that chatgpt/claude cant?

[ellisdg]

Just tried it after trying to use ChatGPT for my Tailwind project. This has much faster responsiveness which makes it actually useful. It also seemingly has access to all of the code files which can be tedious to set up with ChatGPT, especially if you have to re-add it every time it suggests edits.

[dmondok]

I told it to "create a bunny" ... and it did. And a pretty good one too. I'm impressed. 5/7

[nocababges]

I cant change the model after signup, it is not working for me.

[tazu]

This is the top

[toastercat]

pretty cool. but totally secret. and you know what? life's never been the same

[replwoacause]

It works well! Cool project.

[betimd]

not working ... got desperate. Sign up no working ... :(

[langcss]

Please try again.

AI: Swapped out the back end so that is now working.

Signup: Now fixed - I have manually confirmed signups created in the time it was not sending.

[Bharathkumar12]

Looks interesting

[ike0790]

nice app!

[Brajeshwar]

Ok. How lost and far behind am I if I think this is a strange tool? What did the people at Tailwind do to create the need for an AI-assisted tool to write Tailwind classes?

Can we do a LangCSS instead but for CSS? That will help someone new to learn better; otherwise, we are building abstraction on top of an abstraction of an abstraction.

Do one for CSS, then have features to convert that to the Tailwind or FooBar Framework of the future. See, Tailwind will also eventually go away, just as Bootstrap, Foundation, or Bourbon did. Developers who depend on the tools that help them write in these frameworks will always play catch-up and never learn the real thing (CSS, in this case).

[afavour]

I’ve come to accept that this is just the world of CSS. I personally love CSS and find it to be a wonderfully expressive way to do things. But it’s also very different to the way other programming languages work, so people get frustrated by it. So we have a half dozen ways of using CSS without really needing to grasp CSS.

Tailwind is one of them and much like React it’s become such an abstraction over the underlying environment that you can become completely ensconced in its world without venturing to the APIs underneath.

[langcss]

I am looking into a non-tailwind mode too. It make sense to, as so many people don't use Tailwind, and in addition, even those who do might want to occassionally break out. Luckily I chose a name/domain name that didn't imply Tailwind only!

By the way the AI isn't because Tailwind is hard or obtuse to use. The AI is because you might need help with your design. Tailwind happens to be the output mode.

[_andrei_]

Your logic is flawed. Tailwind didn't make something so complicated that it needs an "AI". The author decided to use Tailwind, probably because of the same reason other LLM-based code generators use it - it's verbose and close to the markup, increasing the chances of getting it right.

[datavirtue]

Bootstrap went away? It's one of the few stable web tools that people can and do embed in their dev products because it is so mature and well known.

I LOVE Tailwind but see a clear need still for Bootstrap.

[mhh__]

> What did the people at Tailwind do to create the need for an AI-assisted tool to write Tailwind classes?

I'd go the other way here.

What did they do such that it's profitable (let's suppose it is for now) to have an AI tool: tailwind goes inline in the html, getting a lot of context to the LLM is much cheaper than having a bunch of random classes floating around

[bigblind]

We're always building abstractions on top of abstractions, that's how your whole computer works! Like, Assembly is an abstraction over binary instructions, compiled languages are an abstraction over assembly, etc, etc.

I'm toying a bit with this tool, and I think it's incredibly useful for prototyping.

[amsterdorn]

$30 is far too expensive for a GPT-4 wrapper.

I'd much rather pay for ChatGPT, run Vite locally and prompt "You are a tailwind assistant that generates CSS..."

[usernamed7]

It's the authors choice to set the price, and they do offer a free plan. For you maybe the value isn't there, but that doesn't mean a "GPT-4 wrapper" can't provide others value. And I give credit to the author for going with $30 instead of something silly like $6 because trying to build a business on $6/mo is a much harder than on $30/mo.

[throwaway054624]

It is convenient to see a preview of the generated code without having to copy/paste it to your IDE and switch to the browser.

But I see it as mostly useful in the beginning when you are starting, or want to create standalone components. It would be great if it was implemented as a plugin to an IDE and could understand and modify an existing project.

[fleetfox]

I was hoping this would be a satire

[pvg]

Please don't post shallow dismissals, especially of other people's work.

https://news.ycombinator.com/newsguidelines.html