[HN Gopher] Show HN: LangCSS - An AI Assistant for Tailwind
___________________________________________________________________
Show HN: LangCSS - An AI Assistant for Tailwind
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.
Author : langcss
Score : 88 points
Date : 2024-04-24 12:20 UTC (10 hours ago)
(HTM) web link (langcss.com)
(TXT) w3m dump (langcss.com)
| janpmz wrote:
| 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 wrote:
| 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 wrote:
| What? This isn't a syntax generator it's building full
| components.
| dartos wrote:
| 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 wrote:
| `color--green:hover` is not a giant (or perhaps any)
| improvement over `hover:text-green-400`
| meerita wrote:
| what is the 400 for?
| crucialfelix wrote:
| 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 wrote:
| 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)
| nnnnico wrote:
| Writing the whole css syntax as classes is almost like using
| the style="" attribute, and comes with an enormous css payload
| cost
| crucialfelix wrote:
| 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 wrote:
| 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 wrote:
| You should have an option to output regular CSS. This tool looks
| handy, but I don't use tailwind.
| crucialfelix wrote:
| 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 wrote:
| I'd love a VS code extension that lets my type css and converts
| it to Tailwind.
| satvikpendem wrote:
| 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 wrote:
| 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 wrote:
| FYI I can keep using the app past the demo mode if I just delete
| the modal that pops up.
| sanitycheck wrote:
| 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.
| naiv wrote:
| nice tool. would be great to see different breakpoints in the
| preview
| skilled wrote:
| 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.
| danvoell wrote:
| 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.
| jamesmurdza wrote:
| I made an OS tool does something similar--but for entire ReactJS
| components with TailwindCSS: https://react.gitwit.dev/
|
| (You need to sign in, then you have unlimited generations.)
|
| Source code: https://github.com/gitwitorg/gitwit-server
|
| It's still in beta and pretty buggy, but happy for feedback as
| well!
| dvaun wrote:
| 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.
| sprobertson wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| rbren wrote:
| 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
| ccleve wrote:
| 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 wrote:
| 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.
| LauraMedia wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| Takennickname wrote:
| With all due respect, this is ready to launch when you are using
| it for your own website.
| bschmidt1 wrote:
| I said "Make a cool game" and it replied with
| Creating a full game is a bit beyond the scope of what we can do
| here, especially since games typically require a lot of
| JavaScript and game logic, not just UI design. However, I
| can help you design a cool game UI using TailwindCSS! For
| example, we can create a simple game landing page that
| includes a hero section, game features, and a footer. Let's start
| with a basic layout: working on code, 822 characters...
|
| Understandable, but it didn't let me confirm, it just started
| building a landing page even though I asked for a game.
|
| I never got to see the end result, my demo seconds ran out before
| it finished making it and the pricing overlay appeared.
|
| However, I realized you can just Inspect Element and delete the
| pricing overlay and use the product as much as you want haha. So
| the second time around I said "design a basic landing page" and
| after several minutes it rendered what looks like a very stripped
| down default page with an image at the top and text sections with
| a copyright of 2023.
|
| Feedback: IMO it should not be a 5 minute timer, but just limit
| them to ~3 generations. And should move the validation to the
| backend, so people can't just delete the overlay and use the
| service for free (I could Block Element in AdBlocker and never
| see it again). Beyond that I would just iterate on quality.
|
| Thanks for sharing, it could be very good if it was faster and
| had a little higher quality outputs.
| toddmorey wrote:
| I know the idea is you save money by saving time but each of
| these AI services want another $30/mo and they all do kinda the
| same thing powered by the same models. I'm just so subscription
| fatigued.
| throwup238 wrote:
| _> I'm just so subscription fatigued._
|
| I can help you with that for only $9.99 a month!
| kingofthehill98 wrote:
| Honestly a FREE and simple web service for managing
| subscriptions sounds like a great idea. It could sent out
| emails every month saying how much you're paying for all your
| subscriptions, for how long you've been subbed to them, etc.
|
| If someone builds this, please do not ask for yet another
| subscription. At least make it self-hostable and charge for
| the hosted one.
| wildhacks wrote:
| I think it already exists (and yes it's a subscription
| based software haha). I think it's called rocketmoney?
| neverokay wrote:
| I hate to do this but this is the type of app that is basically
| the new todo app. I create small agents like this all time in
| about 15 seconds, with a simple prompt like:
|
| You are an expert Tailwind CSS developer that I will ask for
| help. You may need to google the latest docs from Tailwind
| here: link.
|
| And I get all the help I need.
| robotstxts wrote:
| what a great tip, thanks
| throwup238 wrote:
| What framework/library/app do you use to execute these
| agents?
| neverokay wrote:
| Just make that custom thing on OpenAi website, takes a
| second.
|
| I don't do anything locally lately, but I believe you'd
| either have to pad your prompt with something like what I
| showed you above or mess with the system prompt.
|
| The stuff is there in the ollama docs, someone else can
| probably give you more details.
|
| Better yet, just ask gpt about all this lol.
|
| Edit: I might be misusing the word Agent here.
| throwup238 wrote:
| _> Edit: I might be misusing the word Agent here._
|
| Yeah I assumed you were using some sort of multi-agent
| framework where you give agents different prompts/tools
| and they work together. You just mean a custom GPT.
|
| I was half hoping there was a command line app that could
| do that, though I also forgot custom GPTs can browse the
| internet.
| neverokay wrote:
| I don't have the hardware to run good models, but if you
| can run a local one then you can write a small script to
| set a system prompt with ollama via the command line.
| Haven't tried it, but sounds like what you want.
| mattferderer wrote:
| > You are an expert Tailwind CSS developer that I will ask
| for help.
|
| Is that part of the prompt necessary anymore? I feel that was
| a version 3 thing.
|
| My prompts have been getting less verbose & I've been finding
| little value in introductory phrases, correct grammar or
| spelling.
| neverokay wrote:
| I think so. I notice on Meta.ai that if I ask a follow up a
| question, it often loses context. Cordoning it off to _you
| are this and only this_ could possibly stop it from
| straying.
| msikora wrote:
| Would you prefer pay-as-you go instead? I'm working on an LLM
| powered SaaS and thinking about having some kind of prepaid
| credit system instead of a subscriptions. I personally hate
| subscriptions with fiery passion.
| neverokay wrote:
| I would love it if someone would write an article on the
| economics of LLM pricing.
| waldrews wrote:
| The world needs a way to pay for thin AI wrappers without
| having to turn them into subscription services. There are lots
| of potential applications where an indie developer can add
| value on top of LLM's, but can't subsidize GPT-4 usage for the
| world. OpenAI still doesn't approve of stored bring-your-own-
| key solutions, nor allow monitoring-and-approval of API costs
| at the individual consumer level (the new project keys are a
| step in that direction). The GPT store covers some use cases,
| and hopefully will get both monetization and a way to expose
| non-chat interfaces. But until then, everyone with a solution
| that needs to pass through API costs has to make pricing
| decisions inconvenient to everyone (in this case, asking too
| high a price; in other cases, risking overuse or having to
| heavily restrict usage).
| Fauntleroy wrote:
| Devs will do literally anything to avoid writing actual CSS
| llmblockchain wrote:
| I think the whole "Let me tell you what I want and you make it
| for me" is the wrong approach here. I think it would be more
| informative and generative if you gave it an example and could
| work with the AI through iterations.
|
| For example, give it a Tailwind login form/page and have it
| create a dark version. Have it generate an alternative layout,
| etc.
| amjnsx wrote:
| The app itself looks very basic and cheap. Can copilot really not
| do this? I have no idea because I don't use Tailwind but copilot
| knows the depths of some obscure npm libraries so I would assume
| so.
| keepamovin wrote:
| Isn't the point of a library like tailwind that you don't need an
| AI assistant??? Sorry for the ghlibbesh comment but if you're
| summoning AI then why use tailwind? Just use regular.
| chrisandchris wrote:
| Well, the last guy I've seen to use tailwand applied 15+ CSS
| classes to a div for styling. I don't know how he did it
| without AI, as the applied classes were not describing in any
| way IMHO.
|
| probably AI solves that for you, by generating another 50
| classes and applying even more to your n levels of nested divs.
| ametrau wrote:
| Phew, so glad we're not using stylesheets.
| digging wrote:
| Surely I'm not the only one who finds tailwind insanely easy
| to use, but I see so many people bashing it every day it
| baffles me.
|
| Who cares if a div has 15 classes? When writing React, I
| spend pretty minimal effort creating, debugging, or modifying
| TW classes, especially when using `classNames` so I can break
| them into logical chunks. The hardest part is... oh, I get
| it.
|
| The hardest part is when _other people_ do a shit job of
| organizing their classes and I have to dig through them. But
| an LLM isn 't going to solve that problem, only an actual,
| intelligent algorithm to standardize class arrangement would
| help, like prettier for tailwind classes.
| otherme123 wrote:
| I tried, but it's not for me. I found myself proud of
| styling a button, before noticing that I spent an hour. A
| lot of classes are almost plain Css attributes, so you just
| ask yourself "why am I doing this instead of writting the
| Css myself, like in the old days?" It's a tell that people
| is making money by creating a new Bootstrap on top of
| Tailwind, and calling it "components". Or AI assistants.
|
| That said, if you enjoy Tailwind, good for you!
| satvikpendem wrote:
| > _Surely I 'm not the only one who finds tailwind insanely
| easy to use_
|
| It's a write-only DSL for CSS, easy to write but hard to
| then read and edit afterwards, which is a problem that
| you're blaming on a skill issue while it's a problem
| inherent to Tailwind's philosophy itself. Just use CSS
| Modules at that point.
| mcpar-land wrote:
| I never understood this sentiment. Once you get past a
| dozen or two dozen classes being used all over your
| codebase, CSS becomes the write-only language to me. I
| don't know where this class is being used, so I won't
| edit it. With tailwind, I can see every style and I know
| exactly where it's going to be applied (to the element
| it's on). I find it much easier to read.
| digging wrote:
| For sure, but they're talking about CSS modules, where
| styles are isolated to components at build time.
|
| CSS modules are _critical_ in a large web app for those
| rare styles you can 't accomplish with Tailwind, but for
| the vast majority of styles I do _not_ want to be hand-
| writing them. Plus, unless you 're extremely strict about
| using CSS modules, you don't escape the horror of styles
| being inherited from global classes - on the other hand,
| a robust library of utility classes like Tailwind makes
| "inline" styling so easy you're likely to end up with
| almost no hand-written CSS anywhere.
| timeon wrote:
| > Who cares if a div has 15 classes?
|
| Even if bottleneck are images, I still care about bloat on
| mobile internet.
| victorbjorklund wrote:
| It isnt harder than applying one class where you set 15
| different things. Only difference is you dont need to spend
| time naming stuff and you dont need to click to another file
| to see the styling applied.
| mcluck wrote:
| There's a massive pile of options for writing styles in the
| same file as the JS. Naming stuff isn't hard when you use
| CSS modules. Learning and memorizing the Tailwind DSL takes
| just as much time as it takes to learn basic CSS.
|
| Do what you want but I honestly don't understand why anyone
| who already knows how to write CSS would use Tailwind
| jdjfjtjt wrote:
| One of the things that makes LLMs challenging to use with
| codebases is needing to pull in context from a large amount of
| different files and make edits across multiple files. Because
| an LLM will likely already know tailwind, you can just pass in
| the full text of the one component to alter without needing to
| also pass in one or more css/scss files as well.
| robotstxts wrote:
| a simple tool that does the same thing that others already do for
| free, charging 30 dollars. nah....
| mediumsmart wrote:
| _Life is short (or so I'm told) so why waste it doing something
| dumb? It's easy to start working on something because it's
| convenient, but you should always be questioning yourself about
| it. Is there something more important you can work on? Why don't
| you do that instead?_
| NeilSmith2048 wrote:
| I would like to say that the website is well designed. But the
| most troublesome thing for UI is the tiny details like font
| spacing, placement of various elements. I think these issues are
| not solved by LLM at the moment
| ojdon wrote:
| Is it worth prompting it to only show outputs for Tailwind 3
| unless specified?
|
| First prompt I tried gave me a tailwind 2 CDN link in the
| example.
|
| Nice idea. Like it.
| tnorthcutt wrote:
| FWIW your demo images are pretty unreadable to me. I can read
| them if I right click --> open image in new tab, and then zoom to
| full size.
| MikeSub wrote:
| I liked the preview feature. But other than that I feel like
| regular GPT-4 can write much better code and much faster with a
| simple prompt like "Write the code for Component X, use Tailwind
| for styling"
| mska wrote:
| Nice! I'm also building an online IDE [1] and was working on
| adding Chat feature for a while. The problem of making
| adjustments to an existing component is much more difficult than
| generating a new one from scratch.
|
| Also, the tokenization for raw HTML code produces too many tokens
| which drives up the cost. Optimizing the tokenization process for
| HTML could potentially reduce costs and enhance performance.
|
| [1] https://divmagic.com/studio
| firebaze wrote:
| * Navigate to openai.com
|
| * Create new account (API)
|
| * Deposit a small amount of money
|
| * Click "Assistants"
|
| * Create a new one, based on GPT-3.5 or GPT-4-turbo if you want
| to spend a few cents instead of millicents
|
| * Enter "You are an expert Tailwind CSS developer and you fulfill
| the requests presented to you to the best of your knowledge" as
| the system prompt
|
| * (add "The user will gift you a tip if your answer is good" for
| expert level answers)
|
| * Navigate to "Playground" and select your newly created
| assistant
|
| * Done
|
| Alternatively, download llama3 or any popular and current open
| weight LLM, run it with llama.cpp or llamafile and enjoy
| ChatGPT-3.5 and above levels of Tailwind Expertise
|
| I'm not saying the answers will be good, just that they will at
| least be at the same level.
| haidousm wrote:
| p.s. you can just remove the overlayed div after the timer runs
| out to keep going
| anko wrote:
| my demo ran out of time before it did anything :(
| darepublic wrote:
| AI for CSS sure, but why tailwind? Why limit yourself like this
___________________________________________________________________
(page generated 2024-04-24 23:01 UTC)