Author: Andrew Martin

Want to create production-ready UI designs faster? Combining GPT-5.2, Ant Design, and UXPin Merge makes it possible to design, test, and deliver functional React components without the usual back-and-forth between designers and developers.

Here’s the process in a nutshell:

• GPT-5.2: Generates accurate UI layouts based on simple text prompts.
• Ant Design: Provides a structured library of pre-built React components.
• UXPin Merge: Links your design directly to production code, ensuring what you see is what developers use.

With this setup, you can skip mockups and go straight to interactive prototypes. Everything aligns with your design system, reducing errors and saving time. Just type your prompt, tweak the output, and export production-ready JSX code.

What you’ll need:

1. A UXPin account with Merge enabled (starting at $29/month).
2. No separate OpenAI or Ant Design setup – everything is pre-integrated.
3. Optional: Link custom component libraries via Git or npm.

This workflow eliminates manual handoffs, ensures consistency, and accelerates UI development. Let’s dive into how it works.

UXPin Merge AI: Smarter UI Generation That Follows Your Design System

sbb-itb-f6354c6

Getting Started: Setting Up Your Environment

UXPin comes with Ant Design and GPT-5.2 already built in. That means you don’t have to worry about importing libraries, configuring API keys, or managing separate accounts. As soon as you open the canvas, you can start designing with real Ant Design components and benefit from AI assistance.

This setup prioritizes speed. Traditional workflows often involve connecting repositories, installing dependencies, or syncing with tools like Storybook. UXPin Merge eliminates those steps, giving you instant access to production-ready components. You’ll be working directly with the antd package that developers use in production.

What You Need to Use GPT-5.2 and Ant Design

To get started, you’ll need a UXPin account with Merge technology enabled. Merge is included in all pricing tiers – Core, Growth, and Enterprise. Plans start at $29/month for Core and $40/month for Growth, while Enterprise offers custom pricing. This straightforward setup ensures you can dive right into using AI tools and design components without extra steps.

There’s no need for a separate OpenAI account or API key. GPT-5.2 is already integrated into the UXPin canvas, allowing AI-powered UI generation to work seamlessly. Similarly, Ant Design is pre-integrated, so you can immediately drag and drop components like Button, DatePicker, or InputNumber.

The only time additional configuration is required is if you’re working with a custom component library. In that case, you’d link your Git repository or npm package using the Merge Component Manager.

How to Set Up Ant Design Components in UXPin Merge

The integration between UXPin and Ant Design ensures your designs translate directly into production code without extra effort. To get started, open a new project, go to the Libraries panel, and select Ant Design from the available design systems. You’ll see the full component library, organized into categories like General, Navigation, Data Entry, and Data Display, in your sidebar.

Each component you drag onto the canvas is a real React component sourced from the antd npm package. For example, when you add a Button, it’s the exact same component your developers will use in production. Styling is handled by antd/dist/antd.css, so everything – colors, typography, spacing – matches Ant Design’s specifications.

The Properties Panel on the right makes it easy to configure each component’s props, such as type, size, or disabled, using dropdowns and toggles. These settings correspond directly to React props, meaning any changes you make are instantly reflected in production-ready code. For instance, setting a button’s type to "Primary" in the Properties Panel is equivalent to writing <Button type="primary"> in React.

How to Connect GPT-5.2 to UXPin Canvas

GPT-5.2 is accessed through the AI Assistant panel in UXPin. You can open it by clicking the AI icon in the top toolbar. From there, you can type prompts like “Create a login form with email and password fields” or “Design a data table with pagination and filters.” The AI uses only approved Ant Design components to generate layouts.

Since the AI is restricted to your design system, every component it suggests is pre-approved and ready for production. The result? Interactive prototypes built with real code components. This is especially valuable for enterprise teams that need to maintain consistency and follow strict design guidelines.

"It used to take us two to three months just to do the design. Now, with UXPin Merge, teams can design, test, and deliver products in the same timeframe. Faster time to market is one of the most significant changes we’ve experienced using Merge."

With everything set up, you’re ready to dive into generating and refining UI components in the next section.

Building UIs with GPT-5.2 and Ant Design in UXPin Merge

With your setup complete, you can dive into creating full UI interfaces using AI. The process moves seamlessly from a simple prompt to production-ready code, cutting out the usual back-and-forth between mockups and development.

How to Generate UI Components with GPT-5.2

To get started, open the AI Assistant panel by clicking the AI icon in the top toolbar. From there, GPT-5.2 takes over, ready to generate interfaces based on your prompt. Just type in a detailed description of the interface you need. For instance, you could say, "Create a profile settings page with fields for name, email, phone, and a save button" or "Design a product dashboard with a data table, search bar, and filter dropdowns."

GPT-5.2 processes your request and builds a layout using Ant Design components from your connected library. Here’s the key: it doesn’t generate static visuals. Instead, it creates fully functional components. Every element you see on the canvas is production-ready, not just a placeholder.

"Most AI design tools have a fundamental problem: they generate pixels, not components. You describe a UI, AI draws rectangles that look like buttons and cards and inputs. It’s impressive in demos. Then your engineers rebuild everything from scratch because none of it is connected to your actual component library. We built something different." – UXPin

These generated layouts retain the interactive behaviors of Ant Design components. For example, a DatePicker will open a calendar dropdown, and a Button with type="primary" will reflect the correct styling from antd/dist/antd.css. In other words, your prototype is functional from the moment it’s created.

How to Customize Ant Design Components in UXPin

Once the AI generates your layout, you can tweak it easily. Click on a component to open the Properties Panel, which shows all available React props for that specific Ant Design element. For example, you can:

• Change a button’s type (Primary, Ghost, Dashed, Link, or Text) using a dropdown.
• Enable or disable states like loading or disabled with checkboxes.
• Edit text labels directly in the provided fields.

For more advanced adjustments, consult the Ant Design API documentation to find additional props. If a specific property isn’t available in the Properties Panel, you can add it manually using the Merge Component Manager. This approach ensures the interface remains clean and focused, showing only the options your team actually needs.

The standout feature here is that you’re modifying real code properties, not just visual styles. For instance, changing a button’s size from "default" to "large" updates the actual size prop that developers will use in production.

How to Prototype Interactions and Export Production-Ready Code

Since UXPin Merge integrates React components, all interactive properties are already built in. You can test interactions like form inputs, dropdowns, and button clicks directly within your prototype. These aren’t simulated behaviors – they’re the actual code components in action.

When it’s time to hand off your design, switch to Spec mode. This view gives you the complete JSX code for the entire UI. Developers can copy the React code directly, including all necessary imports, props, and structure. There’s no need to rebuild anything from scratch.

This workflow eliminates manual code translation. Because the prototype uses the same Ant Design components developers rely on, what you design is exactly what gets implemented. This not only saves time but also ensures accuracy. Once your interactive prototype is tested and export-ready, you’re set to refine your AI-driven UI design further.

Best Practices for Using AI with Ant Design and UXPin Merge

Getting the most out of GPT-5.2 isn’t just about typing commands – it’s about crafting thoughtful prompts, maintaining alignment with your design system, and streamlining collaboration across teams.

How to Write Effective AI Prompts for UI Generation

The GPT-5.2 Thinking and Pro models are exceptionally skilled at handling complex UI tasks. They have a deeper understanding of Ant Design’s component structure compared to earlier versions. In fact, the model scored an impressive 86.3% on ScreenSpot-Pro for GUI screenshot interpretation and is 30% less likely to make errors compared to GPT-5.1 Thinking.

"GPT-5.2 will execute cleanly off a simple, one-line prompt." – AJ Orbach, CEO, Triple Whale

When writing prompts, focus on describing the desired outcome instead of diving into technical specifics. For example, instead of saying, "Add a div with padding and a form inside," go for something like, "Create a user registration form with email, password, and submit button." This allows GPT-5.2 to handle the technical details while you focus on the big picture.

For more intricate components – like data tables or multi-step forms – use the GPT-5.2 Thinking or Pro variants. These are better equipped to handle multi-step reasoning, reducing errors and ensuring the components meet Ant Design’s prop requirements. If you’re using the API, set the reasoning parameter to heavy or xhigh for tasks that demand strong alignment with your design system and high-quality code.

Another tip: upload screenshots when you need to replicate exact layouts. GPT-5.2 has significantly improved its ability to interpret graphical user interfaces, cutting error rates by nearly half when working with visual layouts.

Once you’ve crafted your AI-generated components, the next step is ensuring they stay true to your design system.

How to Maintain Consistency with Design System Constraints

With UXPin Merge, AI-generated components automatically adhere to your design system. This ensures that every layout GPT-5.2 creates aligns with your component library.

When the AI generates a layout, it pulls directly from your actual library. This means every button, input field, and table follows Ant Design’s specifications, resulting in production-ready code that developers can use right away.

If you need to tweak component behavior or add custom props, the Merge Component Manager allows you to expose additional properties without losing alignment with your design system. This keeps your designs clean and ensures the AI operates within your approved tokens and variants.

How to Collaborate Across Teams Using Merge Prototypes

Consistency in design is only part of the equation – collaboration is just as crucial. Merge prototypes act as a shared source of truth between designers and developers. Since the prototype uses the same Ant Design components that appear in production, there’s no need for a translation layer. What designers create is exactly what developers implement.

"Design with production-ready code components to eliminate handoffs, reduce errors, and accelerate product launches using code-based prototyping." – UXPin

Designers can use GPT-5.2 to generate multiple layout variations and refine them directly in UXPin, all while maintaining alignment with the design system. Developers, in turn, receive clean JSX exports that include all necessary imports, props, and structure. This eliminates the usual back-and-forth caused by mockups that don’t align with the component library.

For stakeholder reviews, Merge prototypes go a step further by including real interactions and production-aligned logic. Buttons respond to clicks, forms validate inputs, and dropdowns function as they would in the final product. This gives everyone a realistic view of the end result before production code is written, streamlining the entire process.

Troubleshooting and Common Challenges

Even with GPT-5.2’s advanced features and UXPin Merge’s code-backed setup, challenges can still arise. This section dives into common issues and their solutions, helping you maintain the seamless connection between design and code discussed earlier.

How to Fix Integration Errors

One frequent issue is the generation of generic visuals – like button-like shapes – that lack proper functionality. This typically happens when GPT-5.2 isn’t correctly linked to the Ant Design library.

To resolve this:

• Check Merge AI settings: Ensure Merge AI is active so the system pulls components from your connected library instead of creating placeholders.
• Use the right library import: If you’re working with standard Ant Design, select the "Import an open-source UI library" option within UXPin to avoid manual setup errors.
• Sync custom versions: For customized Ant Design libraries, sync through Git to give the AI access to your production code and design tokens.

If generic shapes persist, inspect the JSX export. This can help pinpoint whether the issue lies in component properties or the AI’s generation logic.

How to Improve AI-Generated Designs

Precision in prompts is key to better results. GPT-5.2 follows instructions strictly, so unclear prompts can lead to designs that, while accurate, may not be practical.

"GPT-5.2 didn’t get worse. It got stricter." – Jon Wiggens

Here’s how to refine your prompts:

• Include negative constraints: Specify what to exclude, such as "only include what I requested", to avoid unnecessary extras.
• Use Markdown structure: For complex components, organize prompts into clear sections (up to three levels) to define layout, purpose, and style.
• Encourage clarifying questions: If your request is vague, instruct the AI to ask for more details rather than making assumptions.

If the AI generates components that are slightly off, use the UXPin Merge editor to switch between real React variants. This allows you to adjust sizes, colors, or states using your Ant Design library options.

How to Ensure Design-System Alignment

When using Ant Design components, code-backed elements ensure that AI-generated designs stay consistent with your established design system. UXPin Merge ensures layouts created by GPT-5.2 pull directly from your Ant Design library, aligning with your production standards.

"AI should create interfaces you can actually ship – not just pretty pictures." – UXPin

To reinforce alignment:

• Be specific in prompts: Request components by name, like "Ant Design Card with title and action buttons", to guide the AI toward approved elements.
• Toggle between variants: Use the editor to switch between approved component states, ensuring the output meets brand standards.

Finally, review the JSX, dependencies, and functions to confirm they align with your design system.

"By using React components in your designs, you close the gap between design and development… Your designs are always in line with the production code." – UXPin

Conclusion

From setting up the environment to building interactive prototypes, this workflow effectively connects design and development. By integrating GPT-5.2, Ant Design, and UXPin Merge, teams can move beyond static mockups to create production-ready React components.

"You’re essentially skipping the translation phase between design and development, which is a huge win, especially for smaller teams." – UXPin

GPT-5.2 shines as a "systems thinker", adhering to strict constraints and delivering consistent results. Unlike earlier models that leaned heavily on creative ideation, this version focuses on structured outputs. When combined with Ant Design’s component library in UXPin Merge, it produces ready-to-use JSX code, dependencies, and functions – eliminating the need for developers to interpret abstract wireframes.

This approach leads to quicker deployment times without compromising on consistency. Teams can save 40–60 minutes daily, while power users report gaining over 10 hours of productivity per week. By treating GPT-5.2 as a junior designer with clear instructions and using UXPin Merge’s code-driven components, teams ensure alignment with the design system while speeding up every step of UI development. This unified workflow not only boosts collaboration but also preserves the integrity of the design system, as explored earlier.

FAQs

How do I make GPT-5.2 generate only Ant Design components?

To create Ant Design components using GPT-5.2, simply include phrases like "Ant Design" or "Ant Design components" in your prompts. Since Ant Design is already integrated with UXPin Merge, you can select it within the design system libraries to work seamlessly with real components. This approach ensures that GPT-5.2 generates outputs that match the available Ant Design components, making your workflow smoother and more efficient.

Can developers use the exported JSX directly in a React app?

Developers can export production-ready JSX code from prototypes created using GPT-5.2 and UXPin Merge. This exported code is ready to be integrated directly into React applications, making the shift from design to development much smoother and more efficient.

How do I add my own custom components to UXPin Merge?

To bring custom components into UXPin Merge, you can use production-ready React components from your existing libraries or repositories. Simply connect your library through Git, npm, or Storybook, allowing you to sync components seamlessly with UXPin. After importing, you’ll have the ability to tweak component props directly within UXPin, giving you control over their behavior and appearance. This approach helps ensure your designs match the final product while making collaboration between design and development much smoother.

Related Blog Posts

• How to prototype using GPT-5.2 + Ant Design – Use UXPin Merge!
• How to prototype using GPT-5.1 + Ant Design – Use UXPin Merge!
• How to prototype using GPT-5 Mini + Ant Design – Use UXPin Merge!
• How to build UI using GPT-5.2 + MUI – Use UXPin Merge!

Building production-ready UI has never been easier. By combining GPT-5.2, shadcn/ui, and UXPin Merge, you can design and deploy React components without the usual back-and-forth between design and development. Here’s how:

• GPT-5.2: Generates functional, code-ready UI components based on prompts, ensuring alignment with your design system.
• shadcn/ui: A React component library offering customizable, accessible components that you fully control.
• UXPin Merge: Enables designers to work directly with production-ready components, syncing designs with Git repositories for seamless handoff.

This workflow eliminates manual translation of designs into code. Designers can use real components on the canvas, while developers receive JSX code that’s ready for production. It’s fast, efficient, and keeps everyone on the same page.

Key highlights:

• Generate UI layouts with GPT-5.2 using real components.
• Customize shadcn/ui components with Tailwind CSS and design tokens.
• Sync designs with UXPin Merge for interactive, production-ready prototypes.

UXPin Merge Tutorial: Intro (1/5)

sbb-itb-f6354c6

Setting Up Your Environment

Start designing immediately with GPT-5.2 and shadcn/ui in UXPin Merge – no installations required. UXPin has already integrated shadcn/ui into the platform, so you can jump right in and use the components directly on the canvas.

If you’re working with a custom component library, here’s what you need to know about the setup process.

Installing shadcn/ui

Unlike traditional npm packages, shadcn/ui is a collection of "Open Code" components designed for customization and scalability. To use them, you simply copy the code into your project, giving you complete control over modifications.

"A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code." – shadcn/ui

For UXPin Merge users, shadcn/ui components are already available as a built-in library. You can drag and drop them directly into your canvas. If you’re working on a custom React project, make sure your shadcn/ui components are hosted on GitHub or documented in Storybook. This ensures smooth syncing with UXPin Merge.

Setting Up GPT-5.2 for UI Creation

GPT-5.2 comes pre-integrated with UXPin Merge, enabling you to generate components with simple prompts. For example, type something like "create a persona card with an avatar, name, and bio" to produce a functional component from your design system.

The AI operates within the boundaries of your design system, meaning it only suggests components that already exist in your library. This eliminates the risk of "hallucinations" often seen in generic AI tools that generate non-existent patterns. For enterprise teams, developers can define which component properties are editable in the source code, ensuring consistency during the design-to-development handoff.

Once your components are ready, sync them with UXPin Merge to seamlessly integrate your designs.

Connecting shadcn/ui to UXPin Merge

If you’re using the pre-integrated shadcn/ui library in UXPin, you’re all set – no extra steps required. For teams with custom component libraries, syncing your GitHub repository or Storybook with UXPin Merge is key.

Host your shadcn/ui components in a React project on GitHub, then request access via the UXPin Merge page to establish the connection. Once synced, your components will appear as a drag-and-drop library in the design editor. Developers can define editable properties in the source code, ensuring designers stay within the intended design parameters.

"Merge lets you bring React components – either from open-source libraries or your own codebase – into your design environment. The result? Fully interactive, real-code prototypes that behave exactly like the final product." – UXPin

Since shadcn/ui is built on React, it integrates seamlessly with UXPin Merge. Designers work directly with JSX code and Tailwind CSS, while developers can copy the code straight from prototypes into production – no additional translation required.

Designing UI Components with GPT-5.2 in UXPin Merge

Once your environment is set up, you can dive into designing UI components directly in UXPin Merge. The AI operates within your shadcn/ui library, ensuring that components align with your design system without introducing unfamiliar patterns.

Writing Effective Component Prompts

To get the best results, crafting your prompts thoughtfully is key. Use the "Role-Task-Constraint" framework for clarity and precision. For example, start by defining the AI’s role (e.g., "You are a Senior Front-end Engineer"), specify the task (e.g., "Create a responsive Navigation Menu using shadcn/ui"), and include constraints (e.g., "Use Lucide-React for icons and ensure compatibility with UXPin Merge property mapping").

Be explicit about your tech stack. Specify that GPT-5.2 should use React, Tailwind CSS, and shadcn/ui primitives (Radix UI) to ensure seamless integration. Request "Merge-ready" code by asking for functional components with named exports and TypeScript interfaces for clear property mapping in UXPin.

Break prompts into sections for Structure (JSX), Styling (Tailwind classes), and Behavior (React hooks). For instance, instead of vaguely asking for "a button", you could say: "Create a Button component using shadcn/ui with primary, secondary, and ghost variants. Style it with Tailwind CSS, include hover states, and export it as a functional component with TypeScript props."

GPT-5.2 also supports visual analysis. You can upload a wireframe or screenshot and instruct the AI to "Translate this visual design into a shadcn/ui component using Tailwind CSS." This method speeds up the development process while maintaining design accuracy.

Once you have your initial components, you can fine-tune them to align perfectly with your design system.

Customizing shadcn/ui Components

AI-generated components often require tweaks to fit your exact design needs. With shadcn/ui‘s reliance on Tailwind CSS utility classes, customization is straightforward. Update your tailwind.config.js file in the repository linked to UXPin Merge to reflect your design system’s colors, spacing, and typography. This ensures consistency across all components.

When prompting GPT-5.2, ask it to use shadcn/ui CSS variables (e.g., --primary, --radius, --background) to maintain theme uniformity. For components like Buttons or Inputs, explicitly request "variants" (e.g., primary, secondary, ghost) using the cva (Class Variance Authority) library. This approach ensures that your components meet production standards.

Additionally, request JSDoc comments for props. These comments provide descriptions and default values in the UXPin editor, making it easier for your team to understand and use each component effectively.

Tips for Using GPT-5.2 in UI Design

Here are some tips to refine your workflow further. For complex outputs, use "Chain-of-Thought" prompting to outline component logic step by step. This method often results in cleaner, more maintainable code.

Accessibility should always be a priority. Include ARIA labels and keyboard navigation in your prompts, leveraging shadcn/ui’s built-in accessibility features. Also, ask the AI to list any additional dependencies (e.g., specific Radix UI packages) required for the component to function.

Since UXPin Merge only works with components in your library, you won’t encounter issues where the AI generates non-existent patterns. Developers can define which properties are editable in the source code, ensuring that designers stay within the intended design parameters during the handoff process.

Adding Interactivity and States to Components

Once your shadcn/ui components are designed and customized, the next step is to bring them to life with interactive behaviors. Thanks to UXPin Merge rendering actual React code, your prototypes can handle real user interactions like hover effects, click actions, and form validations.

Creating Component States

shadcn/ui components use Tailwind CSS utility classes to manage visual states such as hover:, focus:, and data-[state=open]:. For interactive states like hover, pressed, or disabled, you can prompt GPT-5.2 to include React props in your components. By leveraging Tailwind CSS modifiers, the AI can generate code with the necessary useState hooks and prop declarations.

For instance, a Button component might require props like isLoading, isDisabled, and variant. GPT-5.2 can create the corresponding TypeScript interface and apply the right Tailwind classes based on these props. When you sync the code, these props automatically appear in the Properties Panel, ensuring that even non-technical users can adjust component behavior while keeping the design consistent.

These state management techniques build upon the earlier customization steps, setting the stage for integrating conditional logic to control states dynamically.

Using Conditional Logic and Variables

To bind component states, you can use UXPin Variables. For example, set up an "Interaction" in UXPin Merge with an "On Click" trigger to update a Button’s isLoading prop to true, simulating an API call.

GPT-5.2 can assist by generating "wrapper" components that translate UXPin’s interaction triggers into React prop changes. It can also write conditional logic expressions directly within UXPin, which the tool can test in real time. This approach bridges the gap between static designs and functional prototypes, allowing stakeholders to interact with realistic user flows before development begins.

Testing Interactive Components

Testing in UXPin Merge stands apart from traditional design tools because it uses actual React code. In Preview mode, you can interact with your prototype across different devices and screen sizes. Ensure that keyboard navigation (using Tab, Enter, or Escape) functions correctly. While shadcn/ui components built on Radix UI already include accessibility features, any customizations you make should be thoroughly verified.

Map variables to props and test edge cases, such as empty states, errors, or loading conditions. Since UXPin Merge operates on the same codebase that will go into production, interactions that work in your prototype will also work in the final product. For complex components like multi-step forms or dropdown menus with extensive options, you can even ask GPT-5.2 to generate detailed "interaction checklists" to ensure everything functions smoothly under real-world conditions.

