Show HN: UI Library Creator | Hacker News Reader

Show HN: UI Library Creator

shuffle.dev

79 pointskemyd23 comments

Hey HN! The "Generative" trend is booming, and UI Library Creator is our original approach to it.

In the last three years, we have added 60+ professional UI libraries to Shuffle's catalog (Shuffle = visual editor for web developers). Still, we know we need more than this to satisfy our growing user base!

That's why we created the UI Library Creator. In this tool, you can combine elements and styles to create unique UI libraries that work seamlessly with the Shuffle Editor and all its capabilities (drag-and-drop, customizations, live preview, and more).

We provide you with UX solutions (components) written in Tailwind CSS and presets so you can quickly combine them to create what you need. You don't need to talk to a "black box" AI with a chat interface.

Possible combinations are in gazillions.

We aim for original creations, but you have complete control over the final effect.

How to use the UI Library Creator:

* Visit: https://shuffle.dev/library-creator

* We recommend starting by selecting Assets and Copywriting for your target audience.

* When these two options are locked, use the "Shuffle Styles" button to bootstrap your project with the first style.

* If you like something, lock the category and then repeat shuffling. You can also change options manually, but with "Shuffle Styles," you can quickly see many creations.

If you enjoy the final result, click "Publish now" and send your UI Library to Shuffle.

Once processed, it will be available for use in your Dashboard.

Let us know what you think!

Video (2min) with product tour: https://www.youtube.com/watch?v=8ZFlWEDr7XM

Open articleView on HN

Perhaps I'm not your target audience, but I have a hard time understanding what it is that you do. Here are some observations from a first-time visitor.

UI Library Creator: I think the left-right carrousel shows different page layouts, showcasing the current style? But they're all very similar to each other. And you're already showing the styles as a thumbnail at the bottom? What's the difference? A static grid with four very different pages would probably work better for me.

If I press Shuffle styles, does it only shuffle the current tab, or all styles? I think it might do all, which is very confusing. Sometimes it looked like it barely changed anything, and sometimes it felt like everything got replaced. It didn't make me feel comfortable experimenting.

shuffle.dev: Then I was curious about Shuffle generally. It says 60+ UI libraries. I thought you were able to produce styles for 60+ web UI frameworks, but it seems these are 60+ pre-made style packages? Since I just came from a UI library creator, that felt a bit odd, I mean surely I could randomly generate more than 60 variants?

The Components view has some really intrusive "ad" as the second item. At first I thouht it was a form component. It really shouldn't be the same size as the real content items.

Then I started wondering what you mean by "component", and realized that these are pre-made layouts. Sure, the implementation in React is probably as a component, but I find that word confusing. Still not sure if you're selling React components, CSS sheets, plain HTML or all of the above.

The overall impression is "information overload" everywhere on your site. I'm on a 1920x1080 laptop screen with i3 as WM, and if I press "Purchase," the popup is so long, I have to scroll (a bit) to get to the bottom of it. Even though there isn't really much information, it's presented in a very cluttered way.

> We recommend starting by selecting Assets and Copywriting for your target audience.

So then, why are these two tabs last in your tab row?

Sorry. Didn't mean to make it so negative, but these were my two cents.

Hey,

Thank you for your feedback.

1. The "Shuffle Styles" changes everything except tabs with a padlock icon. You can lock settings you like and then keep shuffling.

2. Shuffle is our main product (check https://shuffle.dev/new). Until now, we have only had UI libraries we created ourselves. You can adjust them to your needs in the editor, but the UI Library Creator is a tool to create libraries we don't have.

3. Can you tell me more about this "intrusive ad"? Probably, I didn't understand it correctly.

4. UI Libraries are sets of components grouped into categories, like headers, pricing, etc. For example, you can view components of Saturn Library: https://shuffle.dev/components/all/saturn

5. Assets and Copy are last because they are not this tool's "killer feature"- Styles are. :) However, when creating a UI library, it is best to lock them at the beginning so you can focus on styles, not texts and images.

Appreciate engagement with a longer comment! Thanks

> 3. Can you tell me more about this "intrusive ad"? Probably, I didn't understand it correctly.

Yepp.

https://shuffle.dev/components/all/all/about-us

The second item is some static "house ad" for Alternatives. On this page, it stands out well, and I can tell it's not actually part of the search results. The annoying animation of course means it's distracting in an otherwise quiet page, but whatever.

The problem is I started clicking around on https://shuffle.dev/components/all/all/dashboard-forms, where all the real search results are also dark themed, and there it's just confusing and irrelevant. Had it been just a banner, it would have been more visually obvious that you're just trying to distract me, and that it's not part of the search result.

> 4. UI Libraries are sets of components grouped into categories, like headers, pricing, etc.

If I look at https://shuffle.dev/components/all/saturn/pricing, you're telling me this is a component. To me, the word component signifies an atom, something simple with a single purpose. This makes me think the "component" you talk about is one of the columns, but I think you mean it's the entire layout, including header. I.e. some assembly of components (perhaps super-component), in my taxonomy. That doesn't fit the bill of "atomic" and my brain just spins around trying to make sense of it all.

OTOH, looking at https://shuffle.dev/components/all/saturn/footer, it seems that you're showing more than just a footer? I.e. what you are showing me is not the component, but the component in an example context. It's taken me five views of your search results to reverse engineer what it is I'm looking at, and understanding what your product is.

Perhaps make the irrelevant parts shaded? Or add a toggleable frame around the actual component?

It's an "ad" for our tool that helps build websites in many styles at once (60+ libraries we have in Shuffle). I'll ask our designer to make it less irritating. ;)

We have used the term "components" for a long time. Some call them "sections" or "blocks". Still, I think "component" is a valid name, and many websites with components/sections/blocks use it.

Typo on login screen: "copywrighted"

It may seem minor, but that one (or even worse, "copywritten") sets my teeth on edge, and I'm betting there are more people like me. :-)

Thanks for reporting! I can't find it right now, but if it exists, it will be fixed soon :)

He who copywroght the copy shall face the copywrath.

Can I pick a block/component from a different ui library? Consider I picked Zanrly at start, but found out tables sections are not available. Then can I pick that particular block from another ui library which has it?

Also in UI Library Creator, Is it possible to select an existing ui library and build from there instead of plain?

Neat! I bought the lifetime access in 2021. Nice to see you guys are still active and adding new things :)

We are probably the small exception in the SaaS business that keeps adding stuff but does not charge old users for it. ;) Thanks for supporting us in 2021.

Super Awesome Team and Update . I am particularly looking forward the Wordpress export feature What is the ETA for that?

Congratulations for creating both Shuffle and UI Library Creator. I love how smoothly you implemented the variation previews. It's a great tool. The possibilities are endless

Thank you for your kind words! We are now a team of eight, and I thank you on behalf of them all. :)

Could I use this with my own custom css framework? ... or is this tied to specific frameworks, such as tailwind, bootstrap, bulma, and material-ui?

I'm sorry, but this is not possible. UI Library Creator works with Tailwind CSS, and we will add support for Bootstrap later. We don't have a plan to support custom frameworks. We need to know the framework "structure" to make this tool work. :)

That makes sense! Thanks for the quick response!

Who has time to go over 9100+ components to find what they need and then somehow make them look coherent and work in uniform fashion?

No free components ? No thanks.

We have discussed the freemium approach, but for now, you need an account to use all options. (However, you can still build a UI Library without an account and see if it's the tool for you)

Hey, your presentation more than makes up for that approach. I’ve already sent it to my team to see if it’s something we’d want to try!

Great! Appreciate that :)

Great execution!

Thanks!

Reply on news.ycombinator.com