{"id":59995,"date":"2026-05-27T01:20:36","date_gmt":"2026-05-27T08:20:36","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=59995"},"modified":"2026-05-27T01:20:36","modified_gmt":"2026-05-27T08:20:36","slug":"build-ux-claude-sonnet-4-5-mui-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\/","title":{"rendered":"How to build UX using Claude Sonnet 4.5 + MUI  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>Want faster, more accurate UX design?<\/strong> Combine <strong><a href=\"https:\/\/www.anthropic.com\/news\/claude-sonnet-4-5\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a><\/strong>, <strong><a href=\"https:\/\/mui.com\/\" 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> for a streamlined workflow. Here\u2019s how these tools simplify the process:<\/p>\n<ul>\n<li><strong>Claude Sonnet 4.5<\/strong>: An AI assistant that generates <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-perfect-user-flows-for-smooth-ux\/\" style=\"display: inline;\">user flows<\/a>, layouts, and UX copy tailored to U.S. standards.<\/li>\n<li><strong>MUI<\/strong>: A React component library with prebuilt, accessible components for scalable enterprise interfaces.<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong>: A design tool that integrates real, coded MUI components, ensuring designs match production-ready code.<\/li>\n<\/ul>\n<p>This trio eliminates inefficiencies like mismatched <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" style=\"display: inline;\">design-to-development handoffs<\/a>, speeds up iteration, and ensures consistency across teams. Follow this guide to set up and use these tools effectively for your next project.<\/p>\n<h2 id=\"setting-up-claude-sonnet-45-and-mui-in-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Setting Up <a href=\"https:\/\/www.anthropic.com\/news\/claude-sonnet-4-5\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a> and <a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a> 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\/6a1635385ded517781cae0a8\/3a3b996d4b72469abbd6489140f1b4a7.jpg\" alt=\"Claude Sonnet 4.5\" style=\"width:100%;\"><\/p>\n<h3 id=\"what-us-based-product-teams-need-before-starting\" tabindex=\"-1\">What US-Based Product Teams Need Before Starting<\/h3>\n<p><strong>MUI is already integrated into UXPin<\/strong>, so you can skip the hassle of importing or configuring it from scratch. Even better, you don\u2019t need a separate Claude API account. UXPin\u2019s AI assistant, <strong>Forge<\/strong>, is built right into the canvas, ready to assist with AI-driven design tasks.<\/p>\n<p>If you\u2019re working with custom MUI libraries, you\u2019ll need to connect them using Git, <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a>, or npm integration. To get started, make sure you have a UXPin account with Merge access &#8211; available on the Growth or Enterprise plans (<a href=\"https:\/\/uxpin.com\/pricing\" style=\"display: inline;\">uxpin.com\/pricing<\/a>) &#8211; and ensure your developers have the component repository prepared for sharing.<\/p>\n<blockquote>\n<p>&quot;When I used UXPin Merge, our engineering time was reduced by around 50%.&quot; &#8211; Larry Sawyer, Lead UX Designer <\/p>\n<\/blockquote>\n<p>Once these prerequisites are met, you\u2019re ready to connect your MUI libraries and start designing with UXPin Merge.<\/p>\n<h3 id=\"connecting-mui-libraries-to-uxpin-merge\" tabindex=\"-1\">Connecting MUI Libraries to <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1635385ded517781cae0a8\/4f02fefd2d9e94394f79c8ab3075ba04.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>With your UXPin account set up and your repository ready, you can connect your MUI libraries &#8211; whether you\u2019re using the standard version or a custom one.<\/p>\n<p>For teams using the <strong>standard MUI library<\/strong>, there\u2019s no setup required. It\u2019s already built into UXPin. You can immediately drag and drop components like <code>Button<\/code>, <code>TextField<\/code>, <code>Grid<\/code>, and <code>Drawer<\/code> onto your canvas, complete with props and variants.<\/p>\n<p>For <strong>custom MUI libraries<\/strong>, enterprise teams often rely on <strong>Git integration<\/strong>. Start by cloning your MUI-Merge repository, running <code>yarn install<\/code> to set up dependencies, and using <code>yarn run uxpin:test<\/code> to preview how the components behave in UXPin before syncing. Once connected, any updates your developers make to the repository will automatically sync in UXPin &#8211; no need for manual re-imports.<\/p>\n<p>Before diving into your design session, check the <code>COMPONENT-STATUS.md<\/code> file in your custom library repository. This file will confirm whether the components you need are marked as <strong>&quot;Completed.&quot;<\/strong> UXPin currently supports over 90 interactive MUI components, ranging from layout tools like <code>Box<\/code> and <code>Stack<\/code> to more advanced options like <code>Table<\/code> and <code>Badge<\/code>.<\/p>\n<p>Once your components are synced, you can set up your workspace for smooth collaboration.<\/p>\n<h3 id=\"organizing-your-workspace-for-large-teams\" tabindex=\"-1\">Organizing Your Workspace for Large Teams<\/h3>\n<p>With your components integrated, it\u2019s time to structure your workspace for seamless teamwork. Erica Rider, a UX Architect, shared how syncing their design system with UXPin Merge allowed just three designers to support 60 products and over 1,000 developers. Achieving that level of efficiency requires clear roles and governance.<\/p>\n<p>Use <strong><a href=\"https:\/\/www.uxpin.com\/studio\/user-guide\/teams\/\" style=\"display: inline;\">roles and permissions<\/a><\/strong> (available on the Growth plan and above) to control who can edit component libraries versus who can only use them. Assign ownership of the library to a small group of design system leads, while giving the rest of the team read-only access. This approach prevents accidental changes to shared components and ensures everyone works with the same approved set. For added accountability, <a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" style=\"display: inline;\">Git integration<\/a> offers a built-in audit trail, so you can track every change and its purpose.<\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"designing-ux-flows-with-claude-sonnet-45-and-mui\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Designing UX Flows with Claude Sonnet 4.5 and MUI<\/h2>\n<h3 id=\"how-to-write-effective-prompts-for-claude-sonnet-45\" tabindex=\"-1\">How to Write Effective Prompts for Claude Sonnet 4.5<\/h3>\n<p>The quality of Claude&#8217;s output depends heavily on how clearly you frame your prompts. Vague instructions will lead to generic UX suggestions, while detailed prompts produce actionable layouts you can directly implement.<\/p>\n<p>Start by outlining the essentials: user type, goals, platform, and constraints. For instance, you might say: <em>&quot;Design a UX flow for a B2B SaaS invoicing dashboard used by finance managers at mid-size US companies. Desktop-first at 1,440px, responsive to 768px. Use only MUI components. Role-based access: admin, manager, and read-only viewer.&quot;<\/em> This level of detail sets the stage for precise outputs.<\/p>\n<p>Include US-specific formatting rules in your prompt to ensure consistency in field labels, placeholders, and table columns. For example, specify formats like <code>$1,234.56<\/code> for currency, <code>MM\/DD\/YYYY<\/code> for dates, 12-hour time with AM\/PM, and comma-separated thousands. When Claude knows these rules upfront, it incorporates them into helper text, validation messages, and column headers, reducing the need for localization fixes later.<\/p>\n<p>Finally, request a structured output format. Ask for screen flows, component layouts, and state descriptions. This ensures you get detailed, ready-to-use guidance for building with MUI components in tools like UXPin.<\/p>\n<h3 id=\"using-mui-patterns-to-shape-layouts-and-components\" tabindex=\"-1\">Using MUI Patterns to Shape Layouts and Components<\/h3>\n<p>After crafting a clear prompt, guide Claude to use specific MUI components rather than general UI ideas. The distinction is crucial. Saying &quot;a navigation sidebar&quot; is too vague. Instead, go for something like: &quot;<code>Drawer<\/code> with <code>List<\/code> and <code>ListItemButton<\/code> components, persistent on <code>md<\/code> and above, hidden behind a burger menu on <code>sm<\/code>.&quot; This specificity makes the output actionable.<\/p>\n<p>Encourage Claude to name MUI components and describe their props. For example, a prompt for an analytics dashboard might result in a layout featuring a top-level <code>AppBar<\/code> with a <code>Toolbar<\/code>, a persistent <code>Drawer<\/code> for navigation, and a <code>Grid container<\/code> with <code>spacing={2}<\/code>. This container could hold three <code>Card<\/code> components, each set to <code>lg={4}<\/code>, collapsing to <code>md={6}<\/code> on tablets and <code>xs={12}<\/code> on mobile. With this level of detail, you can easily translate the design into UXPin Merge.<\/p>\n<p>When it comes to responsive layouts, ask Claude to align with MUI&#8217;s standard breakpoints (<code>xs<\/code>, <code>sm<\/code>, <code>md<\/code>, <code>lg<\/code>, <code>xl<\/code>) and use the 12-column <code>Grid<\/code> system. Specify column spans and layout shifts at each breakpoint. This ensures the design matches MUI&#8217;s rendering, reducing the need for adjustments during implementation.<\/p>\n<p>Once you\u2019ve got a detailed layout, the next step is refining and validating the output.<\/p>\n<h3 id=\"reviewing-and-refining-ai-generated-ux\" tabindex=\"-1\">Reviewing and Refining AI-Generated UX<\/h3>\n<p>Claude&#8217;s initial designs are a starting point, not the final product. Before you transition the output into UXPin Merge, review it against a checklist of key requirements for <a href=\"https:\/\/www.uxpin.com\/studioblog\/fighting-for-ux-design-in-the-enterprise\/\" style=\"display: inline;\">enterprise-grade UX<\/a>.<\/p>\n<p>Common areas needing attention include <strong>missing states<\/strong> and <strong>incomplete role logic<\/strong>. Check that the design accounts for all states &#8211; loading, empty, and error. These are often overlooked in the first draft. Also, ensure role-based views are properly differentiated. For example, an admin&#8217;s interface should clearly differ from what a read-only viewer sees. If these distinctions are missing, refine your prompt to include explicit role constraints.<\/p>\n<p>Accessibility is another critical factor. Review the design to ensure form fields have clear labels, interactive elements meet contrast standards, and keyboard navigation is supported. While MUI components handle many accessibility features by default, the overall structure proposed by Claude &#8211; such as how dialogs are triggered, how errors are displayed, and how focus moves &#8211; still requires human oversight. Each review cycle should address gaps, refine broad ideas, and re-prompt Claude as needed until the design is ready for prototyping.  For more guidance on scaling these workflows, explore these <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/44-enterprise-ux-resources-worth-bookmarking\/\" style=\"display: inline;\">enterprise UX resources<\/a>.<\/p>\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=\"building-code-backed-prototypes-in-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Building Code-Backed Prototypes in UXPin Merge<\/h2>\n<p>Once your designs are polished, the next step is turning them into interactive, code-backed prototypes. This is where UXPin Merge truly shines. It allows you to build prototypes using the exact same React components your engineering team uses in production, ensuring seamless collaboration and consistency.<\/p>\n<h3 id=\"placing-and-configuring-mui-components-in-uxpin-merge\" tabindex=\"-1\">Placing and Configuring MUI Components in UXPin Merge<\/h3>\n<p>With MUI already integrated into UXPin, adding components is straightforward. Open the component panel, search for the MUI component recommended by Claude &#8211; like <code>DataGrid<\/code> or <code>DatePicker<\/code> &#8211; and drag it onto the canvas. From there, the property panel on the right lets you adjust props directly, just as a developer would in code.<\/p>\n<p>What makes this process stand out is how the prototypes behave. Interactive elements, such as a <code>Select<\/code> dropdown or a <code>Checkbox<\/code>, work exactly as they would in the final product. This eliminates the need for developers to translate static designs into functional code, saving time and reducing errors.<\/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; &#8211; Erica Rider, UX Architect and Design Leader <\/p>\n<\/blockquote>\n<p>By following Claude&#8217;s specifications for prop values, you ensure that your prototypes align perfectly with what the engineering team will build. This level of precision reinforces the iterative workflow and keeps the design process efficient.<\/p>\n<h3 id=\"using-forge-ai-inside-uxpin\" tabindex=\"-1\">Using <a href=\"https:\/\/www.uxpin.com\/forge\" style=\"display: inline;\">Forge<\/a> AI Inside UXPin<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1635385ded517781cae0a8\/a263868e774a904bc7b5cd88943b7e68.jpg\" alt=\"Forge\" style=\"width:100%;\"><\/p>\n<p>As you move from design to prototype, Forge AI simplifies layout adjustments directly in UXPin. Need to tweak a layout or create a new screen variation? UXPin\u2019s built-in AI assistant, <strong>Forge<\/strong>, can handle it right on the canvas. There\u2019s no need for a separate Claude account or external tools. Forge operates within your MUI design system, ensuring all suggested components are pre-approved and ready for development.<\/p>\n<p>This feature is especially handy during stakeholder reviews. If feedback highlights a missing state or a layout issue on a specific device, Forge can rework that section using MUI components. You won\u2019t need to rebuild or switch tools, and the result stays consistent with your design system. This approach minimizes rogue components and reduces the potential for developer rework.<\/p>\n<h3 id=\"adding-interactions-and-logic-to-mui-prototypes\" tabindex=\"-1\">Adding Interactions and Logic to MUI Prototypes<\/h3>\n<p>Once your components are placed and configured, you can add interactions using UXPin\u2019s logic tools. Bind <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/variables-and-conditional-interactions-for-interactive-prototyping\/\" style=\"display: inline;\">variables and conditional interactions<\/a>, and link events &#8211; like clicks or form submissions &#8211; to trigger state changes.<\/p>\n<p>Since MUI components in Merge are React-powered, complex interactions like filtering rows in a <code>DataGrid<\/code> or advancing steps in a <code>Stepper<\/code> work natively. There\u2019s no need for manual scripting. This means your prototypes don\u2019t just look real &#8211; they <em>act<\/em> real. They\u2019re fully testable with users, providing actionable feedback before production even begins.<\/p>\n<h2 id=\"iterating-and-delivering-production-ready-ux\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Iterating and Delivering Production-Ready UX<\/h2>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a1635385ded517781cae0a8-1779844257763.jpg\" alt=\"Standard UX Process vs. Merge-Based Process: Side-by-Side Comparison\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Standard UX Process vs. Merge-Based Process: Side-by-Side Comparison<\/p>\n<\/figcaption><\/figure>\n<p>Prototypes are a great starting point, but production-ready designs demand a deeper <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designers-developers-collaboration\/\" style=\"display: inline;\">collaboration between designers, engineers, and stakeholders<\/a>. This is where tools like Claude Sonnet 4.5, MUI, and UXPin Merge shine, streamlining the process and reducing friction.<\/p>\n<h3 id=\"aligning-designs-with-engineering-teams\" tabindex=\"-1\">Aligning Designs with Engineering Teams<\/h3>\n<p>One of the biggest challenges during handoff is not missing specs &#8211; it\u2019s mismatched components. When designers use components that don\u2019t exist in the production codebase, engineers are forced to improvise, which often leads to inconsistencies.<\/p>\n<p>With UXPin Merge, this issue is addressed at its core. The MUI components in your design canvas are the same ones engineers use in production, significantly narrowing the gap between design and development. However, keeping everything aligned requires a bit of process.<\/p>\n<ul>\n<li><strong>Start with a component audit.<\/strong> Before each release cycle, verify that the npm package version, theme settings, and custom wrappers in your UXPin Merge library align with production. Any discrepancies caught early can prevent QA headaches later on.<\/li>\n<li><strong>Set up regular design system syncs.<\/strong> A biweekly or monthly check-in between design and engineering teams ensures updates to components or deprecated variants are reflected in UXPin Merge before the next sprint. A simple changelog maintained by the engineering team &#8211; highlighting &quot;what changed for UX&quot; &#8211; can give designers the insights they need without requiring them to sift through pull requests.<\/li>\n<\/ul>\n<p>When it\u2019s time for handoff, UXPin\u2019s real component specs make life easier. Merge retains component names, props, and hierarchy, so engineers can directly map designs to MUI components without reverse-engineering static files. Adding quick notes to components in UXPin &#8211; for example, <em>&quot;Use <code>PrimaryButton<\/code> with <code>color='primary'<\/code> and <code>size='large'<\/code>&quot;<\/em> &#8211; helps clarify intent and ensures the right variant is used.<\/p>\n<p>These steps lay the groundwork for iterative refinements using Claude Sonnet 4.5.<\/p>\n<h3 id=\"using-claude-sonnet-45-for-iterative-design-improvements\" tabindex=\"-1\">Using Claude Sonnet 4.5 for Iterative Design Improvements<\/h3>\n<p>Once the initial design is integrated, Claude Sonnet 4.5 becomes a powerful tool for refining and aligning prototypes with production standards. Stakeholder feedback and usability testing often generate a flood of raw notes, and Claude helps translate these into actionable design updates quickly.<\/p>\n<p>Here\u2019s how to make the most of it:<\/p>\n<ul>\n<li><strong>Structure your prompts.<\/strong> Start with context, artifacts, and constraints before asking for suggestions. For example, describe the scenario (<em>&quot;You\u2019re refining a B2B invoice management flow for U.S.-based finance teams&quot;<\/em>), share the current UXPin flow with details on MUI components and states, and define constraints like <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">WCAG 2.1<\/a> AA compliance, U.S. currency formatting (e.g., $1,299.00), and MM\/DD\/YYYY date formats.<\/li>\n<li><strong>Perform accessibility checks early.<\/strong> Use Claude\u2019s guidance to identify accessibility issues during the design phase, reducing the risk of engineering rework or compliance concerns. Fix these directly in UXPin Merge by adjusting MUI props.<\/li>\n<li><strong>refine <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/microcopy-that-converts\/\" style=\"display: inline;\">microcopy and states<\/a>.<\/strong> Claude can generate concise, U.S.-English copy for various states &#8211; success, error, warning, and empty &#8211; across MUI components. It can also tweak copy for role differentiation and ensure consistency in button labels, helper text, and error messages. These small details, while easy to overlook, make a big difference to users.<\/li>\n<\/ul>\n<h3 id=\"workflow-comparison-standard-process-vs-merge-based-process\" tabindex=\"-1\">Workflow Comparison: Standard Process vs. Merge-Based Process<\/h3>\n<p>The table below highlights how the Merge-based process, enhanced by Claude, MUI, and UXPin Merge, improves UX development compared to traditional methods.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Stage<\/th>\n<th>Standard Design Process<\/th>\n<th>Merge-Based Process (Claude + MUI + UXPin)<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Component creation<\/strong><\/td>\n<td>Designers recreate UI elements manually in a vector tool<\/td>\n<td>Designers drag real MUI components from the coded library<\/td>\n<\/tr>\n<tr>\n<td><strong>Prototype fidelity<\/strong><\/td>\n<td>Static screens with hotspot links<\/td>\n<td>Fully interactive, React-powered components with real states<\/td>\n<\/tr>\n<tr>\n<td><strong>Handoff<\/strong><\/td>\n<td>Redlines, specs, and developer interpretation required<\/td>\n<td>Engineers see component names, props, and hierarchy directly<\/td>\n<\/tr>\n<tr>\n<td><strong>Iteration speed<\/strong><\/td>\n<td>New round of static screens per feedback cycle<\/td>\n<td>Swap variants and update props in UXPin; re-share the same link<\/td>\n<\/tr>\n<tr>\n<td><strong>Accessibility review<\/strong><\/td>\n<td>Manual audit late in the process, often post-development<\/td>\n<td>Claude flags issues during design; fixes applied in UXPin<\/td>\n<\/tr>\n<tr>\n<td><strong>Design\u2013dev drift<\/strong><\/td>\n<td>Common; discovered during QA or post-launch<\/td>\n<td>Minimized; Merge library stays in sync with production code<\/td>\n<\/tr>\n<tr>\n<td><strong>Stakeholder testing<\/strong><\/td>\n<td>Requires developer involvement to build a testable version<\/td>\n<td>Stakeholders test directly in UXPin with production-like behavior<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"conclusion-faster-ux-design-with-claude-sonnet-45-mui-and-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion: Faster UX Design with Claude Sonnet 4.5, MUI, and UXPin Merge<\/h2>\n<h3 id=\"key-benefits-of-ai-assisted-component-driven-ux\" tabindex=\"-1\">Key Benefits of AI-Assisted, Component-Driven UX<\/h3>\n<p>The real advantage of these tools comes from how seamlessly they integrate. <strong>Claude Sonnet 4.5<\/strong> speeds up ideation and exploration in UX design. <strong>MUI<\/strong> offers a scalable framework of production-ready components. And <strong>UXPin Merge<\/strong> bridges the gap by connecting directly to the codebase, ensuring designers always work with components that can actually be built.<\/p>\n<p>For enterprise teams, these efficiencies can make a huge difference. Seemingly minor issues &#8211; like recreating components, fixing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" style=\"display: inline;\">handoff errors<\/a>, or conducting accessibility audits late in the process &#8211; can quickly snowball when scaled across multiple teams. According to research from InVision&#8217;s <em>Design Systems Handbook<\/em>, teams leveraging mature component libraries can reduce design and development time for common UI by <strong>20\u201350%<\/strong>. Meanwhile, UXPin&#8217;s internal data shows that Merge can cut UI documentation needs by up to <strong>90%<\/strong>, as specifications are already embedded in the components themselves.<\/p>\n<p>AI-driven UX design works best when paired with a robust design system. Claude Sonnet 4.5 shines when it helps teams iterate quickly <em>within<\/em> the boundaries of MUI\u2019s production-ready components. It\u2019s less effective when generating ideas that engineers later have to reverse-engineer. UXPin Merge ensures that AI-assisted designs stay grounded in what\u2019s feasible to build.<\/p>\n<p>Together, these tools don\u2019t just simplify the design process &#8211; they also speed up delivery.<\/p>\n<h3 id=\"how-to-get-started\" tabindex=\"-1\">How to Get Started<\/h3>\n<p>Start with a single user flow &#8211; like onboarding, settings, or a dashboard &#8211; and test the workflow. Use Claude Sonnet 4.5 to refine or generate the UX direction, then build it using MUI components within UXPin Merge. Make sure to test the prototype against real-world product constraints before rolling out the approach to other areas.<\/p>\n<p>Before scaling, evaluate your team\u2019s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/\" style=\"display: inline;\">design system maturity<\/a>, engineering processes, and overall alignment. If your team already uses MUI and has established development standards, adopting this workflow should be straightforward. This approach is especially useful for larger product organizations where consistency and speed are critical.<\/p>\n<p>To see how UXPin Merge can fit into your team\u2019s workflow, check out <a href=\"https:\/\/www.uxpin.com\/pricing\" style=\"display: inline;\">uxpin.com\/pricing<\/a> or contact their enterprise team at sales@uxpin.com.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"do-i-need-my-own-claude-api-account-to-use-claude-in-uxpin\" tabindex=\"-1\" data-faq-q>Do I need my own Claude API account to use Claude in UXPin?<\/h3>\n<p>To use Claude in UXPin, you&#8217;ll need your own Claude API account. Start by generating an API key from the <a href=\"https:\/\/www.anthropic.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Anthropic<\/a> console. Once you have the key, head to the Quick Tools panel in the UXPin Editor. Open the AI Component Creator settings, paste your API key there, and you&#8217;re all set to leverage Claude for your design tasks.<\/p>\n<h3 id=\"how-do-we-connect-our-custom-mui-component-library-to-uxpin-merge\" tabindex=\"-1\" data-faq-q>How do we connect our custom MUI component library to UXPin Merge?<\/h3>\n<p>To link your custom MUI component library with UXPin Merge, you have a few integration options: Git repositories (such as <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub<\/a> or <a href=\"https:\/\/about.gitlab.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitLab<\/a>), npm, or Storybook. Before starting, make sure you have Node.js installed and include a <code>uxpin.config.js<\/code> file in your setup. To verify the environment, you can run commands like <code>npx uxpin-merge --disable-tunneling<\/code>. Once the connection is established, use the Merge Component Manager to bring in your components and align their React props with the Properties Panel.<\/p>\n<h3 id=\"how-can-we-keep-our-uxpin-merge-mui-library-in-sync-with-production-code\" tabindex=\"-1\" data-faq-q>How can we keep our UXPin Merge MUI library in sync with production code?<\/h3>\n<p>To keep your MUI library aligned with your production code, link your Git repository to UXPin Merge. This connection ensures that the design components stay consistent with the code your development team uses.<\/p>\n<p>For a more seamless process, you can automate updates by integrating a CI\/CD tool like <strong><a href=\"https:\/\/circleci.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">CircleCI<\/a><\/strong> or <strong><a href=\"https:\/\/docs.github.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub Actions<\/a><\/strong>. Configure it to execute the <code>uxpin-merge push<\/code> command whenever there are updates in your Git repository. Additionally, you can use the <code>mui-theme-creator<\/code> tool to create a <code>ThemeOptions<\/code> object, ensuring consistent theming between your design system and production environment.<\/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\/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<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=6a1635385ded517781cae0a8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Build production-ready UX faster with AI-assisted design, reusable component libraries, and Merge-based code-backed prototypes.<\/p>\n","protected":false},"author":231,"featured_media":59992,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-59995","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.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to build UX 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-ux-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 UX using Claude Sonnet 4.5 + MUI - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Build production-ready UX faster with AI-assisted design, reusable component libraries, and Merge-based code-backed prototypes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-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-05-27T08:20:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_9263d467bb7106797f7e01c2424cfb8e.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrew Martin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewSaaS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Martin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 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-sonnet-4-5-mui-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-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 Sonnet 4.5 + MUI &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-05-27T08:20:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\\\/\"},\"wordCount\":3013,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_9263d467bb7106797f7e01c2424cfb8e.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\\\/\",\"name\":\"How to build UX 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-ux-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_9263d467bb7106797f7e01c2424cfb8e.jpeg\",\"datePublished\":\"2026-05-27T08:20:36+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_9263d467bb7106797f7e01c2424cfb8e.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_9263d467bb7106797f7e01c2424cfb8e.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UX using Claude Sonnet 4.5 + MUI - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-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 UX 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 UX 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-ux-claude-sonnet-4-5-mui-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UX using Claude Sonnet 4.5 + MUI - Use UXPin Merge!","og_description":"Build production-ready UX faster with AI-assisted design, reusable component libraries, and Merge-based code-backed prototypes.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-05-27T08:20:36+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_9263d467bb7106797f7e01c2424cfb8e.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-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 Sonnet 4.5 + MUI &#8211; Use UXPin Merge!","datePublished":"2026-05-27T08:20:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\/"},"wordCount":3013,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_9263d467bb7106797f7e01c2424cfb8e.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\/","name":"How to build UX 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-ux-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_9263d467bb7106797f7e01c2424cfb8e.jpeg","datePublished":"2026-05-27T08:20:36+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_9263d467bb7106797f7e01c2424cfb8e.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_9263d467bb7106797f7e01c2424cfb8e.jpeg","width":1536,"height":1024,"caption":"How to build UX using Claude Sonnet 4.5 + MUI - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-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 UX 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\/59995","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=59995"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/59995\/revisions"}],"predecessor-version":[{"id":59997,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/59995\/revisions\/59997"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/59992"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=59995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=59995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=59995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}