{"id":60051,"date":"2026-06-01T06:51:09","date_gmt":"2026-06-01T13:51:09","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=60051"},"modified":"2026-06-01T06:51:09","modified_gmt":"2026-06-01T13:51:09","slug":"build-ux-claude-haiku-4-5-mui-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/","title":{"rendered":"How to build UX using Claude Haiku 4.5 + MUI  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p>Looking to streamline your UX design process? Here&#8217;s how you can combine <strong><a href=\"https:\/\/www.anthropic.com\/claude\/haiku\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Haiku 4.5<\/a><\/strong>, <strong><a href=\"https:\/\/mui.com\/material-ui\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a> (Material-UI)<\/strong>, and <strong><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/strong> to create consistent, production-ready prototypes faster.<\/p>\n<ul>\n<li><strong>Claude Haiku 4.5<\/strong>: Generates UX flows, layouts, and component lists in structured formats like JSON, perfect for integrating into prototypes.<\/li>\n<li><strong>MUI<\/strong>: A React component library based on Material Design principles, ensuring design consistency with reusable components.<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/merge\/developers\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong>: Lets you prototype directly with code-based components, eliminating handoff errors and saving time.<\/li>\n<\/ul>\n<p>This workflow connects AI-driven ideation with real production components, cutting design cycles by up to 70% (<a href=\"https:\/\/www.mckinsey.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">McKinsey<\/a>). Designers, developers, and product managers stay aligned, reducing rework and improving collaboration.<\/p>\n<p><strong>Key Steps:<\/strong><\/p>\n<ol>\n<li>Set up your MUI component library in UXPin Merge.<\/li>\n<li>Use Claude Haiku 4.5 to generate structured UX flows.<\/li>\n<li>Build and refine screens using MUI components in UXPin.<\/li>\n<li>Validate prototypes for accessibility, US localization, and enterprise standards.<\/li>\n<\/ol>\n<p>This approach ensures your designs match the final product, speeding up delivery while maintaining quality. Whether you&#8217;re creating dashboards, forms, or data-heavy views, this workflow keeps everything in sync.<\/p>\n<p>Ready to get started? Connect your MUI library to UXPin Merge, use Claude Haiku for ideation, and build faster, more accurate prototypes.<\/p>\n<h2 id=\"setting-up-your-mui-component-library-in-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Setting Up Your <a href=\"https:\/\/mui.com\/material-ui\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a> Component Library in <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1ccd715ded517781cb8c52\/9f84fb30cb3fddeb6a2fb13577dd1f8f.jpg\" alt=\"MUI\" style=\"width:100%;\"><\/p>\n<h3 id=\"prerequisites-for-using-uxpin-merge-with-mui\" tabindex=\"-1\">Prerequisites for Using <a href=\"https:\/\/www.uxpin.com\/merge\/developers\" style=\"display: inline;\">UXPin<\/a> Merge with MUI<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1ccd715ded517781cb8c52\/a75d8de87e107957ee77a2d137e64161.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>If you&#8217;re working with MUI, UXPin makes things easy by offering native support right on its canvas. This means designers can dive in and start using production-ready MUI components immediately. To get started, you&#8217;ll need a <strong>UXPin account with Merge enabled<\/strong>. Merge is included in all paid plans: Core ($29\/month), Growth ($40\/month), and Enterprise (custom pricing).<\/p>\n<p>For teams utilizing a custom MUI design system, you&#8217;ll also need a <strong>Git repository<\/strong> (supported platforms include <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub<\/a>, <a href=\"https:\/\/about.gitlab.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitLab<\/a>, <a href=\"https:\/\/bitbucket.org\/product\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Bitbucket<\/a>, or <a href=\"https:\/\/azure.microsoft.com\/en-us\/products\/devops\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Azure DevOps<\/a>) and a <strong><a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Node.js<\/a> toolchain<\/strong> (Node 18 LTS is recommended). These tools are essential for connecting your custom library to UXPin. Enterprise teams managing private repositories should also prepare <strong>access tokens or SSH keys<\/strong> for secure, read-only connections. Additionally, make sure to secure any internal approvals required for linking external tools to your codebase. Once your setup is ready, you can move on to configuring MUI tokens and components to ensure precise, production-level design representation.<\/p>\n<h3 id=\"configuring-mui-tokens-and-components\" tabindex=\"-1\">Configuring MUI Tokens and Components<\/h3>\n<p>Whether you&#8217;re using UXPin&#8217;s preloaded MUI library or a custom version, aligning design tokens with your production environment is key to maintaining accurate prototypes. Treat your MUI theme as the single source of truth for all design attributes &#8211; colors, typography, and spacing.<\/p>\n<p>For custom libraries, keep your theme files organized: store palette, typography, and spacing in separate files under <code>src\/theme\/<\/code>. Then, use MUI&#8217;s <code>createTheme()<\/code> to export a unified theme. To ensure consistency, map your brand colors through a token dictionary, which will help maintain uniform naming conventions and simplify updates across both design and development teams. These steps ensure that your prototypes mirror the final product, reinforcing a seamless, code-aligned workflow. After setting up tokens, focus on structuring your components to support scalable workflows.<\/p>\n<h3 id=\"structuring-components-for-scalable-workflows\" tabindex=\"-1\">Structuring Components for Scalable Workflows<\/h3>\n<p>A well-structured component library is the backbone of a scalable design system. For custom MUI libraries, use a single export file (e.g., <code>src\/index.ts<\/code>) to make all components accessible while avoiding the risk of designers accidentally using incomplete components.<\/p>\n<p>Design components should rely on <strong>props instead of hardcoded values<\/strong>. For example, a <code>Button<\/code> component should use props like <code>variant<\/code>, <code>color<\/code>, and <code>size<\/code>. This approach allows UXPin&#8217;s inspector to expose these options directly to designers, making customization straightforward.<\/p>\n<p>For enterprise teams, consider maintaining a <strong>beta branch<\/strong> linked to a separate Merge library. This setup lets you test experimental components without affecting production prototypes. It keeps your main library stable while still allowing room for innovation and iteration.<\/p>\n<blockquote>\n<p>&quot;With the MUI library in UXPin, design and development needs no translation, as you all build your React application or website using the very same component library&#8217;s elements.&quot;  &#8211;  UXPin<\/p>\n<\/blockquote>\n<h2 id=\"uxpin-merge-tutorial-prototyping-an-app-with-mui-45\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">UXPin Merge Tutorial: Prototyping an App with MUI \u2013 (4\/5)<\/h2>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/GpVYuX-mK4A\" frameborder=\"0\" loading=\"lazy\" allowfullscreen style=\"width: 100%; height: auto; aspect-ratio: 16\/9;\"><\/iframe><\/p>\n<h2 id=\"using-claude-haiku-45-for-ux-ideation-and-layouts\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Using <a href=\"https:\/\/www.anthropic.com\/claude\/haiku\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Haiku 4.5<\/a> for UX Ideation and Layouts<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1ccd715ded517781cb8c52\/35b72293d5617410c7301022353c347a.jpg\" alt=\"Claude Haiku 4.5\" style=\"width:100%;\"><\/p>\n<p>With your MUI library set up in UXPin Merge, you\u2019re ready to move from ideas to structured layouts in record time. Enter Claude Haiku 4.5, <a href=\"https:\/\/www.anthropic.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Anthropic<\/a>&#8216;s model designed for iterative ideation and drafting. It works alongside your design expertise, helping you cut down the time from concept to prototype significantly. The key to getting the most out of Haiku lies in crafting prompts that guide it effectively.<\/p>\n<p>According to McKinsey, using generative AI tools for tasks like ideation and drafting in software development can boost productivity by <strong>20\u201345%<\/strong>. For enterprise UX teams juggling complex workflows, that\u2019s a game-changer.<\/p>\n<h3 id=\"writing-prompts-for-ux-flows-and-components\" tabindex=\"-1\">Writing Prompts for UX Flows and Components<\/h3>\n<p>The quality of Haiku\u2019s outputs hinges on how well you frame your prompts. Vague prompts lead to generic results, while clear, detailed ones yield actionable designs.<\/p>\n<p>For MUI-based enterprise products, a strong prompt includes four key elements: <strong>user persona<\/strong>, <strong>key task<\/strong>, <strong>specific MUI components<\/strong>, and <strong>desired output format<\/strong>. Here\u2019s a useful template:<\/p>\n<blockquote>\n<p>&quot;You are designing for a U.S.-based SaaS admin managing a team of 200 sales reps on a web app built with MUI v5. Generate a detailed UX flow for creating, editing, and deactivating user accounts &#8211; including error and edge cases. For each step, recommend specific MUI components (AppBar, Drawer, DataGrid, Dialog, TextField, Snackbar, Stepper). Respond as a table with columns: Step Name, User Intent, UI State, Recommended MUI Components, Notes for UXPin Merge.&quot;<\/p>\n<\/blockquote>\n<p>This approach ensures that every step is tied to real components, making it easy to bring Haiku\u2019s output directly into UXPin Merge. You can adapt this template for various use cases like onboarding, billing setup, or subscription management. With a well-crafted prompt, you can quickly transform Haiku\u2019s output into interactive prototypes.<\/p>\n<h3 id=\"mapping-haiku-outputs-to-uxpin-merge-prototypes\" tabindex=\"-1\">Mapping Haiku Outputs to UXPin Merge Prototypes<\/h3>\n<p>Once Haiku generates a structured flow, turning it into a prototype is straightforward. Start by listing all the MUI components mentioned in the flow &#8211; like AppBar, Drawer, DataGrid, Dialog, TextField, Button, Snackbar, and Stepper &#8211; to create your component inventory.<\/p>\n<p>From there, begin building your prototype step by step. Start with the <strong>page framework<\/strong>, such as an AppBar paired with a Drawer or another navigation system. Then, build the content area using components like Container, Grid, or Stack, following Haiku\u2019s layout suggestions. For each step in the flow, create a separate page or state in UXPin, adding the relevant components.<\/p>\n<p>When Haiku outlines logic &#8211; such as &quot;on Save, validate fields; on error, show inline error + Snackbar&quot; &#8211; implement it using UXPin\u2019s interactions panel. Use variables to track field values, conditions to trigger error states, and state changes to simulate the entire flow. If the layout feels off after assembly, you can refine it by pasting the component list back into Haiku and asking for adjustments (e.g., &quot;Optimize this layout for dense data and faster scanning&quot;). This iterative process is fast because you\u2019re working with structured text, not redrawing screens from scratch.<\/p>\n<h3 id=\"us-localization-best-practices-for-content-and-design\" tabindex=\"-1\">US Localization Best Practices for Content and Design<\/h3>\n<p>Localized content plays a major role in making your prototype feel polished and professional. By default, AI-generated UX copy may not account for specific regional formats, so including a localization directive in your prompts is essential for U.S. enterprise products. A simple directive like this covers common requirements:<\/p>\n<blockquote>\n<p>&quot;Use en-US conventions throughout: dates in MM\/DD\/YYYY or &#8216;Month D, YYYY&#8217; format (e.g., Apr 15, 2026), currency as $ with comma groupings and two decimal places (e.g., $1,234.56), numbers with comma thousands separators (e.g., 12,500 users), imperial units for user-facing content (miles, lbs, ft), and temperatures in \u00b0F.&quot;<\/p>\n<\/blockquote>\n<p>Details like these matter. Studies show that U.S. audiences are <strong>7\u201312% more likely to convert<\/strong> when dates, currency, and numbers are formatted correctly. For prototypes used in stakeholder reviews or usability tests, placeholder values like <code>$1,234.56<\/code> or <code>Apr 15, 2026<\/code> add a layer of professionalism and keep the focus on the user experience. Reinforce this in UXPin by setting placeholders such as <code>$0.00<\/code> for currency inputs and <code>MM\/DD\/YYYY<\/code> for date fields, ensuring your prototype feels like a finished U.S.-based product from the first interaction.<\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"building-and-refining-mui-screens-in-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Building and Refining MUI Screens in UXPin Merge<\/h2>\n<p>With your component inventory from Claude Haiku 4.5 ready, it\u2019s time to shift from structured text to actual screens. This step ensures that every element you use reflects production code. That\u2019s where <strong>UXPin Merge<\/strong> shines &#8211; every component you drag onto the canvas is the same React code your developers will deploy.<\/p>\n<h3 id=\"creating-pages-with-mui-components\" tabindex=\"-1\">Creating Pages with MUI Components<\/h3>\n<p>Start each page by focusing on layout basics rather than jumping straight into UI elements. Begin with a <code>Container<\/code> to define your maximum width and padding. Next, use tools like <code>Grid<\/code> or <code>Stack<\/code> to establish your column structure. Add elements like the AppBar, Drawer, and content zones to replicate how your engineering team builds screens in React. This approach minimizes the back-and-forth during handoff.<\/p>\n<p>Use <strong>UXPin&#8217;s Properties panel<\/strong> to configure component props instead of manually overriding styles. For form fields, apply <code>fullWidth<\/code> and use placeholders tailored to U.S. formats: <code>$0.00<\/code> for currency, <code>MM\/DD\/YYYY<\/code> for dates, or <code>(555) 867-5309<\/code> for phone numbers. Stick to MUI\u2019s typography scale (<code>h1<\/code>, <code>h2<\/code>, <code>body1<\/code>, <code>caption<\/code>) rather than custom font sizes. This ensures your prototype stays synchronized with your production theme. Once the basic structure is in place, you can move on to creating common UX patterns that reflect enterprise needs.<\/p>\n<h3 id=\"building-common-ux-patterns-with-mui\" tabindex=\"-1\">Building Common UX Patterns with MUI<\/h3>\n<p>In U.S. enterprise design, three screen types dominate: <strong>dashboards, forms, and data tables<\/strong>. UXPin Merge offers repeatable patterns for each.<\/p>\n<ul>\n<li> <strong>Dashboards<\/strong>: Pair an AppBar with a permanent Drawer for navigation. Use a responsive <code>Grid<\/code> in the content area. For desktop layouts, set <code>md={4}<\/code> to display three KPI Cards side by side, and switch to <code>xs={12}<\/code> for stacking on smaller screens. Populate the cards with realistic metrics like &quot;Total Revenue (MTD): $1,250,000.00&quot;, &quot;Open Tickets: 3,847&quot;, or &quot;Avg. Resolution Time: 2.3 days.&quot; This approach helps stakeholders evaluate layouts with actual data density. <\/li>\n<li> <strong>Forms<\/strong>: Use MUI components like <code>TextField<\/code>, <code>Select<\/code>, <code>RadioGroup<\/code>, <code>Checkbox<\/code>, and <code>FormHelperText<\/code> to reflect typical enterprise fields such as &quot;Annual Revenue (USD)&quot;, &quot;State&quot;, &quot;ZIP Code&quot;, and dates formatted as MM\/DD\/YYYY. Set fields as <code>required<\/code> where necessary, and configure <code>type=&quot;email&quot;<\/code> or <code>type=&quot;number&quot;<\/code> for accuracy. This ensures your prototype mirrors the real-world requirements of a form. <\/li>\n<li> <strong>Data-heavy views<\/strong>: Start with MUI\u2019s <code>DataGrid<\/code> for managing large datasets. Add a toolbar above it featuring a <code>TextField<\/code> for search, a <code>Select<\/code> for status filters, and a pair of <code>DatePicker<\/code> components for date ranges. Populate columns with meaningful labels like &quot;Invoice #&quot;, &quot;Customer&quot;, &quot;Amount ($)&quot;, &quot;Due Date&quot;, &quot;Status&quot;, and &quot;Last Updated.&quot; Format dollar amounts with right-alignment, comma separators, and two decimal places (e.g., <code>$48,750.00<\/code>). This level of precision makes usability testing far more effective than using placeholder text or random numbers. <\/li>\n<\/ul>\n<p>Once your screens are built, take them to the next level by simulating authentic app behavior using UXPin&#8217;s logic and variables.<\/p>\n<h3 id=\"using-uxpins-logic-and-variables-for-realistic-prototypes\" tabindex=\"-1\">Using UXPin&#8217;s Logic and Variables for Realistic Prototypes<\/h3>\n<p>Dynamic prototypes elevate usability tests and stakeholder reviews. Define variables like <code>userRole<\/code>, <code>formIsValid<\/code>, <code>isLoading<\/code>, and <code>hasError<\/code>, then bind them to component props to create responsive interactions. For example, if a user submits a form with an empty ZIP Code field, set <code>hasError<\/code> to <code>true<\/code>. This triggers the <code>TextField<\/code> to show an error state with helper text: <em>&quot;Enter a valid 5-digit ZIP Code.&quot;<\/em><\/p>\n<p>For <strong>conditional navigation<\/strong>, use variables like <code>userRole<\/code> to guide flows. If <code>userRole === &quot;admin&quot;<\/code>, clicking &quot;Dashboard&quot; routes to the Admin Dashboard; otherwise, it leads to the User Dashboard. This mirrors the flow suggestions from Haiku and is easy to implement via UXPin&#8217;s logic panel. Simulate different states &#8211; like loading or empty results &#8211; by toggling variables such as <code>isLoading<\/code> or <code>hasResults<\/code>. This allows you to switch between a skeleton loader, an empty-state illustration, and a populated <code>DataGrid<\/code> all on the same screen, without duplicating pages.<\/p>\n<h2 id=\"validating-and-iterating-ux-for-enterprise-standards\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Validating and Iterating UX for Enterprise Standards<\/h2>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a1ccd715ded517781cb8c52-1780279132100.jpg\" alt=\"Manual Design Workflow vs. UXPin Merge + AI Workflow\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Manual Design Workflow vs. UXPin Merge + AI Workflow<\/p>\n<\/figcaption><\/figure>\n<p>Once your screens are built, the next step is rigorous validation to ensure they align with enterprise standards. This includes verifying that your prototypes meet accessibility requirements, US localization norms, and brand guidelines. Skipping these steps can lead to costly fixes later. According to <a href=\"https:\/\/www.deque.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Deque<\/a>, addressing accessibility issues during the design phase can be 10\u201330 times cheaper than fixing them after release.<\/p>\n<h3 id=\"checking-for-accessibility-and-us-standards\" tabindex=\"-1\">Checking for Accessibility and US Standards<\/h3>\n<p>A solid approach to accessibility starts with a checklist based on <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">WCAG 2.1<\/a> AA standards. These are widely recognized as the baseline for enterprise products and are referenced in the US federal <a href=\"https:\/\/www.section508.gov\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Section 508<\/a> guidelines. For prototypes built with MUI, focus on three critical areas: contrast, keyboard navigation, and copy accuracy.<\/p>\n<ul>\n<li> <strong>Contrast<\/strong>: Ensure that body text has a contrast ratio of at least 4.5:1, while large text, icons, and controls meet a 3:1 ratio. The 2024 <a href=\"https:\/\/webaim.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">WebAIM<\/a> Million report revealed that low-contrast text was the most common WCAG failure, appearing on 81% of tested pages. Use tools like axe or WAVE within UXPin Preview to catch these issues before any production code is written. <\/li>\n<li> <strong>Keyboard Navigation<\/strong>: Test primary user flows &#8211; like signing in, onboarding, submitting forms, or interacting with data tables &#8211; using only keyboard inputs (Tab, Shift+Tab, Enter, and Space). Ensure focus indicators are visible, focus doesn\u2019t get trapped in hidden elements, and components like Dialogs and Drawers return focus to the correct element when closed. While MUI supports <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/aria\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">WAI-ARIA<\/a> out of the box, manual testing ensures everything works as intended in real-world scenarios. <\/li>\n<li> <strong>US Localization<\/strong>: Audit your copy for any non-US formats or inconsistencies, such as UK spellings, incorrect date or currency formats, or language that doesn\u2019t align with a clear and professional US English tone. Update and centralize corrected copy within reusable MUI components in UXPin Merge to ensure changes automatically apply across all screens. <\/li>\n<\/ul>\n<h3 id=\"iterating-with-haiku-and-merge\" tabindex=\"-1\">Iterating with Haiku and Merge<\/h3>\n<p>Validation isn\u2019t a one-time process &#8211; it should drive ongoing design improvements. When usability testing or stakeholder feedback highlights an issue, bring it into Haiku to refine the experience. Using your MUI components and AI-driven layouts, you can adjust interactions and copy seamlessly. For instance, describe the problem to Haiku, and it can suggest revised step sequences or updated microcopy tailored to your existing components, such as Stepper, Dialog, or Snackbar.<\/p>\n<p>Once Haiku provides actionable suggestions &#8211; like a reworded error message, reordered form steps, or improved empty-state labels &#8211; apply them directly in UXPin Merge. Adjusting component props in Merge ensures these updates propagate across all prototypes automatically, thanks to its use of production React components as the single source of truth. As Erica Rider, a UX Architect and Design Leader, explains:<\/p>\n<blockquote>\n<p>&quot;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.&quot; <\/p>\n<\/blockquote>\n<h3 id=\"manual-vs-merge-ai-workflow-a-side-by-side-comparison\" tabindex=\"-1\">Manual vs. Merge + AI Workflow: A Side-by-Side Comparison<\/h3>\n<p>The efficiency of a Merge + AI workflow becomes especially clear at an enterprise level, where maintaining consistency and reducing handoff errors are critical to meeting deadlines.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Dimension<\/th>\n<th>Manual Design Workflow<\/th>\n<th>UXPin Merge + AI Workflow<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Speed<\/strong><\/td>\n<td>2\u20133 months for design alone<\/td>\n<td>Design, test, and deliver simultaneously<\/td>\n<\/tr>\n<tr>\n<td><strong>Consistency<\/strong><\/td>\n<td>Design files can drift from code over time<\/td>\n<td>Single source of truth; updates instantly reflect in prototypes<\/td>\n<\/tr>\n<tr>\n<td><strong>Accessibility<\/strong><\/td>\n<td>Manual checks required for each element<\/td>\n<td>MUI components include built-in WAI-ARIA and keyboard behavior; manual verification complements this<\/td>\n<\/tr>\n<tr>\n<td><strong>Handoff<\/strong><\/td>\n<td>Requires redlines, specs, and clarifications<\/td>\n<td>Designers and developers work with the same components, reducing ambiguity<\/td>\n<\/tr>\n<tr>\n<td><strong>Iteration Cost<\/strong><\/td>\n<td>Changes require redesign and code rework<\/td>\n<td>Reconfigure props in Merge; one change updates all prototypes<\/td>\n<\/tr>\n<tr>\n<td><strong>US Localization<\/strong><\/td>\n<td>Ad hoc copy reviews, often late in the cycle<\/td>\n<td>Haiku audits copy early, centralizing updates across screens<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The real advantage isn\u2019t just speed &#8211; it\u2019s the cost-effectiveness of the Merge + AI workflow. Teams can test thoroughly, address issues early, and confidently deliver polished products.<\/p>\n<h2 id=\"conclusion-how-to-build-scalable-ux-with-claude-haiku-45-mui-and-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion: How to Build Scalable UX with Claude Haiku 4.5, MUI, and UXPin Merge<\/h2>\n<p>This guide walks you through using <strong>Claude Haiku 4.5<\/strong> to generate UX flows and US-localized content, then turning those ideas into functional prototypes with <strong>MUI components<\/strong> in UXPin Merge. From the start, this approach ensures that design and development stay aligned, streamlining the entire process.<\/p>\n<p>For enterprise teams, the benefits are obvious. By sharing the same MUI components, designers and developers eliminate unnecessary rework, while updates flow seamlessly across the board. Stakeholder reviews also become more reliable since prototypes reflect production-ready components. Plus, integrating US-specific requirements early prevents last-minute fixes that can derail timelines.<\/p>\n<p>It\u2019s important to address AI\u2019s role here: <strong>Claude Haiku 4.5<\/strong> is a tool for generating ideas, not a substitute for your design system. Every suggestion it provides is filtered through your team\u2019s vetted MUI components in UXPin Merge. This ensures quality and governance remain intact. Developers can rely on prototypes because they\u2019re built with the same React components used in production.<\/p>\n<p>To get started, audit your current MUI implementation, connect it to UXPin Merge, and create a pilot project &#8211; like an onboarding screen, checkout flow, or admin dashboard. Once validated, these patterns can become reusable templates, giving every new project a head start. That\u2019s how scalable UX takes shape.<\/p>\n<p>For large teams, UXPin Merge is available on Growth and Enterprise plans. If you need custom library integration or dedicated onboarding, check out <a href=\"https:\/\/www.uxpin.com\/pricing\" style=\"display: inline;\">uxpin.com\/pricing<\/a> or contact sales@uxpin.com for Enterprise options.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"how-do-i-connect-my-mui-library-to-uxpin-merge\" tabindex=\"-1\" data-faq-q>How do I connect my MUI library to UXPin Merge?<\/h3>\n<p>Getting your MUI library connected to UXPin Merge is straightforward. For most use cases, you can use the <strong>preloaded MUI library<\/strong> available directly in the UXPin editor &#8211; this requires no additional setup.<\/p>\n<p>If you&#8217;re working with a <strong>custom MUI library<\/strong>, you\u2019ll need to link your Git repository. Here\u2019s how you can do it:<\/p>\n<ol>\n<li>Install the UXPin CLI.<\/li>\n<li>Create a <code>uxpin.config.js<\/code> file in your project.<\/li>\n<li>Use your <code>UXPIN_AUTH_TOKEN<\/code> for authentication.<\/li>\n<\/ol>\n<p>Once everything is set up, push your components using the following command:<\/p>\n<pre><code>.\/node_modules\/.bin\/uxpin-merge push --webpack-config [path] --wrapper [path] --token &quot;YOUR_TOKEN&quot; <\/code><\/pre>\n<p>This process ensures your custom components are integrated seamlessly into UXPin Merge.<\/p>\n<h3 id=\"whats-the-best-prompt-format-to-get-usable-mui-based-ux-flows-from-claude-haiku-45\" tabindex=\"-1\" data-faq-q>What\u2019s the best prompt format to get usable MUI-based UX flows from Claude Haiku 4.5?<\/h3>\n<p>To create an effective React and MUI coding assistant, it&#8217;s important to outline clear instructions, specifications, and examples. Here&#8217;s a structured approach to defining the persona and providing actionable outputs.<\/p>\n<h3 id=\"instructions-for-the-assistant\" tabindex=\"-1\">Instructions for the Assistant<\/h3>\n<ul>\n<li><strong>Purpose<\/strong>: Assist with creating React components using Material-UI (MUI) for modern, responsive, and accessible UIs.<\/li>\n<li><strong>Input Format<\/strong>: Accept prompts with specifications for MUI components, layout requirements, and desired output formats (e.g., JSX or JSON Schema).<\/li>\n<li><strong>Output Format<\/strong>: Provide clean, well-structured JSX code or JSON Schema tailored to the input prompt.<\/li>\n<li><strong>Complex Layouts<\/strong>: For intricate designs, leverage adaptive reasoning to optimize logic and structure.<\/li>\n<\/ul>\n<h3 id=\"example-mui-components\" tabindex=\"-1\">Example MUI Components<\/h3>\n<p>Below are 3\u20135 examples of commonly used MUI components with sample JSX outputs:<\/p>\n<h4 id=\"1-drawer\" tabindex=\"-1\">1. <strong>Drawer<\/strong><\/h4>\n<p>A responsive navigation drawer that slides in from the side.<\/p>\n<pre><code class=\"language-jsx\">import React from 'react'; import Drawer from '@mui\/material\/Drawer'; import List from '@mui\/material\/List'; import ListItem from '@mui\/material\/ListItem'; import ListItemText from '@mui\/material\/ListItemText';  function AppDrawer({ open, onClose }) {   return (     &lt;Drawer anchor=&quot;left&quot; open={open} onClose={onClose}&gt;       &lt;List&gt;         {['Home', 'About', 'Contact'].map((text, index) =&gt; (           &lt;ListItem button key={index}&gt;             &lt;ListItemText primary={text} \/&gt;           &lt;\/ListItem&gt;         ))}       &lt;\/List&gt;     &lt;\/Drawer&gt;   ); }  export default AppDrawer; <\/code><\/pre>\n<h4 id=\"2-card\" tabindex=\"-1\">2. <strong>Card<\/strong><\/h4>\n<p>A simple card component with a title, content, and action buttons.<\/p>\n<pre><code class=\"language-jsx\">import React from 'react'; import Card from '@mui\/material\/Card'; import CardContent from '@mui\/material\/CardContent'; import CardActions from '@mui\/material\/CardActions'; import Typography from '@mui\/material\/Typography'; import Button from '@mui\/material\/Button';  function InfoCard() {   return (     &lt;Card&gt;       &lt;CardContent&gt;         &lt;Typography variant=&quot;h5&quot; component=&quot;div&quot;&gt;           Card Title         &lt;\/Typography&gt;         &lt;Typography variant=&quot;body2&quot; color=&quot;text.secondary&quot;&gt;           This is a sample card content. You can use it to display information.         &lt;\/Typography&gt;       &lt;\/CardContent&gt;       &lt;CardActions&gt;         &lt;Button size=&quot;small&quot;&gt;Learn More&lt;\/Button&gt;       &lt;\/CardActions&gt;     &lt;\/Card&gt;   ); }  export default InfoCard; <\/code><\/pre>\n<h4 id=\"3-button\" tabindex=\"-1\">3. <strong>Button<\/strong><\/h4>\n<p>A customizable button with primary and secondary variants.<\/p>\n<pre><code class=\"language-jsx\">import React from 'react'; import Button from '@mui\/material\/Button';  function ActionButtons() {   return (     &lt;div&gt;       &lt;Button variant=&quot;contained&quot; color=&quot;primary&quot;&gt;         Primary Action       &lt;\/Button&gt;       &lt;Button variant=&quot;outlined&quot; color=&quot;secondary&quot;&gt;         Secondary Action       &lt;\/Button&gt;     &lt;\/div&gt;   ); }  export default ActionButtons; <\/code><\/pre>\n<h4 id=\"4-appbar\" tabindex=\"-1\">4. <strong>AppBar<\/strong><\/h4>\n<p>An application bar with a title and menu icon.<\/p>\n<pre><code class=\"language-jsx\">import React from 'react'; import AppBar from '@mui\/material\/AppBar'; import Toolbar from '@mui\/material\/Toolbar'; import Typography from '@mui\/material\/Typography'; import IconButton from '@mui\/material\/IconButton'; import MenuIcon from '@mui\/icons-material\/Menu';  function Header() {   return (     &lt;AppBar position=&quot;static&quot;&gt;       &lt;Toolbar&gt;         &lt;IconButton edge=&quot;start&quot; color=&quot;inherit&quot; aria-label=&quot;menu&quot;&gt;           &lt;MenuIcon \/&gt;         &lt;\/IconButton&gt;         &lt;Typography variant=&quot;h6&quot; component=&quot;div&quot;&gt;           App Title         &lt;\/Typography&gt;       &lt;\/Toolbar&gt;     &lt;\/AppBar&gt;   ); }  export default Header; <\/code><\/pre>\n<h4 id=\"5-grid-layout\" tabindex=\"-1\">5. <strong>Grid Layout<\/strong><\/h4>\n<p>A responsive grid layout for displaying items.<\/p>\n<pre><code class=\"language-jsx\">import React from 'react'; import Grid from '@mui\/material\/Grid'; import Paper from '@mui\/material\/Paper'; import Typography from '@mui\/material\/Typography';  function GridExample() {   return (     &lt;Grid container spacing={2}&gt;       {Array.from({ length: 6 }).map((_, index) =&gt; (         &lt;Grid item xs={12} sm={6} md={4} key={index}&gt;           &lt;Paper style={{ padding: 16 }}&gt;             &lt;Typography&gt;Item {index + 1}&lt;\/Typography&gt;           &lt;\/Paper&gt;         &lt;\/Grid&gt;       ))}     &lt;\/Grid&gt;   ); }  export default GridExample; <\/code><\/pre>\n<h3 id=\"request-outputs\" tabindex=\"-1\">Request Outputs<\/h3>\n<p>When requesting outputs, specify the desired format and level of detail. For example:<\/p>\n<ul>\n<li><strong>JSX Output<\/strong>: &quot;Generate a responsive Drawer component with a list of links.&quot;<\/li>\n<li><strong>JSON Schema<\/strong>: &quot;Provide a JSON representation of a Card component with title, content, and actions.&quot;<\/li>\n<\/ul>\n<h3 id=\"adaptive-reasoning-for-complex-layouts\" tabindex=\"-1\">Adaptive Reasoning for Complex Layouts<\/h3>\n<p>For more intricate designs, enable adaptive reasoning by increasing the <code>budget_tokens<\/code> parameter. This allows the assistant to handle additional complexity, such as nested components or dynamic layouts.<\/p>\n<p>By following these guidelines, the assistant can effectively generate high-quality React and MUI components tailored to your needs.<\/p>\n<h3 id=\"how-can-i-validate-accessibility-and-en-us-formatting-in-my-uxpin-merge-prototypes\" tabindex=\"-1\" data-faq-q>How can I validate accessibility and en-US formatting in my UXPin Merge prototypes?<\/h3>\n<p>When working with MUI components, you can ensure accessibility by leveraging their built-in features. These components are designed to support <strong>keyboard navigation<\/strong> and adhere to <strong>contrast standards<\/strong>, making them more user-friendly for everyone.<\/p>\n<p>Here are a few best practices to follow:<\/p>\n<ul>\n<li><strong>Structure and Dialog Triggers<\/strong>: Ensure your components are properly structured and that dialog triggers are clear and intuitive.<\/li>\n<li><strong>Focus Management<\/strong>: Pay attention to focus handling, especially for modal dialogs or interactive elements, to guide users effectively through the interface.<\/li>\n<\/ul>\n<p>For <strong>en-US formatting<\/strong>, consistency is key across labels, placeholders, and messages. Stick to these standards:<\/p>\n<ul>\n<li><strong>Currency<\/strong>: Use formats like <code>$1,234.56<\/code> for monetary values.<\/li>\n<li><strong>Dates<\/strong>: Follow the <code>MM\/DD\/YYYY<\/code> format.<\/li>\n<li><strong>Time<\/strong>: Use the 12-hour clock with <code>AM\/PM<\/code>.<\/li>\n<\/ul>\n<p>By combining these accessibility practices with localized formatting, you create a more inclusive and user-friendly experience.<\/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-sonnet-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Sonnet 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=6a1ccd715ded517781cb8c52\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Combine AI ideation with MUI and UXPin Merge to build production-ready, US-localized prototypes with accessible, code-based components.<\/p>\n","protected":false},"author":231,"featured_media":60048,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60051","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"MUI Prototyping with UXPin Merge","yoast_metadesc":"Combine AI ideation with MUI and UXPin Merge to build production-ready, US-localized prototypes with accessible, code-based components.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.7 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>MUI Prototyping with UXPin Merge<\/title>\n<meta name=\"description\" content=\"Combine AI ideation with MUI and UXPin Merge to build production-ready, US-localized prototypes with accessible, code-based components.\" \/>\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-ux-claude-haiku-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 UX using Claude Haiku 4.5 + MUI - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Combine AI ideation with MUI and UXPin Merge to build production-ready, US-localized prototypes with accessible, code-based components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-01T13:51:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_0e46ff7919e410569d1cc5c9607904af.png\" \/>\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\/png\" \/>\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=\"20 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-ux-claude-haiku-4-5-mui-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-mui-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"How to build UX using Claude Haiku 4.5 + MUI &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-06-01T13:51:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-mui-uxpin-merge\\\/\"},\"wordCount\":3455,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/image_0e46ff7919e410569d1cc5c9607904af.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-mui-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-mui-uxpin-merge\\\/\",\"name\":\"MUI Prototyping with UXPin Merge\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/image_0e46ff7919e410569d1cc5c9607904af.png\",\"datePublished\":\"2026-06-01T13:51:09+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"description\":\"Combine AI ideation with MUI and UXPin Merge to build production-ready, US-localized prototypes with accessible, code-based components.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-mui-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-mui-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-mui-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/image_0e46ff7919e410569d1cc5c9607904af.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/image_0e46ff7919e410569d1cc5c9607904af.png\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UX using Claude Haiku 4.5 + MUI - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-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 UX using Claude Haiku 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":"MUI Prototyping with UXPin Merge","description":"Combine AI ideation with MUI and UXPin Merge to build production-ready, US-localized prototypes with accessible, code-based components.","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-ux-claude-haiku-4-5-mui-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UX using Claude Haiku 4.5 + MUI - Use UXPin Merge!","og_description":"Combine AI ideation with MUI and UXPin Merge to build production-ready, US-localized prototypes with accessible, code-based components.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-06-01T13:51:09+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_0e46ff7919e410569d1cc5c9607904af.png","type":"image\/png"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"How to build UX using Claude Haiku 4.5 + MUI &#8211; Use UXPin Merge!","datePublished":"2026-06-01T13:51:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/"},"wordCount":3455,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_0e46ff7919e410569d1cc5c9607904af.png","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/","name":"MUI Prototyping with UXPin Merge","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_0e46ff7919e410569d1cc5c9607904af.png","datePublished":"2026-06-01T13:51:09+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"description":"Combine AI ideation with MUI and UXPin Merge to build production-ready, US-localized prototypes with accessible, code-based components.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-mui-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_0e46ff7919e410569d1cc5c9607904af.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_0e46ff7919e410569d1cc5c9607904af.png","width":1536,"height":1024,"caption":"How to build UX using Claude Haiku 4.5 + MUI - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-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 UX using Claude Haiku 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\/60051","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=60051"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60051\/revisions"}],"predecessor-version":[{"id":60054,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60051\/revisions\/60054"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/60048"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=60051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=60051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=60051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}