Show HN: LangCSS – An AI Assistant for Tailwind(langcss.com)
langcss.com
Show HN: LangCSS – An AI Assistant for Tailwind
https://langcss.com/demo
63 comments
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
- 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
Thanks for the spot! I'll fix these up maybe after the HN traffic has died down :-).
If you're looking for a open source version of the same, check out https://github.com/abi/screenshot-to-code
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.
- 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.
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.
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.
The demo also shows the code. You can use the demo repeatedly or sign up for free. The paid version has more models though.
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.
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.
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
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
totally agree with that. Tailwind is a crutch but a real bad one (coming from someone that used it extensively the past 2 years).
I don't understand why people think Tailwind is a crutch. It's a tool that uses low level abstractions to build things quickly and lends itself to easier maintenance over time. It has its limits, just like high-abstraction CSS or other frameworks have.
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.
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.
that’s the worse comparison someone could think of. if tailwind is a van, CSS is a bus and your family has 40 people.
I don't think you understood the analogy. CSS is the language that Tailwind uses. CSS is the language that SCSS is based on. CSS is what other frameworks use. CSS is what the browser interprets for styles.
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.
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.
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
> 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
Thanks - taking a look. May have hit rate limits...
Ok, should work now. I am using OpenAI temporarily to avoid hitting the Groq limits until I can get those increased.
The website states it's using the "langcss.fast" model, which made me think it's a custom-trained model. But if you can just easily switch between Groq and OpenAI, that makes it seem like there's no fine-tuning happening. Could you shed some light on this?
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 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.
shouldn't your willingness to pay/not pay be a function of your experience and the value the product delivers you, rather than an implementation detail such as fine tuning vs prompt engineering?
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
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
> shouldn't your willingness to pay/not pay be a function of your experience and the value the product delivers you, rather than an implementation detail such as fine tuning vs prompt engineering?
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
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
Yeah, that's basically what I was thinking. I didn't wanna use the word "lying" as to not appear super confrontational, but when someone claims it's using a model called "langcss.fast", it should be safe to assume that they're actually using a custom model. It's disingenuous at best.
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.
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.
No fine tuning yet. I was going to look into that but I think over avenues are more fruitful. RAG, GRAG and function calling for example.
Of course, a well-crafted prompt and RAG or other means of retrieving relevant information can work very well.
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.
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.
Ah I see. The idea behind the model name is to kind of abstract away so the user needs to think less (why was it Llama last week and now it is Mixtral).
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.
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.
It works now, and I gave it some additional challenges too. Looks good!
So what does this do that chatgpt/claude cant?
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.
Claude lets you upload project files which is very handy
I told it to "create a bunny" ... and it did. And a pretty good one too. I'm impressed. 5/7
I cant change the model after signup, it is not working for me.
This is the top
pretty cool. but totally secret. and you know what? life's never been the same
It works well! Cool project.
Looks interesting
nice app!
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).
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).
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.
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.
The thing that gets me about tailwind though is that it is just css. I still have to apply identical styles that I’d apply if using raw css but instead I have to apply it per element and learn new names.
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.
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.
> 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.
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.
It removes cognitive overhead. People are getting burned out on fiddle-farting with web UIs. We need styling but it is not the main focus 99% of the time and adds very little business value.
I guess I don't understand what overhead it removes. Is it just the cascading that's difficult to work with?
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.
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 find her tailwind incredibly difficult to use, because I know what I want to achieve in CSS, I have to constantly convert to tailwind classes. It’s effectively a new language.
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.
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.
I LOVE Tailwind but see a clear need still for Bootstrap.
> 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
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
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.
I'm toying a bit with this tool, and I think it's incredibly useful for prototyping.
[deleted]
$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..."
I'd much rather pay for ChatGPT, run Vite locally and prompt "You are a tailwind assistant that generates CSS..."
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.
You think the chance that 5 people think $6 is a reasonable price is lower than one person thinking $30 is?
That's not at all improbable. And if you can't set things up so both minnows and whales are paying the price they are comfortable, its often a better business decision to dump the minnows and the overhead of supporting them and focus on the whales rather than having both, but paying minnow prices.
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.
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.
By suggesting it's "mostly useful in the beginning" you are admitting that at some point they will copy+paste it to their project. So the convenience factor is a moot point.
I see the value, I just think that's an unrealistic price given the current features.
I see the value, I just think that's an unrealistic price given the current features.
[deleted]
I was hoping this would be a satire
[deleted]
Please don't post shallow dismissals, especially of other people's work.
https://news.ycombinator.com/newsguidelines.html
https://news.ycombinator.com/newsguidelines.html
I see your rhetoric and raise you one.
Please don't post shallow dismissals.
Please don't post shallow dismissals.
I think that's more of a popping out of a well than a raising
https://knowyourmeme.com/memes/we-should-improve-society-som...
https://knowyourmeme.com/memes/we-should-improve-society-som...
Pfft
...
fin
...
fin
You are my hero. Pointing to the rules will rarely make someone change their approach and it is so myopic whenever someone leaves a comment like that. What makes HN great is the quality of discourse that can take place.
[deleted]
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!