Using AI To Create Consistent Styles

Last August approximately, is when I started using Wappler. I used zero AI back then to help design the front-end. Today, ~80% of any new page I create for my app comes from my favorite AI model de jour. From last year to now, my use of CSS styles has increased considerably, relying less on Bootstrap's classes. My own styles for buttons, tables, spacing, have all changed during this time as well.

This has resulted in some inconsistent styles, behaviors, and design elements across my site which I'd like to remedy. My thought is to use something like Copilot in VS, or Cursor with Claude 3.7, to make things consistent.

I'd like for AI to review all of my pages. Looking at bootstrap classes, inline styles, style tags in pages, and my custom CSS files I've slowly added to over time. The goal would be to find inconsistent styles, like submit button color/behaviors, conflicting styles across pages if the style were to be placed in a CSS file, and to help reduce the amount of style code directly within pages.

Unfortunately, this post is not to share my experience, yet. I'm at the stage where I'm getting more familiar with the AI assistants out there that can directly edit pages, like VS plugins and Cursor. I'm also looking for some wisdom from the community like models you would trust, stay away from, personal experience, etc. TIA

I'd use VSC with the Cline Plugin. Sign yourself up to Open Router (very simple no hidden nonsense) for an account and top up a little credit then you have hundreds of Models to select from (including the well known ones). Use a Model like Qwen-2.5-coder-32b-instruct (super cheap and extremely competent). I'd steer well clear of using Claude for this as the cost to ingest a large site alone would be silly money and those limits are a total joke. Especially paying for Cursor too (VSC rip off)... Why pay for it when you can use VSC and Cline for next to nothing in conjunction with Open Router and only pay for what you use, with Qwen for a total cost of about 40 Cents to do the job to a greater degree of satisfaction than Claude. I am not a fan of Claude unless you have a very complex and specific use case. That and it is obsessed with React. The amount of times it has to do the same thing again and again is a joke (each time consuming thousands of tokens) and it apologises then does the same again (even with very specific prompting).

3 Likes

@Cheese I've heard people talking about Roo Code, what do you think?

And thanks for the model recommendation.

Pretty much a Cline clone @Apple. We have both but I've been using Cline since day dot and am loyal to the Developer. Either or are both far better than Cursor (VSC can install both or as many 'AI' plugins as you wish, for FREE). Cursor ripped off VSC and then had the audacity to charge for essentially what is Open Source and added a little coding assistant on top... Then want to charge you twenty Dollars a month! Hahahaha no thank you! VSC+Cline (or Roo)+Open Router=Teh win (OG gamer phrase).

Qwen is superb!! Overlooked and overshadowed but is a real gem of an LLM for code.

1 Like

I just came across a video showing the cost of Claude 3.7 compared to others. Alarmingly expensive! Thanks for the call out about this @Cheese. I tend to watch the "latest" AI news late at night before falling asleep and you also reminded me that Cursor was a fork of VSC, that also charges for its usage.

I already have VSC installed so I'll experiment with Cline, Open Router, and the many models available. Thanks. :+1:

1 Like

It is so easy to get sucked in and waste an absolute fortune. Quick example:

Task 1 using Claude Sonet 3.5 total cost €543.00 and failed as well as kept having to wait hours as exceeded the allocation repeatedly just as got in to a flow. Also had to keep starting the same conversation again and again as couldn't continue the old one as it would exceed the token count. End result was terrible and it repeated itself continuously. Is totally obsessed with React too... Did my head right in!

Task 1 using Qwen-2.5-coder-32b-instruct cost €2.21 and completed with beautiful code with no repetitions and absolutely obliterated the code base Claude created (which was bloated to say the least).

I can use Qwen all day and am hard pushed to use more than a Dollar and that is when I really go at it. Cline allows me to continue lengthy chats at no extra cost as most of it is cached. VERY IMPORTANT to note.

1 Like

This sounds very interesting and promising.

We have been playing around with Github Copilot, and the results have been a mixed bag.
I too have seen it making the same mistake even with specific instructions, like you have mentioned for Claude.

I chose Copilot over Cline to test out AI coding - because it provided multiple models to chose from, and I don't have to worry about usage costs, since its a fixed price subscription.

We plan to try out the recently released gemini-code-assist as well.

But, if the recently released Qwen is as good as you say, we probably need to give that a try first. Even with variable costs it might work out.
Roo Code is a fork of Cline, and seems to be a more advanced implementation.

Question: I see a "FREE" model in Open Rounter qwen/qwen-2.5-coder-32b-instruct:free. Is it actually free? Or better to use the paid alternative?

P.S.: Haven't had time to test out the AI stuff in Wappler yet.

Free limit: If you are using a free model variant (with an ID ending in :free), then you will be limited to 20 requests per minute and 200 requests per day.

API Rate Limits | Configure Usage Limits in OpenRouter — OpenRouter | Documentation

1 Like

Hi @sid
The standard Qwen Modal, qwen-2.5-coder-32b-instruct, may as well be free for what it costs. No need to use the 'free' version but at least will give you an insight in to its abilities.

1 Like

I tried few interactions in Ask mode, and it was ok.
But when I tried Code mode, and it wanted to edit a file, it got stuck in the permission step. Haven't debugged what the issue is yet.

Can't say have had this happen to me? Some times get a read difference and it will then write the code in the chat then replace in the file (rather than write to file directly). Doesn't happen often though. Worth playing around with it. Is like any tool really. Rarely one tool for all jobs and feel it is the same for AI. Great thing is having the ability to switch between what works for you in your situation. At least with Qwen you'll never break the bank that is for sure.

2 Likes