8 ms·

Show HN: LangCSS – An AI Assistant for Tailwind

• dev213 2y ago
  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 2y ago
    Thanks for the spot! I'll fix these up maybe after the HN traffic has died down :-).
• fleetfox 2y ago
  I was hoping this would be a satire
  • deleted 2y ago
    [deleted]
  • deleted 2y ago
    [deleted]
  • pvg 2y ago
    Please don't post shallow dismissals, especially of other people's work. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
    • datavirtue 2y ago
      I see your rhetoric and raise you one. Please don't post shallow dismissals.
      • samstave 2y ago
        Pfft ... fin
      • usernamed7 2y ago
        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.
      • pvg 2y ago
        I think that's more of a popping out of a well than a raising https://knowyourmeme.com/memes/we-should-improve-society-somewhat https://knowyourmeme.com/memes/we-should-improve-society-som...
• Brajeshwar 2y ago
  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).
  • langcss 2y ago
    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.
    • nailer 2y ago
      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.
  • bigblind 2y ago
    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.
  • datavirtue 2y ago
    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.
• sgt 2y ago
  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 2y ago
    Thanks - taking a look. May have hit rate limits...
    • langcss 2y ago
      Ok, should work now. I am using OpenAI temporarily to avoid hitting the Groq limits until I can get those increased.
      • sgt 2y ago
        It works now, and I gave it some additional challenges too. Looks good!
      • splittydev 2y ago
        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.
        • thornewolf 2y ago
          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
• betimd 2y ago
  not working ... got desperate. Sign up no working ... :(
  • langcss 2y ago
    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.
• ramon156 2y ago
  So what does this do that chatgpt/claude cant?
  • ellisdg 2y ago
    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.
    • g8oz 2y ago
      Claude lets you upload project files which is very handy
• amsterdorn 2y ago
  $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 2y ago
    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.
    • amsterdorn 2y ago
      You think the chance that 5 people think $6 is a reasonable price is lower than one person thinking $30 is?
      • dragonwriter 2y ago
        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.
  • deleted 2y ago
    [deleted]
  • throwaway054624 2y ago
    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.
    • 2y ago
• cunningfatalist 2y ago
  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.
• tazu 2y ago
  This is the top
• Brajeshwar 2y ago
  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://getbootstrap.com - https://get.foundation https://get.foundation - https://tailwindcss.com https://tailwindcss.com - https://meyerweb.com/eric/tools/css/reset/ https://meyerweb.com/eric/tools/css/reset/ - https://necolas.github.io/normalize.css/ https://necolas.github.io/normalize.css/ - https://csstools.github.io/sanitize.css/ https://csstools.github.io/sanitize.css/ - https://www.figma.com https://www.figma.com - https://styletil.es https://styletil.es
  • sabbaticaldev 2y ago
    totally agree with that. Tailwind is a crutch but a real bad one (coming from someone that used it extensively the past 2 years).
    • vehemenz 2y ago
• replwoacause 2y ago
  It works well! Cool project.
• nocababges 2y ago
  I cant change the model after signup, it is not working for me.
• toastercat 2y ago
  pretty cool. but totally secret. and you know what? life's never been the same
• jamisonbryant 2y ago
  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.
• abiraja 2y ago
  If you're looking for a open source version of the same, check out https://github.com/abi/screenshot-to-code https://github.com/abi/screenshot-to-code
• dmix 2y ago
  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 2y ago
    The demo also shows the code. You can use the demo repeatedly or sign up for free. The paid version has more models though.
• ike0790 2y ago
  nice app!
• dmondok 2y ago
  I told it to "create a bunny" ... and it did. And a pretty good one too. I'm impressed. 5/7
• Bharathkumar12 2y ago
  Looks interesting