{"id":58247,"date":"2026-02-19T03:50:33","date_gmt":"2026-02-19T11:50:33","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=58247"},"modified":"2026-02-18T20:58:06","modified_gmt":"2026-02-19T04:58:06","slug":"prototype-claude-sonnet-4-5-mui-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/","title":{"rendered":"How to prototype using Claude Sonnet 4.5 + MUI  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p>Prototyping faster and more accurately is possible by combining <strong><a href=\"https:\/\/www.anthropic.com\/claude\/sonnet\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a><\/strong>, <strong><a href=\"https:\/\/mui.com\/material-ui\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a><\/strong>, and <strong><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/strong>. Here\u2019s how it works:<\/p>\n<ol>\n<li><strong>Claude Sonnet 4.5<\/strong>: AI generates layouts based on prompts or images, ensuring they align with your design system.<\/li>\n<li><strong>MUI (Material-UI)<\/strong>: Offers over 90 <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> components that are production-ready, interactive, and accessible.<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong>: Bridges design and development by letting designers work directly with real React components.<\/li>\n<\/ol>\n<p>This workflow eliminates <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/convert-design-to-code-better-way\/\" style=\"display: inline;\">design-to-code translation<\/a>, reduces engineering time by up to 50%, and speeds up product cycles by 8.6x. Teams like Microsoft and <a href=\"https:\/\/www.paypal.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">PayPal<\/a> have used this approach to support large-scale projects with fewer resources.<\/p>\n<h3 id=\"key-steps\" tabindex=\"-1\">Key Steps:<\/h3>\n<ul>\n<li><strong>Integrate MUI with UXPin Merge<\/strong>: Import MUI components via npm, map props, and sync changes.<\/li>\n<li><strong>Activate Claude Sonnet 4.5<\/strong>: Use AI for layout generation and refinement, leveraging prompts or wireframe uploads.<\/li>\n<li><strong>Add Interactivity<\/strong>: Use UXPin features like <a href=\"https:\/\/www.uxpin.com\/studio\/webinars\/limitless-interactive-prototyping-with-variables-conditional-interactions-js-expressions\/\" style=\"display: inline;\">States, Variables, and Conditional Interactions<\/a> to simulate real user behavior.<\/li>\n<\/ul>\n<p>This method ensures prototypes are functional and ready for production, saving time and improving collaboration between designers and developers.<\/p>\n<h2 id=\"from-prompt-to-interactive-prototype-in-under-90-seconds\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">From Prompt to Interactive Prototype in under 90 Seconds<\/h2>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/yWZvBS7VV0o\" frameborder=\"0\" loading=\"lazy\" allowfullscreen style=\"width: 100%; height: auto; aspect-ratio: 16\/9;\"><\/iframe><\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"setting-up-your-environment\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Setting Up Your Environment<\/h2>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/699656b9efc60cc2af0825d4-1771472037096.jpg\" alt=\"How to Integrate MUI with UXPin Merge in 4 Steps\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">How to Integrate MUI with UXPin Merge in 4 Steps<\/p>\n<\/figcaption><\/figure>\n<p>Before diving into prototyping, you\u2019ll need to connect three essential tools: <strong>MUI&#8217;s component library<\/strong>, <strong>Claude Sonnet 4.5&#8217;s AI capabilities<\/strong>, and <strong>UXPin Merge<\/strong>. Since UXPin already includes MUI within its platform, you can start working with components right away. The setup process focuses on ensuring these tools work together seamlessly.<\/p>\n<h3 id=\"how-to-integrate-mui-with-uxpin-merge\" tabindex=\"-1\">How to Integrate <a href=\"https:\/\/mui.com\/material-ui\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a> with <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/699656b9efc60cc2af0825d4\/d3142ec09362e069d50f0ff40fa193b3.jpg\" alt=\"MUI\" style=\"width:100%;\"><\/p>\n<p>UXPin Merge comes with MUI components preloaded, but if you&#8217;re using a <strong>custom component library<\/strong> or want a deeper understanding of the integration process, here&#8217;s how to set it up using npm.<\/p>\n<ol>\n<li> Go to the <strong><a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-system-libraries\/\" style=\"display: inline;\">Design System Libraries<\/a><\/strong> tab in UXPin and select <strong>&quot;Import React Components.&quot;<\/strong> Enter <code>@mui\/material<\/code> as the Library package name &#8211; this is MUI&#8217;s official npm package. Only include the package name here. <\/li>\n<li> Once connected, open the <strong>Merge Component Manager<\/strong> to add specific components. Use MUI\u2019s documentation to find the correct component names, ensuring they start with a capital letter (e.g., <code>Button<\/code>, <code>TextField<\/code>, <code>BottomNavigation<\/code>). This step ensures components render properly in the editor. <\/li>\n<li> Map the <strong>React props<\/strong> for each component. For instance, a Button component might need props like <code>color<\/code>, <code>variant<\/code>, and <code>children<\/code> (the label text). Check MUI\u2019s Component API documentation for the correct property names &#8211; case sensitivity matters! In the Component Manager, assign the right <strong>Property control<\/strong> for each prop: use &quot;textfield&quot; for strings, &quot;select&quot; for enums, and &quot;boolean&quot; for toggles like <code>disabled<\/code>. <\/li>\n<li> After mapping the components and their properties, click <strong>&quot;Publish Changes.&quot;<\/strong> Wait until the status bar reaches 100%, then refresh the library to see your <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-prototype-setting-user-interactions-without-coding\/\" style=\"display: inline;\">interactive MUI components<\/a> in action. <\/li>\n<\/ol>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Integration Step<\/th>\n<th>Action Required<\/th>\n<th>Key Tool\/Resource<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>1. Connect Package<\/strong><\/td>\n<td>Enter <code>@mui\/material<\/code> in the Library package name field.<\/td>\n<td>UXPin New Library Modal<\/td>\n<\/tr>\n<tr>\n<td><strong>2. Add Components<\/strong><\/td>\n<td>Import elements using CamelCase (e.g., <code>Button<\/code>).<\/td>\n<td>Merge Component Manager<\/td>\n<\/tr>\n<tr>\n<td><strong>3. Map Properties<\/strong><\/td>\n<td>Define React props (e.g., <code>color<\/code>, <code>disabled<\/code>) and UI controls.<\/td>\n<td>MUI Component API Docs<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Sync &amp; Publish<\/strong><\/td>\n<td>Click &quot;Publish Changes&quot; and refresh the library.<\/td>\n<td>UXPin Editor<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>After setting up MUI, you\u2019re ready to configure Claude Sonnet 4.5 for AI-driven prototyping.<\/p>\n<h3 id=\"how-to-activate-claude-sonnet-45-for-prototyping\" tabindex=\"-1\">How to Activate <a href=\"https:\/\/www.anthropic.com\/claude\/sonnet\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a> for Prototyping<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/699656b9efc60cc2af0825d4\/f02e5beda6be05bbd59f26968733f231.jpg\" alt=\"Claude Sonnet 4.5\" style=\"width:100%;\"><\/p>\n<p>Now that MUI is integrated, it\u2019s time to set up Claude Sonnet 4.5. If you\u2019re on an Enterprise plan and need a custom API configuration, start by obtaining an <strong>API key<\/strong> from the <a href=\"https:\/\/www.anthropic.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Anthropic<\/a> API console.<\/p>\n<p>Use the Model ID <code>claude-sonnet-4-5<\/code> to ensure you\u2019re accessing the correct version. The standard API endpoint is <code>https:\/\/api.anthropic.com\/v1\/messages<\/code>. For headers, include <code>x-api-key<\/code> (your unique key) and <code>X-Title<\/code> (e.g., <code>uxpin-prototype<\/code>). Set the context window to <strong>200,000 tokens<\/strong> and the max output to <strong>64,000 tokens<\/strong> to handle complex UI generation.<\/p>\n<p>To test the connection, input &quot;Hello&quot; and verify the endpoint responds correctly. Be sure to save your API key in a secure password manager immediately after generating it &#8211; you may not be able to view it again.<\/p>\n<p>Claude Sonnet 4.5 operates on a pay-as-you-go pricing model:<\/p>\n<ul>\n<li><strong>$3 per 1M input tokens<\/strong><\/li>\n<li><strong>$15 per 1M output tokens<\/strong><\/li>\n<li><strong>$0.30 per 1M cached tokens<\/strong><\/li>\n<\/ul>\n<p>There\u2019s no monthly subscription fee beyond the credits you add to your account.<\/p>\n<h3 id=\"tools-and-resources-youll-need\" tabindex=\"-1\">Tools and Resources You&#8217;ll Need<\/h3>\n<p>To streamline your prototyping workflow, ensure you have the following resources ready:<\/p>\n<ul>\n<li> <strong>UXPin Account with Merge Access<\/strong>: This is necessary for working with code-backed components. UXPin offers a free trial for new users. Plans start with the <strong>Core plan<\/strong> at <strong>$29\/month<\/strong>, which includes basic AI models and 200 AI credits per month. The <strong>Growth plan<\/strong> at <strong>$40\/month<\/strong> provides advanced AI models and 500 AI credits. For custom AI credit limits and Git integration, Enterprise plans are available &#8211; contact sales@uxpin.com for details. <\/li>\n<li> <strong>MUI Component API Documentation<\/strong>: This is your go-to resource for finding correct component names and React props. Bookmark <code>mui.com\/material-ui\/api\/<\/code> for easy access. <\/li>\n<li> <strong>Merge Component Manager<\/strong>: This UXPin tool lets you import, manage, and configure React properties for MUI components. You\u2019ll find it directly within the UXPin editor. <\/li>\n<li> <strong>Claude Sonnet 4.5<\/strong>: This AI tool powers layout generation. If you\u2019re using the built-in Merge AI, no extra setup is needed. For custom integrations, you\u2019ll work with the Anthropic API. <\/li>\n<\/ul>\n<p>With these tools in place, you\u2019re equipped to create prototypes that transition effortlessly from design to production.<\/p>\n<h2 id=\"creating-your-first-prototype\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Creating Your First Prototype<\/h2>\n<p>Ready to bring your prototype to life? This section walks you through combining <strong>Claude Sonnet 4.5&#8217;s AI layouts<\/strong>, <strong>MUI components<\/strong>, and <strong>UXPin Merge&#8217;s interactivity tools<\/strong> to create a functional prototype.<\/p>\n<h3 id=\"generating-layouts-with-claude-sonnet-45\" tabindex=\"-1\">Generating Layouts with Claude Sonnet 4.5<\/h3>\n<p>Start by opening the <strong>UXPin Editor<\/strong> and selecting the <strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/generate-ui-with-ai\/\" style=\"display: inline;\">AI Component Creator<\/a><\/strong>. From the dropdown menu, choose <strong>Claude Sonnet 4.5<\/strong> &#8211; a model known for producing consistent, style-aligned designs. Fun fact: Claude Sonnet 4.5 boasts a <strong>61.4% success rate<\/strong> on the OSWorld benchmark for complex tasks and a flawless <strong>0% error rate<\/strong> on internal code editing tests, a major improvement from its earlier version.<\/p>\n<p>You can generate layouts by either describing your desired interface in the <strong>Prompt tab<\/strong> or uploading wireframes or mockups using the <strong>Image-to-Layout<\/strong> feature. Be specific in your instructions &#8211; mention form fields, component types, or spacing details to guide the AI.<\/p>\n<p>Once the layout is generated, use the purple <strong>AI Helper<\/strong> icon (&quot;Modify with AI&quot;) to make adjustments. For example, you can tweak spacing, update text, or refine styles with simple commands like \u201cincrease padding to 16px\u201d or \u201cchange the button variant to outlined\u201d. <strong>Pro Tip:<\/strong> Keep the component selected while processing commands. If the system slows down during busy times, consider switching to <a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">OpenAI<\/a> models like GPT-4.1 or GPT-3.5 for quicker results.<\/p>\n<p>After finalizing the layout, it&#8217;s time to add and customize MUI components.<\/p>\n<h3 id=\"designing-with-mui-components-in-uxpin-merge\" tabindex=\"-1\">Designing with MUI Components in <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/699656b9efc60cc2af0825d4\/4e83940c20951ab53c08feda6b08b2a3.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>With your layout ready, enhance it by incorporating MUI components. UXPin comes preloaded with MUI\u2019s library, so you can simply drag and drop elements like <code>Button<\/code>, <code>TextField<\/code>, or <code>Card<\/code> onto your canvas. These components are production-ready and include preset states like hover, active, and disabled.<\/p>\n<p>To customize, use the <strong>Properties Panel<\/strong>, which maps React props to visual controls. For instance, with a Button, you can adjust:<\/p>\n<ul>\n<li><strong>Color<\/strong>: Choose between primary, secondary, or success.<\/li>\n<li><strong>Variant<\/strong>: Select from contained, outlined, or text.<\/li>\n<li><strong>Size<\/strong>: Opt for small, medium, or large.<\/li>\n<li><strong>Children<\/strong>: Edit the button label text.<\/li>\n<\/ul>\n<p>Teams using UXPin Merge have reported designing, testing, and delivering products <strong>8.6x faster<\/strong> compared to traditional workflows. Larry Sawyer, Lead UX Designer, shared that integrating Merge cut engineering time by around <strong>50%<\/strong>.<\/p>\n<p>You can also use the <strong>AI Helper<\/strong> with MUI components to make changes effortlessly. Select any element and issue natural language commands like, \u201cchange the button color to success and make it large\u201d or \u201cadd a 2px solid bottom border to the TextField.\u201d This feature supports React libraries like MUI, <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a>, <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Bootstrap<\/a>, and <a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Tailwind<\/a>.<\/p>\n<p>With your layout and styling complete, the next step is to add interactivity.<\/p>\n<h3 id=\"adding-interactivity-and-logic\" tabindex=\"-1\">Adding Interactivity and Logic<\/h3>\n<p>To simulate real user interactions, leverage UXPin\u2019s four core features: <strong>States<\/strong>, <strong>Variables<\/strong>, <strong>Expressions<\/strong>, and <strong>Conditional Interactions<\/strong>.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Feature<\/th>\n<th>Function<\/th>\n<th>Application Example<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>States<\/strong><\/td>\n<td>Defines component variants<\/td>\n<td>Showing a button as &quot;Loading&quot; or &quot;Disabled&quot; after a click.<\/td>\n<\/tr>\n<tr>\n<td><strong>Variables<\/strong><\/td>\n<td>Stores user data<\/td>\n<td>Displaying a user&#8217;s name in a welcome header.<\/td>\n<\/tr>\n<tr>\n<td><strong>Expressions<\/strong><\/td>\n<td>Handles logic\/math functions<\/td>\n<td>Calculating a shopping cart total based on quantity.<\/td>\n<\/tr>\n<tr>\n<td><strong>Conditional Interactions<\/strong><\/td>\n<td>Enables if-then logic<\/td>\n<td>Redirecting users based on form selections.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>For example, <strong>States<\/strong> can be used to display a &quot;Loading&quot; button after a user clicks it. <strong>Variables<\/strong> store data like a user\u2019s name from a login form, which can then appear in a personalized header. <strong>Expressions<\/strong> manage calculations, such as updating a shopping cart total. And with <strong>Conditional Interactions<\/strong>, you can redirect users to a specific page only if they\u2019ve checked a &quot;Terms and Conditions&quot; box.<\/p>\n<p>Many MUI components already include built-in interactivity. For example, date pickers, steppers, and autocomplete fields handle user data and states without extra configuration. For more advanced scenarios, combine the four features above to create prototypes that mimic real-world functionality.<\/p>\n<p>Since MUI components in UXPin are production-ready, your prototypes go beyond static visuals &#8211; they\u2019re functional interfaces developers can use directly, cutting out the need for translation between design and code.<\/p>\n<h2 id=\"best-practices-for-prototyping-with-ai-and-code-components\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Best Practices for Prototyping with AI and Code Components<\/h2>\n<p>Prototyping with production-ready components ensures consistency and reliability. When using MUI components in UXPin Merge, you\u2019re working with the exact elements developers will implement. This approach ensures layouts adhere to established design rules and component structures, avoiding the creation of unnecessary new patterns.<\/p>\n<h3 id=\"maintaining-design-consistency-across-teams\" tabindex=\"-1\">Maintaining Design Consistency Across Teams<\/h3>\n<p>A unified design system is essential for avoiding inconsistencies within large teams. By syncing your component library with UXPin Merge, both designers and developers work with the same components, eliminating mismatches between mockups and production code. This method is scalable, enabling small design teams to support numerous products and developers without sacrificing quality.<\/p>\n<p>To keep designs consistent, craft precise AI prompts that include specific design details like hex codes, font weights, and spacing values (e.g., &quot;add a 2px solid bottom border&quot;). For more complex interfaces, break down instructions into smaller steps and use the AI Helper to fine-tune adjustments, ensuring they align with your design system.<\/p>\n<p>Once consistency is established, it becomes much easier to prototype quickly and effectively.<\/p>\n<h3 id=\"using-ai-to-speed-up-prototyping\" tabindex=\"-1\">Using AI to Speed Up Prototyping<\/h3>\n<p>AI tools can significantly accelerate prototyping when paired with consistent components. Claude Sonnet 4.5, for instance, delivers smoother and more polished designs, making it a great choice for maintaining a professional aesthetic across projects.<\/p>\n<p>To speed up your workflow, leverage the Image-to-Layout feature for quick iterations. You can upload anything from rough wireframes to polished mockups to generate a basic structure, then refine it using text prompts that combine visual elements with detailed instructions for interactivity and spacing.<\/p>\n<p>Instead of starting over each time, use the AI-generated output as a draft and make small adjustments with the &quot;Modify with AI&quot; tool. This method ensures alignment with MUI&#8217;s React props &#8211; just reference MUI&#8217;s documentation for exact prop names (like &quot;children&quot; for labels) to ensure the final design is ready for production.<\/p>\n<h3 id=\"improving-collaboration-between-designers-and-developers\" tabindex=\"-1\">Improving Collaboration Between Designers and Developers<\/h3>\n<p>Creating a seamless collaboration process is just as important as speeding up design. With UXPin Merge, the traditional <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" style=\"display: inline;\">design-to-development handoff<\/a> is eliminated. React components sync directly from your Git repository into the design editor, allowing designers to use real MUI components and developers to extract clean, production-ready JSX code. This streamlined workflow ensures prototypes behave exactly like the final product.<\/p>\n<p>PayPal\u2019s experience highlights the value of this approach. They found that <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototype-how-to-design\/\" style=\"display: inline;\">high-fidelity prototypes built with code components<\/a> were &quot;worth a thousand words&quot; in simplifying internal development. Teams using this method have significantly reduced engineering time and costs for enterprise-scale projects.<\/p>\n<p>To further enhance collaboration, start with UXPin&#8217;s pre-built MUI library. This ensures consistency in color, typography, and assets without requiring a custom design system. Developers can copy JSX code directly from UXPin, avoiding manual redlining or conversions. For testing, use the command <code>yarn run uxpin:test<\/code> to launch a Merge test environment and verify component behavior.<\/p>\n<p>Claude Sonnet 4.5 also supports this workflow by handling complex reasoning and understanding code, making it easier to iterate on functional prototypes. Since the components are identical to those used in production, your prototypes don\u2019t just look functional &#8211; they <em>are<\/em> functional, ready for deployment.<\/p>\n<h2 id=\"conclusion\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion<\/h2>\n<h3 id=\"summary-of-key-benefits\" tabindex=\"-1\">Summary of Key Benefits<\/h3>\n<p>Using Claude Sonnet 4.5, MUI, and UXPin Merge streamlines the entire design-to-production process by working directly with real, production-ready components. This approach eliminates the inefficiencies of traditional <a href=\"https:\/\/www.uxpin.com\/handoff\" style=\"display: inline;\">design-to-code handoffs<\/a>, cutting engineering time by up to 50% and speeding up product cycles by a factor of 8.6\u00d7.<\/p>\n<p>Claude Sonnet 4.5 doesn\u2019t just create visually appealing layouts &#8211; it generates designs that are deployment-ready. When paired with MUI&#8217;s component library, teams can ensure consistent design standards while benefiting from faster iterations powered by AI.<\/p>\n<p>One design team, consisting of only three people, successfully supported 60 internal products and over 1,000 developers using this workflow. The key to this efficiency lies in the use of components that function exactly as they will in the final product. By combining AI-driven layouts with MUI&#8217;s library, your prototypes align seamlessly with production requirements, setting your team up for scalable and rapid success.<\/p>\n<h3 id=\"next-steps-and-resources\" tabindex=\"-1\">Next Steps and Resources<\/h3>\n<p>Ready to take advantage of this streamlined workflow? Start by signing up for a free UXPin account at <a href=\"https:\/\/www.uxpin.com\" style=\"display: inline;\">uxpin.com<\/a> to access the built-in MUI editor. To activate Claude Sonnet 4.5, all you need is an OpenAI API key, which you can quickly add under the Settings tab in the UXPin Editor.<\/p>\n<p>For enterprise teams aiming to scale across multiple products or integrate custom design systems, UXPin&#8217;s Enterprise plan offers additional features, including custom AI credit limits, <a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" style=\"display: inline;\">Git integration<\/a>, and dedicated support. Visit <a href=\"https:\/\/www.uxpin.com\/pricing\" style=\"display: inline;\">uxpin.com\/pricing<\/a> for more details, or reach out to sales@uxpin.com to discuss your specific requirements. You can also find helpful resources like webinars, video tutorials, and case studies on UXPin&#8217;s documentation site.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"do-i-need-a-custom-mui-library-in-uxpin-merge\" tabindex=\"-1\" data-faq-q>Do I need a custom MUI library in UXPin Merge?<\/h3>\n<p>You don&#8217;t need to create a custom MUI library when working with UXPin Merge if you&#8217;re already using standard MUI components. UXPin allows you to connect and sync existing MUI or other component libraries directly through <strong>npm integration<\/strong>, making the process straightforward and efficient.<\/p>\n<h3 id=\"how-do-i-make-claude-sonnet-45-follow-my-design-system\" tabindex=\"-1\" data-faq-q>How do I make Claude Sonnet 4.5 follow my design system?<\/h3>\n<p>To make sure Claude Sonnet 4.5 works seamlessly with your design system, start by embedding your design guidelines into the AI model. Begin by using Sonnet 4.5 to create a design system based on your current product screens. Once this system is established, use it as a reference when generating prototypes. This approach helps ensure consistency and delivers outputs that align with your brand identity.<\/p>\n<h3 id=\"whats-the-fastest-way-to-add-real-app-logic-in-uxpin-prototypes\" tabindex=\"-1\" data-faq-q>What\u2019s the fastest way to add real app logic in UXPin prototypes?<\/h3>\n<p>The quickest way to incorporate actual app logic into your UXPin prototypes is through <strong>UXPin Merge<\/strong>. This tool allows you to sync production-ready code components, such as React libraries like MUI or Ant Design. By doing so, you can create interactive prototypes using real code blocks that closely resemble the final product, cutting down on the need for manual coding.<\/p>\n<p>To get started, connect Merge to your code repository, import the components, and use them directly to add interactivity and logic seamlessly.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/prototype-claude-opus-4-5-mui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Opus 4.5 + MUI  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-claude-opus-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Opus 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-claude-opus-4-5-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Opus 4.5 + Ant Design  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-claude-opus-4-5-bootstrap-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Opus 4.5 + Bootstrap  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=699656b9efc60cc2af0825d4\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AI-driven layouts combined with production-ready code components let teams build interactive prototypes that match production and accelerate delivery.<\/p>\n","protected":false},"author":231,"featured_media":58244,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"","yoast_metadesc":"","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to prototype using Claude Sonnet 4.5 + MUI - Use UXPin Merge! | UXPin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to prototype using Claude Sonnet 4.5 + MUI - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"AI-driven layouts combined with production-ready code components let teams build interactive prototypes that match production and accelerate delivery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-19T11:50:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_c884fb789fe0ef50b24548311b6329f0.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrew Martin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewSaaS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Martin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"How to prototype using Claude Sonnet 4.5 + MUI &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-02-19T11:50:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/\"},\"wordCount\":2601,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_c884fb789fe0ef50b24548311b6329f0.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/\",\"name\":\"How to prototype using Claude Sonnet 4.5 + MUI - Use UXPin Merge! | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_c884fb789fe0ef50b24548311b6329f0.jpeg\",\"datePublished\":\"2026-02-19T11:50:33+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_c884fb789fe0ef50b24548311b6329f0.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_c884fb789fe0ef50b24548311b6329f0.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to prototype using Claude Sonnet 4.5 + MUI - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-mui-uxpin-merge\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to prototype using Claude Sonnet 4.5 + MUI &#8211; Use UXPin Merge!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\",\"name\":\"Andrew Martin\",\"description\":\"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/andrewSaaS\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/andrewuxpin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to prototype using Claude Sonnet 4.5 + MUI - Use UXPin Merge! | UXPin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to prototype using Claude Sonnet 4.5 + MUI - Use UXPin Merge!","og_description":"AI-driven layouts combined with production-ready code components let teams build interactive prototypes that match production and accelerate delivery.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-02-19T11:50:33+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_c884fb789fe0ef50b24548311b6329f0.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"How to prototype using Claude Sonnet 4.5 + MUI &#8211; Use UXPin Merge!","datePublished":"2026-02-19T11:50:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/"},"wordCount":2601,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_c884fb789fe0ef50b24548311b6329f0.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/","name":"How to prototype using Claude Sonnet 4.5 + MUI - Use UXPin Merge! | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_c884fb789fe0ef50b24548311b6329f0.jpeg","datePublished":"2026-02-19T11:50:33+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_c884fb789fe0ef50b24548311b6329f0.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_c884fb789fe0ef50b24548311b6329f0.jpeg","width":1536,"height":1024,"caption":"How to prototype using Claude Sonnet 4.5 + MUI - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-mui-uxpin-merge\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to prototype using Claude Sonnet 4.5 + MUI &#8211; Use UXPin Merge!"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b","name":"Andrew Martin","description":"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.","sameAs":["https:\/\/x.com\/andrewSaaS"],"url":"https:\/\/www.uxpin.com\/studio\/author\/andrewuxpin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/231"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=58247"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58247\/revisions"}],"predecessor-version":[{"id":58250,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58247\/revisions\/58250"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/58244"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=58247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=58247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=58247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}