Exporting and Deploying Your UI Prototypes

Once you’ve tested your interactive components, it’s time to move them from prototype to production. With UXPin Merge, there’s no need for the usual back-and-forth between design and development. Since your prototypes are built using real React code, you can skip the tedious redevelopment process and transfer the code directly.

Preparing Prototypes for Handoff

UXPin Merge includes a Spec mode that simplifies the handoff process. Instead of marking up designs for developers, you can provide them with production-ready JSX straight from your prototype. Developers can copy this code and integrate it directly into the application. In essence, the components you design are already built for production.

"Prompt a screen. Refine it with an AI helper. Hand devs the actual React components. That’s the loop."

Major enterprise teams like Amazon, AAA, and T. Rowe Price have embraced this workflow. By connecting their custom React libraries to UXPin Merge, they create AI-assisted, production-ready code that aligns perfectly with their design systems. For teams on the Enterprise plan, the Custom Library AI feature takes this a step further by linking your Git repository to Merge. This ensures the AI generates UI components that use your design system tokens and components.

Once the handoff is complete, the next step is to deploy these designs into production.

Deploying Designs to Production

After handing off the JSX code, deploying your designs becomes a simple process. Developers can paste the JSX directly into the production codebase. From there, they just need to integrate real data and confirm the component imports to ensure everything works as intended. This method keeps the design and production versions perfectly aligned.

For ongoing updates, consider wrapping shadcn/ui components in a custom layer. This setup allows you to update the underlying shadcn/ui library via CLI without affecting your custom design changes. Use a dedicated branch to track upstream changes and merge updates as needed, maintaining consistency. By syncing your shadcn/ui library with UXPin Merge through GitHub, any design adjustments automatically update the component library, keeping your design system current across all environments.

"Merge hands your devs something they recognize – and can ship."

Conclusion

GPT-5.2, shadcn/ui, and UXPin Merge are changing how UI development works by letting teams build directly with real React components from the start. GPT-5.2 helps generate or tweak shadcn/ui code based on your prompts, while UXPin Merge ensures that the designs you create match exactly what developers will use in production. This approach eliminates the common pain points of handoffs and keeps everything consistent throughout the process.

By aligning design and production under a single source of truth, these tools remove the need to rebuild components or deal with mismatches. Developers can take JSX code directly from prototypes, making workflows smoother and more efficient.

With AI-driven tools, component creation becomes faster while staying aligned with your design system. For teams on the Enterprise plan using UXPin Merge with a custom component library, every generated component adheres to your design tokens and patterns. This means quicker iterations, better collaboration, and a faster path from design to production – turning months of work into days.

This process creates a seamless connection between creativity and execution. Code-based prototyping and direct integration of components ensure both efficiency and consistency every step of the way.

FAQs

What should I include in a GPT-5.2 prompt to get Merge-ready components?

To create Merge-ready components with GPT-5.2, you need to provide precise and detailed instructions. Focus on defining the specific type of React component you want (e.g., form, dashboard) and the design library it should utilize (e.g., shadcn/ui). Additionally, make it clear that the output must be production-ready JSX and fully compatible with UXPin Merge.

For instance, you could specify: "Create a responsive login form using shadcn/ui, including validation, and ensure it is ready for UXPin Merge." This level of clarity ensures the generated component aligns seamlessly with your design system and development standards.

How do I sync my shadcn/ui (or custom) React library into UXPin Merge?

To integrate your shadcn/ui (or a custom React library) with UXPin Merge, you can bring in components using Git, npm, or Storybook. This allows you to design with real, production-ready React components directly in UXPin Merge, ensuring your prototypes align closely with the final product.

Here’s how to get started:

• Set up your tools: Install Node.js, npm, and Git to prepare your environment.
• Configure UXPin: Use the uxpin.config.js file to define your setup.
• Import components: Bring your React components into UXPin Merge using Git, npm, or Storybook.
• Start prototyping: Design with actual code components to create prototypes that reflect the final functionality.

By following these steps, you’ll bridge the gap between design and development for more accurate and functional prototypes.

How can designers control states and interactions without editing code?

Designers can manage states and interactions effortlessly using UXPin Merge, without needing to touch a single line of code. Merge lets you build interactive prototypes using actual, production-ready React components sourced from repositories like GitHub or Storybook. These components bring along their built-in states and behaviors, giving designers the ability to visually test and fine-tune interactions directly in UXPin. The best part? All of this happens without altering the original code.

Related Blog Posts

• How to prototype using GPT-5.2 + shadcn/ui – Use UXPin Merge!
• How to prototype using GPT-5 Mini + shadcn/ui – Use UXPin Merge!
• How to prototype using GPT-4.1 + shadcn/ui – Use UXPin Merge!
• How to build UI using GPT-5.2 + MUI – Use UXPin Merge!

Building UIs is now faster and more efficient with GPT-5.2, MUI, and UXPin Merge. Here’s how these tools work together:

• GPT-5.2: Converts text prompts into functional UI layouts using MUI components.
• MUI: Provides a library of pre-built, production-ready React components like buttons, forms, and data grids.
• UXPin Merge: Lets you design and prototype with real code components, ensuring designs match what developers will implement.

This workflow eliminates design-to-development gaps by generating React code directly from your design system. Designers and developers work with the same components, reducing errors and saving time. Teams using this approach report cutting development time by 50% or more.

To get started, you’ll need:

• A UXPin Merge account (starting at $29/month).
• Basic knowledge of prompt engineering, MUI components, and UXPin’s interface.

UXPin Merge Tutorial: Exploring MUI Library (3/5)

sbb-itb-f6354c6

What You Need Before Starting

To get started, you’ll need to set up the right accounts, gather the necessary tools, and have a basic understanding of the workflow. Let’s break it down.

Required Accounts and Tools

First, you’ll need a UXPin Merge account with at least the Core plan. Here’s how the plans stack up:

• Core plan ($29/month): Includes 200 AI credits, basic AI models, and access to built-in MUI components.
• Growth plan ($40/month): Offers 500 AI credits and advanced AI models, making it ideal for teams needing more flexibility.
• Enterprise plan: Perfect for larger teams, this plan includes unlimited AI credits, custom component library integration, and tailored pricing. For details, contact sales@uxpin.com.

The best part? MUI is already integrated into UXPin, so there’s no need to purchase a separate license or import components. Just open a new Merge project and start designing with production-ready elements. Additionally, UXPin’s AI capabilities are built into the platform, so you don’t need an external OpenAI API key or a paid ChatGPT account for standard workflows involving MUI.

If you’re working with custom component libraries, you’ll need Git integration (available with the Enterprise plan) and your own API access for advanced configurations.

Once your accounts and tools are ready, it’s time to focus on the skills you’ll need to make the most of this workflow.

Basic Knowledge Required

You don’t need to be a tech wizard, but some foundational knowledge will go a long way. Here’s what to focus on:

• Prompt Engineering: Learn how to write clear, detailed prompts for GPT-5.2. For example, instead of saying, "create a form", specify something like, "create a login form using MUI TextField components with email validation and a submit button." The more specific you are, the better the results.
• Familiarity with MUI Components: Knowing elements like Data Grids, Date Pickers, or Autocomplete fields will help you request precise components instead of generic placeholders, saving time and effort.
• Proficiency with UXPin’s Interface: Spend 15–20 minutes exploring the design canvas and Properties Panel if you’re new to UXPin. You’ll need to adjust properties, work with code-backed components, and build interactive prototypes. This basic understanding will help you fully utilize UXPin’s seamless integration with MUI.

With the right tools and a bit of preparation, you’ll be ready to dive into designing smarter and faster.

How to Build UIs with GPT-5.2, MUI, and UXPin Merge

If you’re looking to streamline your UI creation process, this step-by-step guide will take you from concept to production-ready code in just minutes. Here’s how to combine GPT-5.2, MUI, and UXPin Merge for a seamless workflow.

Step 1: Set Up a UXPin Merge Project with MUI

Start by opening your UXPin dashboard and creating a New Project to access the design canvas. Navigate to the Design System Libraries tab, then select "Import React Components." UXPin makes this easy – just pick the @mui/material package directly from the npm options, skipping the need for manual Git configuration.

Once connected, use the Merge Component Manager to choose which MUI components you want in your project. You can include essentials like Button, TextField, or Data Grid. UXPin automatically maps each component’s React props to the Properties Panel, letting you customize them visually without writing code. These are the exact components your developers will implement, ensuring consistency across the board.

Step 2: Write Focused GPT-5.2 Prompts for MUI Components

Clear and specific prompts are key to getting the best results from GPT-5.2. For example, instead of a general request, try something like: "Create a login form using MUI TextField components with email validation, a password field with a visibility toggle, and a disabled submit button until both fields are filled."

Keep prompts concise – one or two sentences per element is ideal. If you’re working on a larger interface, break it into smaller tasks. For instance, start with the navigation bar, then move on to the data table, and finally the filter controls.

To ensure accuracy, include verification language in your prompts. For example: "Ensure the button disables when the email field is empty" or "Use the outlined variant for all text fields." GPT-5.2 handles these constraints well, especially when you clearly define your design system rules.

Step 3: Generate MUI Components Using Merge AI

Once your prompts are ready, use the AI Component Creator within UXPin’s canvas. Enter your GPT-5.2 prompt into the Merge AI interface to generate MUI components that align with your design system. These components are not generic – they follow your specific guidelines.

Since UXPin Merge renders real HTML, CSS, and JavaScript, the components on your canvas are identical to what developers will deploy. There’s no guesswork or translation layer – what you see is exactly what gets shipped.

If the initial output isn’t perfect, you can refine it using the AI Helper. Simply describe your adjustments, like "Change the button variant to outlined" or "Add a success state with green color." The AI adapts while staying true to the MUI structure. Start with simple changes and add more detail as needed. Once your components are polished, you’re ready to prototype.

Step 4: Build Interactive Prototypes with Generated Components

Drag your AI-generated MUI components onto the canvas and start building your prototype. These components retain their built-in interactivity – hover effects, button clicks, and form validation work right out of the box because they’re production-ready code.

Use the Properties Panel to add conditional logic and variables, creating realistic user flows. For example, you can set a button to open a modal or link form inputs to show validation messages. The components behave exactly as they will in production, giving stakeholders a clear preview of the final product.

This approach eliminates the uncertainty of design-to-development handoffs. Developers receive prototypes they can trust because they’re already built with the same codebase.

Step 5: Refine and Deploy with Version History and Git Sync

After assembling your prototype, refine it further using GPT-5.2 prompts. The AI Helper lets you make conversational changes like "Switch to dark mode" or "Increase spacing between cards." These updates maintain the integrity of your components while aligning with your design vision.

UXPin’s version history tracks every change, so you can roll back if needed. Depending on your plan, you’ll get 7 days of history (Core), 30 days (Growth), or unlimited tracking (Enterprise). For teams using custom libraries, the Git Sync feature (available on the Enterprise plan) pushes updates directly to your code repository, ensuring perfect alignment between design and development.

When your prototype is finalized, share it securely or hand it off to developers. Since everything is already code-based, there’s no need for a rebuild – just implement and deploy. This workflow can dramatically reduce the time it takes to move from design to deployment.

Benefits of This Workflow

Standard UI Workflows vs. UXPin Merge

Traditional design tools often rely on image-based workflows where designers create visuals that resemble UI elements. These visuals are then handed off to developers, who manually recreate them using code. UXPin Merge, however, flips this approach by using a code-based workflow. It renders actual HTML, CSS, and JavaScript directly within the editor, making the process far more efficient.

Here’s a side-by-side comparison of the two workflows:

These distinctions lead to measurable advantages. Larry Sawyer, a Lead UX Designer, shared his experience:

"When I used UXPin Merge, our engineering time was reduced by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers."

Impact on Enterprise Teams

For enterprise teams, the benefits are even more pronounced. Designers no longer need to recreate code from scratch. Instead, they work with real React components, ensuring accuracy and eliminating redundant tasks. Developers receive JSX code that integrates seamlessly into their workflow, bypassing the usual back-and-forth that often leads to delays and errors.

The single source of truth approach is a game-changer. When an enterprise team connects a custom MUI-based design system through Git (available in the Enterprise plan), any updates to the component library automatically sync with the design editor. This keeps design and development perfectly aligned. DesignOps teams also benefit from streamlined version control and release coordination through GitHub, ensuring everyone works with the same up-to-date components. This consistency is critical for maintaining brand standards and building user trust across multiple products.

UXPin Merge has already proven its effectiveness with major enterprise design systems such as MUI, Microsoft Fluent UI, IBM Carbon, Salesforce Lightning, and Atlassian Atlaskit. By eliminating manual updates, the workflow ensures that AI-generated layouts adhere to your design rules, scaling effortlessly to meet the needs of large teams.

Conclusion

Bringing together GPT-5.2, MUI, and UXPin Merge reshapes how enterprise teams approach user interface development. This streamlined workflow removes the traditional gap between designers and developers by utilizing real React components instead of relying on static mockups. Designers work directly with production-ready code, while developers receive JSX that integrates seamlessly into their codebase.

The efficiency improvements are hard to ignore. By maintaining a single source of truth synced through Git, teams eliminate redundant tasks. Any updates to the design system automatically reflect in the editor, ensuring everyone stays on the same page. This method has already shown success with top-tier design systems. When components perfectly match production code, developers no longer need to interpret specs or resolve inconsistencies. This saves significant time and enables advanced interactive prototyping with real data, allowing teams to test complex scenarios ahead of production.

For enterprises managing multiple products and large teams, this workflow ensures consistency and scalability. AI-generated layouts adhere to established design rules, reducing the risk of deviations that could lead to technical debt. GitHub integration keeps design and code synchronized, ensuring smooth and consistent releases.

In short, combining GPT-5.2, MUI, and UXPin Merge simplifies every step of the design-to-deployment process. It offers a faster, more dependable path from concept to delivery, scaling effortlessly with your team while maintaining the high standards required for enterprise-grade products.

FAQs

Do I need my own OpenAI API key?

To integrate GPT-5.2 for generating UI components and prototypes in UXPin Merge, you’ll need your own OpenAI API key. This key is essential for configuring GPT-5.2, allowing it to assist with AI-powered component creation and refinement throughout the prototyping process.

Can I use my custom MUI component library?

Yes, you can integrate your custom MUI component library into UXPin Merge. UXPin allows you to import custom React components, whether they come from your production repository or external libraries. By incorporating MUI components into UXPin Merge, you can prototype using fully interactive, production-ready elements. This simplifies the process of using custom or third-party libraries within your UXPin projects.

How do I export JSX developers can ship?

To export JSX code that’s ready for production, UXPin Merge offers a feature to generate React code directly from your prototypes. Once your design is finalized using integrated React components, head over to Spec mode to access detailed design information. From there, you can use the export option to create clean, deployment-ready JSX code, simplifying the transition from design to development.

Related Blog Posts

• How to prototype using GPT-5.1 + MUI – Use UXPin Merge!
• How to prototype using GPT-5.1 + Custom Design Systems – Use UXPin Merge!
• How to prototype using GPT-5 Mini + MUI – Use UXPin Merge!
• How to prototype using GPT-4.1 + MUI – Use UXPin Merge!

Claude Haiku 4.5 and UXPin Merge simplify prototyping by generating production-ready React components directly from your design system. This approach eliminates the need to manually recreate designs, ensuring prototypes align with your development code. Here’s why this workflow stands out:

• AI-Driven Prototyping: Use text prompts to describe layouts, and Claude Haiku 4.5 generates JSX code with components from libraries like Ant Design, shadcn/ui, or your custom system.
• Design-Development Alignment: Prototypes use real production components, reducing inconsistencies and saving time.
• Interactive Design: Add functionality like form validation, toggles, or role-based content directly in UXPin Merge.

Key Steps:

1. Set Up UXPin Merge: Sync your design system via GitHub, Storybook, or npm.
2. Configure Components: Ensure React components have defined props and Storybook "Args."
3. Refine with AI: Use natural language to adjust layouts and maintain design standards.
4. Export Clean Code: Seamlessly integrate JSX prototypes into your development environment.

This workflow is ideal for enterprise teams, front-end engineers, and designers working on tight deadlines. It speeds up prototyping while maintaining consistency with your brand and technical guidelines.

The trick to AI prototyping with your design system

sbb-itb-f6354c6

Prerequisites and Setup

To get started with Claude Haiku 4.5, you’ll need to configure UXPin Merge and connect your design system. UXPin offers built-in integrations with popular libraries like MUI, Ant Design, Bootstrap, and shadcn/ui. These libraries are ready to use right out of the box – no extra setup required. However, if you’re working with a custom component system, you’ll need to import your library manually.

Before diving in, make sure you have Node.js (v8 or higher) and npm installed. If you’re using Windows, you’ll also need to set up the Windows Subsystem for Linux (WSL) to use Merge CLI tools. Additionally, your components must be built with React.js or Web Components to ensure compatibility with this AI-driven workflow.

Follow the steps below to set up UXPin Merge and configure Claude Haiku 4.5.

Setting Up UXPin Merge

UXPin Merge connects to your design system through platforms like GitHub, Storybook, or npm packages. If you’re using one of the built-in libraries (MUI, Ant Design, Bootstrap, or shadcn/ui), you can skip this setup and start designing immediately. For custom design systems, you’ll need to select an integration method.

The Storybook integration is a popular choice. To get started, open the Design System Libraries menu in UXPin, click "+ New Library", and choose "Import Components from Storybook." For private libraries, you’ll need to install @uxpin/storybook-deployer via npm or yarn, then deploy your library using the following command:

npx uxpin-storybook-deployer -t TOKEN -s path/to/your/storybook 

If you’re using Vite with Storybook, make sure to add config.base = '' in the viteFinal section of your main.* file to ensure assets load correctly.

Once connected, UXPin automatically updates your components whenever changes are made to the source Storybook library. This ensures your design system stays up-to-date without requiring manual updates.

With UXPin Merge set up, you’re ready to configure Claude Haiku 4.5.

Configuring Claude Haiku 4.5

Claude Haiku 4.5 is seamlessly integrated into UXPin, working directly within the design canvas. When you write a text prompt, the AI uses your connected library – whether it’s MUI, Ant Design, or a custom system – to generate production-ready React prototypes.

For the AI to function effectively, your React components must have clearly defined props. This means using Storybook "Args" (version 6 or higher), which allows Claude Haiku 4.5 to dynamically adjust component states, properties, and styles. This setup ensures the AI can accurately interpret your prompts and translate them into specific component behaviors and layouts.

Preparing Custom Design Systems

If you’re working with a custom design system, your repository needs to follow a clear structure. Each component’s directory should include a file with an export default. At the root of your repository, create a uxpin.config.js file to define component categories, paths, and wrappers.

You have two integration options:

• Clean Integration: This connects directly to your Git repository but requires strict adherence to Merge’s coding standards.
• Wrapped Integration: This uses Higher-Order Components (HOC) to wrap your existing components, offering more flexibility if your code doesn’t fully meet Merge standards.

"With Merge, designers can access components that already exist in the code repository without needing any coding expertise."

To keep your code repository and UXPin Editor synchronized, set up CI/CD automation using tools like CircleCI, Travis CI, or GitHub Actions. Generate an access token in the UXPin Design Editor and add it to your environment variables to authorize component pushes. Finally, use the npm start command to launch Merge Experimental Mode. This environment lets you test how components render before deploying them to the full design editor.

How to Prototype with Claude Haiku 4.5 and Custom Design Systems

Now that you’ve set up and configured your tools, it’s time to dive into prototyping. By combining UXPin Merge with Claude Haiku 4.5, you can create prototypes that seamlessly align with your custom design system using precise, detailed text prompts.

Creating Prototypes with AI Prompts

Start by clearly describing the layout and functionality you want. Be as specific as possible about the components and their behavior. For instance, instead of a vague request like "create a login form", try something more detailed: "Create a login form using shadcn/ui components, including an email input, a password input with a visibility toggle, and a primary button labeled ‘Sign In.’"

When you specify the component library – whether it’s shadcn/ui, Ant Design, or your custom setup – Claude generates JSX code tailored to your production environment. Instead of generic HTML, it uses your actual components, such as <DS-Button> or <CustomCard>. You can then copy this code directly into UXPin Merge to see your prototype come to life instantly.

This approach lets you quickly explore multiple layout variations. You can generate different iterations of the same screen, compare them side-by-side, and refine your ideas without manually coding each version. This fluid process sets the stage for the more detailed refinement steps that follow.

Refining Prototypes with Merge AI

Once your prototype is in UXPin Merge, the "Modify with AI" feature allows you to fine-tune properties, spacing, and alignment using natural language commands. This tool ensures your refinements stay within the boundaries of your design system.

For example, you might instruct the AI to "Increase the spacing between form fields to 24 pixels" or "Change the button variant to outlined." The AI understands the constraints and options of your design system, applying only valid adjustments. This way, you can experiment while ensuring your prototype remains consistent with brand standards.

Adding Interactivity to Prototypes

With the layout polished, the next step is adding interactivity to simulate real-world functionality. Transform static designs into dynamic prototypes by incorporating conditional logic, variables, and expressions within UXPin Merge. This makes your prototype behave like an actual application – showing error messages for failed form validation, toggling between light and dark modes, or adapting content based on user roles.

To do this, select a component in your prototype and define triggers (like onClick or onChange) and actions (such as showing or hiding elements or updating variable values). Because you’re working with production-ready components, the interactivity mirrors the final application behavior. This eliminates the uncertainty often encountered during design handoff and ensures your prototype closely matches the intended user experience.

Benefits of Using Claude Haiku 4.5 and UXPin Merge

Better Design-Development Alignment

When designers and developers work from the same component library, it removes the usual back-and-forth caused by design-code mismatches. With UXPin Merge, production React components – whether they’re from shadcn/ui, Ant Design, or your custom library – are synced directly into the design canvas. This allows Claude Haiku 4.5 to generate layouts that align perfectly with production code. The result? A single source of truth where prototypes aren’t just visual placeholders but functional blueprints built with the actual components that will go live.

Faster Prototyping and Development

Thanks to this tight alignment, Claude Haiku 4.5 can take text prompts and transform them into production-ready React prototypes in seconds. No need to manually piece together screens – just describe what you need, and the AI does the heavy lifting, using your design system as a guide.

The speed boost doesn’t stop there. Since these prototypes are created with real code components, developers can skip the tedious process of rebuilding the UI. Instead, they can directly integrate the exported JSX into the codebase. This streamlined workflow cuts down on rework and accelerates the journey from idea to deployment.

