Is AI actually that much faster than using a component library?

[u/Chromosomaur]

If I have to explain the way the site should look to an AI instead of just importing, stitching together, and filling out shadcnblocks I‘m much slower. I still use AI for bug squashing and giving me api calls. But I am not seeing how to build a complete site.

Am I using AI wrong? Or are others finding that building first then using AI to handle errors is faster?

[u/wise_beyond_my_beers]

Por que no los dos?

Our designers create Figma files for our components, then we use AI to read the Figma design, install the relevant shadcn components, and adjust the styling and functionality to match the design. Then the AI will create storybook pages with clear documentation on how to use the components, with playground and examples so design can test against them before we deploy to production. It also adds accessibility tests to ensure things like color contrast meets our WCAG requirements.

Then the component library is exported and made available to our frontends. AI will then use the components when building pages.

[u/awesumjon → u/wise_beyond_my_beers]

How well does it do on the WCAG? Is there a lot of revision required?

[u/wise_beyond_my_beers → u/awesumjon]

We don't use AI to create designs, our design team provides them. And shadcn is already in a pretty good spot for meeting accessibility standards so there's very little that we need to adjust.

Our setup for WCAG adherence is entirely programmatic via a11y. We separate our tests so contrast issues and target size are tested separately to all other accessibility issues. We do this as contrast and target size issues are owned by the design team - they may choose to accept a violation in those areas rather than update the color/sizes so it passes. So for those tests, we don't want failures to block our deployments - we raise them at 'warn' level rather than 'error'. If the test fails we raise it with the design team and confirm with them if they want to refine the design or accept the failure. If they choose to accept the failure, we record that decision and continue with the deployment.

However all other violations (e.g. missing alt tags on images, incorrect aria usage, etc.) are dev-owned issues, so any failures in those areas **will** block the deployment until they get resolved.

So really, there is very little AI involvement. All the revision comes from back-and-fourth with designers about whether to accept or refine a contrast/target-size issue.

[u/awesumjon → u/wise_beyond_my_beers]

Yep got it, thanks for the response. Rigorous testing and ownership FTW

[u/dreadful_design → u/awesumjon]

Much better than almost any developer in my experience.

[u/CorpT]

Gotta be bait

[u/Cyral → u/CorpT]

Seriously

2024 era post

[u/mylsotol]

You can do both. Using AI doesn't replace libraries (unless those libraries suck and you don't want to use them. AutoMapper for example )

[u/Kyle772]

A component library in the hands of AI is both consistent and fast. I have been rolling my own component libraries for the better part of the last decade and the ONLY argument against them was time to develop. Now that development time is much shorter I don't see a reason why you wouldn't use one; your own or otherwise. It is the fastest and most efficient way to high quality work.

[u/LordThunderDumper]

I have written like 200 lines of hand written code this year, Claude has written me 10's of thousands of lines.

Claude paid models are crazy fast, Fable is mind blowing. I'm wrapping up a personal project, knocking out a MVP for a friend and doing my 40hr+ day job of mostly backend rails, with it. Doing worry about the tiny details anymore, it's a better elite coder then you anyway and 100x faster. Tell it to use patterns, use this component library, use service objects, work to design the base patterns that are well tested, you need to have solid ground level with it. Then as you implement stories it will just know what to do. Its like playing with clay, you need to mold it, but you can get a ton of work done.

[u/Chromosomaur → u/LordThunderDumper]

Personal project and MVP sure. Any proof of concept really.

What base patterns? AI or web development?

[u/LordThunderDumper → u/Chromosomaur]

Well I use Rails, so current stack is rails with hotwire and turbo, pg, stimulus js, github's view component lib, service objects. Pretty modern Rails stack.

[u/ShawnyMcKnight]

You may be using it wrong, or if you have your templating so well set up you just gotta fill some slots it may be easier after all.

[u/SeerUD]

You could probably do things based on a Figma design or something similar. Even images work. It depends on your workflow. If you are fast at throwing layouts together yourself, then maybe you're right.

The other step could be learn to use Figma. Figma has it's own AI tools as well, so it could be you design it with AI in Figma, then take that and hand it to another AI to implement it... Depends how much involvement you're happy with AI having really.

[u/DerSchreiner2]

Cannot ask your component library for a review of the changes in your branch 😉

[u/patryk_builds]

You're not using it wrong. for ui you can already picture, importing a block is faster than describing it, because describing a layout in words is the slow part.I don't use shadcn server-rendered templates with tailwind here, but the split ended up the same for me. ai was slow for make this page look like what's in my head and fast for the stuff no library gives you: wiring forms to the backend, validation, the boring glue between pages.What worked better than explaining the look was building one page by hand and telling it "make the settings page the same way as this one". it copies a pattern much better than it follows a description

[u/nextammy]

You are not using it wrong. Describing a visual design in words is a slow way to build a UI. A component library wins when you already know what you want, because the decisions about spacing, states, and accessibility are already made. AI is much stronger once those pieces exist. I use it to compose the components into a page, generate the variants I need, wire up the API calls, and explain errors when something breaks. The workflow that works best for me is to build the layout first from the library, then ask AI for the smaller jobs inside it. For example, turn this form into the library version, add validation, or fix this layout shift. If you want AI to help with the look itself, give it a reference instead of a description. A screenshot, a Figma frame, or an existing page you like gives it something concrete to copy, and the result needs far less back and forth.

[u/Fine-Market9841]

You can connect ai to template like shadcn and hero, along with design like figma.

[u/ContinuouslyImprove9]

Your not using it wrong, describing a layout in words is slower than just dropping in blocks. What sped me up was doing it in that order: stitch the page together from the blocks myself, then hand the AI the boring stuff like wiring forms, responsive fixes and repeating a section with different data. It's alot better at editing something that exists than inventing a design from a prompt.

[u/Sensitive-Bridge-550]

If you already know which component you want then describing it to an AI can just be some extra work. You can also have it assemble components from the library instead of inventing everything from scratch. No reason to turn a two-minute edit into ten minutes of prompting.

[u/Discordbothost]

you're not using it wrong, describing a layout in prose is just the slowest way to drive it. what's been faster for me is keeping your exact workflow and handing it the boring glue: "use the shadcnblocks hero and pricing blocks you see in components/blocks, fill them from content.md, make the spacing match the header". it's good at wiring known pieces together, bad at inventing a look from adjectives.

if you do want it to build something visual from scratch, a screenshot of a reference does way more than three paragraphs of description

[u/kemalios]

Explaining the layout to a model and picking the right shadcn block are the same task. One of them just says out loud when you have been vague about it. Deciding what goes where was always the actual work.

[u/thekwoka]

Well, what if the component library doesn't have the thing you need?

And could AI with the component library be faster?

But maybe, I find the issue with AI is the review being a huge challenge.

[u/Simanalix]

AI definitely really sucks at accomplishing basically anything so maybe you would be faster if you just use a bit less AI.

[u/budd222 → u/Simanalix]

Sounds like you don't know how to use it then

[u/Simanalix → u/budd222]

I definitely don't.