Show HN: LangCSS – An AI Assistant for Tailwind (langcss.com)
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!
63 comments
[ 3.3 ms ] story [ 132 ms ] thread- 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
https://news.ycombinator.com/newsguidelines.html
Please don't post shallow dismissals.
...
fin
https://knowyourmeme.com/memes/we-should-improve-society-som...
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).
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.
I'm toying a bit with this tool, and I think it's incredibly useful for prototyping.
I LOVE Tailwind but see a clear need still for Bootstrap.
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
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.
I’m glad people like it, and we’re getting great designs out of it. I happily use it as well. I just wish I better understood why people fall in love with certain tools.
Love is a strong word. For me it's more pleasant to use on a small scale, as I find it helpful to avoid an external stylesheet that I constantly jump to, and which constantly grows in size. Most projects I've worked on css was an "append only language".
I also find it helpful that it's a bit more concise than standard css properties (especially when dealing with most common props, like size, padding, margins, flex), and I can use them like inline styles but with the added benefit that I can rely on media queries as well.
> 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
I like the website and my first prompt to create a modern table worked reasonably well, but if it's just a re-skinned ChatGPT, I probably wouldn't wanna spend extra money on it.
I think this difference should be comparable to asking something like:
This website uses UsersDb, which makes me think you have built a custom database, but if you can easily switch between sqlite and postgres, that makes it seem like there's no real work happening. Could you shed some light on this?
I feel this comparison is almost entirely valid since fine tuning can be as simple as:
- Create request/response tabular data
- Click "upload" on leading LLM provider
- Click "fine tune"
- Change your code to reference llm.com/finetuned instead of llm.com/base-model
bullshitting/lying isn’t implementation detail, it’s a mindset and I understand people who actively try to avoid it. Prompts and rag don’t make it a new powerful model that is superior to say ChatGPT
I'm not even saying there is any need for a custom model. Obviously, RAG etc. can work just as well, or even just a well-crafted prompt on a foundation model. But selling it as a custom model is misleading on purpose, and deters me from using the product.
The reason why I was asking is that as a potential customer, I kinda feel cheated reading about a langcss.fast model that doesn't actually exist. I don't think there's any need for putting this misleading (well, actually not even misleading; just plain wrong) information on the website, to make potential customers think you've trained a custom model on tailwind etc.
Honesty is a very attractive selling point, at least to me, and I'd bet it is to others too.
I have updated the UI to make it more obvious what the model is.
I am happy for people to know how the sausage is made and go direct to that provider if they don't see value in the UI. I might write an architecture post one day too.
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.
I'd much rather pay for ChatGPT, run Vite locally and prompt "You are a tailwind assistant that generates CSS..."
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.
I see the value, I just think that's an unrealistic price given the current features.
- 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.
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
It's a bit like saying a van is a "crutch" when you take your family on vacation and that "really" you should be using a bicycle with a trailer on it.
Tailwind is a methodology and a framework. So, it only makes sense to compare other methodologies or frameworks. "Just CSS" isn't a methodology, though non-web folks often think it is. What they probably mean, most of the time, is a certain brand of high-abstraction CSS made popular in the early 2000s. This way of doing things is 3-4x slower (conservatively) than Tailwind and is more difficult to maintain long term.
Of course, it's possible to mix and match the best features of CSS with a methodology that reigns in these problems, and that's what I'd advocate people do. But generally Tailwind can get you 90% of the way there.
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.
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.