Scalability and Governance for Enterprise Teams

This workflow isn’t just fast – it’s built to handle the complexities of enterprise-scale operations. By limiting Claude Haiku 4.5 to pre-approved components from your UXPin Merge library, you can prevent design inconsistencies before they happen. Every AI-generated prototype automatically meets brand and accessibility standards because it uses only vetted components.

With Git-based version control, teams gain a clear record of every design change – who made it, when, and why. This transparency ensures accountability, even across distributed teams. Adopting this design-as-code methodology means your design system stays consistent and compliant as your organization grows. It’s a unified process that speeds up prototyping while maintaining design integrity throughout the product’s lifecycle.

Conclusion and Key Takeaways

Why This Workflow Works for Modern Teams

This workflow bridges the gap between design and development. Instead of relying on static mockups, designers work directly with production-ready components, while developers integrate clean JSX code seamlessly. This eliminates delays, reduces inconsistencies, and ensures smoother collaboration. Product managers benefit too, with faster iteration cycles and prototypes that closely mimic the final product. This makes stakeholder reviews more impactful and decisions more informed.

By combining the speed of Claude Haiku 4.5 with UXPin Merge’s code-based components, teams can turn AI-generated layouts into functional prototypes. These prototypes naturally align with your design system, maintaining brand standards, meeting accessibility needs, and adhering to technical guidelines.

This workflow is designed to make prototyping faster and more efficient.

How to Get Started

Ready to dive in? Here’s how you can begin using this workflow right away:

• Sign up for a UXPin free trial to access Merge and AI features. Popular libraries like shadcn/ui, Ant Design, and Bootstrap are already integrated, so you can start using them immediately. For custom design systems, sync your component library with UXPin Merge to ensure Claude Haiku 4.5 generates layouts tailored to your components.
• Leverage AI for layouts: Describe your desired interface through text prompts. The AI will create initial layouts using your production components, which you can refine and enhance directly on the canvas with added interactivity.
• Seamless handoff: Once your prototype is ready, export the JSX and integrate it into your development environment effortlessly.

For enterprise teams, additional features like custom AI credit limits, Git integration, and dedicated support are available. Reach out to sales@uxpin.com to explore Enterprise pricing options.

Start small – focus on one feature or screen to see how quickly you can move from idea to production-ready code. Once your team experiences the speed and efficiency, scaling this approach across your entire product will feel like the obvious next step.

FAQs

What makes a component library “AI-ready” in UXPin Merge?

An AI-ready component library in UXPin Merge connects effortlessly with AI tools to create or update UI components while staying true to your design system. It works with production-ready, code-based components that align with frameworks like React or MUI. This setup allows AI to generate layouts that require no manual tweaking. Tools like Claude Haiku 4.5 can use these libraries to produce components that are immediately ready for development, maintaining both consistency and efficiency.

Should I use Clean or Wrapped integration for my design system?

When choosing between Clean and Wrapped integration for design systems with Claude Haiku 4.5 and UXPin Merge, the search results don’t offer clear instructions. If you lean toward a direct, code-aligned workflow, Wrapped might be the better fit. On the other hand, Clean could suggest a more modular and flexible setup. The decision ultimately depends on your project’s complexity and how you prefer to manage your workflow, as no specific recommendations are outlined in the sources.

How do I keep my synced components updated automatically?

To ensure your synced components stay updated in UXPin, take advantage of UXPin Merge’s automation features. This tool connects your design environment directly to live React components, enabling real-time updates from your codebase to your prototypes. By doing so, it removes the need for manual refreshes, avoids component mismatches, and keeps workflows consistent. Plus, it automates tasks like token syncing and documentation updates, helping you save time and minimize mistakes.

Related Blog Posts

• How to prototype using Claude Sonnet 4.5 + shadcn/ui – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Ant Design – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Custom Design Systems – Use UXPin Merge!
• How to prototype using Claude Haiku 4.5 + MUI – Use UXPin Merge!

Want to create production-ready prototypes faster? Combine Claude Haiku 4.5, Bootstrap, and UXPin Merge to streamline your design-to-development workflow. Here’s how it works:

1. Claude Haiku 4.5: Use AI to generate React Bootstrap layouts from text prompts, saving time on manual design work.
2. Bootstrap: Leverage its mobile-first, production-ready components for consistent UI design.
3. UXPin Merge: Drag and drop real code components into your prototypes for seamless developer handoffs.

Key Benefits:

• Speed up development by up to 8.6x with ready-to-ship prototypes.
• Eliminate the need for developers to recreate designs manually.
• Ensure high-quality, responsive React code from the start.

Quick Setup:

• Activate UXPin Merge (starting at $29/month).
• Get an API key for Claude Haiku 4.5 (Model ID: claude-haiku-4-5-20251001).
• Use Bootstrap components directly in UXPin for easy customization.

This approach simplifies prototyping, reduces errors, and aligns design and development teams. Whether you’re building dashboards, forms, or interactive prototypes, this workflow ensures faster, smoother results.

UXPin Merge Tutorial: Intro (1/5)

sbb-itb-f6354c6

Setting Up Your Environment

To get started, you’ll need to activate UXPin Merge, secure API access for Claude Haiku 4.5, and confirm that Bootstrap’s integration is ready to use. Bootstrap is conveniently built into UXPin Merge and can be accessed directly from the canvas, alongside other popular libraries like MUI, Ant Design, and Tailwind CSS.

Preparing Tools and Accounts

First, make sure your UXPin account supports Merge features. Merge is available across all pricing tiers: Core (starting at $29/month), Growth (starting at $40/month), and Enterprise (custom pricing). With Merge, you’ll gain access to tools like the AI Component Creator and ready-to-use React libraries.

Next, you’ll need an API key to enable AI-powered component creation. Open the UXPin Editor, go to the Quick Tools panel, and select AI Component Creator. From there, navigate to the Settings tab and paste your API key into the appropriate field. Even for Claude models, you’ll need to populate the OpenAI API Key field.

Choose Claude Haiku 4.5 (Model ID: claude-haiku-4-5-20251001) for its fast processing and ability to handle high-volume tasks. This setup enhances your workflow by enabling advanced, AI-driven component generation.

Once your API key is entered and Claude Haiku 4.5 is selected, you’re ready to configure UXPin Merge specifically for Bootstrap.

Configuring UXPin Merge for Bootstrap

With Bootstrap already integrated into UXPin Merge, you can immediately start using its components. The AI Helper is tailored to work with Bootstrap, allowing you to effortlessly adjust styles, layouts, and text content using simple prompts.

To modify a Bootstrap component, click the "Modify with AI" purple icon directly on the canvas. From there, you can make changes without manually tweaking properties. For example, a prompt like "Add a 20px margin-top and change the button variant to primary" will apply those updates instantly. As Donal Tobin shares:

"The AI component creator is a favorite!"

After setting up your API key and selecting Claude Haiku 4.5, include specific Bootstrap-related instructions in your prompts. For example, you might say, "Create a Bootstrap primary button with a loading state" to ensure accurate results. The AI Helper supports four React libraries – MUI, Ant Design, Bootstrap, and Tailwind CSS – so you can easily work within your preferred framework while enjoying the same efficient workflow.

These steps will prepare you to start generating and customizing components seamlessly within your prototypes.

Generating Bootstrap Components with Claude Haiku 4.5

Using your configured Merge environment, you can quickly generate Bootstrap components with Claude Haiku 4.5. This AI-powered tool takes specific text or image inputs and transforms them into functional React code that integrates seamlessly with the UXPin canvas. Known for its speed and efficiency, Claude Haiku 4.5 is ideal for tasks like rapid prototyping, offering a streamlined approach to creating components.

To get the best results, avoid vague instructions. Instead, provide clear and detailed requests. For example, if you’re working on a complex form, break it down into smaller parts. Generate elements like labels, input fields, and validation messages individually. This method not only improves accuracy but also ensures compliance with Bootstrap 5 standards. As Anthropic emphasizes:

"Tell Claude what to do instead of what not to do."

Once you’ve set the foundation, focus on crafting prompts that maximize the AI’s capabilities.

Writing Effective Prompts for Claude Haiku 4.5

For effective results, include specific design details in your prompts. Mention elements like color schemes, typography, and layout preferences. For instance, you could write: "Create an input field with the label ‘Email’ above it. The label should use a 16px bold font, and the input field should have a blue border when focused." Starting with a clear role or directive can help guide the AI’s output.

Another great feature is image-to-code generation. By uploading a high-fidelity mockup, the AI can interpret exact design details, such as typography, colors, and spacing. This ensures the generated component aligns with your design standards. If the initial output isn’t perfect, you can use the "Modify with AI" option to fine-tune it. Simply describe the changes you need – like "increase contrast for accessibility" or "adjust the label’s position" – and the AI Helper will make the updates without requiring manual code edits.

After refining the component, it’s time to test its functionality and design.

Testing and Verifying Components

Once your component is on the UXPin canvas, review its behavior and responsiveness across different screen sizes. Then, validate the React-Bootstrap code in a tool like StackBlitz. This step ensures the code works as intended and adheres to the library’s dependencies and interactions.

As UXPin documentation explains:

"The AI Component Creator’s performance depends on the AI platform’s performance… it’s important to review the results and make any necessary refinements."

If the component isn’t quite right, there’s no need to start over. Try rephrasing your original prompt or adding more details. You can also include self-verification steps in your instructions, such as: "Before finishing, verify your code against Bootstrap 5 usability standards." This iterative process allows you to refine components efficiently, ensuring they’re ready for production.

Importing Components into UXPin Merge

Bring your tested Bootstrap components into UXPin Merge to streamline collaboration between design and development. This integration bridges your AI-generated code with your design process, creating a unified source of truth for both teams.

Integration Options: Git, Storybook, or npm

Select the integration method – npm, Storybook, or Git – that best suits your library and project requirements.

The npm integration is ideal for teams using React Bootstrap or other open-source component libraries. It’s quick to set up and doesn’t need developer involvement. Simply create a new project in the UXPin dashboard, choose "Design with Merge components", and add a new library via npm. Provide the package name and the full path to Bootstrap’s CSS file (e.g., bootstrap/dist/css/bootstrap.min.css) to ensure accurate styling on the UXPin canvas.

For teams already documenting their components in Storybook, this integration offers seamless updates whenever the Storybook source changes. Supporting all Storybook frameworks, it’s a great option for teams managing a documented design system library. Meanwhile, enterprise teams with proprietary libraries can use Git integration for the most comprehensive synchronization with their production repository.

After importing components through your chosen method, use the Merge Component Manager to bring in specific elements like buttons, forms, or navigation bars. This tool allows you to map React props to intuitive designer controls in the Properties Panel, ensuring a smooth design experience.

Customizing Components in UXPin Canvas

Once imported, you can tweak components directly on the UXPin canvas – no coding required. The Properties Panel displays the actual React props from your Bootstrap components, enabling designers to adjust variants, sizes, and states just as developers would in code. For text-based elements like buttons or labels, map the "children" property to a textfield control so designers can edit labels easily.

To maintain clarity, use lowercase for property names to align with React conventions. Group components into categories that reflect your Bootstrap documentation, ensuring designers and developers reference the same structure. This shared organization reduces miscommunication and speeds up project handoffs.

As Erica Rider, UX Architect and Design Leader at PayPal, highlights:

"It used to take us two to three months just to do the design. Now, with UXPin Merge, teams can design, test, and deliver products in the same timeframe. Faster time to market is one of the most significant changes we’ve experienced using Merge."

Building Interactive Prototypes in UXPin

With your Bootstrap components placed on the canvas, you can move directly into crafting interactive, production-ready prototypes. Thanks to UXPin’s code-based approach, every interaction you design aligns perfectly with how developers will implement it – minimizing confusion and speeding up the workflow.

Creating Responsive Prototypes

Begin by dragging Bootstrap components from your library onto the canvas. Use the AI Helper to fine-tune properties instantly. For instance, you can type a natural language prompt like, "Create a dashboard header with a navigation bar and user profile dropdown," and UXPin will assemble the structure using your imported Bootstrap components.

To manage complex layouts, break them into sections – like navigation, sidebar, and content. This keeps everything organized and precise. The AI Helper also simplifies responsive design adjustments. For example, you can use prompts like, "Add 16px padding on mobile and 32px on desktop," to set spacing, alignment, and breakpoints with ease.

If the generated layout isn’t quite right, you can refine it through additional prompts. For example, "Move the search bar to the right and increase padding by 8px." This iterative process allows you to make quick adjustments without manually navigating through property panels, saving time and improving accuracy.

Once your layout is responsive, the next step is to bring it to life with dynamic interactions that simulate production-ready behavior.

Adding Interactions and Conditional Logic

UXPin’s interactions panel makes it simple to add click events, hover effects, and navigation flows – no coding required. Just select a Bootstrap button or form element and define triggers and actions, such as opening a modal on click or navigating to another screen. Since you’re working with real React components, these interactions replicate exactly how they’ll function in development.

You can also use variables and conditional logic to create dynamic prototypes. Build features like a login form that validates credentials, a shopping cart that updates totals in real-time, or a dashboard that filters data based on dropdown selections. These functional prototypes let stakeholders experience realistic interactions and give developers a clear blueprint to follow.

As Allison Barkley, Director of Operations at Baremetrics, explains:

"Being able to jump straight from design to having code ready to going to be a huge time-saver for our team."

UXPin’s AI Component Creator offers flexibility based on your prototype’s needs. For sleek, consistent designs, Claude Haiku 4.5 is ideal, while GPT-4.1 excels with complex layouts that combine logic and visuals. Whichever model you choose, all outputs seamlessly integrate with your production-ready Bootstrap components.

Best Practices for Design-to-Development Workflow

Maintaining Design System Integrity

To avoid design inconsistencies, treat your Bootstrap components as the definitive source for both design and production code. This ensures that everyone is working from the same foundation, reducing confusion and errors.

