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.
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.
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.
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.
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...
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.
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.
Just a note for anyone else doing something like this. I think uptime/ops has been rather successful for a HN post with 89 points / 117 comments.
The costs of this post were $35 for OpenAI tokens. No one has reported any slowness or downtime.
I am just hosting on the $5/m DO (Digital Ocean) app plaform. CPU spiked at 8% at the highest. Pages are served from the CDN that DO takes care of and the API backend (which doesn't use a CDN) is mostly node forwarding on requests to Azure.
I didn't get analytics (I don't care, comments are more useful) in so can't say how many visitors. But CDN reports say 12000 requests per minute was the peak. Which probably includes all images and so on. So maybe 600 page loads per minute as a guess.
I said in the post "Docker". That is probably true under the hood! But I meant to say "Digitial Ocean".
* 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.
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"
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]
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.
Devs will do literally anything to avoid writing actual CSS
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.
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.
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.
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.
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.
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.
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.
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 :)
I use this GPT I setup prompt for.
https://chat.openai.com/g/g-T9FuS9MCA-tailwindcss-expert
It actually works quite well.
Need to try feeding it the docs sometime.
With all due respect, this is ready to launch when you are using it for your own website.
FYI I can keep using the app past the demo mode if I just delete the modal that pops up.
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
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.
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.
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.
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.
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!
You should have an option to output regular CSS. This tool looks handy, but I don't use tailwind.
It doesn't look bad, but does it compare favourably with Vercel's "vo dev"?
AI for CSS sure, but why tailwind? Why limit yourself like this
a simple tool that does the same thing that others already do for free, charging 30 dollars. nah....
p.s. you can just remove the overlayed div after the timer runs out to keep going
nice tool. would be great to see different breakpoints in the preview
my demo ran out of time before it did anything :(
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?
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.
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.
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!
[flagged]
[flagged]
[flagged]
[flagged]
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.
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.
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.