{"id":60046,"date":"2026-05-31T00:55:34","date_gmt":"2026-05-31T07:55:34","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=60046"},"modified":"2026-05-31T00:55:34","modified_gmt":"2026-05-31T07:55:34","slug":"build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","title":{"rendered":"How to build UX using Claude Sonnet 4.5 + Custom Design Systems  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>Want to create UX designs that developers can use right away?<\/strong> Combining <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> with <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> lets you turn ideas into production-ready prototypes faster and with fewer errors.<\/p>\n<ul>\n<li><strong>Claude Sonnet 4.5<\/strong>: An AI tool that processes design system rules, generates layouts, and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/microcopy-that-converts\/\" style=\"display: inline;\">drafts microcopy<\/a> based on your input.<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong>: A design tool that uses real React components, ensuring designs match the code developers use.<\/li>\n<\/ul>\n<p>Together, they eliminate rework, improve consistency, and simplify <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" style=\"display: inline;\">collaboration between designers and developers<\/a>.<\/p>\n<p><strong>Key Steps:<\/strong><\/p>\n<ol>\n<li>Use Claude Sonnet 4.5 to generate layouts and UX ideas based on your design system.<\/li>\n<li>Build these layouts in UXPin Merge using real components from your codebase.<\/li>\n<li>Test, refine, and hand off prototypes that developers can directly implement.<\/li>\n<\/ol>\n<p>This workflow reduces design-to-development time, ensures alignment with your design system, and keeps your team focused on delivering polished, functional user experiences.<\/p>\n<h2 id=\"uxpin-merge-ai-smarter-ui-generation-that-follows-your-design-system\" tabindex=\"-1\" class=\"sb h2-sbb-cls\"><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> AI: Smarter UI Generation That Follows Your Design System<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1b7b005ded517781cb75d4\/979f9bd1de4e153314d11176bd18730c.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/QY7xfXBTVn4\" frameborder=\"0\" loading=\"lazy\" allowfullscreen style=\"width: 100%; height: auto; aspect-ratio: 16\/9;\"><\/iframe><\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"how-claude-sonnet-45-supports-ux-design\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">How <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> Supports UX Design<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1b7b005ded517781cb75d4\/3a3b996d4b72469abbd6489140f1b4a7.jpg\" alt=\"Claude Sonnet 4.5\" style=\"width:100%;\"><\/p>\n<p>Claude Sonnet 4.5 doesn\u2019t create wireframes, but it tackles design challenges with clear, structured reasoning. This makes it a helpful partner in workflows that rely on components. It\u2019s especially useful for turning vague product requirements into detailed, component-driven layout plans.<\/p>\n<h3 id=\"what-claude-sonnet-45-can-do-for-ux-teams\" tabindex=\"-1\">What Claude Sonnet 4.5 Can Do for UX Teams<\/h3>\n<p>Claude\u2019s standout ability is processing large amounts of contextual information at once. You can provide it with a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/write-good-product-requirements-document\/\" style=\"display: inline;\">product requirements document<\/a>, a component catalog, and brand guidelines in a single session. With all these inputs, it can analyze and connect the dots effectively. For instance, it can take a <a href=\"https:\/\/www.uxpin.com\/studio\/ux-design\/how-to-write-a-painless-user-story-for-agile-ux-teams\/\" style=\"display: inline;\">user story<\/a> like, &quot;As a sales rep, I want to filter my pipeline by deal stage&quot;, and generate a screen layout using your actual components &#8211; such as <em>FilterBar<\/em>, <em>DataTable<\/em>, and <em>StatusBadge<\/em> &#8211; complete with their properties.<\/p>\n<p>It\u2019s also great at generating multiple layout options in record time. Instead of spending hours sketching out different dashboard ideas, you can ask Claude to propose several component-based layouts and explain the tradeoffs of each approach &#8211; all in less than a minute. In fact, a 2023 <a href=\"https:\/\/www.nngroup.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Nielsen Norman Group<\/a> study found that designers using large language model (LLM) tools saved 23\u201346% of their time on tasks like UX writing, brainstorming, and documentation.<\/p>\n<p>Beyond layouts, Claude is adept at handling text-heavy elements like error messages, tooltips, onboarding instructions, and form validations &#8211; tasks that often slow teams down. By specifying parameters like character limits, tone, and the relevant component, you can quickly produce copy that aligns perfectly with your design system.<\/p>\n<p>This structured approach not only streamlines layout creation but also ensures that your design system is consistently followed, making it easier to maintain uniformity across projects.<\/p>\n<h3 id=\"keeping-claudes-output-within-your-design-system\" tabindex=\"-1\">Keeping Claude&#8217;s Output Within Your Design System<\/h3>\n<p>One challenge with using AI in design workflows is the risk of &quot;drift&quot;, where the AI might create patterns that don\u2019t exist in your system. This can lead to designs that developers can\u2019t implement. Claude minimizes this risk by sticking closely to defined constraints.<\/p>\n<p>To ensure consistency, start by providing a clear list of components and examples. Use the exact names from your codebase or UXPin Merge library, and include instructions like: <em>&quot;Only use components from this list. If something isn\u2019t possible with the current components, describe the limitation instead of inventing a new pattern.&quot;<\/em> Including an example component tree can further guide Claude to apply the correct patterns every time.<\/p>\n<p>If Claude does stray &#8211; such as suggesting a non-existent &quot;floating panel&quot; &#8211; you can correct it by specifying: <em>&quot;Replace &#8216;floating panel&#8217; with our Modal component.&quot;<\/em> This feedback helps refine its outputs over time. Your team can even develop a reusable prompt template that encodes these rules, ensuring every designer starts with the same system-aware guidelines. This level of precision is especially important when working with tools like UXPin Merge to create production-ready prototypes.<\/p>\n<h2 id=\"how-to-set-up-uxpin-merge-with-your-design-system\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">How to Set Up <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge with Your Design System<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a1b7b005ded517781cb75d4\/4e7c3e43de294fa4f0a0553f7589f4fe.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>Getting UXPin Merge configured properly is critical to ensure designers and developers stay on the same page. The ultimate goal? Make sure designers work with the exact components developers will ship.<\/p>\n<h3 id=\"connecting-your-component-library-to-uxpin-merge\" tabindex=\"-1\">Connecting Your Component Library to UXPin Merge<\/h3>\n<p>You can integrate your React library into UXPin Merge using Git-based control, <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a>, or NPM (available on certain plans). Popular libraries like <a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a>, <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a>, <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Bootstrap<\/a>, and <a href=\"https:\/\/ui.shadcn.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">ShadCN<\/a> are already pre-integrated. However, custom libraries will need manual setup.<\/p>\n<p>Once integrated, all your component&#8217;s <strong>props, variants, and states<\/strong> become accessible through UXPin&#8217;s properties panel. For example, a designer can easily switch a button&#8217;s state from <code>variant=&quot;primary&quot;<\/code> to <code>variant=&quot;ghost&quot;<\/code> &#8211; just as a developer would &#8211; without writing a single line of code.<\/p>\n<h3 id=\"setting-up-design-tokens-and-ui-patterns\" tabindex=\"-1\">Setting Up Design Tokens and UI Patterns<\/h3>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" style=\"display: inline;\">Design tokens are the foundation of consistency<\/a>. Instead of using hard-coded values, reference core tokens like <code>color-brand-primary<\/code>. Organize tokens hierarchically, starting with foundational tokens and moving to semantic ones, to maintain consistency across your system. Connect your token source &#8211; whether it\u2019s a <code>tokens.json<\/code> file, CSS variables, or output from a <a href=\"https:\/\/styledictionary.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Style Dictionary<\/a> &#8211; directly to your component theme. This ensures that any updates to tokens automatically flow into your prototypes.<\/p>\n<p>In addition to tokens, create a library of <strong>UI patterns<\/strong> in UXPin. These are pre-assembled layouts like login forms, filter bars, dashboards, or empty states, built using your Merge components. These patterns give designers a head start and ensure every screen aligns with your design system.<\/p>\n<p>With tokens and patterns in place, your team can prototype efficiently while maintaining consistency.<\/p>\n<h3 id=\"uxpin-merge-setup-checklist\" tabindex=\"-1\">UXPin Merge Setup Checklist<\/h3>\n<p>Before diving into design work or using tools like Claude Sonnet 4.5 for layout ideas, ensure Merge is fully configured. Assign a <strong>design system owner<\/strong> to oversee synchronization between design and development. Running a pilot test on three key screens &#8211; a form, a dashboard, and a modal &#8211; can help identify and resolve any gaps before scaling up.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Setup Step<\/th>\n<th>What to Verify<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Component library connected<\/td>\n<td>All core components display correctly on the UXPin canvas<\/td>\n<\/tr>\n<tr>\n<td>Props and variants visible<\/td>\n<td>Designers can adjust states without needing to code<\/td>\n<\/tr>\n<tr>\n<td>Design tokens mapped<\/td>\n<td>Colors, typography, and spacing tokens are linked to component styles<\/td>\n<\/tr>\n<tr>\n<td>Accessibility states defined<\/td>\n<td>Focus, disabled, and error states are available for each component<\/td>\n<\/tr>\n<tr>\n<td>UI patterns documented<\/td>\n<td>Reusable templates (e.g., forms, dashboards, modals) are saved in UXPin<\/td>\n<\/tr>\n<tr>\n<td>Naming conventions aligned<\/td>\n<td>Component and prop names match the codebase exactly<\/td>\n<\/tr>\n<tr>\n<td>Version policy established<\/td>\n<td>Both design and dev teams are using the same library version<\/td>\n<\/tr>\n<tr>\n<td>Access permissions set<\/td>\n<td>Roles and permissions are configured for design and engineering teams<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"how-to-use-claude-sonnet-45-with-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">How to Use Claude Sonnet 4.5 with UXPin Merge<\/h2>\n<p>Once Merge is set up and your component library is linked, Claude becomes your brainstorming partner, generating the blueprint while Merge creates the production-ready prototype. Here&#8217;s how to write precise prompts and turn Claude&#8217;s layouts into <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/\" style=\"display: inline;\">functional prototypes<\/a>.<\/p>\n<h3 id=\"writing-prompts-that-align-with-your-design-system\" tabindex=\"-1\">Writing Prompts That Align with Your Design System<\/h3>\n<p>Avoid vague prompts like <em>&quot;Design a dashboard for our SaaS app.&quot;<\/em> These often lead to generic layouts and mismatched components. Instead, focus on prompts that adhere strictly to your <a href=\"https:\/\/www.uxpin.com\/design-tokens\" style=\"display: inline;\">design tokens<\/a> and component names.<\/p>\n<p>The key? <strong>Be specific and structured.<\/strong> A strong prompt includes four essential parts:<\/p>\n<ul>\n<li><strong>Context:<\/strong> Define the product, platform, and user goal.<\/li>\n<li><strong>Components:<\/strong> Specify exact component names from your Merge library.<\/li>\n<li><strong>Token Rules:<\/strong> Clarify rules for actions, spacing, and typography.<\/li>\n<li><strong>Output Format:<\/strong> Request a detailed component hierarchy.<\/li>\n<\/ul>\n<p>Here\u2019s an example of a tailored prompt for a B2B analytics dashboard:<\/p>\n<blockquote>\n<p><em>&quot;You are a senior UX designer working with our enterprise design system in React, available in UXPin Merge. Use only these components: <code>AppShell<\/code>, <code>TopNav<\/code>, <code>SideNav<\/code>, <code>Tabs<\/code>, <code>FilterBar<\/code>, <code>Card<\/code>, <code>Table<\/code>, <code>Pagination<\/code>, and <code>Modal<\/code>. Primary actions use <code>Button[variant=primary]<\/code>; destructive actions use <code>Button[variant=danger]<\/code>. Propose 2 alternative layouts described as component hierarchies I can build in UXPin Merge. No new component types. Keep filters above the data table.&quot;<\/em><\/p>\n<\/blockquote>\n<p>It\u2019s equally important to include <strong>negative instructions<\/strong>. For example, telling Claude <em>&quot;do not introduce carousels, steppers, or accordions &#8211; they are not in our system&quot;<\/em> ensures the suggestions stay within your design system. Over time, you can save these prompts as templates for recurring tasks like onboarding flows, search pages, or settings screens.<\/p>\n<h3 id=\"converting-ai-layouts-into-merge-prototypes\" tabindex=\"-1\">Converting AI Layouts into Merge Prototypes<\/h3>\n<p>Once you\u2019ve crafted a strong prompt, follow these steps to bring Claude&#8217;s layouts to life in UXPin Merge:<\/p>\n<ol>\n<li> <strong>Review and normalize:<\/strong> Double-check that each component Claude used exists in your library. This avoids unnecessary rework later. <\/li>\n<li> <strong>Build the hierarchy in UXPin:<\/strong> Start a new prototype and drag-and-drop components from the library to match Claude\u2019s structure. Use the properties panel to apply props as specified (e.g., <code>Button[variant=&quot;primary&quot;, size=&quot;md&quot;]<\/code>). <\/li>\n<li> <strong>Wire the interactions:<\/strong> Use UXPin\u2019s interaction panel to set up flows based on Claude\u2019s recommendations. For instance, if Claude suggests <em>&quot;on <code>PrimaryButton<\/code> click, navigate to the confirmation modal,&quot;<\/em> configure this directly in UXPin &#8211; no coding required. <\/li>\n<li> <strong>Iterate with Claude:<\/strong> If something doesn\u2019t feel right during testing, describe the issue to Claude and ask for <em>&quot;improvements using only the existing components and tokens.&quot;<\/em> Apply the updated suggestions and preview the prototype again. <\/li>\n<\/ol>\n<p>This process &#8211; <strong>prompt \u2192 hierarchy \u2192 Merge prototype \u2192 review \u2192 refine<\/strong> &#8211; keeps every iteration tied to your component library, ensuring developers don\u2019t need to rebuild elements from scratch. By sticking to this workflow, you maintain consistency and save time.<\/p>\n<h2 id=\"reviewing-refining-and-handing-off-to-development\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Reviewing, Refining, and Handing Off to Development<\/h2>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a1b7b005ded517781cb75d4-1780188291111.jpg\" alt=\"Merge-Based vs. Traditional UX Workflow: Key Differences\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Merge-Based vs. Traditional UX Workflow: Key Differences<\/p>\n<\/figcaption><\/figure>\n<p>Once your Merge prototype is complete, the next step is to ensure it&#8217;s ready for action &#8211; not just in appearance but also in structure and functionality. This stage can either save your team valuable time or lead to unnecessary delays.<\/p>\n<h3 id=\"checking-prototypes-against-your-design-standards\" tabindex=\"-1\">Checking Prototypes Against Your Design Standards<\/h3>\n<p>To ensure your prototype meets expectations, focus on four key areas: <strong>component usage<\/strong>, <strong>token compliance<\/strong>, <strong>accessibility<\/strong>, and <strong>governance compliance<\/strong>.<\/p>\n<p>Start with a <strong>component audit<\/strong>. Make sure only approved Merge components are in use. Then, check that design tokens are applied properly. For instance, colors should reference tokens like <code>color-primary-600<\/code> instead of hardcoded hex values, and spacing should use tokens such as <code>space-16<\/code> rather than manual pixel adjustments. Catching any deviations from the token system at this stage prevents issues during development.<\/p>\n<p>For <strong>accessibility<\/strong>, confirm that color contrast ratios meet <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">WCAG<\/a> standards (4.5:1 for body text), focus states are visible, and interactive elements have sufficient hit areas. Finally, perform a <strong>governance check<\/strong>. This is particularly important for US-specific formatting &#8211; dates should follow the <code>MM\/DD\/YYYY<\/code> format, currency should appear as <code>$1,234.56<\/code>, and numbers should use commas for thousands and periods for decimals. If your prototype includes sample data like tables, forms, or charts, ensure these conventions are applied correctly before passing it along to developers.<\/p>\n<p>To streamline this process, assign clear roles. Design operations can manage the checklist, designers can perform self-reviews, and the design system lead can provide final approval. This shared responsibility ensures efficiency and avoids unnecessary bottlenecks.<\/p>\n<p>Once your prototype is up to standard, it\u2019s worth considering how this workflow compares to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototyping-low-fidelity-difference\/\" style=\"display: inline;\">high-fidelity vs. low-fidelity prototyping<\/a> methods.<\/p>\n<h3 id=\"merge-workflows-vs-traditional-methods-a-comparison\" tabindex=\"-1\">Merge Workflows vs. Traditional Methods: A Comparison<\/h3>\n<p>Here\u2019s how a Merge-based workflow stacks up against traditional processes:<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Factor<\/th>\n<th>Merge-Based Workflow<\/th>\n<th>Traditional Workflow<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Source of UI truth<\/td>\n<td>Code components + tokens shared by design and dev<\/td>\n<td>Design files that devs recreate in code, often with drift<\/td>\n<\/tr>\n<tr>\n<td>Prototype fidelity<\/td>\n<td>Behavioral fidelity using production-ready components<\/td>\n<td>Primarily visual; interactions are simulated, not real<\/td>\n<\/tr>\n<tr>\n<td>Governance &amp; standards<\/td>\n<td>Built into components; prototypes conform automatically<\/td>\n<td>Enforced manually via style guides and checklists<\/td>\n<\/tr>\n<tr>\n<td>Redesign\/rework risk<\/td>\n<td>Lower; prototypes match real component capabilities<\/td>\n<td>Higher; feasibility issues surface during development<\/td>\n<\/tr>\n<tr>\n<td>Handoff process<\/td>\n<td>Lightweight; developers inspect components directly<\/td>\n<td>Heavy; requires redlines, specs, and ongoing clarification<\/td>\n<\/tr>\n<tr>\n<td>Update &amp; maintenance<\/td>\n<td>Centralized; token or component updates propagate everywhere<\/td>\n<td>Decentralized; each file must be updated individually<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>A UXPin case study with <a href=\"https:\/\/www.netguru.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Netguru<\/a> found that using a code-component approach trimmed product design and development time by up to 60%. This was largely due to reduced rework and a smoother handoff process. Research also shows that teams with advanced design systems &#8211; where components are shared between design and code &#8211; can deliver products 20\u201330% faster than those relying on static design files.<\/p>\n<p>This unified approach not only speeds up the design-to-development process but also ensures that prototypes reflect real-world functionality.<\/p>\n<h3 id=\"handing-off-to-developers-with-real-code-components\" tabindex=\"-1\">Handing Off to Developers with Real Code Components<\/h3>\n<p>With Merge, the handoff process becomes far more straightforward. The prototype itself serves as the specification, allowing developers to inspect interactive components, props, and states directly &#8211; no need for redlines or detailed annotations.<\/p>\n<p>If your library is integrated with tools like Git or Storybook, developers can easily access component documentation without disrupting their workflow. Instead of converting static designs into code, they simply confirm that the implementation matches what\u2019s already assembled in Merge.<\/p>\n<p>To make the handoff seamless, include behavior notes directly in the prototype for any complex interactions, such as table sorting rules, form validation timing, or error and empty states. Annotate screens that rely on specific APIs or feature flags. These notes eliminate the back-and-forth that can follow a handoff and prevent developers from making assumptions that lead to rework. The goal is a single, comprehensive handoff: a prototype link and any relevant API notes &#8211; no endless clarification cycles needed.<\/p>\n<h2 id=\"conclusion-faster-ux-delivery-with-claude-sonnet-45-and-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion: Faster UX Delivery with Claude Sonnet 4.5 and UXPin Merge<\/h2>\n<p>The advantages of combining Claude Sonnet 4.5 with UXPin Merge are straightforward: <strong>AI-driven creativity paired with production-ready components transforms the speed and quality of UX workflows<\/strong>. Claude Sonnet 4.5 accelerates ideation &#8211; handling tasks like <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-perfect-user-flows-for-smooth-ux\/\" style=\"display: inline;\">user flows<\/a>, layout variations, edge cases, and component suggestions &#8211; while UXPin Merge ensures that everything aligns seamlessly with your existing codebase. Together, they shrink the design-to-prototype process from weeks to mere days.<\/p>\n<p>This pairing also ensures consistency. By working directly with your design system and using only approved components and tokens, the results are clean and production-ready. No more mismatched screens, random color values, or unapproved patterns that developers need to rework. In fact, <a href=\"https:\/\/www.mckinsey.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">McKinsey<\/a> research highlights that teams with integrated design and engineering workflows can achieve <strong>up to 50% faster time-to-market<\/strong>, while also cutting down on design debt.<\/p>\n<p>A key benefit of this approach is the reduction in <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" style=\"display: inline;\">handoff delays<\/a>. When prototypes are built with real code components, developers can focus on confirming and implementing the designs instead of deciphering them. This eliminates much of the back-and-forth that often slows down projects.<\/p>\n<p>To make the most of this workflow, start by connecting your component library, crafting precise design prompts, and tracking key metrics like time-to-prototype, the number of design-development revisions, and UI-related defects. These metrics will show exactly where the process is working and where it might need adjustments.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"what-inputs-should-i-give-claude-so-it-only-uses-our-real-components-and-tokens\" tabindex=\"-1\" data-faq-q>What inputs should I give Claude so it only uses our real components and tokens?<\/h3>\n<p>To make sure Claude incorporates your design components and tokens effectively, you should upload your <strong>design token JSON files<\/strong>, <strong>CSS variables<\/strong>, and <strong>component documentation<\/strong> directly within the prompt. Use structured XML tags like <code>&lt;tokens&gt;<\/code> and <code>&lt;requirements&gt;<\/code> to organize your input clearly.<\/p>\n<p>For example:<\/p>\n<ul>\n<li> <strong>Name components explicitly<\/strong>: Provide clear names for each component (e.g., <code>PrimaryButton<\/code>, <code>CardComponent<\/code>) and detail how their UI properties map to tokens (e.g., <code>PrimaryButton<\/code> uses <code>action-color-background<\/code> for its background color and <code>heading-font<\/code> for its typography). <\/li>\n<li> <strong>Include constraints<\/strong>: Specify any limitations, like adhering to a specific typography scale or color palette. For instance, you might state that all text must use the <code>Roboto<\/code> font family and colors must be chosen from a predefined palette. <\/li>\n<li> <strong>Reference codebase files<\/strong>: To ensure consistency, instruct Claude to refer to existing files in your codebase, such as <code>theme.css<\/code> or <code>tokens.json<\/code>. This will help maintain alignment with your current design system. <\/li>\n<\/ul>\n<p>By organizing your input this way, you can provide Claude with everything needed to generate outputs that are aligned with your design system. Here\u2019s an example structure:<\/p>\n<pre><code class=\"language-xml\">&lt;tokens&gt; {   &quot;colors&quot;: {     &quot;primary&quot;: &quot;#0052cc&quot;,     &quot;secondary&quot;: &quot;#172b4d&quot;,     &quot;background&quot;: &quot;#f4f5f7&quot;   },   &quot;typography&quot;: {     &quot;font-family&quot;: &quot;Roboto, sans-serif&quot;,     &quot;font-sizes&quot;: {       &quot;small&quot;: &quot;12px&quot;,       &quot;medium&quot;: &quot;16px&quot;,       &quot;large&quot;: &quot;20px&quot;     }   } } &lt;\/tokens&gt;  &lt;requirements&gt;   &lt;components&gt;     &lt;PrimaryButton&gt;       &lt;description&gt;Main action button used across the application&lt;\/description&gt;       &lt;properties&gt;         &lt;background-color&gt;action-color-background&lt;\/background-color&gt;         &lt;text-color&gt;text-color-primary&lt;\/text-color&gt;         &lt;font&gt;heading-font&lt;\/font&gt;       &lt;\/properties&gt;     &lt;\/PrimaryButton&gt;     &lt;CardComponent&gt;       &lt;description&gt;Container for displaying grouped content&lt;\/description&gt;       &lt;properties&gt;         &lt;background-color&gt;surface-color&lt;\/background-color&gt;         &lt;border-color&gt;border-color-light&lt;\/border-color&gt;         &lt;font&gt;body-font&lt;\/font&gt;       &lt;\/properties&gt;     &lt;\/CardComponent&gt;   &lt;\/components&gt;   &lt;constraints&gt;     &lt;typography&gt;All text must use the Roboto font family&lt;\/typography&gt;     &lt;color-palette&gt;Colors must be selected from tokens defined in tokens.json&lt;\/color-palette&gt;   &lt;\/constraints&gt; &lt;\/requirements&gt; <\/code><\/pre>\n<p>This detailed structure ensures Claude can generate outputs that are not only visually consistent but also adhere to your predefined design system.<\/p>\n<h3 id=\"whats-the-fastest-way-to-connect-our-react-design-system-to-uxpin-merge\" tabindex=\"-1\" data-faq-q>What\u2019s the fastest way to connect our React design system to UXPin Merge?<\/h3>\n<p>To integrate your React design system with UXPin Merge, start by installing the Merge CLI using:<\/p>\n<pre><code>npm install @uxpin\/merge-cli --save-dev <\/code><\/pre>\n<p>Next, create a <code>uxpin.config.js<\/code> file in your project&#8217;s root directory. This file will specify the paths to your components and can also enable AI features with the <code>useAI<\/code> setting.<\/p>\n<p>Once configured, authenticate and upload your library by running:<\/p>\n<pre><code>npx uxpin-merge push --token=&quot;YOUR_TOKEN&quot; <\/code><\/pre>\n<p>For a smoother workflow, consider automating the process by integrating Merge with CI\/CD tools like <a href=\"https:\/\/github.com\/actions\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub Actions<\/a>.<\/p>\n<h3 id=\"how-do-we-validate-accessibility-and-token-compliance-before-developer-handoff\" tabindex=\"-1\" data-faq-q>How do we validate accessibility and token compliance before developer handoff?<\/h3>\n<p>To make sure your work meets accessibility standards and token compliance, it&#8217;s essential to integrate validation into your process. Start by using <strong>Claude&#8217;s extended thinking API<\/strong> to review token hierarchies before generating code. This step helps identify potential issues early.<\/p>\n<p>When crafting prompts, be specific about accessibility standards like <strong>WCAG 2.1 AA<\/strong> and <strong>Section 508<\/strong>. These guidelines cover critical elements such as:<\/p>\n<ul>\n<li>Maintaining a <strong>4.5:1 contrast ratio<\/strong> for text and background.<\/li>\n<li>Ensuring visible and functional <strong>focus states<\/strong> for interactive elements.<\/li>\n<li>Using appropriate <strong>ARIA attributes<\/strong> to enhance screen reader compatibility.<\/li>\n<\/ul>\n<p>Additionally, tools like <strong><a href=\"https:\/\/playwright.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Playwright<\/a><\/strong> can automate UI interaction testing, helping you spot inconsistencies and refine user interfaces. This proactive approach ensures a polished and accessible final product.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Sonnet 4.5 + Custom Design Systems  &#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<li><a href=\"\/studio\/blog\/build-ui-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Sonnet 4.5 + Custom Design Systems  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=6a1b7b005ded517781cb75d4\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Combine Claude Sonnet 4.5 and UXPin Merge to generate component-based layouts, enforce tokens, and produce production-ready prototypes.<\/p>\n","protected":false},"author":231,"featured_media":60043,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"UXPin Merge: Build UX with Claude Sonnet","yoast_metadesc":"Combine Claude Sonnet 4.5 and UXPin Merge to generate component-based layouts, enforce tokens, and produce production-ready prototypes.","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>UXPin Merge: Build UX with Claude Sonnet<\/title>\n<meta name=\"description\" content=\"Combine Claude Sonnet 4.5 and UXPin Merge to generate component-based layouts, enforce tokens, and produce production-ready prototypes.\" \/>\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-custom-design-systems-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 + Custom Design Systems - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Combine Claude Sonnet 4.5 and UXPin Merge to generate component-based layouts, enforce tokens, and produce production-ready prototypes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-31T07:55:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_5d8e1d66fcb74a72de2d034085b8fa0f.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=\"16 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-custom-design-systems-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-custom-design-systems-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 + Custom Design Systems &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-05-31T07:55:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\"},\"wordCount\":2896,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_5d8e1d66fcb74a72de2d034085b8fa0f.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\",\"name\":\"UXPin Merge: Build UX with Claude Sonnet\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_5d8e1d66fcb74a72de2d034085b8fa0f.png\",\"datePublished\":\"2026-05-31T07:55:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"description\":\"Combine Claude Sonnet 4.5 and UXPin Merge to generate component-based layouts, enforce tokens, and produce production-ready prototypes.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_5d8e1d66fcb74a72de2d034085b8fa0f.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_5d8e1d66fcb74a72de2d034085b8fa0f.png\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UX using Claude Sonnet 4.5 + Custom Design Systems - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-custom-design-systems-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 + Custom Design Systems &#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":"UXPin Merge: Build UX with Claude Sonnet","description":"Combine Claude Sonnet 4.5 and UXPin Merge to generate component-based layouts, enforce tokens, and produce production-ready prototypes.","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-custom-design-systems-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UX using Claude Sonnet 4.5 + Custom Design Systems - Use UXPin Merge!","og_description":"Combine Claude Sonnet 4.5 and UXPin Merge to generate component-based layouts, enforce tokens, and produce production-ready prototypes.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-05-31T07:55:34+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_5d8e1d66fcb74a72de2d034085b8fa0f.png","type":"image\/png"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-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 + Custom Design Systems &#8211; Use UXPin Merge!","datePublished":"2026-05-31T07:55:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/"},"wordCount":2896,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_5d8e1d66fcb74a72de2d034085b8fa0f.png","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","name":"UXPin Merge: Build UX with Claude Sonnet","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_5d8e1d66fcb74a72de2d034085b8fa0f.png","datePublished":"2026-05-31T07:55:34+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"description":"Combine Claude Sonnet 4.5 and UXPin Merge to generate component-based layouts, enforce tokens, and produce production-ready prototypes.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_5d8e1d66fcb74a72de2d034085b8fa0f.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_5d8e1d66fcb74a72de2d034085b8fa0f.png","width":1536,"height":1024,"caption":"How to build UX using Claude Sonnet 4.5 + Custom Design Systems - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-custom-design-systems-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 + Custom Design Systems &#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\/60046","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=60046"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60046\/revisions"}],"predecessor-version":[{"id":60047,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60046\/revisions\/60047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/60043"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=60046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=60046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=60046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}