Merge AI – What You Get in a New Plan?

Our new plan is a game-changer for many teams. One of the reviewers during our ProductHunt Launch called UXPin an “Apple” of product design, and we couldn’t be more proud. Apple stands for innovation, creativity, and future – the values which are important to us, too.

Merge AI aims at democratizing design for many teams. Finally, they can create interfaces fast and without compromising quality and consistency. In this article, we’ll look closer at what we’re offering in this new plan and invite you to try it out.

Ready to give Merge AI a go? All the features we will talk about are available on trial. Try UXPin Merge for free.

Create beautiful layouts without designers

Design production-ready prototypes 8.6x faster. No pixels. pure code.

Try UXPin Merge .discover-merge { margin: 40px 8px;}.discover-merge__container { display: flex; max-width: 690px; height: 200px; padding: 20px; padding-left: 24px; border-radius: 4px; background-color: black; box-shadow: 10px 10px #9999ff; align-items: center; justify-content: space-between;}.discover-merge__left { width: 50%;}.discover-merge__left p { margin: 10px 0px !important; color: white !important; font-size: 18px !important;}.discover-merge__heading { font-weight: bold !important; color: white !important; font-size: 18px !important;}.discover-merge__text { margin: 0 !important; line-height: 22px !important;}.discover-merge__button { width: 174px; height: 44px; margin: 10px 0px; border: none; border-radius: 2px; background: white; color: black; font-size: 16px; text-align: center;}.discover-merge__button:hover { cursor: pointer;}.discover-merge__image { max-width: 320px !important; height: 200px; margin-right: -19px;}@media (max-width: 760px) { .discover-merge__container { height: auto; margin: 10px; align-items: left; }}@media (max-width: 500px) { .discover-merge__container { flex-direction: column; } .discover-merge__left { width: 100%; align-items: normal; }}Four built-in Merge libraries, backed with production-ready code

https://t.co/opR7VnCZgg 🎉 Embrace the future of UI design with AI-powered component creator, built-in libraries, and templates. pic.twitter.com/ptJANeTTq2

— UXPin (@uxpin) March 9, 2024

Remember the time you needed to redraw a button, just to make it look consistent? Not anymore! With Merge AI, you can access four fully-coded components that come from top open-source libraries for building interface layouts like MUIv5, React Bootstrap, Ant design (those are React-based libraries) or Tailwind UI (this one is HTML only.)

Choose a library, place its components on the canvas and build layouts 8.6x faster than with vector-based tools. Yes, we tested it! The most important thing here, nonetheless, is that all UI components are backed with code, so you don’t need to worry about recreating your design to fit the developer’s environment. Pixels are burning with jealousy, aren’t they?

What we added: MUIv5, React Bootstrap, Ant design, and Tailwind UI.

Quick instruction:

Open UXPin.Create a new prototype.Head on to Design System Libraries.Pick a Merge library.Use pre-built layouts and patterns

https://t.co/ZaQOt1bTE8 🏝️ Your dream UI is one click away. Access ready-to-customize templates and elevate your UI without long design cycles. 🥳 pic.twitter.com/OPKcSppSgF

— UXPin (@uxpin) March 7, 2024

With the new plan, Merge AI, you have access to the most popular layouts, including eCommerce product pages, checkouts, internal apps, and more. Those templates belong to you. You can edit them, add elements in, or switch themes.

The layouts are backed with ready-to-use code and they were built with open-source library components, so you can stay consistent with a component library you want to use from this point onwards, as well as, adjust.

What we added: Fully coded and interactive layouts and patterns.

Instruction:

Open UXPinScroll down until you see Projects.Pick a layout and copy its code.AI Component Creator for ChatGPT wizardry

https://t.co/Zilv5dpsVY 👀 Get a peek inside our AI Component Creator. Generate a Tailwind UI component based on a prompt and save it to your library for future reuse. 🤩 pic.twitter.com/yeItzgUISu

— UXPin (@uxpin) March 8, 2024

One of the biggest productivity boosts these days is ChatGPT. With our integration via OpenAI API, you’re able to generate a Tailwind CSS component with a prompt. It generates complex components, such as data reports, sign-up forms, and shopping cards that are backed with HTML and can be fully customizable.

What we added: AI Component Creator

Instruction:

Create a new prototype (sign up for UXPin.)Navigate to “Quick Tools’ bar.Open AI Component Creator.Paste OpenAI API key.Write your prompt.UXPin and StackBlitz integration

Prototyping, working with design systems, AI-generated Tailwind components, opening in StackBlitz…
this Product Hunt launch from UXPin has it all 🤌 pic.twitter.com/yq38x6i5oe

— StackBlitz (@stackblitz) March 6, 2024

StackBlitz is a development environment that simplifies creating, sharing, and collaborating on web applications directly from their web browsers. We’ve built an integration that allows users to open their design as code in StackBlitz.

What we added: Stackblitz integration for easy code export.

Instruction:

Open a prototype in your browser.Click “Preview Prototype.”Go to Spec mode.Click “Copy to Stackblitz.”Export clean and working code off UI

https://t.co/YacvepbSYD 🧹 Clean code with a design tool? You got it! Export React code with a click. pic.twitter.com/j96QKmBjdh

— UXPin (@uxpin) March 12, 2024

A while back a ProductHunter called us “Google Translator” for design to code, and it stuck with us. In UXPin Merge, you are using coded components, not vector ones, so it’s a given that you’ll be able to copy the code behind them. Now, you are able to copy the code of your entire prototype with one click.

We support any React-based component library, so if you have your own, reach out to us, and we will integrate it, so you can try it by yourself. See how you can reach out to us.

What we built: Code export.

Instruction:

Open a prototype in your browser.Click “Preview Prototype.”Go to Spec mode.Click “Copy code.”Try Merge AI for free

Thank you for being with us for so long and seeing all the transformations. UXPin started as a paper prototyping tool, then online wireframing solution, and code-to-design facilitator. This release is even more special because it helps build MVPs in lightning speed. Want to try it? Try UXPin Merge AI for free.

Try UXPin Merge

The post Merge AI – What You Get in a New Plan? appeared first on Studio by UXPin.