{"id":58648,"date":"2026-04-01T02:25:56","date_gmt":"2026-04-01T09:25:56","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/"},"modified":"2026-04-01T02:25:56","modified_gmt":"2026-04-01T09:25:56","slug":"build-ui-claude-sonnet-4-5-mui-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/","title":{"rendered":"How to build UI using Claude Sonnet 4.5 + MUI  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p>Building UI has never been faster or more efficient for enterprise teams. 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>, you can design and deploy production-ready interfaces directly from your codebase. Here\u2019s how it works:<\/p>\n<ul>\n<li><strong>Claude Sonnet 4.5<\/strong>: Generates functional <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> interfaces in real-time with high precision, using your <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/\" style=\"display: inline;\">design system and MUI components<\/a>.<\/li>\n<li><strong>MUI (Material-UI)<\/strong>: Provides a robust library of React components built on <a href=\"https:\/\/m3.material.io\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Material Design<\/a> principles, ensuring consistent and accessible designs.<\/li>\n<li><strong>UXPin Merge<\/strong>: Bridges the gap between design and development by allowing designers to work with the exact components developers use, eliminating the need for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" style=\"display: inline;\">design handoff<\/a> or translation.<\/li>\n<\/ul>\n<p>This trio allows teams to create, test, and deploy interfaces faster while maintaining alignment between design and code. Designers can use real components, engineers avoid rebuilding designs, and AI accelerates the entire process.<\/p>\n<p><strong>Key Benefits<\/strong>:<\/p>\n<ul>\n<li>Reduce error rates to 0% with precise AI-generated MUI configurations.<\/li>\n<li>Save time by designing with production-ready components in UXPin Merge.<\/li>\n<li>Streamline workflows with seamless <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub<\/a> integration for custom repositories.<\/li>\n<\/ul>\n<p>This approach is ideal for enterprise teams looking to deliver consistent, high-quality UIs with fewer delays and no manual handoffs. Keep reading to learn how to set up and maximize this system.<\/p>\n<h2 id=\"setting-up-uxpin-merge-with-mui\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Setting Up <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> with <a href=\"https:\/\/mui.com\/material-ui\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69cc61cb1b352ff267ccda18\/c655eecee45d81ac73a89de996f9d5b1.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p>You can start using UXPin Merge with MUI by either selecting the built-in library or connecting a custom repository.<\/p>\n<p>If your team doesn\u2019t have a custom codebase, UXPin provides a pre-configured MUI library. Simply choose the MUI library from the built-in coded libraries section, and you can begin designing right away &#8211; no extra setup or configuration required.<\/p>\n<p>For enterprise teams with an existing design system, UXPin allows you to connect your Git repository directly. This ensures designers work with the exact same components developers use in production. Brian Demchak, Sr. UX Designer at AAA Digital &amp; Creative Services, highlights the benefits:<\/p>\n<blockquote>\n<p>&quot;We have integrated our custom React Design System and can design with our coded components. It has increased our productivity, quality, and consistency, streamlining our testing of layouts and the developer handoff process.&quot; <\/p>\n<\/blockquote>\n<h3 id=\"connecting-mui-components-to-uxpin\" tabindex=\"-1\">Connecting MUI Components to UXPin<\/h3>\n<p>If you\u2019re using the built-in library, MUI components will be available in the UXPin editor immediately.<\/p>\n<p>For custom setups, UXPin connects through GitHub repositories. The <code>MUI-Merge<\/code> repository is the main integration point. Teams can also leverage the <code>material-ui-cra<\/code> starter project, which includes configurations that allow designers to copy JSX directly from UXPin into a React environment.<\/p>\n<p>To ensure your MUI theme in UXPin matches production code, use the <code>mui-theme-creator<\/code> tool. This generates a standardized <code>ThemeOptions<\/code> object, aligning your UXPin designs with the production environment. Once connected, designers can modify properties, switch themes, and add conditional logic to MUI components &#8211; all while working with production-ready React code. The setup also supports <a href=\"https:\/\/www.typescriptlang.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">TypeScript<\/a> through <code>template-merge-typescript-ds<\/code>, ensuring accurate mapping of component properties.<\/p>\n<p>This integration keeps AI-generated layouts and code in sync with your production environment.<\/p>\n<p>Once components are linked, the next step is to configure your team for smooth collaboration.<\/p>\n<h3 id=\"configuring-merge-for-your-team\" tabindex=\"-1\">Configuring Merge for Your Team<\/h3>\n<p>Set up team access and permissions to streamline collaboration. UXPin\u2019s Growth and Enterprise plans include role-based permissions, allowing you to control who can edit design systems, publish components, or export code.<\/p>\n<p>By defining shared libraries and component systems, your team can maintain a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/single-source-truth-benefits\/\" style=\"display: inline;\">single source of truth<\/a>. This ensures everyone works with the same MUI components, styled and behaving consistently. Version history is also tracked, with the Growth plan offering 30 days of history and the Enterprise plan providing unlimited versioning.<\/p>\n<p>For developer handoff, configure export settings so engineers can either copy production-ready code or open designs directly in <a href=\"https:\/\/stackblitz.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">StackBlitz<\/a>. Mark Figueiredo, Sr. UX Team Lead at <a href=\"https:\/\/www.troweprice.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">T. Rowe Price<\/a>, shares the impact of this streamlined process:<\/p>\n<blockquote>\n<p>&quot;What used to take days to gather feedback now takes hours. Add in the time we&#8217;ve saved from not emailing back-and-forth and manually redlining, and we&#8217;ve probably shaved months off timelines.&quot; <\/p>\n<\/blockquote>\n<p>The <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/generate-ui-with-ai\/\" style=\"display: inline;\">AI Component Creator<\/a> is another powerful tool. Once your MUI library is connected, Claude Sonnet 4.5 can generate complex layouts, like tables and forms, using only your approved components. This ensures AI-generated outputs align with your design system from the start.<\/p>\n<p>To maintain stability, teams should regularly check the <code>uxpin-merge<\/code> GitHub organization for updates. As of March 2026, repositories like <code>volta-sample-ds<\/code> are actively maintained to ensure seamless integration.<\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"building-ui-with-claude-sonnet-45-in-uxpin\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Building UI with <a href=\"https:\/\/www.anthropic.com\/claude\/sonnet\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a> in UXPin<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69cc61cb1b352ff267ccda18\/eecaecaa1497395b8710a5088bc5ed41.jpg\" alt=\"Claude Sonnet 4.5\" style=\"width:100%;\"><\/p>\n<p>With your MUI library connected and your team set up, you can now use Claude Sonnet 4.5 to create interfaces that developers can immediately deploy. This integration ensures that the AI works exclusively with your approved components &#8211; no generic wireframes or unexpected designs.<\/p>\n<p>Here\u2019s how to make the most of Claude\u2019s capabilities for generating production-ready components.<\/p>\n<h3 id=\"generating-mui-components-with-ai-prompts\" tabindex=\"-1\">Generating MUI Components with AI Prompts<\/h3>\n<p>To get started, clearly define Claude&#8217;s role in your prompt. Frame it as if Claude is a senior React developer with expertise in MUI and UXPin Merge. Use structured prompts, wrapping your MUI documentation, design requirements, and constraints in XML tags like <code>&lt;documentation&gt;<\/code> and <code>&lt;requirements&gt;<\/code>. For instance, instead of a vague request like &quot;create a login form&quot;, specify details such as:<\/p>\n<ul>\n<li>Which MUI components to use (e.g., <code>TextField<\/code>, <code>Button<\/code>, <code>Card<\/code>)<\/li>\n<li>Spacing and alignment requirements<\/li>\n<li>References to your theme settings<\/li>\n<\/ul>\n<p>Claude\u2019s ability to process multiple documentation files or component definitions simultaneously ensures it builds context quickly, even for complex layouts. To encourage direct implementation rather than suggestions, include a <code>&lt;default_to_action&gt;<\/code> instruction in your prompt.<\/p>\n<p>This approach mirrors successful integrations in other design tools, where Claude Sonnet 4.5 has proven effective at producing functional prototypes with smoother interactions.<\/p>\n<h3 id=\"assembling-and-customizing-layouts\" tabindex=\"-1\">Assembling and Customizing Layouts<\/h3>\n<p>Once individual components are generated, the next step is combining them into complete layouts. Claude Sonnet 4.5 excels at handling multi-step workflows, making it ideal for assembling intricate UI designs like dashboards with headers, sidebars, data tables, and footers. Its support for parallel tool execution allows it to make changes across multiple components at once &#8211; for example, updating themes for a header, sidebar, and footer in a single operation.<\/p>\n<p>To achieve the best results, provide your <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/merge-design-system-documentation\/\" style=\"display: inline;\">design system documentation<\/a> as a &quot;handbook&quot; before asking Claude to generate layouts. Upload your component library and brand guidelines to the context window. With a <strong>1-million token context window<\/strong>, Claude can reference extensive MUI libraries and project files simultaneously, ensuring it uses your approved components instead of improvising with custom CSS or unapproved patterns.<\/p>\n<p>Jennifer Fu, a UI Tech Lead, highlights the value of setting clear constraints:<\/p>\n<blockquote>\n<p>&quot;The problem is not the AI&#8217;s coding ability; it is the lack of constraints. To get production-quality UI, stop treating Claude like a junior freelancer and start treating it like a senior engineer.&quot; <\/p>\n<\/blockquote>\n<p>This structured approach has significantly reduced error rates, dropping from <strong>9%<\/strong> in earlier versions to <strong>0%<\/strong> with Claude Sonnet 4.5.<\/p>\n<h3 id=\"adding-conditional-logic-and-variables\" tabindex=\"-1\">Adding Conditional Logic and Variables<\/h3>\n<p>With UXPin Merge, you can incorporate conditional logic and variables into your MUI components, enabling interactive features without writing custom code. Claude Sonnet 4.5\u2019s &quot;Adaptive Thinking&quot; feature is designed to handle complex tasks like managing component state or adding conditional logic. For example, you can instruct Claude to &quot;reflect on tool results and determine optimal next steps&quot; to ensure conditional logic is thoroughly verified before finalizing the code.<\/p>\n<p>For larger UI projects, ask Claude to maintain a &quot;progress.txt&quot; or a &quot;todo-list&quot; within the prompt. This helps the model track the state across multiple iterations and resolve complex queries with ease. Whether you\u2019re working on dynamic forms, interactive tables, or multi-step wizards, this feature ensures Claude delivers reliable, production-ready code.<\/p>\n<h2 id=\"best-practices-for-using-claude-sonnet-45-and-mui-in-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Best Practices for Using Claude Sonnet 4.5 and MUI in UXPin Merge<\/h2>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/69cc61cb1b352ff267ccda18-1775009656997.jpg\" alt=\"Claude Sonnet 4.5 Prompting Techniques for MUI and UXPin Merge\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Claude Sonnet 4.5 Prompting Techniques for MUI and UXPin Merge<\/p>\n<\/figcaption><\/figure>\n<p>When working with UXPin Merge and Claude Sonnet 4.5, it&#8217;s essential to treat the model like a seasoned engineer &#8211; clear, direct instructions are key to ensuring production-quality UI components. By adhering to these best practices, you can make the most of your configured UXPin Merge environment and deliver polished, consistent MUI components.<\/p>\n<p>Testing conducted by <a href=\"https:\/\/eval.16x.engineer\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">16x Eval<\/a> in late 2025 revealed that Claude Sonnet 4.5 achieved a <strong>9.5\/10 task completion score<\/strong> when prompts included well-defined success criteria and formatting rules.<\/p>\n<h3 id=\"writing-effective-claude-sonnet-45-prompts\" tabindex=\"-1\">Writing Effective Claude Sonnet 4.5 Prompts<\/h3>\n<p>The structure of your prompts plays a critical role in the quality of the output. Claude Sonnet 4.5 thrives on precise instructions, avoiding unnecessary &quot;guesswork&quot;. For instance, a vague request like &quot;create a dashboard&quot; often leads to incomplete results. Instead, use XML tags such as <code>&lt;component_specs&gt;<\/code>, <code>&lt;mui_theme&gt;<\/code>, and <code>&lt;output_requirements&gt;<\/code> to clarify your needs and avoid misinterpretation.<\/p>\n<p>Here are some key tips for effective prompts:<\/p>\n<ul>\n<li><strong>Assign a specific role<\/strong>: Start by defining the model&#8217;s role, such as &quot;Expert React Developer specializing in MUI and UXPin Merge.&quot; This helps focus its tone and technical accuracy.<\/li>\n<li><strong>Include examples<\/strong>: Provide 3\u20135 examples of existing MUI components within <code>&lt;examples&gt;<\/code> tags. This &quot;few-shot&quot; approach significantly improves results, with a 90% success rate for complex design tasks compared to prompts without examples.<\/li>\n<li><strong>Context-first ordering<\/strong>: For documents exceeding 20,000 tokens, place reference material at the beginning and the query at the end. This improves response quality by about 30%.<\/li>\n<li><strong>Use positive constraints<\/strong>: Rather than saying, &quot;Don&#8217;t use inline styles&quot;, specify, &quot;Apply all styling via the MUI <code>sx<\/code> prop or styled-components&quot;.<\/li>\n<li><strong>Enable Extended Thinking mode<\/strong>: For layouts requiring conditional logic, this mode allows the model to validate its reasoning before generating code.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/cognition.ai\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Cognition AI<\/a>&#8216;s transition to Claude Sonnet 4.5 in September 2025 resulted in an <strong>18% performance improvement<\/strong> in complex planning tasks, particularly in multi-step logic and custom codebase interactions.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Prompting Technique<\/th>\n<th>Impact on Claude 4.5<\/th>\n<th>Best Use Case for MUI\/UXPin<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>XML Tagging<\/strong><\/td>\n<td>High (9\/10)<\/td>\n<td>Separating MUI theme, component specs, and code<\/td>\n<\/tr>\n<tr>\n<td><strong>Few-Shot (3\u20135 examples)<\/strong><\/td>\n<td>High (10\/10)<\/td>\n<td>Matching components to existing library styles<\/td>\n<\/tr>\n<tr>\n<td><strong>Context-First<\/strong><\/td>\n<td>High (8\/10)<\/td>\n<td>Referencing large design system documentation<\/td>\n<\/tr>\n<tr>\n<td><strong>Extended Thinking<\/strong><\/td>\n<td>High (10\/10)<\/td>\n<td>Building complex, interactive MUI components<\/td>\n<\/tr>\n<tr>\n<td><strong>Positive Commands<\/strong><\/td>\n<td>High (9\/10)<\/td>\n<td>Enforcing specific MUI prop usage or layout rules<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>These techniques not only refine AI-generated outputs but also help your team collaborate more effectively within UXPin Merge.<\/p>\n<h3 id=\"maintaining-consistency-with-design-systems\" tabindex=\"-1\">Maintaining Consistency with Design Systems<\/h3>\n<p>To keep your design system consistent, provide Claude with clear instructions that align with your established guidelines. Before finalizing a prompt for a new MUI component, share it with a colleague who has minimal context. If they find it unclear, the AI likely will too.<\/p>\n<p>Explain the reasoning behind your design rules. For example, say, &quot;Use the MUI <code>Container<\/code> component to ensure consistent horizontal padding across all screen sizes&quot;. This added context helps the model produce more accurate and compliant results.<\/p>\n<p>Define what &quot;reusable&quot; means for your project. Specify requirements like TypeScript interfaces, JSDoc comments for props, and ARIA labels for accessibility. You can also ask Claude to &quot;verify its output against the design system criteria&quot; to catch errors before completion.<\/p>\n<h3 id=\"collaborating-across-teams-with-merge\" tabindex=\"-1\">Collaborating Across Teams with Merge<\/h3>\n<p>UXPin Merge eliminates the traditional <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" style=\"display: inline;\">design-to-development handoff<\/a> by enabling teams to work with real, production-ready components. Claude Sonnet 4.5 enhances this workflow with its ability to operate independently while offering fact-based progress updates.<\/p>\n<p>Here\u2019s how to maximize its capabilities:<\/p>\n<ul>\n<li><strong>Memory tool<\/strong>: Store design system guidelines and project states outside the context window. This ensures consistent outputs across sessions.<\/li>\n<li><strong>Efficient context building<\/strong>: Use the model&#8217;s ability to perform multiple speculative searches or read several files simultaneously. This speeds up syncing with design libraries.<\/li>\n<li><strong>Token management<\/strong>: Claude tracks its token usage and context window, preventing task interruptions. When nearing token limits, use the API to clear older tool calls and maintain performance.<\/li>\n<\/ul>\n<p>The model\u2019s concise communication style simplifies collaboration, providing clear, actionable updates without unnecessary verbosity. For teams on UXPin&#8217;s Enterprise plan, features like custom AI credit limits and dedicated support channels ensure scalability without delays.<\/p>\n<h2 id=\"troubleshooting-mui-integration-issues-in-uxpin\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Troubleshooting MUI Integration Issues in UXPin<\/h2>\n<p>After setting up and integrating MUI with UXPin, it&#8217;s essential to troubleshoot any issues to ensure your components and AI-generated outputs align with your production code. If you&#8217;re facing problems with syncing MUI components or refining AI-generated layouts, here\u2019s how to tackle them.<\/p>\n<h3 id=\"fixing-component-sync-problems\" tabindex=\"-1\">Fixing Component Sync Problems<\/h3>\n<p>If your MUI components aren\u2019t syncing properly, start by checking your GitHub connection to the appropriate repository (e.g., <code>uxpin-merge\/MUI-Merge<\/code>). Make sure you&#8217;re logged into the correct account, and reload your session if you encounter &quot;Unable to load page&quot; errors. Additionally, specify the correct MUI version (v5 or v6) in your prompts to avoid errors caused by deprecated props.<\/p>\n<p>Once the components are syncing as expected, you can address any layout inconsistencies using the steps outlined below.<\/p>\n<h3 id=\"refining-ai-generated-outputs\" tabindex=\"-1\">Refining AI-Generated Outputs<\/h3>\n<p>If the AI-generated layouts don\u2019t meet your expectations, there are a few ways to refine them. For incomplete layouts, request the full JSX code using the 64K output limit to generate <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/ai-component-creator\/\" style=\"display: inline;\">fully functional UI components<\/a>.<\/p>\n<p>To ensure accurate styling, include your <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/\" style=\"display: inline;\">design system&#8217;s theme file<\/a> in the 1M context window. If visual discrepancies persist, upload a screenshot of the rendering error using Claude&#8217;s Vision capability to identify and address the problem.<\/p>\n<p>For ongoing issues with logic errors or inconsistencies, consider upgrading to Claude Sonnet 4.6 (released February 17, 2026). This version offers faster response times (0.5 seconds latency) and higher throughput (55 tokens per second). The pricing for this upgrade is $3.00 per million input tokens and $15.00 per million output tokens. This enhancement can streamline real-time refinements and improve your workflow within UXPin Merge.<\/p>\n<h2 id=\"wrapping-it-all-together\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Wrapping It All Together<\/h2>\n<p>Throughout this article, we\u2019ve seen how combining <strong>Claude Sonnet 4.5<\/strong>, <strong>MUI<\/strong>, and <strong>UXPin Merge<\/strong> reshapes the way enterprise teams approach UI development. With its massive 1,000,000-token context window, Claude Sonnet 4.5 stands out by enabling entire design systems and MUI documentation to fit into a single prompt. This means you can generate <strong>production-ready UI components<\/strong> without the usual hurdles of translation errors or guesswork.<\/p>\n<blockquote>\n<p>&quot;Claude Sonnet 4.5 resets our expectations &#8211; it handles 30+ hours of autonomous coding, freeing our engineers to tackle months of complex architectural work in dramatically less time.&quot; &#8211; Anthropic <\/p>\n<\/blockquote>\n<p>The integration with UXPin Merge ensures that AI-generated code seamlessly connects to production-ready design. By designing directly with MUI components in UXPin, both designers and developers operate from a <strong>single source of truth<\/strong>. MUI supplies the library, Claude automates the heavy lifting, and UXPin Merge guarantees perfect alignment between design and code.<\/p>\n<p>For enterprise teams aiming to speed up delivery while maintaining high standards, this trio delivers <strong>real results<\/strong>. For instance, Claude Sonnet 4.5 cut vulnerability intake time by 44%, boosted accuracy by 25%, and achieved a 0% error rate on internal code editing benchmarks. And with predictable pricing &#8211; $3.00 per million input tokens and $15.00 per million output tokens  &#8211; it\u2019s cost-effective even for large-scale projects.<\/p>\n<h3 id=\"why-this-matters\" tabindex=\"-1\">Why This Matters<\/h3>\n<p>This integration redefines the UI creation process. By combining <strong>AI-powered component generation<\/strong>, <strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/\" style=\"display: inline;\">code-based design tools<\/a><\/strong>, and <strong>fully functional UI libraries<\/strong>, teams can compress timelines dramatically. You\u2019re not just prototyping faster &#8211; you\u2019re building with reliable, consistent components that adhere to your design system\u2019s standards across every platform. The result? Moving from concept to deployment in <strong>days, not months<\/strong>, with full traceability and no compromises on quality.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"what-do-i-need-to-connect-my-mui-components-to-uxpin-merge\" tabindex=\"-1\" data-faq-q>What do I need to connect my MUI components to UXPin Merge?<\/h3>\n<p>To integrate MUI components with UXPin Merge, you&#8217;ll need to connect your codebase to Merge. This process links your MUI component library directly to UXPin Merge, enabling the use of real, production-ready components in your design process. It ensures smooth collaboration and keeps your design and development workflows perfectly aligned.<\/p>\n<h3 id=\"how-do-i-make-claude-use-only-our-approved-mui-design-system-components\" tabindex=\"-1\" data-faq-q>How do I make Claude use only our approved MUI design system components?<\/h3>\n<p>To make sure Claude sticks to your approved MUI components, connect it to your MUI library during the setup process. Provide the library&#8217;s codebase or API access so Claude Sonnet 4.5 can exclusively reference your design system components. By integrating these components into UXPin Merge, you ensure consistent UI generation that aligns with your design standards while enabling smooth workflows.<\/p>\n<h3 id=\"how-can-designers-hand-off-production-ready-react-code-from-uxpin\" tabindex=\"-1\" data-faq-q>How can designers hand off production-ready React code from UXPin?<\/h3>\n<p>Designers can now export production-ready React code directly from UXPin by utilizing AI tools like Claude Sonnet 4.5. These tools generate clean React components that adhere to design constraints, minimizing errors in the process. The workflow includes creating layouts and logic with the AI tool, fine-tuning them in UXPin Merge, and testing everything within the platform. This approach delivers functional, design-consistent code that\u2019s ready for development, speeding up deployment timelines.<\/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-sonnet-4-5-mui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Sonnet 4.5 + MUI  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-claude-haiku-4-5-mui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Haiku 4.5 + MUI  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-ui-claude-opus-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Opus 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=69cc61cb1b352ff267ccda18\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Generate production-ready React UIs by combining Claude Sonnet 4.5, MUI components, and UXPin Merge to align design and code.<\/p>\n","protected":false},"author":231,"featured_media":58645,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58648","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 v27.7 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to build UI 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\/build-ui-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 build UI using Claude Sonnet 4.5 + MUI - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Generate production-ready React UIs by combining Claude Sonnet 4.5, MUI components, and UXPin Merge to align design and code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-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-04-01T09:25:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.seobotai.com\/uxpin.com\/69cc61cb1b352ff267ccda18\/c655eecee45d81ac73a89de996f9d5b1.jpg\" \/>\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=\"14 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\\\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"How to build UI using Claude Sonnet 4.5 + MUI &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-04-01T09:25:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\\\/\"},\"wordCount\":2767,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_702698150cd0fcf724e284f88768a2dd.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\\\/\",\"name\":\"How to build UI 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\\\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_702698150cd0fcf724e284f88768a2dd.jpeg\",\"datePublished\":\"2026-04-01T09:25:56+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_702698150cd0fcf724e284f88768a2dd.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_702698150cd0fcf724e284f88768a2dd.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UI using Claude Sonnet 4.5 + MUI - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-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 build UI 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 build UI 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\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UI using Claude Sonnet 4.5 + MUI - Use UXPin Merge!","og_description":"Generate production-ready React UIs by combining Claude Sonnet 4.5, MUI components, and UXPin Merge to align design and code.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-04-01T09:25:56+00:00","og_image":[{"url":"https:\/\/assets.seobotai.com\/uxpin.com\/69cc61cb1b352ff267ccda18\/c655eecee45d81ac73a89de996f9d5b1.jpg","type":"","width":"","height":""}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"How to build UI using Claude Sonnet 4.5 + MUI &#8211; Use UXPin Merge!","datePublished":"2026-04-01T09:25:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/"},"wordCount":2767,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_702698150cd0fcf724e284f88768a2dd.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/","name":"How to build UI 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\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_702698150cd0fcf724e284f88768a2dd.jpeg","datePublished":"2026-04-01T09:25:56+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_702698150cd0fcf724e284f88768a2dd.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_702698150cd0fcf724e284f88768a2dd.jpeg","width":1536,"height":1024,"caption":"How to build UI using Claude Sonnet 4.5 + MUI - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-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 build UI 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\/58648","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=58648"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58648\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/58645"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=58648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=58648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=58648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}