Regularly use the [uxpin-merge push](https://www.uxpin.com/docs/merge/cli-tool/) command to sync components and keep your design environment up to date. For example, if a developer updates a button style or changes form validation logic in the codebase, these modifications will instantly reflect in UXPin. This approach removes the risks of outdated components causing issues.

You can also use the AI Helper to fine-tune visual styles and layouts, aligning them perfectly with production code. For instance, you could type a prompt like, "Change the primary button color to #0056b3 and increase padding to 12px," to make precise adjustments that match your design system guidelines.

When working with tools like Claude Haiku 4.5, be as specific as possible in your prompts. Include details such as colors, typography, and layout preferences. For example: "Create a Bootstrap input field with a 16px bold label and a blue border when focused." This level of clarity minimizes manual revisions and ensures the components are production-ready.

Scaling for Enterprise Teams

Once your design system achieves consistency, you can expand the workflow to handle the demands of enterprise-scale operations.

Integrate your code repository with UXPin’s CI/CD tools to automatically update design libraries whenever production code changes. This automation keeps everything synchronized without requiring manual updates.

The benefits of this approach are clear. At PayPal, Lead UX Designer Larry Sawyer implemented UXPin Merge and observed a dramatic improvement:

"When I used UXPin Merge, our engineering time was reduced by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers."

Similarly, Microsoft saw impressive results. UX Architect Erica Rider shared how syncing the Fluent design system with UXPin allowed a small team to manage an enormous workload:

"We synced our Microsoft Fluent design system with UXPin’s design editor via Merge technology. It was so efficient that our 3 designers were able to support 60 internal products and over 1000 developers."

To achieve similar outcomes, consider using Git integration to import React components directly from your repositories. Alternatively, npm integration allows designers to independently manage UI packages, offering flexibility. For organizations with more complex setups, the Storybook integration supports up to 15 frameworks, including Vue and Angular, ensuring compatibility across diverse teams.

Conclusion

Claude Haiku 4.5, Bootstrap, and UXPin Merge simplify the journey from design to development. With AI-generated Bootstrap components, you can seamlessly import them into UXPin using Git, Storybook, or npm integration, allowing you to create production-ready prototypes. This process ensures your design and development efforts stay perfectly aligned from start to finish.

Teams leveraging UXPin Merge can speed up product development by as much as 10x, thanks to code-based components acting as a single source of truth. The AI Helper takes it a step further by streamlining iterations – no need to tweak properties manually. Instead, you can use text prompts to adjust spacing, update colors, or restructure layouts. Using Bootstrap components as the foundation for both design and production eliminates version mismatches and cuts down on the manual work that often complicates handoffs. This means your team can focus on solving user experience issues without getting bogged down by unnecessary rework.

Tracking metrics like prototype turnaround time, iteration cycles, and version mismatches can highlight the impact of this approach. You’ll likely see faster workflows and fewer errors, with version mismatches dropping significantly – or even disappearing entirely. These measurable improvements showcase the benefits of combining AI-powered component generation with code-driven prototyping.

The outcome? A quicker, more dependable path from concept to deployment. Designers and developers share a unified foundation, while AI takes care of the repetitive tasks, freeing up time and energy for more critical work.

FAQs

What’s the fastest way to turn a prompt into a Bootstrap React component in UXPin Merge?

The fastest way to create React Bootstrap components is by using Claude Sonnet 4.5 with text prompts. Once generated, these components can be seamlessly integrated into UXPin Merge for interactive prototyping. This method delivers clean, production-ready code, allowing designers to craft prototypes using actual components. It simplifies workflows and minimizes the need for manual coding.

How do I ensure Claude Haiku 4.5 generates valid Bootstrap 5 and responsive code?

To make sure Claude Haiku 4.5 produces valid and responsive Bootstrap 5 code, start by enabling the Bootstrap library within UXPin Merge’s Design Systems panel. Leverage the pre-built Bootstrap components that adhere to Bootstrap 5 standards. You can adjust properties such as variant, size, and disabled to fit your needs. This approach ensures your prototypes are responsive, align with Bootstrap’s grid and component system, and include interactivity for a more realistic experience.

Which Merge integration should I use – npm, Storybook, or Git?

Use Git integration to keep your design system in sync with your version control system, ensuring updates happen automatically. Prefer npm if you want to import and manage React components directly from package libraries without needing a developer’s help. If you already use Storybook, you can integrate interactive components seamlessly from your existing setup. Pick the option that aligns best with your workflow and the tools you’re already using.

Related Blog Posts

• How to prototype using Claude Opus 4.5 + Bootstrap – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Ant Design – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Custom Design Systems – Use UXPin Merge!
• How to prototype using Claude Haiku 4.5 + MUI – Use UXPin Merge!

Code-based design tools are transforming how teams bridge the gap between design and development. Unlike traditional tools that create static mockups, these solutions enable designers to work with real, production-ready components. This eliminates manual translation, reduces errors, and ensures designs match the final product.

Key Benefits of Code-Based Design Tools:

• Use real components for design, ensuring functionality and accuracy.
• Streamline workflows, cutting development time by up to 50%.
• Maintain consistency across large-scale projects with a single source of truth.

Why UXPin Stands Out: UXPin, especially with its Merge technology, allows seamless integration of code repositories like Git or Storybook into the design process. Designers can drag and drop live, interactive components, making prototypes behave exactly like the finished product. Teams like PayPal have seen dramatic improvements, supporting over 60 products with just three designers.

If you’re looking to align your design and development processes, UXPin and similar tools offer a practical, efficient solution.

What Is UXPin and Merge Technology?

UXPin Overview

UXPin is a SaaS platform designed for UX/UI prototyping, offering a fresh approach compared to traditional design tools. What sets UXPin apart is its ability to let designers work with production-ready components. This means the prototypes created are functionally identical to the final product. From simple wireframes to advanced, high-fidelity prototypes with features like conditional logic, variables, and expressions, UXPin covers it all. This unique foundation is key to understanding how Merge connects design and development.

How UXPin Merge Technology Works

Building on UXPin’s powerful foundation, Merge ensures seamless synchronization between design and live code. With UXPin Merge, components from your code repositories sync directly into the design editor. It connects through Git repositories, Storybook, or npm packages. Merge uses Webpack to process these components and integrate them into the design library. This creates a single source of truth, allowing designers and developers to work with the exact same components. Any updates made by developers in the repository are automatically reflected in the design environment, keeping everything perfectly aligned.

Why Use UXPin Merge

The standout benefit of Merge is that it eliminates manual translation between design and development. A great example comes from PayPal, where Erica Rider’s team used Merge to sync their Microsoft Fluent design system with UXPin. The results were game-changing. Just three designers managed to support 60 products and over 1,000 developers. The impact on timelines was dramatic:

"It used to take us two to three months just to do the design. Now, with UXPin Merge, teams can design, test, and deliver products in the same timeframe."
– Erica Rider, Senior Manager for UX, PayPal

sbb-itb-f6354c6

UXPin Merge Features

Design with Real Code Components

UXPin Merge bridges the gap between design and development by allowing teams to work directly with real code components. This approach eliminates the disconnect often found in traditional workflows, where design and development operate in silos.

With UXPin, you get access to built-in libraries like MUI, Ant Design, Bootstrap, and ShadCN, all integrated directly into the design canvas. There’s no need for additional imports or accounts – just open UXPin and start designing with live, functional components. For teams using proprietary systems, Merge syncs custom React components directly from Git repositories, Storybook, or npm packages. This ensures that what you design is exactly what gets coded, maintaining a perfect match between design and the final product.

Unlike static image-based tools, Merge components are fully interactive. They retain their states, logic, and functionality – sortable tables actually sort, and interactive elements respond to user input. This lets teams create high-fidelity prototypes that behave just like the end product. As Brian Demchak, Sr. UX Designer at AAA Digital & Creative Services, puts it:

"We have fully integrated our custom-built React Design System and can design with our coded components. It has increased our productivity, quality, and consistency."

Merge AI for Component-Driven Design

Merge AI takes things further by generating layouts using pre-approved design system components. Instead of generic wireframes, it builds layouts that are fully compliant with your design system and ready for functional prototyping. These layouts pull directly from integrated libraries and custom repositories, ensuring your prototypes look and behave like the final product.

Scalable Design Systems

Merge is built for scalability, supporting multi-platform integration through Git repositories (for React components), Storybook (compatible with various frameworks), and npm packages. Design Ops teams can manage component properties – like prop-types, TypeScript interfaces, and Flow – to ensure consistent, approved customizations. GitHub version control keeps designers and developers perfectly aligned, while auto-generated specifications based on real JSX improve the design handoff process. This makes it easy to iterate on code directly within the tool.

Merge has been tested with some of the most widely used design systems, including MUI, Microsoft Fluent UI, IBM Carbon, Shopify Polaris, Ant Design, and Atlassian Atlaskit. Its ability to integrate seamlessly with these systems ensures that teams can maintain consistency, no matter the scale of their projects.

Next, we’ll dive into how these features enable smooth component syncing and efficient prototype deployment.

UXPin Merge Tutorial: Intro (1/5)

How UXPin Merge Works

UXPin Merge connects your code repositories to the design canvas through three key steps: analyze, serialize, and render components. This process ensures that designers and developers work from the same source, eliminating the need for manual syncing and reducing errors.

Syncing Components to UXPin

To sync your components with UXPin, begin by creating a library in the Design Editor. UXPin provides an authentication token, which allows direct access to your repository and keeps everything in real-time sync. By adding this token to your CI/CD environment variables, every commit automatically updates the design.

There are two integration options:

• Clean Integration: Requires no additional coding.
• Wrapped Integration: Suitable for cases where extra code adjustments are needed.

If you’re using Storybook, you can link your public Storybook URL or use the @uxpin/storybook-deployer for private instances. Either way, components will update automatically.

Once synced, you can start building interactive prototypes directly within UXPin’s design canvas.

Building Prototypes with UXPin Merge

With synced components, designers can drag and drop production-ready elements onto the canvas. These aren’t static visuals – they are fully functional components with real states, logic, and interactions. This approach eliminates inconsistencies between design and the final product.

UXPin automatically maps PropTypes and TypeScript interfaces to the Properties Panel, enabling designers to adjust states and content visually without needing to dive into the code.

PayPal’s design team showcased the power of this workflow. Erica Rider, UX Architect and Design Leader, shared:

"We synced our Microsoft Fluent design system with UXPin’s design editor via Merge technology. It was so efficient that our 3 designers were able to support 60 internal products and over 1000 developers."

After building interactive prototypes, the next step is to deploy them with real code.

Deploying Prototypes with Real Code

Because UXPin prototypes rely on production components, there’s no need for a translation layer. Designers can share a single link containing full specifications, documentation, and production-ready JSX code. Developers can either copy this code directly into their environments or export prototypes to platforms like StackBlitz. Version control is also built in, with Git branches and tags ensuring that designers always work with the correct component versions.

Larry Sawyer, Lead UX Designer, highlighted the time-saving benefits:

"When I used UXPin Merge, our engineering time was reduced by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers."

Use Cases for Enterprise Teams

UXPin Merge isn’t just a technical tool – it’s a game-changer for enterprise teams looking to solve common challenges in scaling design operations and speeding up product development. By bridging the gap between design and production code, it eliminates delays and inefficiencies that often plague large organizations.

Faster Time-to-Deployment

For enterprise teams, long design-to-development cycles can drag out product launches. UXPin Merge tackles this by removing the need to translate designs into code, dramatically shortening timelines.

Take PayPal as an example. Their design timelines, which once stretched over two to three months, were slashed to a fraction of that time. Teams could now design, test, and deliver products within the same timeframe that used to be spent on design alone. This faster process doesn’t just save time – it also cuts costs. Developers can focus on building features instead of recreating designs pixel by pixel.

And it’s not just about speed. Keeping a unified design language across multiple products is just as important.

Maintaining Consistency Across Products

When managing dozens (or even hundreds) of products, ensuring a consistent brand experience is no small task. Traditional design tools often lead to "design drift", where different teams interpret a design system in slightly different ways. The result? Fragmented user experiences that weaken the brand.

UXPin Merge solves this by creating a single source of truth. Designers and developers work with the same code components, meaning every product automatically reflects consistent UI patterns, behaviors, and visual styles based on design system best practices. Any updates to the design system are instantly applied across all projects.

PayPal’s experience illustrates this perfectly. Erica Rider, UX Architect and Design Leader, shared:

"We synced our Microsoft Fluent design system with UXPin’s design editor via Merge technology. It was so efficient that our 3 designers were able to support 60 internal products and over 1,000 developers."

Better Collaboration Between Design and Development

The traditional handoff process between design and development is often clunky and inefficient. Designers create mockups, developers interpret them, and the back-and-forth begins – clarification meetings, redlining sessions, and endless emails over tiny details.

UXPin Merge eliminates this back-and-forth by letting both teams work with the same production-ready components. Designers can create prototypes using real code, ensuring designs stay on-spec. Developers then receive prototypes that include the exact components they need, complete with states, logic, and interactions. This alignment reduces miscommunication, cuts down on meetings, and ensures the final product matches the design vision without endless revisions.

Getting Started with UXPin Merge

This section walks you through the setup and deployment process for UXPin Merge, showing how to bring your production-ready components to life. UXPin Merge integrates seamlessly with your existing workflow, whether you’re using built-in libraries or syncing custom components. The setup is simple, and the results are almost immediate.

Setting Up UXPin Merge

If you’re using built-in libraries like MUI, Ant Design, Bootstrap, or ShadCN, there’s no setup required – these libraries are already integrated into the UXPin canvas. For custom components, you’ll need to take a few steps:

• Create a uxpin.config.js file.
• Configure Webpack.
• Add a Wrapper Component.

Once that’s done, use the UXPin Merge CLI to sync components from your repository. Most teams start seeing results in under 30 minutes, with full integrations typically taking between 2 hours and 4 days. New users can speed things up with UXPin’s boilerplate repository, which includes a sample design system and development environment. For continuous updates, automate the process using your CI/CD pipeline with the uxpin-merge push command through tools like CircleCI or Travis.

Once your components are synced, you can choose the integration method that best fits your workflow.

Using Built-In Libraries and Custom Components

UXPin supports two integration methods: Clean Integration (directly using production code) and Wrapped Integration (via Higher-Order Components). You can sync components through Git repositories, Storybook (compatible with 15 frameworks, including Vue and Angular), or npm packages.

The system is CSS agnostic, meaning it supports pure CSS, Sass, Less, Styled Components, and Emotion. However, components must meet a few technical requirements:

• Built with React.js (v16.0.0 or later).
• Bundled using Webpack (v4.6.0 or later).
• Property definitions provided via PropTypes, Flow, or TypeScript interfaces to map properties to UXPin’s panel.

Testing and Deploying Prototypes

After integration, it’s time to test your prototypes. Use UXPin Editor’s features – like variables, conditional logic, and expressions – to ensure your prototypes behave just like the final product. Once everything checks out, you can hand off a single link that includes auto-generated JSX and production-ready React code. This link comes complete with states, logic, and interactions, making developer handoff smooth and efficient.

"As a full stack design team, UXPin Merge is our primary tool when designing user experiences… It has increased our productivity, quality, and consistency, streamlining our testing of layouts and the developer handoff process." – Brian Demchak, Sr. UX Designer at AAA Digital & Creative Services

"What used to take days to gather feedback now takes hours. Add in the time we’ve saved from not emailing back-and-forth and manually redlining, and we’ve probably shaved months off timelines." – Mark Figueiredo, Sr. UX Team Lead at T.Rowe Price

Conclusion

Looking back at the discussion above, UXPin Merge stands out as a game-changer for bridging the gap between design and development.

Key Takeaways

With UXPin Merge, teams can work directly with production-ready components from the very beginning. This ensures complete alignment between what designers envision and what developers deliver – no surprises, no wasted effort.

The tool also delivers impressive efficiency. For example, at PayPal, a small team of just three designers managed to support 60 internal products and over 1,000 developers. That kind of scalability is tough to achieve with traditional design tools.

Whether you’re using pre-built libraries or syncing custom components, Merge keeps your design system and code perfectly aligned. Plus, with the addition of Merge AI, you can generate layouts that exclusively use your approved components – ensuring designs are always ready for development without any off-brand or inaccurate suggestions.

Next Steps for Adopting Code-Based Design Tools

If your team struggles with design-to-development handoffs, maintaining consistency across products with a UI design system, or supporting a large developer base with a lean design team, UXPin Merge offers a practical way forward.

Start by experimenting with the built-in libraries to get a feel for code-based design workflows. For larger teams ready to scale, UXPin’s Enterprise plan offers custom library integration, onboarding support, and advanced AI tools. Visit uxpin.com/pricing to learn more, or reach out at sales@uxpin.com to discuss your needs. Transitioning to a code-based workflow isn’t just about efficiency – it’s about creating a scalable, future-proof design process for your organization.

FAQs

What do we need in our codebase to use UXPin Merge?

To work with UXPin Merge, your codebase needs to include React.js components that follow these guidelines:

• One component per directory: Each folder should contain a single component to ensure proper compatibility.
• Default exports: All component files must use export default.
• React version: Components should be compatible with React ^16.0.0.
• Webpack version: Your setup should use webpack ^4.6.0.

Make sure your directory structure is organized with one component per folder to avoid compatibility issues.

How do designers update component states without coding?

Designers can tweak component states effortlessly in UXPin by adjusting properties, props, or attributes directly within the platform. This means you can make real-time changes and create interactive designs – all without writing a single line of code.

How do we keep design libraries in sync with Git automatically?

With UXPin, you can automatically sync design libraries with Git by linking your Git repository. This feature, known as UXPin Merge, allows you to integrate React and Web Components from any Git repository directly into the UXPin design tool. It ensures smooth updates and effortless collaboration within your team.

Related Blog Posts

• Solving Common Design System Implementation Challenges
• Why Development Technical Design Teams Are Choosing Code-Based Design Over Figma
• Design-to-Code Tools: UXPin’s Advantage Over Visual-Only Platforms
• Figma Alternative: Why UXPin is the Better Choice for Teams at Scale

Design-in-code simplifies collaboration between designers and developers by using live, production-ready code to create interfaces instead of static visuals. This method eliminates the need for design handoffs, reducing misalignment, delays, and rework. By working directly with HTML, CSS, and JavaScript components, teams share a single source of truth – the codebase – ensuring consistency throughout the product lifecycle.

Key Insights:

• What is it? Designers create interfaces using actual code components, skipping the traditional mockup-to-code translation.
• Why it matters: Reduces design drift, speeds up workflows, and aligns teams by integrating design and development processes.
• How it works: Leverages tools like UXPin Merge, design tokens, and component libraries to connect design tools to production code.

Benefits:

• Cuts engineering time by up to 50%.
• Speeds up product development by as much as 10x.
• Ensures consistent design updates through versioned code.

This guide covers the technical aspects of implementing design-in-code, from setting up design tokens and reusable components to integrating tools like UXPin Merge for real-time code synchronization.

Design to Code // HTML & CSS from scratch // Frontend Mentor Form

sbb-itb-f6354c6

Core Principles of Code-Backed Design Systems

Code-backed design systems rely on three main principles: design tokens, component-driven architecture, and dynamic theming. Together, these principles create a unified framework for both designers and developers, ensuring design changes are implemented consistently while streamlining workflows and minimizing miscommunication.

Design Tokens: The Bridge Between Design and Code

Design tokens are essentially design decisions stored as data. They define key elements like colors, typography, and spacing, making these values accessible to both designers and developers.

Tokens are structured through layering, which establishes a hierarchy for better flexibility and maintainability. Here’s how it works:

• Primitive Tokens: These store raw values, such as a specific color code (#2980b9).
• Semantic Tokens: These assign a contextual role to the raw value, like color-primary.
• Component Tokens: These apply the semantic value to a specific UI element, such as button-primary-bg.

For example, updating a brand color globally only requires changing a single primitive token, and the change automatically propagates across all components without rewriting their individual styles.

The W3C Design Tokens Community Group has developed a standard format to ensure tokens can be shared across platforms, making them compatible with various tools and codebases. To maintain clarity, always document the purpose of each token – explain when and why it should be used as your system grows.

Once tokens establish the foundation, the next step is assembling them into reusable components.

Component-Driven Architecture

Component-driven architecture builds on the foundation of design tokens by using reusable UI elements as building blocks. By connecting a design editor to a code repository (e.g., Git, Storybook, or npm), both designers and developers work with the exact same components, closing the gap between design mockups and production code.

This method ensures consistency and eliminates design drift, where discrepancies arise between design and development. Components come pre-configured with standardized styles – sizes, colors, typography, and interactions – ensuring uniformity across teams and products.

"We synced our Microsoft Fluent design system with UXPin’s design editor via Merge technology. It was so efficient that our 3 designers were able to support 60 internal products and over 1,000 developers." – Erica Rider, UX Architect and Design Leader

When developers update a component in the repository, those changes automatically sync with the design tool. This guarantees everyone is working with the latest version, reducing errors and inefficiencies. Additionally, non-designers like product managers can use these coded components to create high-fidelity prototypes, freeing up designers to focus on strategic tasks.

Dynamic theming adds another layer of adaptability to these reusable components.

Dynamic Theming with CSS Variables

CSS variables bring design tokens to life in the browser, enabling real-time theme switching.

"Design tokens define what the design values are and their semantic meaning. CSS variables determine how these values are implemented in the browser." – Laura Kalbag, Penpot Blog

CSS variables follow the cascade, allowing global values to be set on :root and overridden with more specific selectors. This makes scoped theming possible, where different sections of an application can have distinct themes. For instance, switching from light mode to dark mode only requires remapping semantic tokens to new primitive values, such as changing surface-primary from white to black.

JavaScript can also dynamically update CSS variables using document.documentElement.style.setProperty(). This enables user-controlled themes or interactive UI states. Additionally, media queries like prefers-color-scheme can automatically align themes with the user’s system preferences. To avoid naming conflicts in large codebases, adopt kebab-case conventions like --color-background-button-primary-active.

Design-in-Code with UXPin Merge

This section dives into how UXPin Merge bridges the gap between design and development by directly connecting your design tools to production code. Instead of relying on static mockups, designers can work with actual production-ready components – whether they come from MUI, Ant Design, Bootstrap, ShadCN/ui, or your custom codebase. The beauty of it? Any updates made to components in the repository automatically sync with the design tool, ensuring everyone is always working with the latest version. This seamless integration reinforces the principles of design system consistency and real-time code synchronization.

Designing with Real Code Components

Merge offers three ways to integrate: syncing directly via Git, connecting through Storybook (compatible with over 15 frameworks like Vue and Angular), or importing packages through npm. Once set up, designers can drag and drop real, production-ready components onto the canvas. Every interaction, style, and behavior is exactly how it will function in the final product. This eliminates the risk of design drift, ensuring what’s designed is precisely what developers will build.

When it’s time for handoff, developers receive auto-generated JSX code that mirrors the prototype down to the smallest detail – including props and dependencies. They can even open it directly in StackBlitz for immediate implementation, saving countless hours.

Efficiency Gains from Merge

Teams using Merge report incredible efficiency improvements, building products up to 10x faster and cutting engineering time by half. For instance, Mark Figueiredo’s team at T.RowePrice found that feedback cycles that used to take days now happen in just hours, shaving months off their project timelines. Similarly, at PayPal, processes that once took two to three months for design alone now encompass design, testing, and delivery within the same timeframe.

"When I used UXPin Merge, our engineering time was reduced by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers." – Larry Sawyer, Lead UX Designer

Merge AI: Faster Design Generation

Merge AI takes things a step further by generating layouts from text prompts or images, using only components from your approved design system. Whether your components come from MUI, Ant Design, Bootstrap, ShadCN/ui, or a custom library, every AI-generated output is ready for production. This eliminates the hassle of cleaning up or reworking designs, ensuring every layout aligns perfectly with your codebase.

How to Implement Design Tokens and Component Libraries

Integrating design tokens and component libraries into your workflow helps bridge the gap between design and development. By defining tokens in a universal format, converting them into usable code, and syncing components, you ensure that designers and developers work with the same elements. Let’s dive into the steps to implement design tokens and integrate them with component libraries.

Setting Up Design Tokens

Design tokens replace hard-coded values with reusable identifiers, typically defined in JSON. These tokens represent visual elements like colors, typography, and spacing. To implement them:

• Define tokens in JSON, using a multi-layer structure: base, semantic, and component layers.
• Use tools like Style Dictionary to transform tokens into CSS variables or platform-specific code. Automate this process with the command:
  style-dictionary build --config config.js.
  This ensures CSS variables are updated automatically.
• For theme switching, utilize the data-theme attribute on your HTML root element. This allows you to toggle between themes (e.g., light, dark) using CSS variables.

"The key insight: use semantic token references ({Colors.Brand.500}) instead of hard-coded values. This creates a dependency graph that makes your design system adaptive and future-proof." – Rahul Maheshwari, Frontend Developer

Integrating Custom Code Libraries in UXPin Merge

Once your tokens are ready, the next step is to bring your production components into your design workflow. UXPin Merge supports three integration methods:

• Git: Sync directly from your repository.
• Storybook: Connect components built with React, Vue, Angular, or Web Components.
• npm: Import packages directly.

Organize your components using a one-component-per-folder structure, where the folder or file name matches the component’s default export.

To tailor components for design needs, start with Wrapped Integration using Higher-Order Components (HOCs). This allows you to modify components – like adding controlled states or context providers – without altering production code. Use a Global Wrapper Component in your uxpin.config.js file to apply themes, context providers, or global styles across all components. Ensure styles are scoped locally to avoid interfering with the UXPin interface.

For automated updates, integrate CI/CD tools like CircleCI or Travis. Set your UXPIN_AUTH_TOKEN as an environment variable and add uxpin-merge push to your build script. This keeps components in sync with production code. For example, Microsoft’s UX team used this method to align the Fluent design system with UXPin Merge, enabling 3 designers to support 60 internal products and over 1,000 developers by maintaining a unified source of truth.

Scalable Token Strategies

For large-scale systems, tokens need to support multi-theme environments. Use the token layers – primitives, semantic tokens, and component-specific tokens – to ensure consistency across themes. This approach allows for base themes, vendor-specific overrides, and context-aware tokens that adapt dynamically.

Consistency in naming conventions is crucial. If your Figma variables use Colors.Text.Primary, ensure your code tokens match exactly. Avoid hard-coding hex values; instead, reference primitive tokens. This keeps your system flexible and future-ready, allowing updates without directly modifying components.

Best Practices for Developers in Design-in-Code Workflows

Setting up a design-in-code workflow takes more than just technical know-how. It requires clear guidelines, validation processes, and strategies to avoid conflicts as your system grows. These practices help keep your design tokens and components manageable across teams and projects.

Token Naming Conventions and Scope Management

A solid naming system is the backbone of any scalable design token setup. Many advanced systems rely on a three-tier hierarchy to keep things organized:

• Global/Base Tokens: These are the raw values like color-blue-60 or spacing-16 that form the foundation. They should avoid any semantic meaning.
• Alias/Semantic Tokens: These link global tokens to specific roles, such as color-primary or color-error, enabling features like theming (e.g., dark mode) without changing the component code.
• Component-Level Tokens: These are specific to UI elements, such as button-primary-bg or card-border-radius, allowing for detailed overrides.

Interestingly, 48.1% of design system practitioners prefer creating their own naming conventions, with "ease of understanding" being the top priority.

"Naming isn’t just labeling – it’s a core part of your design system architecture."

• Netguru

When structuring tokens, use platform-friendly delimiters. For example, CSS variables often use dashes (-), while JavaScript objects might use dots (.). This means --color-primary-500 in CSS becomes color.primary.500 in JSON.

To avoid naming conflicts, use string representations for fractional values. For instance, spacing.1half works better than 1.5, as tools can mistakenly flatten 1.5 and 15 into the same identifier (e.g., spacing15). Also, steer clear of special characters like commas, curly brackets ({}), or emojis, as they can cause issues during transformation.

Avoid using reserved words such as name, type, value, or description, as these are often part of design token specifications and can lead to parsing errors.

Adobe’s Spectrum design system is a great example of this approach, using a brightness scale (50 to 900) to name colors in a logical and flexible way. This makes the system intuitive and adaptable across themes without requiring developers to remember arbitrary names.

Once you’ve nailed your naming strategy, you can focus on managing themes and component-specific overrides for added customization.

Theming and Component Overrides

Balancing flexibility and control is key when managing themes and customizing components. The goal is to adjust components for specific needs without introducing unnecessary complexity or straying from your production codebase.

One effective approach is using Wrapped Integration via Higher-Order Components (HOCs). This allows you to tweak component behavior in design tools without affecting production code. For example, you can create versions of checkboxes or add context providers specifically for the design environment. This keeps your design and production components aligned.

When implementing themes, scope styles locally to avoid conflicts between your design system’s CSS and the design tool’s interface. This is especially critical when using tools like UXPin Merge, where your component styles must coexist with the editor’s styling.

Another helpful tool is Storybook Args, which lets designers adjust properties, slots, and styles directly – no code changes required. This self-service approach allows designers to explore component variations on their own, cutting down on back-and-forth with developers.

Consistency is crucial. For instance, if your directory is named Button, ensure the exported component matches that name exactly. This clarity extends to both your code repository and the design tool’s spec mode.

With clear naming and override strategies in place, the next step is integrating validation and Storybook to maintain consistency.

Code Validation and Storybook Integration

Validation tools and Storybook integration are essential for keeping components consistent and error-free as they move between design and development environments. UXPin Merge supports over 15 Storybook frameworks, including React, Vue, Angular, and Web Components, making it compatible with most modern setups.

For private Storybook libraries, use the @uxpin/storybook-deployer CLI tool with token-based authentication to establish a secure connection between your component library and the design environment. If you’re using Vite as a bundler, set config.base = ' ' in viteFinal to ensure assets load correctly.

Storybook’s Args feature is a game-changer, enabling designers to dynamically modify component properties, slots, and styles within the design editor. This creates a unified source of truth, allowing designers to work directly with the same components developers ship to production.

"We synced our Microsoft Fluent design system with UXPin’s design editor via Merge technology. It was so efficient that our 3 designers were able to support 60 internal products and over 1,000 developers."

• Erica Rider, UX Architect and Design Leader

To maintain this level of efficiency, validation must be baked into your workflow. Use linters to catch token naming errors, validate component props against TypeScript definitions, and run automated tests with every commit. These safeguards ensure that broken components never make it to designers or production environments.

Conclusion

Key Benefits of Design-in-Code

Design-in-code brings designers and developers together by creating a single source of truth, cutting down inconsistencies and slashing engineering time by 50%. It can speed up product development by as much as 10× compared to older, image-based workflows. This method encourages shared ownership of code, bridging the gap between design and development. Plus, it offers perks like runtime adjustments, batch updates through inheritance, and automated documentation – all while keeping governance overhead minimal.

With these advantages in mind, let’s look at how you can begin integrating design-in-code into your process.

Next Steps for Adopting Design-in-Code

To bring design-in-code into your workflow, focus on using tools like design tokens, component libraries, and dynamic theming.

Start by setting up design tokens – such as colors or spacing – in a version-controlled repository. These tokens act as a shared resource for your team. Test theming branches to observe how changes ripple through your designs.

Then, choose the right integration for your team. For example, UXPin Merge allows you to work with React or web components via Git, connect to Storybook for interactive previews (compatible with frameworks like Vue and Angular), or use npm for easy package updates. If you’re new to this, start with a wrapped integration using Higher-Order Components (HOCs) for flexibility, then move to direct production code when you’re ready.

Adopt clear naming conventions, like BEM, and manage token scopes carefully to make overrides simple and enable dynamic theming with CSS variables. Using Storybook can also ensure that your code validations and previews align with your design definitions.

To hit the ground running, you might want to import pre-built libraries like MUI, Ant Design, or Bootstrap. These provide immediate access to interactive, code-ready components.

For enterprise teams looking to eliminate handoff challenges completely, UXPin Merge offers the ability to design directly with production-ready components inside the design canvas. Visit uxpin.com/pricing to find the plan that works best for your team.

FAQs

When should a team use design-in-code instead of mockups?

When teams prioritize high fidelity, consistency, and efficiency, design-in-code becomes the go-to approach. It’s especially useful for crafting interactive prototypes that use production-ready code, cutting down on errors and fostering better collaboration across teams. This method also supports scalability, accelerates deployment timelines, and ensures everyone is aligned by using shared components as a single source of truth.

While mockups work well for early brainstorming and ideation, design-in-code shines in workflows that demand precision and scalability – making it a perfect fit for enterprise-level projects.

How do design tokens stay in sync across apps and platforms?

Design tokens serve as a shared, platform-neutral foundation for design decisions, ensuring consistency across apps and platforms. By leveraging tools like CSS variables, they make it possible to implement changes at scale, updating multiple elements and projects seamlessly. This approach streamlines workflows and helps maintain a cohesive design system.

What’s the quickest way to start using UXPin Merge with our component library?

If you’re looking to jump into UXPin Merge quickly, the best approach is to use the boilerplate repository they provide. Here’s how to get started:

• Fork and clone the repository from GitHub to your local environment.
• Set up the project using Node.js by running npm install followed by npm run start.
• Test the sample components included in the repository to see how everything works.

Once you’re comfortable, you can take it a step further by integrating your own React components. UXPin offers detailed guidelines to help you through the process. This method is especially straightforward if you’re already familiar with tools like GitHub and Node.js.

Related Blog Posts

• What Are Design Tokens in React?
• How No-Code Export Tools Simplify Design-to-Code Workflows
• Why Development Technical Design Teams Are Choosing Code-Based Design Over Figma
• Design-to-Code Tools: UXPin’s Advantage Over Visual-Only Platforms

Choosing the right prototyping tool in 2026 comes down to your team’s needs. UXPin, Figma, and Adobe XD each bring unique strengths to the table:

• UXPin: Best for enterprise teams needing production-ready prototypes with real code components, strong governance, and AI-powered workflows.
• Figma: Ideal for agile teams focused on real-time collaboration and quick iterations, with an extensive plugin ecosystem.
• Adobe XD: A solid choice for designers already using Adobe Creative Cloud, but its "maintenance mode" status limits future updates.

Quick Comparison

UXPin leads in bridging design and development with real code, while Figma excels in team collaboration. Adobe XD remains relevant for Creative Cloud users but lags behind in advanced features.

UXPin: Code-Based Prototyping for Enterprise Teams

UXPin takes prototyping to the next level by using real code components from frameworks like React, Vue, or Angular. It connects seamlessly with Git repositories, Storybook, or npm libraries, allowing teams to work with production-ready components from the start. This streamlined approach helps eliminate errors and reduces the rework typically needed between design and development.

Pre-integrated libraries like MUI, Ant Design, Bootstrap, Tailwind UI, and ShadCN are available. For teams with custom design systems, UXPin’s Merge feature syncs directly with your codebase, creating a single, reliable source for both designers and developers.

"When I used UXPin Merge, our engineering time was reduced by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers." – Larry Sawyer, Lead UX Designer

Below, we’ll explore UXPin’s standout features, enterprise-grade governance tools, and pricing options.

Main Features of UXPin

At its heart, UXPin empowers designers to build prototypes using real code. These prototypes include functional elements like form fields, dropdowns, and conditional logic. Designers can define variables, expressions, and interactions that behave just like the final product, making user testing feel close to interacting with a live application.

In 2026, UXPin introduced AI-powered workflows via its AI Component Creator. Using advanced models like GPT-5.1 and Claude Sonnet 4.5, the AI works within your design system’s constraints, suggesting only trusted components. This ensures that designs remain reliable and aligned with your developers’ standards. The Growth plan includes 500 AI credits per month, while Enterprise users can enjoy custom credit limits.

UXPin also integrates with popular tools like Jira for automating workflows, Slack for team notifications, and FullStory for user analytics. Storybook integration allows teams to pull component documentation directly into their design work, further simplifying the process.

"As a full stack design team, UXPin Merge is our primary tool… It has increased our productivity, quality, and consistency, streamlining our testing of layouts and the developer handoff process." – Brian Demchak, Sr. UX Designer, AAA Digital & Creative Services

When it’s time for handoff, developers can copy React code – complete with all dependencies – straight from the design.

"What used to take days to gather feedback now takes hours. Add in the time we’ve saved from not emailing back-and-forth and manually redlining, and we’ve probably shaved months off timelines." – Mark Figueiredo, Sr. UX Team Lead, T. Rowe Price

Enterprise Features and System Governance

Large organizations need more than collaboration – they need governance tools to maintain control and security. UXPin addresses this with features like Single Sign-On (SSO), Two-Factor Authentication (2FA), and custom Roles & Permissions to manage access. The platform’s Git integration (available in the Enterprise plan) ensures version control for design systems alongside code, helping teams maintain consistency and compliance. Audit capabilities further enhance quality assurance by tracking every modification.

Version history varies by plan: the Core plan offers 7 days, Growth extends this to 30 days, and Enterprise provides unlimited history.

Merge components come with built-in documentation, assets, and usage guidelines, ensuring consistent design practices across distributed teams. UXPin also prioritizes security with encryption and GDPR compliance, making it a reliable choice for regulated industries. Prototypes run directly in browsers, speeding up iterations and removing the need to build custom libraries from scratch.

With these enterprise-focused features, UXPin ensures that large teams can operate efficiently while maintaining high standards.

Pricing Tiers

UXPin offers three pricing plans, all of which now include Merge technology. Annual billing comes with a 40% discount:

• Core ($29–$49/month): Geared toward individuals and small teams, this plan includes basic AI models (GPT-4.1 and Claude 3.7), 200 AI credits per month, unlimited prototypes, conditional logic, variables, expressions, and password-protected previews. Version history is limited to 7 days.
• Growth ($40–$69/month): Designed for mid-sized teams, this plan adds advanced AI models (GPT-5.1 and Claude 4.5), 500 AI credits per month, Design Systems, Patterns, Roles & Permissions, Storybook integration, and SSO & 2FA. It also extends version history to 30 days.
• Enterprise (custom pricing): Tailored for large organizations, this plan includes unlimited AI credits, Git integration, custom library AI integration, dedicated support, security reviews, a private Slack channel, and unlimited version history. For pricing details, contact sales@uxpin.com.

For those interested in testing the platform, UXPin also offers a free version with limited features, making it easy to explore its potential before committing. With its focus on reducing friction between design and development, UXPin positions itself as a top choice for teams looking to streamline their workflows.

sbb-itb-f6354c6

Figma: Real-Time Collaboration for Agile Teams

Figma has become a go-to tool for cross-functional teams by making file sharing and commenting seamless for designers, product managers, and engineers. Since it runs entirely in the browser, there’s no need for downloads or worrying about version conflicts, which can slow down workflows.

"Figma helps us paint the north star for the whole company. It keeps everyone aligned and excited." – Henry Modisett, Head of Design

One of Figma’s standout features is its real-time multiplayer editing. This capability allows teams to collaborate simultaneously, making it particularly useful for agile ceremonies like sprint planning, daily stand-ups, and retrospectives [10,12].

Main Features of Figma

Figma’s real-time updates are complemented by its Dev Mode, which bridges the gap between design and development. Dev Mode, available on select plans ($25–$35 per month), gives developers instant access to CSS and asset details, as well as tools for asset inspection and measurement.

The platform’s plugin ecosystem further enhances its functionality, offering tools for accessibility checks, content generation, and workflow automation. Its intuitive interface allows even non-designers, such as product managers and developers, to navigate files easily and provide feedback with minimal learning curve.

Figma also includes FigJam, a whiteboarding tool with templates designed for sprint planning and retrospectives. Features like branching and merging make it easy for designers to work independently on feature updates [11,14]. Additionally, integrations with tools like Jira, Asana, and GitHub provide immediate task context, streamlining workflows [12,13].

"Nearly everything that designers and developers need is available in Figma." – Diana Mounter, Head of Design

A practical example of Figma’s adaptability comes from Cede Labs, a startup with fewer than 20 team members. In August 2023, they restructured their Figma workflow to align better with agile development for their product, cede.store. By creating separate "Dev Space" and "Design Space" pages and integrating Jira tickets into Figma’s Dev Panel via the Storybook plugin, they reduced miscommunication and maintained design consistency throughout their sprints.

Gaps in Advanced Prototyping

While Figma shines in collaborative design, it falls short in offering production-ready prototyping capabilities. Its vector-based prototypes, which rely on basic transitions and Smart Animate, are great for low- to mid-fidelity concepts but lack the complexity needed for advanced logic like form validation or state management.

The handoff process relies heavily on Dev Mode, which provides CSS and asset inspection but doesn’t generate production-ready code. This often requires developers to rebuild components, which can lead to discrepancies between the design and final implementation. For larger organizations, Figma’s enterprise features, such as Single Sign-On (SSO) and role-based permissions, are helpful but lack the depth in version control and auditing that some enterprises require.

Pricing and Best Fit

Figma offers a Free Tier for individuals or small projects, making it an accessible option for teams just getting started. For larger teams, the Organization Plan costs $45 per full seat per month (billed annually) and includes features like organization-wide libraries, branching/merging, and design system analytics. The Enterprise Plan, at $75 per full seat per month (billed annually), adds advanced administration tools, guest access controls, and SCIM-based role assignments.

Figma is best suited for startups, agencies, and small-to-medium teams that value speed and collaboration over advanced prototyping. It’s an ideal choice for agile teams focused on quick iteration and stakeholder alignment rather than creating pixel-perfect, high-fidelity interactions. For teams using prototypes to guide decisions rather than execute detailed interactions, Figma offers a practical balance of simplicity and features.

To get the most out of Figma, teams should agree on standardized file structures and naming conventions, while maintaining a “release notes” section to track component changes. Establishing a clear design handoff process – where every screen has a linkable source of truth and all interactions are documented – can help bridge the gap between design and development. Additionally, applying the "Two Pizza Rule" (limiting the number of editors to keep teams manageable) can ensure smoother collaboration and governance.

Next, we’ll explore Adobe XD’s integration with Creative Cloud and how it supports a distinct workflow.

Adobe XD: Creative Cloud Integration for Adobe Users

Adobe XD holds a distinct place as a desktop-based prototyping tool tailored for teams already immersed in Adobe’s Creative Cloud ecosystem. It seamlessly transfers assets from tools like Photoshop, Illustrator, and InDesign, ensuring asset integrity with support for both SVG and bitmap formats. Creative Cloud Libraries act as a central resource, keeping colors, components, and character styles consistent across Adobe applications.

For teams focused on maintaining brand consistency across projects, linked assets are a game-changer. When a source asset in a CC Library is updated, those changes automatically reflect across all linked files. Plus, XD integrates with After Effects, allowing designers to export assets for more advanced animations beyond the basic Auto-Animate feature.

"Adobe XD helps us change the focus from the toolset to the experience, resulting in much more productive conversations." – Michael Adamson, Client Services Director, Perficient Digital

Some notable examples include DICE using Adobe XD to design Battlefield V’s interface and WestJet refining its user flows. These use cases showcase how XD fits into larger design workflows.

Main Features of Adobe XD

One standout feature of Adobe XD is its coediting capability, enabling multiple designers to work on the same cloud document simultaneously. Each collaborator’s position is marked with colored avatars, making teamwork intuitive and efficient. The Document History feature offers the ability to bookmark specific design versions, though autosaved versions are automatically removed after 60 days.

"Coediting lets you work right alongside with your team and empowers you to work better. Together." – Dani Beaumont, Principal Product Manager, Adobe XD

XD also leverages Illustrator’s vector engine for creating detailed assets and includes the Repeat Grid feature to streamline repetitive design tasks. It supports both macOS and Windows, while integrating with tools like Creative Cloud for Microsoft Teams and Slack. This allows teams to preview designs and gather feedback directly within their communication platforms.

Where Adobe XD Excels and Falls Short

Adobe XD received a 4.5/5 rating from PCMag, largely due to its integration with Creative Cloud and responsive design tools. However, as of 2024, Adobe announced that XD is in "maintenance mode", halting all new feature development and discontinuing its standalone sales.

"Adobe XD is in ‘maintenance mode.’ Adobe has officially stopped all new feature development as of 2024. It is no longer a viable tool for new projects." – Elinor Rozenvasser

Collaboration features in XD have drawn criticism for their limitations. For example, only the original creator of a file can update shared presentation or development links, as the platform doesn’t allow multiple owners for a single file. Developer handoff is also constrained by static "Share for Development" links, which only provide web pages with specs and assets. Additionally, XD lacks advanced prototyping features like variables, conditional logic, or form validation, which are essential for creating high-fidelity prototypes.

These limitations make Adobe XD a better fit for teams already tied to Creative Cloud and reliant on legacy workflows, rather than those looking to adopt cutting-edge tools.

Pricing and Target Users

Adobe XD is no longer sold as a standalone product. As of 2026, it is only available through the Creative Cloud "All Apps" plan, costing approximately $89.99 per month. The previously available Starter Plan has been discontinued, and legacy plans restrict each user to a single active shared link. This pricing reflects Adobe’s shift toward supporting existing users rather than attracting new ones.

XD remains a practical choice for teams already invested in Creative Cloud, particularly those maintaining legacy projects, voice and game designers needing specific triggers, or teams working across macOS and Windows. However, starting new projects with XD in 2026 poses challenges, especially in terms of collaboration, hiring, and ensuring compatibility with future workflows.

For teams still using XD, leveraging CC Libraries is essential for maintaining brand consistency. At the same time, planning for a transition to other tools is crucial, as XD’s stagnation may limit its ability to meet evolving design and prototyping needs.

Side-by-Side Tool Comparison

Choosing the right prototyping tool depends on how well each platform supports core needs: prototyping, collaboration, and transitioning to development. These tools differ significantly, especially in how they connect design and development workflows. Based on our in-depth reviews, here’s a breakdown of key differences in these areas.

Feature Comparison Table

The standout difference lies in prototyping approaches. UXPin uses actual code components, allowing for more realistic prototypes, while Figma and Adobe XD rely on vector-based designs that need further translation into production-ready code.

Efficient workflows are equally important. Tools that streamline the transition from design to development can help teams execute projects faster and more effectively.

Speed and Design-to-Development Workflows

Streamlining the design-to-development process is critical for reducing delays. Teams that cut design review cycles from 5 days to 2 days can deliver projects more consistently because decisions are made faster.

UXPin’s Merge technology allows designers to work directly with the same code components developers use. This eliminates the need for rebuilding designs during development – what you design is exactly what gets shipped.

In contrast, Figma and Adobe XD require manual coding to convert designs into production-ready components.

"Nearly everything that designers and developers need is available in Figma".

By minimizing delays in decision-making, teams can reduce rework and lower costs for custom UI. UXPin’s code-based approach enables stakeholders to test real functionality – like form validation and conditional logic – before development starts. This seamless workflow aligns with broader goals of speed, consistency, and scalability.

Enterprise Capabilities Table

For large organizations, features like governance and security are just as important as design tools.

For enterprise teams, governance and security are critical. UXPin stands out with self-hosting options, ideal for organizations with strict data residency policies. It also ensures a single source of truth by using shared code components across design and development. In comparison, Figma offers robust team libraries and version history, while Adobe XD relies on document history for governance.

Which Tool to Choose

Choosing the right design tool depends heavily on the structure and needs of your team. Here’s a breakdown of which tools work best for different team types and why.

Best Tool by Team Type

Each tool aligns with specific team workflows, offering unique advantages. Let’s explore these benefits further.

For enterprise teams managing intricate design systems, UXPin simplifies the process and reduces handoff delays. At T. Rowe Price, Sr. UX Team Lead Mark Figueiredo shared:

"What used to take days to gather feedback now takes hours. Add in the time we’ve saved from not emailing back-and-forth and manually redlining, and we’ve probably shaved months off timelines."

This efficiency boost has been a game-changer for enterprise teams, particularly when using UXPin Merge to integrate custom design systems. The result? Better consistency and faster collaboration between designers and developers.

For teams focused on quick iterations and brainstorming, Figma’s collaborative tools stand out. Meanwhile, Adobe XD remains a go-to for designers deeply integrated into the Creative Cloud ecosystem, though it’s worth noting that Adobe XD is no longer sold as a standalone product for new users.

Key Points to Remember

Here’s a quick recap of the critical distinctions between these tools:

• UXPin enables functional, production-ready prototypes by using actual HTML and JavaScript components. This means prototypes behave like the final product, complete with working form fields, variables, and logic. Larry Sawyer, a Lead UX Designer, highlighted its impact:

"When I used UXPin Merge, our engineering time was reduced by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers."

• Figma and Adobe XD rely on vector-based designs, which require manual coding to transition into production. Figma excels in collaborative visual design, while Adobe XD integrates seamlessly with other Creative Cloud tools.

For teams that need scalability, governance, and closer alignment with development, UXPin’s Merge technology is a standout. By utilizing the same React, Vue, or Angular components that developers use in production, it creates a shared source of truth. This not only streamlines workflows but also redefines how design and development collaborate effectively.

FAQs

When should we choose UXPin over a vector-based prototyping tool?

Choose UXPin for projects that demand realistic, highly interactive prototypes that function like the final product. By using a code-based approach, UXPin allows for advanced interactions, logic, and states with production-ready components. This not only improves testing accuracy but also creates a smoother connection between design and development. It’s a perfect fit for teams looking to simplify workflows, avoid manual handoffs, and build prototypes that mirror the behavior of the finished product – especially for complex or enterprise-level projects.

What do we need to set up UXPin Merge with our existing code components?

To get UXPin Merge working with your code components, you’ll need to integrate your production code repositories – whether that’s React, MUI, or custom libraries – directly into UXPin. This integration links UXPin to your codebase, allowing you to use production-ready components to maintain design consistency. Designers can tweak props, test out interactions, and even export JSX code, making it easier for design and development teams to work together efficiently.

How do AI credits work in UXPin, and what happens if we run out?

AI credits in UXPin vary depending on your subscription plan. Core plans come with 200 credits per month, while Growth plans include 500 credits each month. These credits automatically reset at the start of every month.

If you use up all your credits, they won’t replenish automatically before the next cycle. To continue accessing AI features, you’ll need to either upgrade your plan or buy additional credits separately.

Related Blog Posts

• High-Fidelity vs. Low-Fidelity Prototypes
• How to Automate Interactive Prototypes with AI
• Design-to-Code Tools: Easiest Options for Teams
• Why Development Technical Design Teams Are Choosing Code-Based Design Over Figma

Figma has unveiled a new integration with OpenAI’s Codex, enabling users to move between design files and code implementation through Figma’s MCP server. Engineers can iterate visually inside Figma. Designers can engage more closely with implementation without becoming full-time coders. On paper, it sounds like the handoff problem is solved.

A tool for both designers and developers

One of the standout aspects of this integration is its ability to cater to both designers and engineers without requiring either to step fully into the other’s domain. Alexander Embiricos, Codex product lead, explained, “The integration makes Codex powerful for a much broader range of builders and businesses because it doesn’t assume you’re ‘a designer’ or ‘an engineer’ first. Engineers can iterate visually without leaving their flow, and designers can work closer to real implementation without becoming full-time coders.”

This dual-purpose functionality is expected to enhance collaboration by allowing engineers to contribute visually and designers to engage more closely with implementation.

Good timing — this news is perfect fodder for Pillar 3 messaging. Here’s the rewritten post:

What the Figma-Codex integration actually does

The integration works through Figma’s MCP server, connecting Figma’s canvas — design files, Figma Make, or FigJam — to Codex for code implementation. The goal, as Codex product lead Alexander Embiricos put it, is to serve builders who don’t want to be forced to identify as “a designer” or “an engineer” first.

Figma’s chief design officer Loredan Crisan framed it as a way for teams to “build on their best ideas — not just their first idea — by combining the best of code with the creativity, collaboration, and craft that comes with Figma’s infinite canvas.”

It builds on an already deep relationship between the two companies. Figma was among the first to launch an app in ChatGPT back in October 2025, and its earlier collaboration with Anthropic to incorporate Claude Code signalled a broader strategy of weaving AI tools into the design workflow.

This Codex integration continues that direction. It’s real, it’s useful, and for teams without existing design systems, it meaningfully closes the distance between design and development.

What Figma + Codes doesn’t solve

Here’s the thing about Figma’s MCP server: it exposes visual layer data. Frames, layers, colours, positions. It tells Codex what things look like.

It doesn’t tell Codex what things are.

When Codex receives that visual data and generates code, it’s interpreting pixels — making educated guesses about what component to use, what props to set, what your team actually calls things in your codebase. For greenfield projects, that’s fine. For enterprise teams with existing design systems — with their own Button components, their own Card variants, their own design tokens — the gap between “what Figma shows” and “what our codebase expects” doesn’t disappear. It just moves.

The handoff problem doesn’t live in the design tool anymore. It lives in the translation step between visual output and production code. Figma + Codex makes that translation faster. It doesn’t eliminate it.

How UXPin Forge AI approaches the same problem differently

Forge AI doesn’t start from visuals and work toward code. It starts from code and works toward design.

When you prompt Forge AI to generate a dashboard, it doesn’t draw rectangles that look like your Button component. It places your actual Button component — from your production React library, with your prop structure, your variants, your states. The canvas renders real components, not approximations of them.

This matters because of what it changes downstream.

What Figma’s MCP server exposes to Codex: visual layer data — frames, colours, positions that Codex must interpret and convert to code.

What UXPin’s component API exposes: actual component data — prop names, accepted values, variant options, state definitions — that developers can use directly.

The difference isn’t speed. Both are fast. The difference is fidelity. One gives AI a picture of your UI and asks it to reverse-engineer your codebase. The other gives AI your codebase and asks it to build UI from it.

The Design to Code workflow no other tool provides

Forge AI isn’t just a generation tool. After it generates, you have a complete professional design environment on the same canvas — pixel-level layout control, component property adjustment, responsive breakpoints, variant exploration, real-time collaboration. The refinement happens on the same code-backed components Forge placed.

And when you’re done, the export is JSX that references your actual component library. Your engineers receive code they can integrate immediately. Nothing to translate. Nothing to rebuild.

1. Prompt — describe the UI you need
2. Forge generates — real components from your library, correct props and variants
3. Refine visually — professional design tools on the same canvas
4. Iterate with AI — conversational modifications, not regeneration from scratch
5. Export — production-ready JSX using your actual component library
6. Ship — engineers integrate directly

The bottom line

Figma’s Codex integration is a meaningful step. For teams starting from scratch, it genuinely accelerates the path from idea to implementation. The partnership between two of the most widely-used tools in design and development will matter.

But for enterprise teams with existing design systems — where brand consistency, governance, and codebase alignment aren’t optional — the gap between visual output and production code remains. Making that translation faster isn’t the same as eliminating it.

Forge AI was built to eliminate it.

Want to see the difference? Try Forge AI with your own component library – MUI, shadcn/ui, Ant Design, or your custom system via Git. Generate a real UI in under five minutes and export the JSX.

Start your free trial today, or learn Learn more about Forge AI works with your design system

Read the source

FAQs

Want faster prototypes that developers can directly use? Combine Claude Haiku 4.5, Ant Design, and UXPin Merge to design with production-ready React components.

Here’s why this matters:

1. Save Time: Skip the back-and-forth between design and development. Use the same components developers work with.
2. AI-Powered Design: Claude Haiku 4.5 generates layouts from simple text or images, speeding up the process.
3. Ant Design Integration: Access a library of pre-built, responsive components that behave exactly as they will in production.

How it works:

• Use Claude Haiku 4.5 to create layouts with text prompts or images.
• Customize Ant Design components directly in UXPin Merge.
• Add interactions and logic to build functional, code-based prototypes.

Start by setting up a UXPin Merge account, linking your Anthropic API key, and integrating Ant Design. This workflow bridges design and development, ensuring your prototypes are ready for production and saving teams up to 8.6× development time.

Key takeaway: Design smarter, faster, and closer to the final product.

UXPin Merge AI: Smarter UI Generation That Follows Your Design System

sbb-itb-f6354c6

What You Need to Get Started

To begin, you’ll need three essentials: a UXPin Merge account, an Anthropic API key for Claude Haiku 4.5, and Ant Design integrated into your workspace. UXPin simplifies the process by natively supporting Ant Design, so there’s no need for manual imports unless you’re working with a custom library.

Setting Up Your UXPin Merge Account

Start by signing up for a free UXPin Merge account on the UXPin website. After logging in, head to your dashboard, click "New Project," and choose "New prototype" to open the design canvas. Merge technology is included across all pricing tiers, meaning even free accounts have access to code-based components.

To enable AI features, locate the AI Component Creator in the Quick Tools panel within the Editor. Then, navigate to the Settings tab, where you’ll input your Anthropic API key. UXPin’s Core plan, starting at $29/month, includes 200 AI credits per month, while the Growth plan, starting at $40/month, provides 500 monthly credits.

Setting Up Claude Haiku 4.5

Generate your API key by visiting the Anthropic API console. Released on October 15, 2025, Claude Haiku 4.5 offers a 200,000-token context window and supports a 64,000-token maximum output, making it ideal for handling intricate design systems. The pricing is straightforward: $1 per 1 million input tokens and $5 per 1 million output tokens.

Once you generate your API key, make sure to store it securely, as Anthropic only displays it once. Next, return to UXPin’s AI Component Creator, paste your key into the Settings tab, and select Claude Haiku 4.5 from the model dropdown. This enables you to start creating layouts using text prompts or uploaded images. With the API key set up, you’re ready to incorporate Ant Design components into your designs.

Connecting Ant Design to UXPin Merge

If you’re using a custom library, go to the Design System Libraries tab in UXPin, create a new library, and select "Import React Components." Enter the package name antd and the CSS path antd/dist/antd.css. After selecting the components you want in the Merge Component Manager, click "Publish Library Changes" and refresh your browser to sync everything.

For standard use, Ant Design components are already integrated and ready to go. Simply open your design canvas and find them in your library panel for immediate access.

How to Create Prototypes with Claude Haiku 4.5 and Ant Design

This section walks you through using connected tools to build prototypes that closely resemble production-ready designs. By combining AI-generated layouts with Ant Design’s ready-to-use components, you can create prototypes in three key steps: generating layouts with prompts, customizing components to fit your design needs, and adding interactive features to make your prototype functional.

Creating Layouts with Claude Haiku 4.5

To get started, open the AI Component Creator in the Quick Tools panel of your UXPin Editor and select Claude Haiku 4.5 from the AI Models dropdown. When using prompts, be as specific as possible to get precise results. For instance, instead of saying, "Create a login form", try something like, "Create a login form with an Ant Design email input field and a primary button, centered on the page."

You can also upload a wireframe or mockup using the image-to-code feature, which allows Claude to analyze your image and generate a layout using Ant Design components. If your design is complex, break it into smaller sections and provide detailed instructions for each part to maintain accuracy.

Once the layout is generated, refine it using the AI Helper. Select any component, click the purple "Modify with AI" icon, and describe the changes you need – for example, "Set spacing to 24px" or "Change the button color to blue." This iterative process lets you fine-tune your design without manual adjustments. After refining the layout, you’re ready to customize the Ant Design components.

Adjusting Ant Design Components

Since UXPin Merge uses actual React code, Ant Design components retain their full functionality. You can modify attributes like button types (e.g., primary, ghost, dashed), input states, or table configurations via the Properties Panel on the right side of your canvas. To make updates to multiple components quickly, use the Merge Component Manager to map React props directly to the UXPin interface.

"AI Helper lets you update and style Merge components using simple text prompts. Instead of adjusting properties manually, you can describe what you want to change, and AI will apply the update for you." – UXPin

Once your components are styled and configured, you can move on to adding interactions for a more dynamic prototype.

Making Prototypes Interactive

To bring your prototype to life, use the Interactions tab in the Properties Panel. Ant Design components come with built-in interactions like hover effects, focus indicators, and responsive behaviors. You can take this further by adding logic, state changes, and conditional displays.

For example, to create a responsive navigation menu, define a variable to track whether the menu is open or closed. Then, set up a click interaction on an Ant Design button to toggle that variable. Finally, link the menu’s visibility to the variable using conditional logic. This approach gives you a fully functional prototype that mimics the behavior of the final product – all without writing code.

For even better results, include functional details in your AI prompts from the start. For instance, specify, "The input field should display a blue border when focused", so interactivity is built into the AI-generated layout from the beginning.

Tips for Better Prototyping Workflows

Speed up your prototyping process without compromising quality by applying these practical strategies using Claude Haiku 4.5 and Ant Design in UXPin Merge.

Keeping Components Consistent

Consistency is key when building prototypes, and the AI Helper can make this easier. For example, if you need to update multiple Ant Design components, use the "Modify with AI" tool. By applying the same prompt across all components, you ensure uniformity without having to tweak properties manually.

To maintain alignment with your design system, include specific constraints in your AI prompts. Vague instructions won’t cut it – be precise. For instance, instead of saying, “Make a text field,” try: “Create an input field labeled ‘Email’ with the label positioned above it. Use 16px bold font for the label.”

If you’re working with a custom library, you can import it via Git, Storybook (compatible with over 15 frameworks), or npm. Use the uxpin-merge sync command to keep everything up-to-date and consistent across your projects.

These approaches ensure seamless collaboration between design and development teams.

How Designers and Developers Can Work Together

Breaking down complex interfaces into smaller, manageable components makes design handoffs more precise and easier for developers to follow. This method helps developers grasp the reasoning behind design choices.

With Claude Haiku 4.5, the process becomes even smoother. It generates code-backed components instead of static visuals, allowing developers to export clean JSX directly from prototypes. This eliminates the need for rebuilding – what you design is what gets shipped.

Another way to stay aligned is by syncing design tokens. This ensures that AI-generated components adhere to your established themes, creating a shared reference point for both designers and developers throughout the project.

Using AI Within Your Design System

Once you’ve built a foundation of consistent components and streamlined collaboration, integrating AI into your design system can take things to the next level.

Start by crafting detailed prompts that align with your design system guidelines. For example, you might specify: “Generate an Ant Design button with primary styling, 16px padding, and a hover state that changes to #096dd9.” With these details, the AI can create components ready for production that seamlessly fit into your codebase.

When you need to make adjustments, focus on refining existing components instead of starting from scratch. Select an Ant Design component, use the purple AI icon, and describe the updates you want. This method keeps everything within your design system’s rules while letting you experiment quickly. The AI Helper works with popular React libraries like Ant Design, MUI, Bootstrap, and Tailwind.

"Adding a layer of AI really levels the playing field between design & dev teams" – Ljupco Stojanovski

Conclusion

Bringing together Claude Haiku 4.5, Ant Design, and UXPin Merge creates a seamless connection between design and development. Instead of relying on static mockups that developers have to recreate, you’re designing directly with production-ready React components. What you design is exactly what gets shipped, streamlining the process and closing the gap between design and development.

With UXPin Merge, teams have reported delivering products up to 8.6× faster. Claude Haiku 4.5 speeds up layout creation by transforming simple text prompts into detailed layouts in seconds. Meanwhile, Ant Design ensures your design system stays consistent with code-backed components.

The result? Prototypes that look and function like the final product, eliminating the usual handoff challenges. Whether you’re a designer eager to work closer to the code or a developer tired of duplicating designs, this approach ensures everyone is working with the exact components that will make it to production. It’s a game-changer for creating polished, production-ready products.

FAQs

How do I avoid leaking my Anthropic API key in UXPin?

To protect your Anthropic API key in UXPin, never hardcode it directly into prototypes or code. Instead, store it in environment variables or use a secure storage solution to keep it safe and restrict access to your development environment. Make it a habit to rotate your keys regularly and avoid sharing them publicly or committing them to version control systems. Whenever possible, rely on secure configuration files rather than embedding the keys in your code or design files.

Can I apply my design tokens to Ant Design components in Merge?

Design tokens, such as those for colors, spacing, and typography, can be applied to Ant Design components within UXPin Merge. These tokens are a powerful way to maintain a consistent visual style throughout your project. By using them, you can ensure uniformity while still customizing Ant Design components to fit your specific design needs – all seamlessly integrated into your Merge workflows.

What’s the best prompt format for complex screens and interactions?

When working with AI tools to generate complex screens or interactions, using detailed, natural language prompts is key. These prompts should clearly outline the layout, components, and expected interactions.

For instance, a prompt like, "Create a dashboard with a data table, filter bar, and action buttons" gives the AI specific instructions to produce a functional and visually cohesive design. Similarly, something like, "Design a testimonial section with three cards" ensures the AI understands the structure and purpose of the section.

By crafting clear and descriptive prompts, you can guide AI tools to deliver accurate, production-ready components that align seamlessly with your design system. This approach maximizes efficiency and precision in the design process.

Related Blog Posts

• How to prototype using Claude Opus 4.5 + Ant Design – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Ant Design – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Custom Design Systems – Use UXPin Merge!
• How to prototype using Claude Haiku 4.5 + MUI – Use UXPin Merge!

Want to speed up your design-to-development process? Claude Haiku 4.5, paired with shadcn/ui and UXPin Merge, lets you create functional, production-ready React prototypes directly from text prompts. Here’s the process in a nutshell:

• Claude Haiku 4.5 generates React component layouts from natural language prompts.
• shadcn/ui, a React component library, ensures accessibility and consistency.
• UXPin Merge integrates these components into a design tool, syncing directly with your codebase.

This workflow eliminates design-to-code handoff issues, reduces development time, and ensures your prototypes are ready for immediate use. Just describe what you need, let the AI build it, refine the design, and export clean JSX code.

Ready to learn how? Let’s break it down step-by-step.

Designing in code with Cursor + React

sbb-itb-f6354c6

Setup and Prerequisites

Before diving into prototype building, make sure you have a UXPin account, an Anthropic API key, and access to the AI Component Creator tool. The good news? shadcn/ui components are already built into UXPin Merge, so there’s no need to import them manually – unless you’re working with a custom component library.

Required Tools and Accounts

First, you’ll need a UXPin account with Merge access. The Growth plan starts at $40/month and includes advanced AI tools along with 500 AI credits per month – perfect for teams that frequently prototype. For enterprise-level needs, the Enterprise plan offers flexible AI credit limits and dedicated support for custom component libraries.

Next, secure an Anthropic API key to connect with Claude Haiku 4.5. This key is essential for authenticating the AI Component Creator tool, which uses it to generate layouts with shadcn/ui components. Familiarity with shadcn/ui’s basic component patterns will also help you create effective prompts.

Once you’ve got your accounts and API key ready, it’s time to configure UXPin Merge for shadcn/ui.

Configuring UXPin Merge for shadcn/ui

This step ensures your design process stays tightly connected to production-ready code. Since shadcn/ui components are natively integrated into UXPin Merge, they’re immediately available for use in your workflows – no setup required. The AI Component Creator leverages these React components to transform your text prompts into functional layouts that align with your codebase.

Connecting Claude Haiku 4.5 to UXPin Merge

Once UXPin Merge is configured, the next step is linking Claude Haiku 4.5. This connection bridges AI-driven design prompts with functional React components. Here’s how:

1. Open the UXPin Editor and go to the Quick Tools panel.
2. Select AI Component Creator, then navigate to the Settings tab.
3. Paste your Anthropic API key into the designated field.
4. From the model dropdown menu, choose Claude Haiku 4.5.

With this setup, the AI is ready to generate shadcn/ui components based on your prompts. For fine-tuning, use the "Modify with AI" feature (purple icon) to adjust styles, spacing, or layouts without diving into manual edits.

Generating Prototypes with AI and shadcn/ui Components

With Claude Haiku 4.5 connected to shadcn/ui, transforming text prompts into functional layouts has never been easier. The AI Component Creator can generate production-ready React components using shadcn/ui’s extensive library. Since shadcn/ui is already integrated with UXPin Merge, every component suggested by the AI is ready to implement right away.

Creating Layouts with AI Prompts

The key to accurate layouts is in the details of your prompts. For instance, instead of saying, "create a form", try being more specific: "Create an ‘Email’ input field with a 16px bold label above it, a 2px solid bottom border, and a blue focus border." Clear and detailed instructions help the AI deliver exactly what you need.

For more complex interfaces, it’s best to break your request into smaller parts – like navigation bars, data tables, or form sections. Generate these components individually and then combine them on the canvas. This modular method gives you greater control and results in cleaner, more manageable designs.

You can also use images to guide the AI. Paste clipboard images of wireframes or mockups to generate layouts. Low-fidelity sketches are great for defining structure, while high-fidelity designs provide the AI with details like typography and spacing.

Once the AI generates your components, you can use them as a solid starting point for further customization.

Refining AI-Generated Prototypes

AI-generated outputs often need some fine-tuning. The "Modify with AI" feature (purple icon) makes adjustments like spacing, alignment, or styles simple – no manual effort required. For example, you can select a component and prompt: "Reposition elements side-by-side with 20px container padding."

Because these are real React components, not just static visuals, any adjustments will stay within your design system’s constraints. This ensures all refinements are technically viable for developers. And if you need a component that isn’t already in your library, you can quickly import open-source elements from shadcn/ui using npm, saving you time and effort.

Adding Functionality and Testing Prototypes

Once your AI-generated layouts are ready, the next step is to bring them to life with interactivity. Using shadcn/ui React components ensures your designs respond like real applications – complete with ripple effects, focus states, and functional elements like calendar pickers. This means input fields accept text, dropdowns expand, and buttons react instantly, creating a more realistic experience.

Adding Interactivity with UXPin Tools

UXPin’s features like States, Variables, and Conditional Interactions make it easy to build realistic user flows. For instance, you can design a login form where clicking "Submit" checks the email’s validity before navigating to the dashboard. These logic-driven interactions allow stakeholders to experience a design as if it were fully developed.

The AI Helper simplifies behavior updates. If you want to tweak a button’s hover effect or adjust spacing around an input field, just select the element and use a text prompt. Since the AI works within your design system’s rules, every change remains practical for developers. Once these interactions are set, you can simulate real user experiences to ensure everything works as intended.

Testing and Validating Prototypes

After adding interactivity, testing your prototype in a live browser is essential. This step ensures that behaviors function exactly as expected – stakeholders can see how forms submit, navigation flows, and data displays, all in a realistic environment.

Edward Nguyen, a UX Architect, shared his experience:

"UXPin prototypes gave our developers enough confidence to build our designs straight in code. If we had to code every prototype and they didn’t test well, I can only imagine the waste of time and money."

During testing, you can quickly make adjustments based on feedback. Because UXPin uses code-backed components, developers can confirm technical feasibility early on, reducing the risk of costly revisions. According to UXPin, this method can speed up prototyping by up to 10x compared to traditional approaches. By integrating these tools, your prototypes remain functional, testable, and aligned with production standards.

Exporting Production-Ready Code

Once your prototype is finalized, UXPin Merge allows you to export React code that’s ready for immediate use. Since the prototype is built using real shadcn/ui components synced directly from your codebase, the exported JSX ensures perfect alignment with your production setup. This means every prop, dependency, and interaction you’ve defined remains intact, just as you designed it.

After exporting, the transition to development becomes much smoother.

You can also leverage Spec Mode to copy JSX for individual components or full layouts. Alternatively, launch your prototype in StackBlitz for live testing before integrating it into your repository.

Handing Off to Development

A seamless handoff is possible when your design tool and development environment share the same foundation. By syncing your shadcn/ui library through Git, npm, or Storybook integration, developers can directly use components that match the codebase. This eliminates the need for developers to recreate designs from scratch.

Larry Sawyer, a Lead UX Designer, shared his experience:

"When I used UXPin Merge, our engineering time was reduced by around 50%"

Allison Barkley, Director of Operations at Baremetrics, also highlighted the benefits:

"Jumping straight from design to production-ready code is a huge time-saver for our team"

UXPin reports that this workflow can accelerate product development by 8.6 times compared to traditional image-based design methods.

To ensure even greater consistency, consider this extra step: When generating components with Claude Haiku 4.5, connect to the shadcn/ui MCP server (https://www.shadcn.io/api/mcp). This link provides the AI with precise TypeScript definitions, preventing errors like incorrect props and ensuring adherence to shadcn/ui standards. The result? Production-ready code that developers can rely on, with all dependencies accurately captured and maintained throughout the export process.

Conclusion

Pairing Claude Haiku 4.5, shadcn/ui, and UXPin Merge creates a prototyping workflow that seamlessly connects design and development. By using AI prompts to describe your requirements, you can instantly generate code-ready prototypes, transforming what used to be a time-consuming process into a smooth and collaborative experience.

The advantages go well beyond speed. Because these prototypes are built with production-ready shadcn/ui components, they ensure design system best practices from the start. This approach allows for quick iterations while maintaining a unified alignment between design and development, making the entire process more efficient and cohesive.

This workflow redefines collaboration between design and development teams. For enterprise teams managing intricate design systems, it provides structure and consistency without compromising flexibility. By combining AI-generated components with UXPin Merge’s seamless integration, every component adheres to your approved design system. This ensures that AI-driven suggestions are not only developer-ready but also aligned with your pre-established design rules. The result? Fast iterations without unexpected design inconsistencies or compliance headaches.

FAQs

What makes a good prompt for shadcn/ui layouts?

When guiding AI to create layouts with shadcn/ui, a well-constructed prompt is essential to ensure the output aligns with production standards. Here’s what a strong prompt should emphasize:

• Production-Ready Components: Request components that are not only functional but also polished for immediate deployment. This means the AI should focus on clean, reusable code that integrates seamlessly into real-world projects.
• Accessibility at the Core: Include instructions for implementing accessibility features such as keyboard navigation, ARIA attributes, and support for screen readers. Highlight the importance of leveraging Radix UI primitives, which are foundational for accessible and reliable components.
• CVA-Based Styling: Specify the use of the Class Variance Authority (CVA) for styling. This ensures consistent and maintainable class management, promoting a unified design system across components.
• TypeScript Interfaces: Encourage the generation of complete TypeScript interfaces for props and options. This adds type safety and makes the components easier to use and maintain in larger projects.
• Design System Mindset: Guide the AI to think holistically about the design system. Components should be modular, consistent, and adaptable, fitting seamlessly into the broader UI framework.

By focusing on these elements, your prompt will drive the AI to create components that are practical, accessible, and ready for deployment in modern web applications.

Can I use my own component library with UXPin Merge?

Absolutely! UXPin Merge lets you integrate your own component library directly into the platform. You can import and manage components from your design system through Git, Storybook, or npm. This means you’ll be designing with production-ready, code-backed components that perfectly match your library. The result? A smoother workflow and improved collaboration between design and development teams.

How do I prevent wrong props in AI-generated JSX?

To prevent issues with incorrect props in AI-generated JSX when using UXPin, it’s important to validate and parse props carefully. Implement logic to verify that props match the expected data types and values. If something doesn’t align, adjust the data or handle errors in a way that doesn’t disrupt functionality. This approach ensures that your props remain consistent, reducing the risk of unexpected behavior in your prototypes. By focusing on proper parsing, you help maintain reliable and functional components throughout your design process.

Related Blog Posts

• How to prototype using Claude Sonnet 4.5 + shadcn/ui – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Ant Design – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Custom Design Systems – Use UXPin Merge!
• How to prototype using Claude Haiku 4.5 + MUI – Use UXPin Merge!

Prototyping just got a lot easier. Claude Haiku 4.5, MUI, and UXPin Merge work together to let you create production-ready designs directly from real code components. Here’s how it works:

• Claude Haiku 4.5: An AI tool that generates React layouts from text prompts or images, using MUI components.
• MUI: A library of React components based on Material Design principles, ready for use in production.
• UXPin Merge: A platform that integrates these tools, allowing designers to work with the same components developers use.

This workflow eliminates design-development gaps, speeds up product creation by 8.6x, and ensures designs are always aligned with code. You can create, test, and refine prototypes while maintaining consistency across teams. With AI-powered tools and code-backed components, you’re not just designing – you’re building interfaces developers can implement immediately.

Design To React Code Components

Prerequisites and Setup

Before diving into prototyping, make sure you have the necessary tools and accounts configured.

How UXPin Merge Works with MUI

UXPin Merge integrates directly with MUI’s React component library, offering access to over 90 production-ready components right in the design canvas. These components are code-based, meaning when you drag something like a button onto your canvas, you’re working with the exact same production code that developers will use. This ensures design and development stay perfectly aligned.

As Tuğçe Ayteş shared, "I’m a designer but I hadn’t felt this close to coding and creating a real website". It’s a game-changer for bridging the gap between design and development. Once you’ve set up UXPin Merge, the next step is configuring Claude Haiku 4.5 to incorporate AI-driven components effortlessly.

Setting Up Claude Haiku 4.5 in UXPin

While UXPin Merge manages MUI components, Claude Haiku 4.5 takes things further by enabling AI-powered layout creation. This tool fuels UXPin’s AI Component Creator, turning simple text prompts into fully functional React layouts built with MUI components.

To get started, you’ll need an OpenAI API key. Head to the OpenAI website to generate one. Then, in the UXPin Editor, open the AI Component Creator from the Quick Tools panel. Go to the Settings tab, paste your API key, and select Claude Haiku 4.5 under the Prompt tab.

For best results, provide detailed input, such as specific label names or styles, to align with your design goals. You can also upload wireframes or mockups to the AI Component Creator, allowing it to build component structures directly from images.

Required Tools and Account Setup

To begin, ensure you have the following:

• A UXPin account with Merge access
• An OpenAI API key

If your library includes additional assets like custom fonts or icons, use the "add more dependency package" option during the setup process. Once everything is configured, you’ll be ready to create AI-assisted layouts with MUI components.

How to Build Prototypes with Claude Haiku 4.5 and MUI in UXPin Merge

Start creating prototypes by combining AI-generated layouts with production-ready MUI components for a streamlined, efficient design process.

Connecting MUI to UXPin Merge

UXPin Merge offers built-in integration with MUI, so there’s no need to deal with manual imports or separate APIs. Just open the UXPin Editor, and the full MUI library is available in your component panel. This library includes over 90 components – such as buttons, text fields, data grids, and date pickers – crafted using the same React code your developers will deploy.

When you add an MUI Button to your canvas, you’re working directly with production-grade code. Properties like variant, color, and size match React props exactly, eliminating any translation issues between design and development. This direct connection ensures that what you design is exactly what gets delivered. This tight integration creates the perfect foundation for layout creation with Claude Haiku 4.5.

Creating Layouts with Claude Haiku 4.5

To begin, open the AI Component Creator from the Quick Tools panel and go to the Prompt tab. Ensure Claude Haiku 4.5 is selected in your settings. From here, you can generate layouts using either text prompts or image uploads.

If you’re using text prompts, be as specific as possible. For example: "Create a login form with an MUI TextField labeled ‘Email’ (bold, 16px, above the input) and a primary contained Button labeled ‘Sign In’ with 16px padding." Providing details like typography, spacing, and even hex codes will help the AI produce results that align closely with your vision.

Alternatively, upload a wireframe or mockup image. The AI will analyze it and generate a layout using MUI components. Once your layout is ready, click the purple "Modify with AI" icon to make refinements. For instance, you can select a button and type, "change variant to outlined," instead of manually adjusting it. After finalizing the layout, you can expand it further by adding more MUI components.

Using AI Layouts with MUI Components

Once your base layout is generated, you can elevate it by incorporating additional MUI components. Need a date picker for user input? Drag and drop it into your form. Want a data grid to display user data? Add it alongside your other elements. Each component retains its interactive, production-ready functionality, ensuring a seamless experience throughout.

This approach not only bridges the gap between design and development but also significantly speeds up the entire process. Teams that once spent months on design can now design, test, and deliver products within the same timeframe.

"It used to take us two to three months just to do the design. Now, with UXPin Merge, teams can design, test, and deliver products in the same timeframe." – Erica Rider, UX Architect and Design Leader

sbb-itb-f6354c6

Adding Interactions and Testing

Once your layout is ready, it’s time to make it interactive. Use States, Variables, and Conditional Interactions to simulate user behaviors. These tools let you create prototypes that mimic real interactions, like hover effects on buttons or form validation. Set up specific interactions to make your prototype feel alive and engaging.

Building Interactions in UXPin Merge

You can define interactive states – like hover, active, or focused – for your MUI components. For instance, you can configure an MUI TextField to show a blue border when focused or make a Button change color on hover. Variables allow you to simulate dynamic data, while Conditional Interactions help you replicate more complex user flows, such as form submissions or navigating between screens.

The AI Helper simplifies this process even further. Select a component, click the purple "Modify with AI" icon, and type instructions like "add a blue border when focused." The AI instantly updates the component based on your input. For more intricate interactions, keep your prompts short and precise to ensure the best results.

Testing and Improving Your Prototypes

Once your interactions are in place, test every component thoroughly to ensure smooth user flows. Prototypes created with production-ready MUI components provide a realistic feel during user testing, delivering actionable feedback from users and stakeholders.

When feedback rolls in, the AI Helper makes adjustments quick and easy. Just describe the changes you need – whether it’s tweaking spacing, adjusting styles, or changing text – and watch the updates happen instantly. This fast iteration process allows you to refine your prototypes during or right after feedback sessions. As Larry Sawyer, Lead UX Designer, noted:

"When I used UXPin Merge, our engineering time was reduced by around 50%."

For technical validation or collaboration with developers, you can export your prototypes directly to StackBlitz for seamless code review and handoff.

Finalizing and Exporting Prototypes

Maintaining Design and Code Consistency

UXPin Merge makes it easier to align design and development by using the exact same React components throughout the process. When you prototype with MUI components, you’re essentially working with production-ready code that performs the same way in both design and development environments.

This creates a single source of truth for your team. There’s no need for translation, guesswork, or rebuilding designs from scratch. As Erica Rider, UX Architect and Design Leader, puts it:

"It used to take us two to three months just to do the design. Now, with UXPin Merge, teams can design, test, and deliver products in the same timeframe."

With production-level interactivity built into the components, your prototypes reflect the final product with functional fidelity. This ensures fewer errors and eliminates redundant work during the transition to development.

Once your prototype is ready, you can export it for a smooth developer handoff.

Exporting Prototypes for Developers

After finalizing your prototype, you can export clean JSX code that’s ready for integration. Developers can directly copy this code and add it to the codebase without needing to recreate anything manually. The platform also generates design specs, CSS details, and style guides, giving developers instant access to everything they need.

Instead of handing over static design files that might be open to interpretation, you’re delivering ready-to-use JSX that aligns perfectly with your production design system. Developers can inspect the code, download specs, and implement designs without relying on extra plugins or file-sharing tools. For additional collaboration or technical validation, prototypes can also be exported to StackBlitz, making code reviews seamless and efficient.

Conclusion

Claude Haiku 4.5, MUI, and UXPin Merge reshape the prototyping process by enabling the use of production-ready React components that generate clean JSX for immediate integration. This approach removes the traditional gap between design and development, ensuring the entire team works from a single, unified source of truth. The result? A streamlined workflow that connects design and development like never before.

With product development speeds increasing by up to 8.6x, the impact is clear. As Allison Barkley puts it, "Being able to jump straight from design to having code ready is going to be a huge time-saver for our team". This workflow not only accelerates development but also redefines how teams approach efficiency.

The AI-powered tools enhance collaboration for both designers and developers. Designers can experiment with code-backed prototypes, while developers can validate decisions in real time – all while maintaining consistency within the design system. This means faster iterations without sacrificing quality.

By combining AI-driven layouts with MUI components in UXPin Merge, teams can create scalable design systems that ensure consistency across products. Prototypes built today serve as precise blueprints for production, bridging the gap between what gets designed and what gets shipped.

This marks a shift toward component-driven design, where speed, alignment, and code consistency are no longer competing goals – they’re integral to the process from the very beginning.

FAQs

Do I need to know React to use this workflow?

To work with this workflow, knowing React isn’t a must. You can easily prototype using production-ready MUI components in UXPin Merge, even if you don’t have coding experience. While certain steps involve React components, the primary focus is on syncing and utilizing these components with tools like Claude Haiku 4.5. Having some knowledge of React can be helpful, but it’s not essential for building prototypes.

How do I connect my MUI components to UXPin Merge?

To integrate MUI components with UXPin Merge, you’ll need to connect your MUI React component library through the npm integration process. Simply add the npm package name (like @mui/material) and specify the version you want directly in UXPin’s editor or the Merge tab. Once the setup is complete, you can design using fully interactive, production-ready components. This ensures your prototypes maintain both consistency and real-world functionality.

Can I export clean JSX developers can ship?

With UXPin Merge and advanced tools like Claude Opus 4.5 or GPT-5.1, you can produce production-ready JSX code that developers can use right away. These workflows enable you to build prototypes using actual, code-based components. This approach minimizes the need for manual handoffs or redlining, making the development process smoother and more efficient.

Related Blog Posts

• How to prototype using Claude Opus 4.5 + MUI – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + shadcn/ui – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Ant Design – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Custom Design Systems – Use UXPin Merge!

Prototyping with Claude Sonnet 4.5 and UXPin Merge bridges the gap between design and development by enabling teams to create production-ready prototypes directly from their design systems. Here’s what you need to know:

• Claude Sonnet 4.5: An AI tool with a 200,000-token context window, optimized for coding and handling complex design systems.
• UXPin Merge: A platform that lets you sync live React components from Git, Storybook, or npm to create functional prototypes.
• Key Benefits:
  • Prototypes are built using actual production components, reducing rework.
  • Teams report up to 26% productivity gains and a 44% reduction in vulnerability intake time.
  • AI-generated layouts can be refined with UXPin’s visual editor and interactivity tools.

Steps to Get Started:

1. Set up your design system in UXPin Merge using Git, Storybook, or npm.
2. Use Claude Sonnet 4.5 to generate layout code from prompts or mockups.
3. Import the code into UXPin Merge, refine it visually, and add interactivity.
4. Test, iterate, and export clean React code ready for development.

This streamlined approach significantly cuts down prototyping time while maintaining alignment between design and development. Keep reading for detailed setup instructions and practical examples.

UXPin Merge AI: Smarter UI Generation That Follows Your Design System

sbb-itb-f6354c6

Prerequisites for Using Claude Sonnet 4.5 with UXPin Merge

Before you dive into prototyping, make sure you have everything you need: a UXPin account with Merge access, an Anthropic account for Claude Sonnet 4.5, Node.js 18 or higher (with npm or yarn), a modern browser like Chrome (version 100 or later), Git access, and a stable internet connection with latency under 200ms. You can access Claude Sonnet 4.5 through Anthropic‘s platform at claude.ai or via their API at platform.anthropic.com. Paid plans start at $3 per million input tokens, while the free tier offers limited access with a 200,000-token context window. For enterprise teams needing more scalability, platforms like Azure AI Foundry or OpenRouter provide extended API options.

Setting Up a Custom Design System in UXPin Merge

UXPin Merge works with both pre-integrated libraries and custom design systems. If you’re using pre-built libraries like MUI, Ant Design, Bootstrap, or shadcn/ui, you can connect them directly from UXPin’s library marketplace. This eliminates the need for additional imports or AI accounts, allowing you to get started quickly with production-ready components.

For custom design systems, the process is straightforward:

• Log into UXPin and create a new Merge project.
• Connect your component library via one of these methods:
  • Git integration for React or Web components.
  • Storybook integration, which supports over 15 frameworks like Vue and Angular.
  • Direct npm package import.

For instance, to integrate MUI, install the @mui/material package through the Merge console. Then, run the command uxpin-merge sync in your local repository or use UXPin’s GitHub integration to automate the syncing of components.

Once your components are synced, map their props in UXPin’s editor. Start by testing a single component to minimize errors – this approach can reduce setup mistakes by 30% in enterprise workflows, helping you identify version conflicts or prop mismatches early. If you encounter sync issues, restart the Merge daemon or double-check your uxpin.config.js.

"We synced our Microsoft Fluent design system with UXPin’s design editor via Merge technology. It was so efficient that our 3 designers were able to support 60 internal products and over 1,000 developers." – Erica Rider, UX Architect and Design Leader

Configuring Claude Sonnet 4.5 for Prototyping

In the UXPin Editor, go to the Quick Tools panel, open the AI Component Creator’s Settings tab, and paste your API key. If you’re using Anthropic’s API directly, generate your key from their console at platform.anthropic.com.

Next, in the Prompt tab, select Claude Sonnet 4.5 from the model dropdown. This version is optimized for coding and agentic tasks, offering a 200,000-token context window (expandable to 1 million tokens in beta). It can handle entire design system documentation and extensive component libraries. Adjust the temperature parameter to around 0.7 for a balance between creativity and precision. If you’re refining layouts from screenshots or mockups, enable vision capabilities.

When writing prompts, be as specific as possible about your UXPin Merge components. For example, instead of saying, "create a dashboard", try something like:
"Generate React code for a responsive dashboard using MUI Grid and Cards with a 16px font size and 2px solid bottom borders."
This level of detail ensures Claude generates layouts that align perfectly with your design system. Developers have reported a 44% improvement in detecting vulnerabilities during prototyping when using Sonnet 4.5, making it an excellent tool for enterprise teams prioritizing security and compliance.

Once you’ve completed these steps, you’re ready to start generating prototypes with Claude Sonnet 4.5 and UXPin Merge.

How to Prototype with Claude Sonnet 4.5 and UXPin Merge

With your setup ready, you’re all set to create prototypes that blend AI-generated layouts with production-ready components. The workflow involves generating initial layouts using Claude Sonnet 4.5, refining them in UXPin Merge’s visual editor, and adding interactivity to build fully functional prototypes. This approach can speed up product development by up to 8.6 times while cutting engineering time by nearly 50%. Here’s a step-by-step guide to get started.

Step 1: Generate Prototype Layouts with Claude Sonnet 4.5

Start by opening the AI Component Creator in UXPin’s Quick Tools panel and navigating to the Prompt tab. Here, you’ll enter a detailed prompt outlining the design system components, layout structure, and constraints. For example: "Create a login page layout using our custom AuthButton, FormInput, and Header components; ensure mobile responsiveness and export as clean JSX for UXPin Merge import."

The more detailed your prompt – such as including hex codes, spacing (e.g., 16px padding), and typography – the better the AI will perform.

You can also upload wireframes or mockups directly into the AI Component Creator. Simply paste a screenshot of your design and include a text prompt to clarify missing details, like interactivity or specific spacing. Claude Sonnet 4.5’s ability to analyze visuals allows it to transform low-fidelity wireframes into functional, code-backed components. For complex designs, providing clear and detailed prompts minimizes the need for manual adjustments later.

Step 2: Refine Layouts with UXPin Merge

Once you have your AI-generated layout, import the JSX or HTML output into UXPin Merge using its code import feature. Map these components to your design system library in Merge’s component panel and fine-tune the styles, spacing, and responsiveness using the visual editor. This process ensures that the design stays aligned with your system while maintaining its original intent.

If you notice any issues – like incorrect button variants or missing properties – you can fix them directly in the properties panel or use the "Modify with AI" tool. For example, you can type instructions like "add 20px padding" or "switch button to primary theme" to make quick adjustments.

Preview your layout in Merge’s browser to check for pixel-perfect alignment. This step ensures that your design integrates seamlessly with production components, reducing manual rework by up to 44% in similar workflows. While Claude Sonnet 4.5 handles much of the heavy lifting, you may still need to manually refine complex elements like conditional logic or variable-specific details.

Step 3: Add Interactivity and Logic

With your refined layout ready, it’s time to incorporate interactivity. UXPin Merge allows you to add variables and conditional interactions to handle complex logic. For instance, you can define variables like userLoggedIn: boolean or cartQuantity: number in the Variables panel. Then, set up visibility rules such as "if userLoggedIn, show Dashboard else Login." Use the Logic Canvas to visually connect components to events like button clicks or form submissions.

For a dashboard prototype, you might include logic like {if (data.loading) show Spinner else MetricsGrid} to simulate real-world conditions. You can also integrate APIs to bring in dynamic content, ensuring your prototype behaves like the final product. This step ties everything together, turning your prototype into a deployable product. By adding these interactive elements, you streamline the design-to-code handoff, saving developers from having to recreate functionality from scratch.

Example: Building a Dashboard Prototype

This example walks through creating an analytics dashboard for a SaaS platform. Using Claude Sonnet 4.5 and UXPin Merge, the goal is to produce a prototype that aligns with your custom design system and is ready for production.

Define Requirements and Generate the Initial Design

Start by defining the requirements for your dashboard. Open the AI Component Creator in UXPin and choose Claude Sonnet 4.5 from the dropdown menu. Then, create a detailed prompt outlining the structure:

"Design an analytics dashboard with a left sidebar for navigation, a top metrics header showing four KPI cards, a data grid for user activity, and a line chart for monthly trends. Use Material Design components, 16px spacing, #1976D2 for primary actions, and ensure the layout fits within a 1440px-wide container."

"Claude Sonnet 4.5 is our most intelligent model for creating work deliverables. With code execution and file creation, Claude can build presentations, spreadsheets, and documents faster and with higher quality than before." – Anthropic

For more complex dashboards, enable Extended Thinking to guide the model through multi-step layout tasks. With a 96.2% accuracy rate in chart and figure comprehension (VLAT score of 50.17), Claude Sonnet 4.5 can analyze visual mockups and generate React code structures. To improve accuracy, break the project into smaller tasks, such as "sidebar navigation", "data grid", and "analytics header", instead of tackling everything at once.

Customize and Connect Components

Once Claude generates the JSX output, import it into UXPin Merge and sync it with your custom React design system using Git, Storybook, or npm. Use the Properties Panel to check that the components meet your development standards.

If changes are needed, click the "Modify with AI" icon and provide specific instructions like "Change the KPI card border to 2px solid #E0E0E0" or "Add 20px padding to the metrics header". This AI-driven tool allows you to tweak visual styles, layouts, and typography without manual coding.

"Claude Sonnet 4.5 produces smoother, more consistent designs that match your style." – UXPin

With a 77.04% Pass@1 rate on 4,442 functional coding tasks, the components typically require minimal manual adjustments. Focus your efforts on fine-tuning enterprise-specific needs like accessibility, responsive design, and brand-specific tokens. After refining, validate interactivity and ensure the prototype is ready for production.

Test and Iterate for Production Readiness

Preview the dashboard in UXPin’s browser to test interactivity and responsiveness. Add conditional logic to simulate real-world scenarios by defining variables such as dataLoading: boolean. For example, configure the dashboard to show a spinner while data is loading and display the metrics grid once loading is complete. Test user flows like filtering data or switching chart views to confirm production-ready behavior.

Export the React code and validate it in your development environment to ensure proper calculations and layout consistency. While Claude Sonnet 4.5 includes self-testing capabilities to catch bugs during generation, always have your development team review the code. Early testing has shown that Claude Sonnet 4.5 reduces vulnerability intake time by 44% and increases accuracy by 25%.

"We went from 9% error rate on Sonnet 4 to 0% on our internal code editing benchmark. Higher tool success at lower cost is a major leap for agentic coding." – Canva

Use UXPin’s version history to save milestones throughout the process. This feature ensures you can revert to earlier versions if needed. By following these steps, your dashboard will not only look polished but also meet functional standards, eliminating the usual challenges of translating designs into production-ready code.

Conclusion

Pairing Claude Sonnet 4.5 with UXPin Merge redefines enterprise prototyping by enabling teams to work directly with production-ready components. This eliminates the need to recreate designs from scratch, bridging the gap between design and development. The result? Product development speeds up by 8.6X compared to traditional workflows.

The process generates clean React code that integrates seamlessly into your development environment. With Claude Sonnet 4.5, your designs are smoother and more consistent, aligning perfectly with your unique style. This allows teams to concentrate on improving user experiences instead of spending time on tedious manual adjustments.

"Being able to jump straight from design to having code ready to going to be a huge time-saver for our team." – Allison Barkley, Director of Operations, Baremetrics

This method also supports scalable design systems with full auditability. By syncing custom design systems from Git or Storybook, teams can ensure consistency and align prototypes with development standards. Additionally, the AI captures component dependencies during design handoff, cutting down on the need for extensive manual documentation.

FAQs

What should I include in prompts so Claude uses my design system components?

To make sure Claude incorporates your design system components, provide detailed and precise instructions in your prompts. Clearly reference your design system or component library by name (like MUI, Ant Design, or custom components) and specify that the output should adhere to its guidelines. For instance, you could say: "Generate a layout using my custom design system components." Be sure to emphasize that the components need to be production-ready and fully aligned with your design system standards.

How do I fix prop mismatches or sync errors in UXPin Merge?

To address prop mismatches or sync issues in UXPin Merge, it’s crucial to carefully validate and parse user inputs. This means ensuring that inputs are managed correctly, even when they don’t match the expected format – like hex color codes entered without the "#" symbol. You can make adjustments to component properties directly in the Properties Panel or regenerate components using precise prompts to correct discrepancies. By focusing on proper validation and error handling during prop parsing, you can maintain smooth synchronization between design and code, reducing the likelihood of errors.

Can I export the prototype as clean React code for my dev team?

With UXPin Merge, you can export prototypes as clean, production-ready React code, making it easier for your development team to implement designs. By using real code components, prototypes function just like the final product, ensuring a smooth transition from design to development.

On top of that, AI tools such as Claude Sonnet 4.5 can help generate React-based layouts and components. This added capability simplifies the workflow, speeding up the development process significantly.

Related Blog Posts

• How to prototype using Claude Opus 4.5 + MUI – Use UXPin Merge!
• How to prototype using Claude Opus 4.5 + shadcn/ui – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + shadcn/ui – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Ant Design – Use UXPin Merge!

In this article, you’ll learn how to streamline your design-to-development workflow using Claude Sonnet 4.5, Bootstrap, and UXPin Merge. This approach eliminates the need for manual handoffs by generating production-ready React Bootstrap components directly on the design canvas. Designers can create interactive prototypes that developers can implement without translation, reducing engineering time by up to 50% and speeding up product development by as much as 8.6x.

Key Takeaways:

• Claude Sonnet 4.5 generates React Bootstrap components with clean, usable code.
• UXPin Merge integrates these components into interactive prototypes, syncing designs with production code.
• Teams save time, avoid inconsistencies, and maintain alignment between design and development.
• The process supports enterprise-scale projects by ensuring scalability and consistency across design systems.

This guide covers everything from setup to creating components, testing code, and syncing prototypes. By the end, you’ll be equipped to build efficient workflows that bridge the gap between design and development.

UXPin Merge Tutorial: User Interface (2/5)

sbb-itb-f6354c6

Setup and Prerequisites

To get started, you’ll need a UXPin Merge account, access to Claude Sonnet 4.5, and a properly configured local development environment. Since UXPin already includes native Bootstrap integration, there’s no need to manually import it unless you’re working with a custom library.

According to UXPin’s documentation, integrating a React design system can take anywhere from 2 hours to 4 days, depending on its complexity. However, with Bootstrap, the process is much quicker since the library is already pre-integrated.

Setting Up UXPin Merge

UXPin Merge is available with all paid plans, starting at $29/month for the Core tier. If you need advanced AI tools like Claude Sonnet 4.5 and enterprise-level design system features, you’ll want to upgrade to the Growth plan, which costs $40/month or more. The Growth plan also includes 500 AI credits per month, Storybook integration, and robust design system features.

Once your account is ready, you’ll find Bootstrap components preloaded in UXPin’s coded libraries. Simply go to the Merge Component Manager in the UXPin Editor. There, you can access react-bootstrap components like Button, Accordion, or Card, all of which are interactive and production-ready.

Setting Up Claude Sonnet 4.5

To enable AI-powered component creation, you’ll need an OpenAI API key. Visit the OpenAI website to create an account (if you don’t already have one) and obtain your API key. Enter this key in the AI Component Creator settings.

Once authenticated, select "Claude Sonnet 4.5" from the model dropdown in the settings. This version is known for generating designs that are "smoother and more consistent with your style" compared to earlier models like Sonnet 4 or GPT-3.5. Be aware that longer prompts might slow down generation times, as performance depends on the AI platform’s response speed.

If you’re planning to work with custom libraries, you’ll need to configure your local development environment. Details on how to do this are covered in the next section.

Local Development Environment

For teams using custom component libraries, setting up a local development environment is essential. Follow these steps:

• Install the UXPin Merge CLI as a development dependency:

  npm install @uxpin/merge-cli --save-dev 

• Ensure you have React.js version ^16.0.0 or higher and Webpack version ^4.6.0 installed. These tools are necessary for bundling JavaScript, CSS, and other assets.
• Create a uxpin.config.js file in your project root to define component categories and Webpack configurations. Then, run the following command to render components locally for the first time:

  uxpin-merge --disable-tunneling 

For production environments, integrate the Merge CLI with CircleCI or Travis CI. Use the uxpin-merge push command along with an UXPIN_AUTH_TOKEN environment variable to ensure your design tool stays synced with every code update. For optimal results, use Google Chrome as your browser.

Creating Bootstrap Components with Claude Sonnet 4.5

With your environment set up, you can now use Claude Sonnet 4.5 to generate React-Bootstrap components directly on the design canvas. This streamlined process removes the hassle of toggling between applications or handling separate API keys – everything happens seamlessly within UXPin.

Now, let’s focus on how to write prompts that deliver the best results.

Writing Effective Prompts

When crafting prompts, be as specific as possible. Include details like exact hex codes, spacing values, interaction states, and ensure you explicitly request React-Bootstrap standards to guarantee smooth integration. For instance, you might say: "Create a primary Bootstrap button with a #0d6efd background, 12px padding, and a darker blue border on hover using only React-Bootstrap components – no external CSS files."

"It’s important to review the results and make any necessary refinements. If the initial output is not as expected, experiment with different wording, structures, or additional details until you achieve the desired outcome." – UXPin

For more intricate layouts, break your prompt into smaller tasks. For example, when designing a dashboard, start with the navigation bar, then move to the sidebar, and finally tackle individual cards. This step-by-step approach minimizes errors and makes it easier to refine each component. While Claude Sonnet 4.5 can focus on multi-step tasks for over 30 hours, starting small gives you more control over the outcome.

If your instructions are unclear, Claude will ask for clarification instead of making assumptions, helping to avoid irrelevant results.

Once you’ve mastered prompt writing, you’re ready to build more complex UI components.

Building Complex UI Components

For detailed dashboards or multi-step forms, enable the Extended Thinking feature in Claude’s settings. Be precise with measurements and follow your brand guidelines. For example: "Create a consulting-style dashboard card with 16px margins, a #f8f9fa background, and a subtle 1px border using Bootstrap’s utility classes." The more detail you provide, the fewer iterations you’ll need to perfect the design.

"Claude Sonnet 4.5 is our most intelligent model for creating work deliverables. With code execution and file creation, Claude can build presentations, spreadsheets, and documents faster and with higher quality than before." – Anthropic

If your project relies on existing brand assets, upload templates so Claude can align with your specific standards. This is especially helpful for enterprise teams aiming for consistency across products. You can also use the AI Helper tool to adjust elements like button colors or spacing without rewriting the entire prompt.

Testing Generated Code

Before importing components into UXPin Merge, it’s essential to test the AI-generated code. Tools like StackBlitz are perfect for checking JSX structure and ensuring all necessary React dependencies are in place. This step helps catch issues like missing imports or incorrect prop types early.

If adjustments are needed, use concise follow-up prompts with the AI Helper, such as "Make the card shadow more subtle" or "Increase the font size to 18px". This method saves time while taking advantage of Claude Sonnet 4.5’s 0% error rate on internal code editing benchmarks.

Once you’re satisfied with the code and confident it meets your standards, integrate it into UXPin Merge to start building interactive prototypes effortlessly.

Importing and Prototyping in UXPin Merge

Once your Bootstrap components are tested and ready, bringing them into UXPin Merge is quick and straightforward. These components become instantly accessible on your canvas, ready for customization. This integration allows you to sync your custom components efficiently, ensuring a smooth workflow.

Syncing Bootstrap Components

If you’ve created custom Bootstrap components with Claude Sonnet 4.5 outside of UXPin, the npm integration makes syncing them simple. Use the Merge Component Manager to connect your react-bootstrap package and include the CSS path (bootstrap/dist/css/bootstrap.min.css) to ensure proper rendering. From there, you can map React props like variant or size to UI controls in the Properties Panel. This setup makes it easy for designers to tweak button styles or card layouts without needing to dive into the code.

For components built directly in UXPin using the AI Component Creator, they’re immediately code-backed and ready to use. Organize these components into categories like navigation, forms, or cards to help your team locate what they need quickly. Syncing ensures that your designs remain consistent from the prototype stage all the way to production.

Building Interactive Prototypes

With your synced components in place, creating interactive prototypes becomes a breeze. You can add behaviors like form validation, accordion toggles, or modal pop-ups using UXPin’s built-in logic tools. To test responsiveness, switch between desktop, tablet, and mobile views to confirm that the Bootstrap grid adjusts correctly across different screen sizes.

If you need to make quick changes – like tweaking padding or updating button text – the Modify with AI tool lets you iterate directly within UXPin. This eliminates the need to return to your code editor, keeping your workflow efficient.

Preparing for Developer Handoff

Once your interactive prototypes are complete, you can simplify the developer handoff process. UXPin Merge provides a single link that includes the prototype, full specifications, and production-ready JSX code. Developers can either copy the code directly or open the project in StackBlitz for immediate front-end development.

Because the prototypes use the same Bootstrap components as production, there’s no need for a translation layer – what the designers create is exactly what developers will implement. Include paths to Bootstrap CSS files and any custom tokens in your documentation to ensure developers have all the resources they need. This approach can reduce clarification requests by 80% and improve estimate accuracy by 50%, making the process smoother for everyone involved.

Maintaining Consistency and Scalability

As your design system expands across multiple products and teams, keeping prototypes consistent becomes increasingly important. UXPin Merge simplifies this by using automatic syncing to directly connect your design updates to your Git repository or npm library. For example, if your development team updates Bootstrap components in the codebase, those changes automatically appear in UXPin. This eliminates the need for manual updates, ensuring your design and code stay perfectly aligned. This seamless synchronization not only preserves visual consistency but also keeps prototypes production-ready at every stage of development. It’s the foundation for building a scalable and reliable design system.

Using UXPin Merge Sync Features

UXPin Merge offers three powerful integration options to keep your Bootstrap components in sync:

• Git Integration: Ideal for custom React libraries, this connects directly to your repository.
• Storybook: Supports private design systems across frameworks like React, Angular, and Vue.
• npm Integration: Perfect for open-source libraries like Bootstrap, making components instantly accessible in your design canvas.

Each integration ensures that designers and developers work from the same components, creating a single source of truth. Updates in your codebase are automatically reflected in UXPin, eliminating version mismatches and manual imports.

Scaling Design Systems for Enterprise Teams

For large organizations, syncing alone isn’t enough – strong governance is key to managing enterprise-scale design systems. With hundreds of engineers involved, clear structures are needed to avoid bottlenecks. Erica Rider, a UX Architect and Design Leader, shared her experience:

"We synced our Microsoft Fluent design system with UXPin’s design editor via Merge technology. It was so efficient that our 3 designers were able to support 60 internal products and over 1,000 developers".

To streamline workflows, organize your Bootstrap components into well-defined categories like navigation, forms, cards, and modals. This helps teams quickly locate what they need. Additionally, assign roles and permissions to prevent unauthorized modifications to core components, ensuring consistency across the board.

Using AI for Bulk Updates

As design systems grow, making updates across all components can feel overwhelming. AI tools like the Modify with AI feature simplify this process by applying precise, system-wide changes in seconds. For instance, you can prompt the AI to "Update all primary buttons to use 16px padding and #0066CC background color", and it will make those adjustments across your project while adhering to Bootstrap’s structure. Since tools like Claude Sonnet 4.5 follow your design system rules, every update stays perfectly aligned with your production code. Breaking larger updates into smaller, measurable tasks ensures accuracy while maintaining the integrity of your design system.

Conclusion

Bringing together Claude Sonnet 4.5, Bootstrap, and UXPin Merge creates a seamless workflow that bridges design and development. Instead of relying on static mockups, teams can work with production-ready components that engineers can directly implement. This not only accelerates the process but also reshapes how enterprise teams collaborate.

Enterprise teams using this method have reported cutting engineering time by about 50% and speeding up product development by as much as 8.6x compared to older workflows. These gains directly impact costs and time-to-market, a game-changer for organizations managing large teams of designers and engineers.

What’s more, this approach ensures scalability without losing consistency. Claude Sonnet 4.5 generates clean, structured UI components that stick to your style guidelines, while UXPin Merge keeps prototypes perfectly aligned with your codebase. Whether you’re managing a few products or an extensive portfolio, everyone works from a single source of truth.

The design handoff process becomes almost invisible. Allison Barkley, Director of Operations at Baremetrics, summed it up well:

"Being able to jump straight from design to having code ready is going to be a huge time-saver for our team".

Developers receive JSX code and production-ready specifications, eliminating manual translation and reducing the need for revisions. This integrated workflow simplifies the entire design-to-development process.

For enterprise teams aiming to deliver faster without compromising quality, this combination offers both speed and dependability. It’s AI-driven efficiency that preserves design accuracy and consistency throughout.

FAQs

Do I need a custom Bootstrap library to use UXPin Merge?

No, you don’t need a custom Bootstrap library to work with UXPin Merge. The platform already comes with a built-in Bootstrap library, giving you access to real components like buttons, modals, and forms. All you have to do is activate the library in the Design Systems panel, and you can start designing right away – no extra setup required.

What’s the best prompt format for React-Bootstrap components?

When working with AI tools like Claude Sonnet 4.5 to create React-Bootstrap components in UXPin, clarity and detail are key. A well-crafted prompt should specify three main aspects: the component type, its styling, and desired functionality. For example, you might say: "Create a responsive React-Bootstrap button with primary styling and hover effects."

By being specific, you ensure the AI delivers components that fit seamlessly into your design system and meet your project’s requirements. This approach not only saves time but also simplifies the prototyping process by providing ready-to-use, code-backed components.

How do I keep prototypes synced with code updates?

To keep prototypes in sync with code updates in UXPin, UXPin Merge offers a real-time synchronization feature. This tool connects your design system directly to live React libraries or Git repositories, ensuring that any updates are instantly reflected in your prototypes. By keeping your repositories up to date, you can rely on this synchronization to maintain alignment, minimize manual adjustments, and simplify the design-to-development process.

Related Blog Posts

• How to Build Prototypes with Bootstrap
• How to prototype using Claude Opus 4.5 + Bootstrap – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + shadcn/ui – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + Ant Design – Use UXPin Merge!

Prototyping with Claude Sonnet 4.5, Ant Design, and UXPin Merge simplifies the design-to-development handoff process. These tools let you create interactive prototypes with production-ready React components, eliminating the gap between design and code. Released in September 2025, Claude Sonnet 4.5 uses AI to generate layouts and refine designs based on your text prompts, all while staying aligned with Ant Design’s component library.

Key Takeaways:

• Claude Sonnet 4.5: Converts text prompts or mockups into React-based prototypes.
• Ant Design: Provides a library of pre-built, production-ready components.
• UXPin Merge: Integrates these tools, enabling real-time prototyping with actual code.

Steps to Get Started:

1. Subscribe to UXPin for access to Ant Design and AI tools.
2. Enable Claude Sonnet 4.5 by linking your API key.
3. Use text prompts to create layouts and refine them with Ant Design components.
4. Add interactions and test your prototype instantly.
5. Export clean React code for seamless developer handoff.

Why It Works: By using actual code components instead of static mockups, teams reduce engineering time by up to 50% and speed up product development by over 8x. This workflow ensures consistency, minimizes handoff issues, and keeps designs aligned with development standards.

Pro Tip: Write clear, specific prompts for better AI results, and use Ant Design to maintain design consistency across projects.

UXPin Merge Tutorial: Intro (1/5)

sbb-itb-f6354c6

Setting Up Your Workspace

Before diving into prototyping, make sure your UXPin account is ready and AI tools are enabled. With UXPin Merge, Ant Design is already integrated – no need to download or import anything. This means you can start designing with production-ready React components right away. Follow these steps to get your workspace set up and tools activated.

Getting Access to UXPin and Ant Design

To unlock UXPin Merge’s full capabilities – including the AI Component Creator and Patterns – you’ll need a subscription. Here’s a quick breakdown:

• Core Plan: Starts at $29/month. Includes basic AI models with 200 AI credits per month.
• Growth Plan: Priced at $40/month. Offers advanced AI models and 500 credits monthly.
• Enterprise Teams: For unlimited AI credits and custom component libraries, reach out to sales@uxpin.com for tailored pricing.

Once you’ve signed up, create a new project to access the built-in Ant Design library. This library includes a full suite of components – like buttons, forms, tables, and navigation elements – all ready to use. Just drag them onto your canvas, no extra setup needed.

Enabling Claude Sonnet 4.5 in UXPin Merge

To use Claude Sonnet 4.5, open the AI Component Creator in the Quick Tools panel. Head to the Settings tab and paste your API key from Anthropic. After setup, simply select "Claude Sonnet 4.5" from the dropdown menu of AI models.

This version produces smoother, more consistent designs, making it perfect for enterprise teams that require reliable, on-brand results. You’ll notice a purple "Modify with AI" icon in the component info section when you select an Ant Design component. With this feature, you can tweak styles, layouts, or content using straightforward text prompts.

This tool has been shown to cut engineering time by nearly 50%.

Connecting Custom Component Libraries (Optional)

If your team uses a custom design system or a modified version of Ant Design, you can sync it through Git repositories, Storybook, or npm integration. Once connected via npm, click "Publish Library Changes" and refresh your browser to ensure everything updates correctly. Custom components will function just like the built-in libraries, including full AI Helper support for text-prompt modifications.

How to Build a Prototype with Claude Sonnet 4.5 and Ant Design

Once your workspace is set up, you’re ready to create prototypes that closely mimic production behavior. The process is simple: use Claude Sonnet 4.5 to generate layouts, refine them with Ant Design components, add interactions, and test them in real time. By designing with React components that are ready for production, you can skip the usual design-to-code gap.

Creating Layouts with Claude Sonnet 4.5

Start by generating layouts that feel production-ready. Open the AI Component Creator from the Quick Tools panel and select Claude Sonnet 4.5. You can create layouts by providing text prompts or uploading wireframes and mockups. The AI will automatically structure these layouts using Ant Design components.

Be specific with your prompts. For example, instead of saying, "create a dashboard", try something like:
"Create a dashboard with a left sidebar for navigation, a top header with a search bar, and a main content area displaying a data table of user activity."

Breaking down complex user interfaces into smaller sections – such as creating the sidebar first, followed by the header, and then the table – leads to more precise and detailed results.

If you already have a sketch or mockup, you can paste it directly into the AI Component Creator. Claude Sonnet 4.5 will analyze the image and generate the structure using Ant Design components like buttons, forms, tables, and navigation elements. Once the layout appears on your canvas, you can drag and drop additional components from the library to fine-tune it.

Editing Components and Adding Interactions

After your layout is ready, you can tweak any Ant Design component. Select a component and click the purple "Modify with AI" icon in the component info section. Use plain language to make adjustments, such as:

• "Change the button to ghost style with 12px padding."
• "Make the label text 16px and bold."

For interactions, the Properties Panel lets you configure component states and behaviors. Ant Design components come with built-in props, accessible through the Merge Component Manager, making it easy to set button types (e.g., primary, ghost, dashed), add modals, configure dropdowns, and even apply conditional logic. You can also use variables and expressions to make your prototype dynamic – for example, triggering a modal when a button is clicked or filtering table data based on a dropdown selection.

Testing Your Prototype

Your prototype is interactive right out of the box. Use the Preview button to test user flows in real time. Since you’re working with components aligned to production standards, features like form submissions, navigation, and state changes behave just as they would in the final product.

For a final review, export your prototype to StackBlitz or check the clean JSX/React code to ensure it meets technical specifications. According to UXPin, using coded components and AI-driven prototyping can make product development up to 8.6 times faster compared to traditional workflows.

"AI turns a simple prompt or image into production-like UI that follows your rules and component structure. Every idea starts closer to production, so your first drafts already look and behave like real product UI." – UXPin

Tips for Working with Claude Sonnet 4.5 and Ant Design

Writing Better Prompts for AI

Getting the most out of Claude Sonnet 4.5 starts with crafting clear and detailed prompts. The more specific you are, the better the AI can deliver. For example, instead of saying, "Create a form", provide a detailed description like: "Design a login form with a username field, a password field that includes a visibility toggle, a primary button labeled ‘Sign In,’ and a text link below for password recovery."

Want to refine the design further? Include exact details such as hex color codes, font sizes (e.g., 16px bold), or padding values (e.g., 12px). When working on complex layouts, break them into smaller sections. For instance, start with the navigation bar, then move to the content area, and finish with the footer. This step-by-step approach helps the AI focus on each part, ensuring accurate results.

For visual references, high-fidelity mockups can be particularly helpful since they allow the AI to interpret typography and spacing automatically. On the other hand, low-fidelity sketches can work well too – just make sure to pair them with detailed written instructions for clarity.

Keeping Your Design System Consistent

Using Ant Design components ensures your prototypes stay aligned with production standards. Every element – be it buttons, form fields, or tables – follows the same design system that developers rely on. This eliminates "design drift", where prototypes might otherwise stray from what’s actually built.

To make adjustments without disrupting consistency, take advantage of the AI Helper. Instead of tweaking properties manually, simply describe the changes you need in plain language. This method ensures that updates stay within Ant Design’s structure, maintaining a cohesive look and feel across all your prototypes and the final product.

"When I used UXPin Merge, our engineering time was reduced by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers." – Larry Sawyer, Lead UX Designer

Scaling Prototyping Across Teams

For enterprise teams, consistency across projects is key. By connecting UXPin Merge directly to Ant Design, all designers can work from the same component library. This means prototypes are instantly familiar to developers, serving as a reliable spec for implementation.

Managing multiple projects? Use detailed, step-by-step instructions to keep quality high. Breaking down complex interfaces into smaller tasks allows Claude Sonnet 4.5 to generate components more accurately. When updates are needed across several prototypes, the AI Helper can apply changes in bulk – whether it’s adjusting styles or spacing – saving time and keeping everything uniform.

Conclusion

Claude Sonnet 4.5, Ant Design, and UXPin Merge are reshaping the prototyping process by combining AI-driven efficiency with production-ready consistency. Every prototype incorporates real Ant Design components, making the handoff from design to development seamless.

With AI-assisted prototyping and ready-to-use components, UXPin Merge users have reported cutting engineering time by 50% and accelerating product development by up to 8.6 times. At Microsoft, just three designers managed to support 60 internal products and over 1,000 developers by using Merge to maintain a single, code-based source of truth.

Claude Sonnet 4.5 takes this a step further by automating complex tasks. It transforms text prompts or images into structured layouts using Ant Design components, while the AI Helper allows quick iterations through natural language commands. This ensures your design system stays intact while enabling rapid adjustments.

For enterprise teams, this approach bridges the gap between design and development entirely. Developers receive prototypes as clean, production-ready JSX code, complete with dependencies and interactions. As Allison Barkley, Director of Operations at Baremetrics, explains:

"Jumping straight from design to ready-to-use code is a huge time-saver for our team."

This integrated workflow equips teams to work faster and with precision, ensuring consistent design systems and perfect alignment between designers and developers. The result? Streamlined processes and more efficient collaboration.

FAQs

What do I need before I can use Claude Sonnet 4.5 in UXPin Merge?

To use Claude Sonnet 4.5 in UXPin Merge, you’ll need the following:

• A UXPin Merge plan
• An Anthropic API key specifically for Claude Opus 4.5

Once you’ve got these, you can connect Claude Opus 4.5 to UXPin Merge. This integration allows you to sync your design system, create AI-powered components, and develop prototypes that align seamlessly with production code.

How do I keep AI-generated screens consistent with Ant Design rules?

To keep AI-generated screens consistent with Ant Design principles, integrate Ant Design components into UXPin Merge. These components are actual, production-ready React elements that stick to Ant Design’s design tokens, functionality, and behavior. When using Claude Opus 4.5 to generate components, make sure to guide the AI with prompts that reflect your design system standards. This method guarantees uniformity and alignment with Ant Design during prototyping.

Can developers use the exported React code as-is from my prototype?

Yes, developers can use the exported React code from your prototype without any extra steps. UXPin Merge creates production-ready JSX code that matches the final codebase, making implementation straightforward. This process connects design and development by generating real HTML, CSS, and JavaScript that work just like the final product. It simplifies workflows while ensuring everything stays consistent.

Related Blog Posts

• How to prototype using Claude Opus 4.5 + MUI – Use UXPin Merge!
• How to prototype using Claude Opus 4.5 + shadcn/ui – Use UXPin Merge!
• How to prototype using Claude Opus 4.5 + Ant Design – Use UXPin Merge!
• How to prototype using Claude Sonnet 4.5 + shadcn/ui – Use UXPin Merge!