{"id":58271,"date":"2026-02-23T03:56:31","date_gmt":"2026-02-23T11:56:31","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=58271"},"modified":"2026-03-03T16:13:52","modified_gmt":"2026-03-04T00:13:52","slug":"prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","title":{"rendered":"Prototype with Claude Sonnet 4.5 + Custom DS"},"content":{"rendered":"\n<p><strong>Prototyping with <a href=\"https:\/\/www.anthropic.com\/claude\/sonnet\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a> and <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> bridges the gap between design and development by enabling teams to create production-ready prototypes directly from their design systems.<\/strong> Here&#8217;s what you need to know:<\/p>\n<ul>\n<li><strong>Claude Sonnet 4.5<\/strong>: An AI tool with a 200,000-token context window, optimized for coding and handling complex design systems.<\/li>\n<li><strong>UXPin Merge<\/strong>: A platform that lets you sync live <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> components from Git, <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a>, or npm to create <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/\" style=\"display: inline;\">functional prototypes<\/a>.<\/li>\n<li><strong>Key Benefits<\/strong>:\n<ul>\n<li>Prototypes are built using actual production components, reducing rework.<\/li>\n<li>Teams report up to <strong>26% productivity gains<\/strong> and a <strong>44% reduction in vulnerability intake time<\/strong>.<\/li>\n<li>AI-generated layouts can be refined with UXPin&#8217;s visual editor and interactivity tools.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Steps to Get Started<\/strong>:<\/p>\n<ol>\n<li>Set up your design system in UXPin Merge using Git, Storybook, or npm.<\/li>\n<li>Use Claude Sonnet 4.5 to generate layout code from prompts or mockups.<\/li>\n<li>Import the code into UXPin Merge, refine it visually, and add interactivity.<\/li>\n<li>Test, iterate, and export clean React code ready for development.<\/li>\n<\/ol>\n<p>This streamlined approach significantly cuts down prototyping time while maintaining alignment between design and development. Keep reading for detailed setup instructions and practical examples.<\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/699b9e24efc60cc2af0911e3-1771818340434.jpg\" alt=\"How to Prototype with Claude Sonnet 4.5 and UXPin Merge: 4-Step Workflow\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">How to Prototype with Claude Sonnet 4.5 and UXPin Merge: 4-Step Workflow<\/p>\n<\/figcaption><\/figure>\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\/699b9e24efc60cc2af0911e3\/a00a73b4d9acc548224f83853653c60d.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=\"prerequisites-for-using-claude-sonnet-45-with-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Prerequisites for Using <a href=\"https:\/\/www.anthropic.com\/claude\/sonnet\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a> with UXPin Merge<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/699b9e24efc60cc2af0911e3\/1dbdeeff489cb484a9d53868883f9e67.jpg\" alt=\"Claude Sonnet 4.5\" style=\"width:100%;\"><\/p>\n<p>Before you dive into prototyping, make sure you have everything you need: a UXPin account with Merge access, an <a href=\"https:\/\/www.anthropic.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Anthropic<\/a> account for Claude Sonnet 4.5, <a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Node.js<\/a> 18 or higher (with npm or yarn), a modern browser like <a href=\"https:\/\/www.google.com\/chrome\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Chrome<\/a> (version 100 or later), Git access, and a stable internet connection with latency under 200ms. You can access Claude Sonnet 4.5 through <a href=\"https:\/\/www.anthropic.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Anthropic<\/a>&#8216;s platform at <strong>claude.ai<\/strong> or via their API at <strong>platform.anthropic.com<\/strong>. Paid plans start at $3 per million input tokens, while the free tier offers limited access with a 200,000-token context window. For enterprise teams needing more scalability, platforms like <a href=\"https:\/\/ai.azure.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Azure AI Foundry<\/a> or <a href=\"https:\/\/openrouter.ai\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">OpenRouter<\/a> provide extended API options.<\/p>\n<h3 id=\"setting-up-a-custom-design-system-in-uxpin-merge\" tabindex=\"-1\">Setting Up a Custom Design System in UXPin Merge<\/h3>\n<p>UXPin Merge works with both pre-integrated libraries and custom design systems. If you&#8217;re using pre-built libraries like <strong><a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a><\/strong>, <strong><a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a><\/strong>, <strong><a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Bootstrap<\/a><\/strong>, or <strong><a href=\"https:\/\/ui.shadcn.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">shadcn\/ui<\/a><\/strong>, you can connect them directly from UXPin&#8217;s library marketplace. This eliminates the need for additional imports or AI accounts, allowing you to get started quickly with production-ready components.<\/p>\n<p>For custom design systems, the process is straightforward:<\/p>\n<ul>\n<li>Log into UXPin and create a new Merge project.<\/li>\n<li>Connect your component library via one of these methods:\n<ul>\n<li><strong>Git integration<\/strong> for React or Web components.<\/li>\n<li><strong>Storybook integration<\/strong>, which supports over 15 frameworks like <a href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Vue<\/a> and <a href=\"https:\/\/angular.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Angular<\/a>.<\/li>\n<li><strong>Direct npm package import.<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>For instance, to integrate MUI, install the <code>@mui\/material<\/code> package through the Merge console. Then, run the command <code>uxpin-merge sync<\/code> in your local repository or use UXPin&#8217;s GitHub integration to automate the syncing of components.<\/p>\n<p>Once your components are synced, map their props in UXPin&#8217;s editor. Start by testing a single component to minimize errors &#8211; this approach can reduce setup mistakes by 30% in enterprise workflows, helping you identify version conflicts or prop mismatches early. If you encounter sync issues, restart the Merge daemon or double-check your <code>uxpin.config.js<\/code>.<\/p>\n<blockquote>\n<p>&quot;We synced our Microsoft Fluent design system with UXPin&#8217;s design editor via Merge technology. It was so efficient that our 3 designers were able to support 60 internal products and over 1,000 developers.&quot; &#8211; Erica Rider, UX Architect and Design Leader<\/p>\n<\/blockquote>\n<h3 id=\"configuring-claude-sonnet-45-for-prototyping\" tabindex=\"-1\">Configuring Claude Sonnet 4.5 for Prototyping<\/h3>\n<p>In the UXPin Editor, go to the <strong>Quick Tools<\/strong> panel, open the <strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/generate-ui-with-ai\/\" style=\"display: inline;\">AI Component Creator&#8217;s Settings<\/a><\/strong> tab, and paste your API key. If you&#8217;re using Anthropic&#8217;s API directly, generate your key from their console at <strong>platform.anthropic.com<\/strong>.<\/p>\n<p>Next, in the <strong>Prompt<\/strong> tab, select Claude Sonnet 4.5 from the model dropdown. This version is optimized for coding and agentic tasks, offering a 200,000-token context window (expandable to 1 million tokens in beta). It can handle entire design system documentation and extensive component libraries. Adjust the temperature parameter to around 0.7 for a balance between creativity and precision. If you&#8217;re refining layouts from screenshots or mockups, enable vision capabilities.<\/p>\n<p>When writing prompts, be as specific as possible about your UXPin Merge components. For example, instead of saying, &quot;create a dashboard&quot;, try something like:<br \/> <em>&quot;Generate React code for a responsive dashboard using MUI Grid and Cards with a 16px font size and 2px solid bottom borders.&quot;<\/em><br \/> This level of detail ensures Claude generates layouts that align perfectly with your design system. Developers have reported a 44% improvement in detecting vulnerabilities during prototyping when using Sonnet 4.5, making it an excellent tool for enterprise teams prioritizing security and compliance.<\/p>\n<p>Once you&#8217;ve completed these steps, you&#8217;re ready to start generating prototypes with Claude Sonnet 4.5 and UXPin Merge.<\/p>\n<h2 id=\"how-to-prototype-with-claude-sonnet-45-and-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">How to Prototype with Claude Sonnet 4.5 and UXPin Merge<\/h2>\n<p>With your setup ready, you\u2019re all set to create prototypes that blend AI-generated layouts with production-ready components. The workflow involves generating initial layouts using Claude Sonnet 4.5, refining them in UXPin Merge&#8217;s visual editor, and adding interactivity to build fully functional prototypes. This approach can speed up product development by up to <strong>8.6 times<\/strong> while cutting engineering time by nearly <strong>50%<\/strong>. Here&#8217;s a step-by-step guide to get started.<\/p>\n<h3 id=\"step-1-generate-prototype-layouts-with-claude-sonnet-45\" tabindex=\"-1\">Step 1: Generate Prototype Layouts with Claude Sonnet 4.5<\/h3>\n<p>Start by opening the <strong>AI Component Creator<\/strong> in UXPin&#8217;s Quick Tools panel and navigating to the <strong>Prompt<\/strong> tab. Here, you\u2019ll enter a detailed prompt outlining the design system components, layout structure, and constraints. For example: <em>&quot;Create a login page layout using our custom AuthButton, FormInput, and Header components; ensure mobile responsiveness and export as clean JSX for UXPin Merge import.&quot;<\/em><\/p>\n<p>The more detailed your prompt &#8211; such as including hex codes, spacing (e.g., 16px padding), and typography &#8211; the better the AI will perform.<\/p>\n<p>You can also upload wireframes or mockups directly into the AI Component Creator. Simply paste a screenshot of your design and include a text prompt to clarify missing details, like interactivity or specific spacing. Claude Sonnet 4.5\u2019s ability to analyze visuals allows it to transform low-fidelity wireframes into functional, code-backed components. For complex designs, providing clear and detailed prompts minimizes the need for manual adjustments later.<\/p>\n<h3 id=\"step-2-refine-layouts-with-uxpin-merge\" tabindex=\"-1\">Step 2: Refine Layouts with UXPin Merge<\/h3>\n<p>Once you have your AI-generated layout, import the JSX or HTML output into UXPin Merge using its code import feature. Map these components to your design system library in Merge\u2019s component panel and fine-tune the styles, spacing, and responsiveness using the visual editor. This process ensures that the design stays aligned with your system while maintaining its original intent.<\/p>\n<p>If you notice any issues &#8211; like incorrect button variants or missing properties &#8211; you can fix them directly in the properties panel or use the <strong>&quot;Modify with AI&quot;<\/strong> tool. For example, you can type instructions like &quot;add 20px padding&quot; or &quot;switch button to primary theme&quot; to make quick adjustments.<\/p>\n<p>Preview your layout in Merge\u2019s browser to check for pixel-perfect alignment. This step ensures that your design integrates seamlessly with production components, reducing manual rework by up to <strong>44%<\/strong> in similar workflows. While Claude Sonnet 4.5 handles much of the heavy lifting, you may still need to manually refine complex elements like conditional logic or variable-specific details.<\/p>\n<h3 id=\"step-3-add-interactivity-and-logic\" tabindex=\"-1\">Step 3: Add Interactivity and Logic<\/h3>\n<p>With your refined layout ready, it\u2019s time to incorporate interactivity. UXPin Merge allows you to add <strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/variables-and-conditional-interactions-for-interactive-prototyping\/\" style=\"display: inline;\">variables and conditional interactions<\/a> to handle complex logic<\/strong>. For instance, you can define variables like <code>userLoggedIn: boolean<\/code> or <code>cartQuantity: number<\/code> in the Variables panel. Then, set up visibility rules such as &quot;if userLoggedIn, show Dashboard else Login.&quot; Use the Logic Canvas to visually connect components to events like button clicks or form submissions.<\/p>\n<p>For a dashboard prototype, you might include logic like <code>{if (data.loading) show Spinner else MetricsGrid}<\/code> to simulate real-world conditions. You can also integrate APIs to bring in dynamic content, ensuring your prototype behaves like the final product. This step ties everything together, turning your prototype into a deployable product. By adding these interactive elements, you <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" style=\"display: inline;\">streamline the design-to-code handoff<\/a>, saving developers from having to recreate functionality from scratch.<\/p>\n<h2 id=\"example-building-a-dashboard-prototype\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Example: Building a Dashboard Prototype<\/h2>\n<p>This example walks through creating an analytics dashboard for a SaaS platform. Using <strong>Claude Sonnet 4.5<\/strong> and <strong>UXPin Merge<\/strong>, the goal is to produce a prototype that aligns with your custom design system and is ready for production.<\/p>\n<h3 id=\"define-requirements-and-generate-the-initial-design\" tabindex=\"-1\">Define Requirements and Generate the Initial Design<\/h3>\n<p>Start by defining the requirements for your dashboard. Open the <strong>AI Component Creator<\/strong> in UXPin and choose <strong>Claude Sonnet 4.5<\/strong> from the dropdown menu. Then, create a detailed prompt outlining the structure:<\/p>\n<p><em>&quot;Design an analytics dashboard with a left sidebar for navigation, a top metrics header showing four KPI cards, a data grid for user activity, and a line chart for monthly trends. Use Material Design components, 16px spacing, #1976D2 for primary actions, and ensure the layout fits within a 1440px-wide container.&quot;<\/em><\/p>\n<blockquote>\n<p>&quot;Claude Sonnet 4.5 is our most intelligent model for creating work deliverables. With code execution and file creation, Claude can build presentations, spreadsheets, and documents faster and with higher quality than before.&quot; &#8211; Anthropic <\/p>\n<\/blockquote>\n<p>For more complex dashboards, enable <strong>Extended Thinking<\/strong> to guide the model through multi-step layout tasks. With a <strong>96.2% accuracy rate<\/strong> in chart and figure comprehension (VLAT score of 50.17), Claude Sonnet 4.5 can analyze visual mockups and generate React code structures. To improve accuracy, break the project into smaller tasks, such as &quot;sidebar navigation&quot;, &quot;data grid&quot;, and &quot;analytics header&quot;, instead of tackling everything at once.<\/p>\n<h3 id=\"customize-and-connect-components\" tabindex=\"-1\">Customize and Connect Components<\/h3>\n<p>Once Claude generates the JSX output, import it into UXPin Merge and sync it with your custom React design system using Git, Storybook, or npm. Use the <strong>Properties Panel<\/strong> to check that the components meet your development standards.<\/p>\n<p>If changes are needed, click the <strong>&quot;Modify with AI&quot;<\/strong> icon and provide specific instructions like &quot;Change the KPI card border to 2px solid #E0E0E0&quot; or &quot;Add 20px padding to the metrics header&quot;. This AI-driven tool allows you to tweak visual styles, layouts, and typography without manual coding.<\/p>\n<blockquote>\n<p>&quot;Claude Sonnet 4.5 produces smoother, more consistent designs that match your style.&quot; &#8211; UXPin <\/p>\n<\/blockquote>\n<p>With a <strong>77.04% Pass@1 rate<\/strong> on 4,442 functional coding tasks, the components typically require minimal manual adjustments. Focus your efforts on fine-tuning enterprise-specific needs like <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/8-website-accessibility-best-practices-to-improve-ux\/\" style=\"display: inline;\">accessibility<\/a>, responsive design, and brand-specific tokens. After refining, validate interactivity and ensure the prototype is ready for production.<\/p>\n<h3 id=\"test-and-iterate-for-production-readiness\" tabindex=\"-1\">Test and Iterate for Production Readiness<\/h3>\n<p>Preview the dashboard in UXPin&#8217;s browser to test interactivity and responsiveness. Add conditional logic to simulate real-world scenarios by defining variables such as <code>dataLoading: boolean<\/code>. For example, configure the dashboard to show a spinner while data is loading and display the metrics grid once loading is complete. Test user flows like filtering data or switching chart views to confirm production-ready behavior.<\/p>\n<p>Export the React code and validate it in your development environment to ensure proper calculations and layout consistency. While Claude Sonnet 4.5 includes self-testing capabilities to catch bugs during generation, always have your development team review the code. Early testing has shown that Claude Sonnet 4.5 reduces vulnerability intake time by <strong>44%<\/strong> and increases accuracy by <strong>25%<\/strong>.<\/p>\n<blockquote>\n<p>&quot;We went from 9% error rate on Sonnet 4 to 0% on our internal code editing benchmark. Higher tool success at lower cost is a major leap for agentic coding.&quot; &#8211; Canva <\/p>\n<\/blockquote>\n<p>Use UXPin&#8217;s version history to save milestones throughout the process. This feature ensures you can revert to earlier versions if needed. By following these steps, your dashboard will not only look polished but also meet functional standards, eliminating the usual challenges of translating designs into production-ready code.<\/p>\n<h2 id=\"conclusion\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion<\/h2>\n<p>Pairing <strong>Claude Sonnet 4.5<\/strong> with <strong>UXPin Merge<\/strong> redefines enterprise prototyping by enabling teams to work directly with production-ready components. This eliminates the need to recreate designs from scratch, bridging the gap between design and development. The result? <strong>Product development speeds up by 8.6X<\/strong> compared to traditional workflows.<\/p>\n<p>The process generates <strong>clean React code<\/strong> that integrates seamlessly into your development environment. With Claude Sonnet 4.5, your designs are smoother and more consistent, aligning perfectly with your unique style. This allows teams to concentrate on improving user experiences instead of spending time on tedious manual adjustments.<\/p>\n<blockquote>\n<p>&quot;Being able to jump straight from design to having code ready to going to be a huge time-saver for our team.&quot; &#8211; Allison Barkley, Director of Operations, Baremetrics <\/p>\n<\/blockquote>\n<p>This method also supports <strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-scale-design-system-in-uxpin\/\" style=\"display: inline;\">scalable design systems<\/a> with full auditability<\/strong>. By syncing custom design systems from Git or Storybook, teams can ensure consistency and align prototypes with development standards. Additionally, the AI captures component dependencies during <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" style=\"display: inline;\">design handoff<\/a>, cutting down on the need for extensive manual documentation.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"what-should-i-include-in-prompts-so-claude-uses-my-design-system-components\" tabindex=\"-1\" data-faq-q>What should I include in prompts so Claude uses my design system components?<\/h3>\n<p>To make sure Claude incorporates your design system components, provide detailed and precise instructions in your prompts. Clearly reference your design system or component library by name (like <strong>MUI<\/strong>, <strong>Ant Design<\/strong>, or <strong>custom components<\/strong>) and specify that the output should adhere to its guidelines. For instance, you could say: <em>&quot;Generate a layout using my custom design system components.&quot;<\/em> Be sure to emphasize that the components need to be <strong>production-ready<\/strong> and fully aligned with your design system standards.<\/p>\n<h3 id=\"how-do-i-fix-prop-mismatches-or-sync-errors-in-uxpin-merge\" tabindex=\"-1\" data-faq-q>How do I fix prop mismatches or sync errors in UXPin Merge?<\/h3>\n<p>To address prop mismatches or sync issues in UXPin Merge, it&#8217;s crucial to carefully validate and parse user inputs. This means ensuring that inputs are managed correctly, even when they don&#8217;t match the expected format &#8211; like hex color codes entered without the &quot;#&quot; symbol. You can make adjustments to component properties directly in the Properties Panel or regenerate components using precise prompts to correct discrepancies. By focusing on proper validation and error handling during prop parsing, you can maintain smooth synchronization between design and code, reducing the likelihood of errors.<\/p>\n<h3 id=\"can-i-export-the-prototype-as-clean-react-code-for-my-dev-team\" tabindex=\"-1\" data-faq-q>Can I export the prototype as clean React code for my dev team?<\/h3>\n<p>With <strong>UXPin Merge<\/strong>, you can export prototypes as clean, production-ready React code, making it easier for your development team to implement designs. By using real code components, prototypes function just like the final product, ensuring a smooth transition from design to development.<\/p>\n<p>On top of that, AI tools such as <strong>Claude Sonnet 4.5<\/strong> can help generate React-based layouts and components. This added capability simplifies the workflow, speeding up the development process significantly.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/prototype-claude-opus-4-5-mui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Opus 4.5 + MUI  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-claude-opus-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Opus 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Sonnet 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-claude-sonnet-4-5-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Sonnet 4.5 + Ant Design  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=699b9e24efc60cc2af0911e3\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Turn design systems into production-ready prototypes with AI-generated layouts, synced components, and exportable React code.<\/p>\n","protected":false},"author":231,"featured_media":58268,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"","yoast_metadesc":"","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Prototype with Claude Sonnet 4.5 + Custom DS | UXPin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-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=\"Prototype with Claude Sonnet 4.5 + Custom DS\" \/>\n<meta property=\"og:description\" content=\"Turn design systems into production-ready prototypes with AI-generated layouts, synced components, and exportable React code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-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-02-23T11:56:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-04T00:13:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_8360eb6e68497b17606ff699427b07de.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=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"Prototype with Claude Sonnet 4.5 + Custom DS\",\"datePublished\":\"2026-02-23T11:56:31+00:00\",\"dateModified\":\"2026-03-04T00:13:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\"},\"wordCount\":2428,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_8360eb6e68497b17606ff699427b07de.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\",\"name\":\"Prototype with Claude Sonnet 4.5 + Custom DS | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_8360eb6e68497b17606ff699427b07de.jpeg\",\"datePublished\":\"2026-02-23T11:56:31+00:00\",\"dateModified\":\"2026-03-04T00:13:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_8360eb6e68497b17606ff699427b07de.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_8360eb6e68497b17606ff699427b07de.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to prototype using Claude Sonnet 4.5 + Custom Design Systems - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-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\":\"Prototype with Claude Sonnet 4.5 + Custom DS\"}]},{\"@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":"Prototype with Claude Sonnet 4.5 + Custom DS | UXPin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"Prototype with Claude Sonnet 4.5 + Custom DS","og_description":"Turn design systems into production-ready prototypes with AI-generated layouts, synced components, and exportable React code.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-02-23T11:56:31+00:00","article_modified_time":"2026-03-04T00:13:52+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_8360eb6e68497b17606ff699427b07de.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"Prototype with Claude Sonnet 4.5 + Custom DS","datePublished":"2026-02-23T11:56:31+00:00","dateModified":"2026-03-04T00:13:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/"},"wordCount":2428,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_8360eb6e68497b17606ff699427b07de.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","name":"Prototype with Claude Sonnet 4.5 + Custom DS | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_8360eb6e68497b17606ff699427b07de.jpeg","datePublished":"2026-02-23T11:56:31+00:00","dateModified":"2026-03-04T00:13:52+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_8360eb6e68497b17606ff699427b07de.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_8360eb6e68497b17606ff699427b07de.jpeg","width":1536,"height":1024,"caption":"How to prototype using Claude Sonnet 4.5 + Custom Design Systems - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-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":"Prototype with Claude Sonnet 4.5 + Custom DS"}]},{"@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\/58271","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=58271"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58271\/revisions"}],"predecessor-version":[{"id":58387,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58271\/revisions\/58387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/58268"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=58271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=58271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=58271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}