{"id":58652,"date":"2026-04-03T02:03:39","date_gmt":"2026-04-03T09:03:39","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=58652"},"modified":"2026-05-09T04:51:31","modified_gmt":"2026-05-09T11:51:31","slug":"build-ui-claude-sonnet-4-5-ant-design-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/","title":{"rendered":"How to build UI using Claude Sonnet 4.5 + Ant Design  &#8211;  Use UXPin Merge!"},"content":{"rendered":"<p><strong>Want to design UIs faster with fewer handoffs?<\/strong> Combining <strong><a href=\"https:\/\/www.anthropic.com\/claude\/sonnet\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a><\/strong>, <strong><a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a><\/strong>, and <strong><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/strong> helps teams turn ideas into production-ready <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> code in hours instead of days. Here&#8217;s how it works:<\/p>\n<ul>\n<li><strong>Claude Sonnet 4.5<\/strong>: An AI tool that generates UI layouts and specs from natural language prompts, cutting ideation time by up to 70%.<\/li>\n<li><strong>Ant Design<\/strong>: A React component library with 60+ pre-built, accessible components used by enterprise teams like <a href=\"https:\/\/www.alibabagroup.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Alibaba<\/a>.<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong>: A design tool that lets you prototype with live Ant Design components and export clean React code.<\/li>\n<\/ul>\n<h3 id=\"key-benefits\" tabindex=\"-1\">Key Benefits:<\/h3>\n<ol>\n<li><strong>Faster Prototyping<\/strong>: Generate layouts in minutes using AI and refine them in UXPin.<\/li>\n<li><strong>Streamlined Workflow<\/strong>: Design with real code components, eliminating the need for developers to rebuild designs.<\/li>\n<li><strong>Easy Handoff<\/strong>: Export production-ready React code directly from UXPin.<\/li>\n<\/ol>\n<p><strong>How to start:<\/strong><\/p>\n<ol>\n<li>Set up a UXPin Merge account with access to Ant Design.<\/li>\n<li>Use the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/generate-ui-with-ai\/\" style=\"display: inline;\">AI Component Creator<\/a> with Claude Sonnet 4.5 to generate layouts.<\/li>\n<li>Customize and test prototypes in UXPin, then export React code.<\/li>\n<\/ol>\n<p>This approach simplifies UI design for enterprise teams, saving time and ensuring consistency.<\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/69cf05111b352ff267cd1f23-1775181277523.jpg\" alt=\"Claude Sonnet 4.5 + Ant Design + UXPin Merge UI Design Workflow\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Claude Sonnet 4.5 + Ant Design + UXPin Merge UI Design Workflow<\/p>\n<\/figcaption><\/figure>\n<h2 id=\"getting-started-setup-and-requirements\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Getting Started: Setup and Requirements<\/h2>\n<h3 id=\"required-tools-and-accounts\" tabindex=\"-1\">Required Tools and Accounts<\/h3>\n<p>To begin creating UIs with this workflow, you&#8217;ll need three essentials: a <strong>UXPin Merge account<\/strong>, access to <strong>Claude Sonnet 4.5<\/strong>, and the <strong>Ant Design library<\/strong>. Luckily, UXPin integrates these tools seamlessly &#8211; no need for separate subscriptions or API keys.<\/p>\n<p>A UXPin subscription or trial unlocks Merge&#8217;s code-backed prototyping features and the AI Component Creator. It also provides built-in access to Claude models and the Ant Design library. Additionally, you&#8217;ll need a modern web browser and a reliable internet connection since UXPin Studio operates entirely in the cloud.<\/p>\n<p>Once you&#8217;ve got these in place, you&#8217;re ready to set up UXPin Merge with Ant Design.<\/p>\n<h3 id=\"setting-up-uxpin-merge-with-ant-design\" tabindex=\"-1\">Setting Up <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> with <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69cf05111b352ff267cd1f23\/e1466b9c1d8087bc3408c6e031ed8484.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p>After gathering the necessary tools, log into UXPin and head to the &quot;Merge&quot; section to start a project using code-backed components. From there, navigate to the libraries section and select the built-in Ant Design library &#8211; custom imports are only necessary if you&#8217;re working with a modified version of the library.<\/p>\n<p>Once selected, the Ant Design library provides a comprehensive set of React components that you can drag and drop onto your design canvas. These components are functional, complete with states, props, and logic. When you&#8217;re done prototyping, use the &quot;Get Code&quot; feature to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-to-react-code\/\" style=\"display: inline;\">export production-ready React code<\/a>, including all dependencies.<\/p>\n<h3 id=\"connecting-claude-sonnet-45\" tabindex=\"-1\">Connecting <a href=\"https:\/\/www.anthropic.com\/claude\/sonnet\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69cf05111b352ff267cd1f23\/eecaecaa1497395b8710a5088bc5ed41.jpg\" alt=\"Claude Sonnet 4.5\" style=\"width:100%;\"><\/p>\n<p>To integrate AI into your workflow, open the AI Component Creator, choose <strong>Claude Sonnet 4.5<\/strong>, and set &quot;Ant Design&quot; as your target library. This integration uses the <code>claude-sonnet-4-5<\/code> model identifier via Claude&#8217;s API. Pricing is straightforward: $3 per million input tokens and $15 per million output tokens.<\/p>\n<p>With this setup, you can enter prompts like &quot;create a user registration form with email validation&quot; to see Claude transform your request into a fully functional Ant Design layout. These AI-generated components sync directly to your UXPin design system, allowing for further customization and interactive prototyping.<\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"building-ui-with-claude-sonnet-45-and-ant-design\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Building UI with Claude Sonnet 4.5 and Ant Design<\/h2>\n<h3 id=\"generating-design-ideas-with-claude-sonnet-45\" tabindex=\"-1\">Generating Design Ideas with Claude Sonnet 4.5<\/h3>\n<p>To kick off your workflow, open the AI Component Creator in UXPin and clearly define your UI needs. Treat Claude like a seasoned expert who thrives on precise instructions. For example, instead of a vague request like &quot;create a dashboard&quot;, go with something detailed: <em>&quot;Generate a responsive dashboard layout using Ant Design components, including a data table for user metrics and a sidebar for navigation.&quot;<\/em><\/p>\n<p>Claude takes your input and converts it into React layouts, using real Ant Design components. These aren&#8217;t just static shapes &#8211; they&#8217;re interactive, code-backed prototypes that sync directly into UXPin Merge.<\/p>\n<p>For more intricate layouts, consider using XML tags to structure your prompts. Wrap specific details in tags like <code>&lt;branding&gt;<\/code>, <code>&lt;layout&gt;<\/code>, and <code>&lt;components&gt;<\/code> to help Claude interpret your requirements effectively. Providing 3\u20135 examples of Ant Design implementations can also ensure the output aligns with the library&#8217;s visual and functional standards.<\/p>\n<p>Once Claude delivers the initial layouts, you can refine them further using Ant Design&#8217;s component library.<\/p>\n<h3 id=\"customizing-ant-design-components\" tabindex=\"-1\">Customizing Ant Design Components<\/h3>\n<p>After Claude generates the layout, you can fine-tune it directly in UXPin. The UXPin Properties Panel makes it easy to adjust component props &#8211; whether you&#8217;re toggling between variants, changing sizes, or tweaking colors and states. Every change you make in the design tool translates seamlessly into the final code.<\/p>\n<p>UXPin reports that designing with Merge components is <strong>8.6 times faster<\/strong> than traditional vector-based tools. This efficiency comes from being able to edit props directly, cutting out the manual design guesswork. Once your customizations are complete, Spec Mode lets you share exact JSX code, dependencies, and functions with developers.<\/p>\n<p>With your components tailored, the next step is to assemble them into an interactive prototype.<\/p>\n<h3 id=\"creating-interactive-prototypes\" tabindex=\"-1\">Creating Interactive Prototypes<\/h3>\n<p>Use drag-and-drop functionality to place Ant Design components onto the canvas and build your prototype. Add variables, conditional logic, and expressions to simulate real-world scenarios, creating a prototype that&#8217;s nearly production-ready.<\/p>\n<p>This streamlined process can dramatically reduce development timelines. Mark Figueiredo, Sr. UX Team Lead at <a href=\"https:\/\/www.troweprice.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">T.Rowe Price<\/a>, shared:<\/p>\n<blockquote>\n<p>&quot;What used to take days to gather feedback now takes hours. Add in the time we&#8217;ve saved from not emailing back-and-forth and manually redlining, and we&#8217;ve probably shaved months off timelines.&quot;<\/p>\n<\/blockquote>\n<p>Larry Sawyer, Lead UX Designer, also highlighted the impact:<\/p>\n<blockquote>\n<p>&quot;When I used UXPin Merge, our engineering time was reduced by around 50%.&quot;<\/p>\n<\/blockquote>\n<p>Once your prototype is finalized, you can export it as code-ready React files or open it directly in development environments like <a href=\"https:\/\/stackblitz.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">StackBlitz<\/a> with just one click.<\/p>\n<h2 id=\"previewing-testing-and-exporting-prototypes\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Previewing, Testing, and Exporting Prototypes<\/h2>\n<h3 id=\"previewing-ui-designs\" tabindex=\"-1\">Previewing UI Designs<\/h3>\n<p>UXPin&#8217;s preview feature allows you to interact with your prototype just as it would function in production. By using code-backed Ant Design components, the preview replicates live production states, dynamic content, and interactivity. You can use the browser preview to check how forms respond, test date pickers, and verify conditional UI behaviors.<\/p>\n<p>This high-fidelity approach makes stakeholder feedback more actionable. As Erica Rider, Former UX Lead EPX at <a href=\"https:\/\/www.paypal.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">PayPal<\/a>, shared:<\/p>\n<blockquote>\n<p>&quot;C-suite people and directors can give us stronger feedback about the ultimate direction because they experience the features and goals of these prototypes rather than just commenting about how these boxes don&#8217;t look like a text field.&quot;<\/p>\n<\/blockquote>\n<p>After previewing, the next step is to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-testing\/\" style=\"display: inline;\">validate your design through thorough testing<\/a> to ensure it works as intended.<\/p>\n<h3 id=\"testing-for-functionality-and-usability\" tabindex=\"-1\">Testing for Functionality and Usability<\/h3>\n<p>Once you&#8217;ve reviewed the live preview, it&#8217;s time to test your prototype against real-world scenarios. Incorporate variables and expressions to simulate actual user behavior, and avoid relying on static screens that only show ideal conditions. Focus on testing edge cases, error states, and complex user flows to identify potential issues before development begins.<\/p>\n<p>UXPin&#8217;s built-in commenting system makes it easy to gather feedback from team members like designers, product managers, and engineers. You can tag specific people, assign tasks, and mark comments as resolved &#8211; all directly within the prototype. For usability testing with external users, password-protect your prototype links to maintain control over access.<\/p>\n<p>Brian Demchak, Sr. UX Designer at AAA Digital &amp; Creative Services, highlighted the benefits:<\/p>\n<blockquote>\n<p>&quot;It has increased our productivity, quality, and consistency, streamlining our testing of layouts and the developer handoff process.&quot;<\/p>\n<\/blockquote>\n<h3 id=\"exporting-code-ready-prototypes\" tabindex=\"-1\">Exporting Code-Ready Prototypes<\/h3>\n<p>After validating the prototype through preview and testing, the final step is exporting your production-ready components. When your design is complete, UXPin allows you to export it as <strong>production-ready React code<\/strong> along with all necessary dependencies. You can use Spec Mode to copy clean JSX code or export it directly into your project. There&#8217;s even an option to launch it in StackBlitz with a single click.<\/p>\n<p>Since UXPin Merge uses the same Ant Design components for both design and development, there&#8217;s no need for a translation layer. This means your design elements translate directly into production code, eliminating manual redlines and reducing back-and-forth communication. This <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" style=\"display: inline;\">streamlined handoff process<\/a> helps teams save months of work and significantly cuts down on engineering time.<\/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\/\" style=\"display: inline;\">UXPin<\/a> Merge AI: Smarter UI Generation That Follows Your Design System<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69cf05111b352ff267cd1f23\/4fb0c2119ef162d0ca129f64e91356b6.jpg\" alt=\"UXPin\" 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<h2 id=\"benefits-of-using-claude-sonnet-45-ant-design-in-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Benefits of Using Claude Sonnet 4.5 + Ant Design in UXPin Merge<\/h2>\n<p>Building on the streamlined workflows mentioned earlier, this combination offers several advantages that can transform enterprise-scale design processes.<\/p>\n<h3 id=\"faster-prototyping-and-delivery\" tabindex=\"-1\">Faster Prototyping and Delivery<\/h3>\n<p>This approach drastically cuts down on the manual effort involved in UI construction, which often slows enterprise teams. With Claude Sonnet 4.5, text prompts are turned into production-ready <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/integrate-with-ant-design-npm\/\" style=\"display: inline;\">Ant Design React components<\/a>. This means you can create complex interface layouts in just minutes instead of hours. Since these components are backed by real code, the prototypes are immediately functional, eliminating the need for time-consuming rebuilds later.<\/p>\n<p>The results are impressive. Using UXPin Merge can make project development up to <strong>10 times faster<\/strong> compared to traditional methods. Teams can move from initial concepts to testable prototypes in just one day, enabling quicker iteration cycles and more effective feedback from stakeholders.<\/p>\n<h3 id=\"better-collaboration-between-designers-and-developers\" tabindex=\"-1\">Better Collaboration Between Designers and Developers<\/h3>\n<p>When both designers and developers work with the same Ant Design components, communication gaps shrink. There&#8217;s no need for a &#8220;translation&#8221; layer between design and code because the prototype is essentially the actual code. <a href=\"https:\/\/www.dreamfactory.com\" target=\"_blank\" rel=\"noopener noreferrer\">DreamFactory<\/a> and similar platforms excel at providing governed API access to data sources, and this principle\u2014using the same components across your entire stack\u2014applies equally to design systems. Developers can grab clean JSX directly from the design interface, complete with all the properties and dependencies configured by designers.<\/p>\n<p>Mark Figueiredo, a Senior UX Team Lead at T. Rowe Price, highlighted this efficiency:<\/p>\n<blockquote>\n<p>&quot;What used to take days to gather feedback now takes hours. Add in the time we&#8217;ve saved from not emailing back-and-forth and manually redlining, and we&#8217;ve probably shaved months off timelines.&quot;<\/p>\n<\/blockquote>\n<h3 id=\"scalability-and-governance-for-enterprise-teams\" tabindex=\"-1\">Scalability and Governance for Enterprise Teams<\/h3>\n<p>UXPin Merge integrates Ant Design components directly into the editor, serving as a single source of truth for enterprise teams. When Claude Sonnet 4.5 generates layouts, these AI-created components automatically align with your organization&#8217;s design system standards, ensuring consistency across projects.<\/p>\n<p>In addition to maintaining consistency, this setup allows you to control which components are available, enforce theming standards, and track version histories. These features are vital for enterprise-scale operations. Plus, because the components are code-backed, any updates to your design system are automatically applied across all projects, keeping every team in sync without requiring manual updates.<\/p>\n<h2 id=\"conclusion\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion<\/h2>\n<p>Merging Claude Sonnet 4.5 with Ant Design through UXPin Merge creates an efficient workflow that reshapes how enterprise teams approach user interface design. By generating production-ready React components with Claude, refining them in UXPin, and exporting functional prototypes, teams can eliminate the traditional <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" style=\"display: inline;\">design-to-development handoff<\/a> entirely.<\/p>\n<p>This approach allows teams to move quickly from initial ideas to testable prototypes, saving significant time compared to older methods. Because the workflow relies on shared components, what gets designed is exactly what gets built, reducing errors and the need for rework.<\/p>\n<p>For enterprise teams, this process tackles scalability issues head-on. Components generated by Claude naturally adhere to your organization&#8217;s design system, ensuring consistent branding and functionality across all projects.<\/p>\n<p>Here&#8217;s how it works: set up your <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/what-is-uxpin-merge\/\" style=\"display: inline;\">UXPin Merge environment<\/a> with Ant Design components, use Claude to create initial layouts, customize and test prototypes with real interactivity, and export development-ready designs. This seamless pipeline takes concepts straight to production efficiently.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"do-i-need-separate-api-keys-to-use-claude-in-uxpin-merge\" tabindex=\"-1\" data-faq-q>Do I need separate API keys to use Claude in UXPin Merge?<\/h3>\n<p>To enable Claude Sonnet 4.5 in UXPin Merge, you&#8217;ll need to connect your API key. This integration allows smooth operation and gives you access to the necessary tools for creating user interfaces effectively.<\/p>\n<h3 id=\"how-do-i-make-claude-generate-only-ant-design-components\" tabindex=\"-1\" data-faq-q>How do I make Claude generate only Ant Design components?<\/h3>\n<p>When working with Claude to create React components, it&#8217;s essential to provide <strong>clear and specific prompts<\/strong> that explicitly reference Ant Design as the target library. For example, instead of a vague request, you could say:<\/p>\n<p><em>&quot;Generate React components using only Ant Design for a login form.&quot;<\/em><\/p>\n<p>By including precise instructions like this, you guide the AI to focus exclusively on Ant Design. This approach ensures the output stays aligned with your needs and is ready for production use.<\/p>\n<h3 id=\"will-exported-react-code-include-ant-design-dependencies\" tabindex=\"-1\" data-faq-q>Will exported React code include Ant Design dependencies?<\/h3>\n<p>Yes, the React code exported from UXPin Merge, which integrates Claude Sonnet 4.5 with Ant Design, <strong>does include Ant Design dependencies<\/strong>. This is because UXPin Merge allows you to prototype using production-ready components, ensuring that the generated code is fully prepared for development and already includes the necessary Ant Design dependencies.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\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<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-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=69cf05111b352ff267cd1f23\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use Claude Sonnet 4.5 with Ant Design in UXPin Merge to generate code-backed React UI prototypes faster and export production-ready code.<\/p>\n","protected":false},"author":231,"featured_media":58649,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58652","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 UI using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge! | UXPin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build UI using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Use Claude Sonnet 4.5 with Ant Design in UXPin Merge to generate code-backed React UI prototypes faster and export production-ready code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-03T09:03:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-09T11:51:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_0058dfd0f0c173e1e01ba81a1849ed8b.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=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"How to build UI using Claude Sonnet 4.5 + Ant Design &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-04-03T09:03:39+00:00\",\"dateModified\":\"2026-05-09T11:51:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\"},\"wordCount\":2164,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_0058dfd0f0c173e1e01ba81a1849ed8b.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\",\"name\":\"How to build UI using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge! | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_0058dfd0f0c173e1e01ba81a1849ed8b.jpeg\",\"datePublished\":\"2026-04-03T09:03:39+00:00\",\"dateModified\":\"2026-05-09T11:51:31+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_0058dfd0f0c173e1e01ba81a1849ed8b.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_0058dfd0f0c173e1e01ba81a1849ed8b.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UI using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to build UI using Claude Sonnet 4.5 + Ant Design &#8211; Use UXPin Merge!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\",\"name\":\"Andrew Martin\",\"description\":\"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/andrewSaaS\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/andrewuxpin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to build UI using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge! | UXPin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UI using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge!","og_description":"Use Claude Sonnet 4.5 with Ant Design in UXPin Merge to generate code-backed React UI prototypes faster and export production-ready code.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-04-03T09:03:39+00:00","article_modified_time":"2026-05-09T11:51:31+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_0058dfd0f0c173e1e01ba81a1849ed8b.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"How to build UI using Claude Sonnet 4.5 + Ant Design &#8211; Use UXPin Merge!","datePublished":"2026-04-03T09:03:39+00:00","dateModified":"2026-05-09T11:51:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/"},"wordCount":2164,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_0058dfd0f0c173e1e01ba81a1849ed8b.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/","name":"How to build UI using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge! | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_0058dfd0f0c173e1e01ba81a1849ed8b.jpeg","datePublished":"2026-04-03T09:03:39+00:00","dateModified":"2026-05-09T11:51:31+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_0058dfd0f0c173e1e01ba81a1849ed8b.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_0058dfd0f0c173e1e01ba81a1849ed8b.jpeg","width":1536,"height":1024,"caption":"How to build UI using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to build UI using Claude Sonnet 4.5 + Ant Design &#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\/58652","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=58652"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58652\/revisions"}],"predecessor-version":[{"id":59830,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58652\/revisions\/59830"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/58649"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=58652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=58652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=58652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}