{"id":60031,"date":"2026-05-29T00:47:34","date_gmt":"2026-05-29T07:47:34","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=60031"},"modified":"2026-05-29T00:47:34","modified_gmt":"2026-05-29T07:47:34","slug":"build-ux-claude-sonnet-4-5-ant-design-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/","title":{"rendered":"How to build UX using Claude Sonnet 4.5 + Ant Design  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p>Creating consistent designs for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/44-enterprise-ux-resources-worth-bookmarking\/\" style=\"display: inline;\">enterprise applications<\/a> can be challenging when designers and developers work in silos. This article explains how to use <strong><a href=\"https:\/\/www.anthropic.com\/news\/claude-sonnet-4-5\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a><\/strong>, <strong><a href=\"https:\/\/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> to streamline the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/\" style=\"display: inline;\">design-to-code process<\/a>. Here&#8217;s a quick overview:<\/p>\n<ul>\n<li><strong>Claude Sonnet 4.5<\/strong>: An AI tool that generates detailed UX specs aligned with your design system.<\/li>\n<li><strong>Ant Design<\/strong>: A <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a>-based UI library for scalable, standardized components.<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong>: A design tool that lets you use production-ready Ant Design components directly in your mockups.<\/li>\n<\/ul>\n<p>This workflow eliminates the gap between design and development by ensuring designers and developers work with the same components from start to finish. You&#8217;ll learn how to set up these tools, generate precise UX specs, and design interactive screens that align perfectly with your codebase.<\/p>\n<h3 id=\"key-steps\" tabindex=\"-1\">Key Steps:<\/h3>\n<ol>\n<li>Use <strong>Claude Sonnet 4.5<\/strong> to generate Ant Design-based UX specs.<\/li>\n<li>Configure <strong>Ant Design<\/strong> in your codebase for customization.<\/li>\n<li>Integrate <strong>UXPin Merge<\/strong> to design with real Ant Design components.<\/li>\n<li>Apply US localization standards for dates, currencies, and accessibility.<\/li>\n<\/ol>\n<p>This process reduces rework, ensures consistency, and speeds up delivery. Let\u2019s dive into the details.<\/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\/6a18d7ff5ded517781cb36b7\/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=\"setting-up-the-tools-prerequisites-and-preparation\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Setting Up the Tools: Prerequisites and Preparation<\/h2>\n<p>To ensure your AI-generated specifications seamlessly convert into production-ready designs, it&#8217;s crucial to set up the right tools from the start. Properly configuring <strong>Claude Sonnet 4.5<\/strong>, <strong>Ant Design<\/strong>, and <strong>UXPin Merge<\/strong> will save you from potential headaches later on.<\/p>\n<h3 id=\"accessing-claude-sonnet-45-and-understanding-requirements\" tabindex=\"-1\">Accessing <a href=\"https:\/\/www.anthropic.com\/news\/claude-sonnet-4-5\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a> and Understanding Requirements<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a18d7ff5ded517781cb36b7\/3a3b996d4b72469abbd6489140f1b4a7.jpg\" alt=\"Claude Sonnet 4.5\" style=\"width:100%;\"><\/p>\n<p>You can access <strong>Claude Sonnet 4.5<\/strong> through <a href=\"https:\/\/www.anthropic.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Anthropic<\/a>&#8216;s platform, either via the <strong><a href=\"https:\/\/claude.ai\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude.ai<\/a> web interface<\/strong> or the <strong>Anthropic API<\/strong>. For enterprise teams, the API option is especially useful &#8211; it allows you to integrate the tool directly into your internal workflows and automate the generation of specifications.<\/p>\n<h3 id=\"setting-up-ant-design-in-your-codebase\" tabindex=\"-1\">Setting Up <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a> in Your Codebase<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a18d7ff5ded517781cb36b7\/0691ef48a0b85e4b98186be766e10875.jpg\" alt=\"Ant Design\" style=\"width:100%;\"><\/p>\n<p>If you haven&#8217;t already installed <strong>Ant Design<\/strong> in your React project, you can do so by running the following commands in your project directory:<\/p>\n<ul>\n<li><code>npm install antd<\/code><\/li>\n<li><code>yarn add antd<\/code><\/li>\n<\/ul>\n<p>Once installed, import the global stylesheet by adding this line to your application\u2019s entry point:<\/p>\n<pre><code class=\"language-javascript\">import 'antd\/dist\/reset.css'; <\/code><\/pre>\n<p>To customize Ant Design for your branding needs, use the <code>ConfigProvider<\/code> component. This allows you to define core <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" style=\"display: inline;\">design tokens<\/a> like:<\/p>\n<ul>\n<li><code>colorPrimary<\/code><\/li>\n<li><code>borderRadius<\/code><\/li>\n<li><code>fontFamily<\/code><\/li>\n<li><code>fontSize<\/code><\/li>\n<\/ul>\n<p>With Ant Design integrated and tailored to your project, you\u2019re ready to set up UXPin Merge for a smooth <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/convert-design-to-code-better-way\/\" style=\"display: inline;\">design-to-code workflow<\/a>.<\/p>\n<h3 id=\"configuring-uxpin-merge-for-ant-design\" tabindex=\"-1\">Configuring <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge for Ant Design<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a18d7ff5ded517781cb36b7\/60b0f760d99e4093d871a7be42c8c402.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>After integrating Ant Design, the next step is configuring <strong>UXPin Merge<\/strong> to align with your setup. UXPin Merge lets designers work directly with production-ready code by integrating Ant Design components.<\/p>\n<p>For teams using a customized version of Ant Design &#8211; such as a forked version with proprietary themes or extended components &#8211; you&#8217;ll need to connect your repository. Start by creating a <code>uxpin.config.js<\/code> file in your project\u2019s root directory. This file defines:<\/p>\n<ul>\n<li>Component categories<\/li>\n<li>Custom styles<\/li>\n<li>Exposed props<\/li>\n<\/ul>\n<p>Next, use a <code>webpack.config.js<\/code> file to bundle your components and assets for Merge. To ensure consistency between design and production, make sure the Ant Design version in your Merge repository\u2019s <code>package.json<\/code> matches the version in your production codebase. This prevents any potential design inconsistencies.<\/p>\n<p>With everything set up, your tools will be ready to support a streamlined, efficient design-to-code process.<\/p>\n<h2 id=\"using-claude-sonnet-45-to-generate-ux-specifications\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Using Claude Sonnet 4.5 to Generate UX Specifications<\/h2>\n<p>Once your tools are set up and Ant Design is integrated with UXPin Merge, it&#8217;s time to put Claude Sonnet 4.5 to work. This step transforms a product brief into a detailed, component-level UX specification in just minutes, ensuring your AI-generated specs align precisely with production-ready components.<\/p>\n<h3 id=\"prompting-claude-sonnet-for-ant-design-ready-outputs\" tabindex=\"-1\">Prompting Claude Sonnet for Ant Design Ready Outputs<\/h3>\n<p>The quality of the specifications you get depends heavily on how well you craft your prompt. A poorly written prompt will lead to subpar results, so it&#8217;s crucial to include these four elements: the tooling context, the design system constraints, the desired output format, and localization and accessibility rules.<\/p>\n<p>Here\u2019s an example prompt tailored for a <strong>Subscription Billing Dashboard<\/strong> in a US-based SaaS product:<\/p>\n<blockquote>\n<p>&quot;You are an enterprise UX architect designing a &#8216;Subscription Billing Dashboard&#8217; for a US-based SaaS platform. Constraints: \u2013 Tech stack: React + Ant Design + UXPin Merge. Use only Ant Design components, referenced by their exact names from the official documentation (e.g., <code>Table<\/code>, <code>Form<\/code>, <code>DatePicker<\/code>, <code>Modal<\/code>). \u2013 Output: For each screen, provide: user goal, primary Ant Design layout components, form fields with component types, validation rules, interaction flows (including loading and error states), accessibility notes, and US localization rules. \u2013 Localization: Dates in MM\/DD\/YYYY format (e.g., 04\/15\/2026). Currency as USD with the $ symbol immediately before amounts, using commas as thousands separators and periods as decimals (e.g., $12,345.67). Time in 12-hour format with AM\/PM. \u2013 Accessibility: All interactive elements must have accessible names. Modals must trap focus and include <code>aria-labelledby<\/code> and <code>aria-describedby<\/code>. Forms must expose validation errors to screen readers. Generate UX specifications for: 1) Billing overview screen, 2) Invoice list screen, 3) Invoice details + payment screen.&quot;<\/p>\n<\/blockquote>\n<p>Precise prompts like this lead to implementation-ready results. You can even ask Claude to deliver the output in a <strong>structured Markdown table or JSON<\/strong> format. This makes it easier to map the generated specs directly to UXPin Merge components, with fields like <code>screen_name<\/code>, <code>components<\/code>, <code>props<\/code>, <code>interactions<\/code>, and <code>error_states<\/code>.<\/p>\n<h3 id=\"iterating-on-designs-with-claude-sonnet\" tabindex=\"-1\">Iterating on Designs with Claude Sonnet<\/h3>\n<p>Claude Sonnet 4.5 excels at maintaining context over extended conversations, which is especially useful for refining your UX specifications. Stick to a single chat thread per project so that Claude can reference earlier inputs as you refine your designs.<\/p>\n<p>Start by defining a screen inventory and outlining user goals. Once you have an initial flow, use feedback from stakeholders to refine your designs. For example, if a stakeholder mentions that the invoice table feels too cluttered, avoid vague prompts like &quot;fix it.&quot; Instead, be specific: &quot;Stakeholders say the Table is too dense. Propose an alternate component map using <code>Tabs<\/code> + <code>Table<\/code> + <code>Tag<\/code> for status. Suggest <code>Table<\/code> props for pagination, fixed columns, and sorting optimized for readability.&quot;<\/p>\n<p>For enterprise systems with role-based access, you can ask Claude to generate variant specifications for different user roles, such as Admins and Analysts. This way, you can adjust visible actions and default filters while sticking to the same Ant Design components. This approach ensures your component library remains efficient while accommodating access control needs.<\/p>\n<p>As you refine the designs, make sure to consistently enforce US localization standards for a polished and cohesive result.<\/p>\n<h3 id=\"applying-us-localization-standards-in-your-designs\" tabindex=\"-1\">Applying US Localization Standards in Your Designs<\/h3>\n<p>Localization issues in enterprise UX can be easy to miss but costly to fix later. Treat US formatting rules as strict constraints and include them in every prompt from the start.<\/p>\n<p>Add this block to your system message or at the beginning of each new conversation:<\/p>\n<blockquote>\n<p>&quot;Assume en-US locale throughout. Use MM\/DD\/YYYY for numeric dates, 12-hour time with AM\/PM for all user-facing timestamps, and immediately before amounts use commas as thousands separators with two decimal places (e.g., <code>$1,234.56<\/code>), applying imperial units (miles, pounds, \u00b0F) for any user-facing measurements.&quot;<\/p>\n<\/blockquote>\n<p>Enforcing these rules ensures consistency across all outputs. Additionally, ask Claude to write error messages and validation copy in clear, user-friendly language that aligns with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/\" style=\"display: inline;\">WCAG 2.1 AA guidelines<\/a>. For instance, use messages like &quot;Enter a valid date (MM\/DD\/YYYY)&quot; instead of technical phrases like &quot;Invalid input.&quot;<\/p>\n<p>With these refined specifications in hand, you\u2019re ready to create interactive screens using Ant Design components in UXPin Merge.<\/p>\n<h2 id=\"designing-code-backed-ux-in-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Designing Code-Backed UX in UXPin Merge<\/h2>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a18d7ff5ded517781cb36b7-1780015126654.jpg\" alt=\"Static Design Tools vs UXPin Merge with Ant Design: Feature Comparison\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Static Design Tools vs UXPin Merge with Ant Design: Feature Comparison<\/p>\n<\/figcaption><\/figure>\n<p>Using the precise specifications from Claude Sonnet 4.5 and the earlier tool configuration, this section dives into how to turn those specs into interactive screens with UXPin Merge. Here\u2019s where the workflow shines: instead of building components from scratch, you\u2019re working directly with Ant Design code &#8211; the same code that will go into production.<\/p>\n<h3 id=\"building-screens-with-ant-design-components\" tabindex=\"-1\">Building Screens with Ant Design Components<\/h3>\n<p>UXPin Merge connects directly to a Git repository housing your <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ant-design-introduction\/\" style=\"display: inline;\">Ant Design component library<\/a>. A <code>uxpin.config.js<\/code> file determines which components and properties (like <code>IconPosition<\/code> and <code>renderItem<\/code>) are available to designers, along with settings for pagination and status tags. Once in the UXPin editor, you can simply drag a component, such as a <code>Table<\/code>, onto the canvas and adjust its properties &#8211; no coding required. The component you place is actual React code ready for production.<\/p>\n<p>For instance, if your design calls for a layout using <code>Tabs<\/code>, <code>Table<\/code>, and <code>Tag<\/code> components, you just assemble them and configure the necessary props. This approach ensures the final design matches what will be built, maintaining consistency.<\/p>\n<h3 id=\"keeping-designs-consistent-and-avoiding-design-drift\" tabindex=\"-1\">Keeping Designs Consistent and Avoiding Design Drift<\/h3>\n<p>One of the biggest challenges in enterprise UX is design drift &#8211; when designs slowly diverge from the final build. UXPin Merge tackles this issue by rendering Ant Design components directly from your code repository. Any updates made to the codebase automatically sync, keeping your designs perfectly aligned with production.<\/p>\n<p>Here\u2019s a quick comparison:<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Feature<\/th>\n<th>Static Design Tools<\/th>\n<th>UXPin Merge (Ant Design)<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Component basis<\/strong><\/td>\n<td>Vector\/image approximations<\/td>\n<td>Production React code<\/td>\n<\/tr>\n<tr>\n<td><strong>Design drift<\/strong><\/td>\n<td>Commonly occurs<\/td>\n<td>None &#8211; design matches code<\/td>\n<\/tr>\n<tr>\n<td><strong>Interactions<\/strong><\/td>\n<td>Simulated logic<\/td>\n<td>Real code-based logic and states<\/td>\n<\/tr>\n<tr>\n<td><strong>Handoff<\/strong><\/td>\n<td>Manual documentation<\/td>\n<td>Production-ready JSX and props<\/td>\n<\/tr>\n<tr>\n<td><strong>Maintenance<\/strong><\/td>\n<td>Manual updates needed<\/td>\n<td>Automatic syncing with the repository<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The configuration file also enforces consistency by controlling which properties are editable. This ensures designers stay within the boundaries of the established design system.<\/p>\n<h3 id=\"testing-and-validating-interactions\" tabindex=\"-1\">Testing and Validating Interactions<\/h3>\n<p>With UXPin Merge, you can test live component logic for interactions, form validation, and pagination directly in the design phase. This reduces back-and-forth revisions and speeds up deployment timelines. By bridging the gap between design and development, UXPin Merge enables efficient, enterprise-level UX workflows. <\/p>\n<h2 id=\"conclusion-faster-enterprise-ux-with-ai-and-code-first-design\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion: Faster Enterprise UX with AI and Code-First Design<\/h2>\n<p>By combining <strong>Claude Sonnet 4.5<\/strong>, <strong>Ant Design<\/strong>, and <strong>UXPin Merge<\/strong>, you can simplify every step of the design process &#8211; from writing specs to validating interactions &#8211; while staying connected to real, production-ready code. Claude Sonnet 4.5 translates natural-language requirements into actionable UX specifications and component guidance. Ant Design delivers an enterprise-level UI framework that standardizes your design language. And UXPin Merge ties it all together by <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-workflow-with-code-components\/\" style=\"display: inline;\">integrating design and production code<\/a>. This workflow not only smooths out processes but also delivers measurable results.<\/p>\n<h3 id=\"key-benefits-of-combining-these-tools\" tabindex=\"-1\">Key Benefits of Combining These Tools<\/h3>\n<p>One of the biggest advantages is cutting down on rework. Traditional workflows often require developers to rebuild UI elements after design sign-off because static mockups fail to capture how components behave. With this integrated stack, designers and developers use the same Ant Design components from the start &#8211; complete with pre-set states, validation rules, and constraints, ensuring alignment from day one.<\/p>\n<p>Take, for example, a US-based fintech team. They could use plain-language requirements to create precise specs that align with Ant Design components tailored for US standards. Designers would then assemble user flows in UXPin Merge, allowing developers to implement components with minimal adjustments. The result? Release cycles that take weeks instead of months.<\/p>\n<p>Another benefit is improved consistency. Ant Design&#8217;s system and token rules, enforced directly in UXPin Merge, ensure that teams working on multiple products stay aligned. This is especially valuable for large US enterprises managing several internal tools simultaneously.<\/p>\n<h3 id=\"next-steps-for-your-team\" tabindex=\"-1\">Next Steps for Your Team<\/h3>\n<p>With the combined power of Claude Sonnet 4.5, Ant Design, and UXPin Merge, your team is ready to transform enterprise UX. Here\u2019s how to get started:<\/p>\n<ol>\n<li>Begin with a pilot project &#8211; something manageable like a settings page, an admin report, or a sign-up funnel.<\/li>\n<li>Define three to five core user stories, then use Claude Sonnet 4.5 to generate UX specs with US-localized details, such as dates, currency formats, and tone.<\/li>\n<li>Rebuild the flow in UXPin Merge using Ant Design components.<\/li>\n<li>Conduct a collaborative review session within UXPin Merge, involving your designer, developer, and product owner, to validate interactions and constraints.<\/li>\n<\/ol>\n<p>To measure the success of this workflow, track a few key metrics: the time it takes to go from requirements to a clickable prototype, the number of design\/development review cycles before development kicks off, and the rate of UI-related defects after release. Compare these metrics after several iterations to evaluate improvements.<\/p>\n<p>For more detailed instructions, check out UXPin&#8217;s Merge setup documentation and explore Ant Design starter resources on the UXPin website. This approach can help your team accelerate delivery and build more consistent, efficient enterprise UX.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"how-do-i-make-claude-output-exact-ant-design-components\" tabindex=\"-1\" data-faq-q>How do I make Claude output exact Ant Design components?<\/h3>\n<p>To get accurate Ant Design components from Claude, start by opening the AI Component Creator in UXPin and choosing Ant Design as your library. Use specific prompts, such as <em>&quot;responsive dashboard layout with Ant Design components.&quot;<\/em> For more intricate layouts, structure your prompts using XML tags and provide 3\u20135 examples of Ant Design implementations for reference. Additionally, you can upload wireframes or mockups for Claude to analyze and convert into components.<\/p>\n<h3 id=\"what-do-i-need-to-set-up-uxpin-merge-with-my-ant-design-repo\" tabindex=\"-1\" data-faq-q>What do I need to set up UXPin Merge with my Ant Design repo?<\/h3>\n<p>Setting up <strong>UXPin Merge<\/strong> with <strong>Ant Design<\/strong> is straightforward for the standard library since it\u2019s already integrated into the platform. Just log into your UXPin account, start a project, and choose <strong>Ant Design<\/strong> from the Design System Libraries.<\/p>\n<p>For custom or modified versions of Ant Design, you\u2019ll need to take an extra step. Use the <strong><a href=\"https:\/\/www.uxpin.com\/docs\/merge\/cli-tool\/\" style=\"display: inline;\">UXPin Merge CLI<\/a><\/strong> to connect your repository or import it directly through the library manager.<\/p>\n<h3 id=\"how-do-i-enforce-en-us-dates-currency-and-accessibility-in-specs\" tabindex=\"-1\" data-faq-q>How do I enforce en-US dates, currency, and accessibility in specs?<\/h3>\n<p>To align with en-US standards, leverage Ant Design\u2019s internationalization tools to adjust components like <strong>DatePicker<\/strong> and <strong>Select<\/strong> for regional formats. In UXPin, configure styling and data formats directly in the <strong>Properties Panel<\/strong> for precision. When it&#8217;s time for handoff, developers can retrieve token-based values &#8211; such as spacing and colors &#8211; through <strong>Spec Mode<\/strong>. For consistent typography and formatting across your project, implement a <strong>Global Wrapper Component<\/strong> to apply custom CSS or themes seamlessly.<\/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\/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-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to build UI 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=6a18d7ff5ded517781cb36b7\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use AI-generated UX specs with Ant Design and UXPin Merge to build production-ready, consistent, US-localized enterprise interfaces.<\/p>\n","protected":false},"author":231,"featured_media":60028,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60031","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"Ant Design UX with UXPin Merge & AI","yoast_metadesc":"Use AI-generated UX specs with Ant Design and UXPin Merge to build production-ready, consistent, US-localized enterprise interfaces.","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>Ant Design UX with UXPin Merge &amp; AI<\/title>\n<meta name=\"description\" content=\"Use AI-generated UX specs with Ant Design and UXPin Merge to build production-ready, consistent, US-localized enterprise interfaces.\" \/>\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-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 UX using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Use AI-generated UX specs with Ant Design and UXPin Merge to build production-ready, consistent, US-localized enterprise interfaces.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-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-05-29T07:47:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_550483ca704e3ceaa9603af244996144.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\\\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-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 UX using Claude Sonnet 4.5 + Ant Design &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-05-29T07:47:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\"},\"wordCount\":2342,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_550483ca704e3ceaa9603af244996144.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\",\"name\":\"Ant Design UX with UXPin Merge & AI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_550483ca704e3ceaa9603af244996144.jpeg\",\"datePublished\":\"2026-05-29T07:47:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"description\":\"Use AI-generated UX specs with Ant Design and UXPin Merge to build production-ready, consistent, US-localized enterprise interfaces.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_550483ca704e3ceaa9603af244996144.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_550483ca704e3ceaa9603af244996144.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UX using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-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 UX 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":"Ant Design UX with UXPin Merge & AI","description":"Use AI-generated UX specs with Ant Design and UXPin Merge to build production-ready, consistent, US-localized enterprise interfaces.","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-ant-design-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UX using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge!","og_description":"Use AI-generated UX specs with Ant Design and UXPin Merge to build production-ready, consistent, US-localized enterprise interfaces.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-05-29T07:47:34+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_550483ca704e3ceaa9603af244996144.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\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-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 UX using Claude Sonnet 4.5 + Ant Design &#8211; Use UXPin Merge!","datePublished":"2026-05-29T07:47:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/"},"wordCount":2342,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_550483ca704e3ceaa9603af244996144.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/","name":"Ant Design UX with UXPin Merge & AI","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_550483ca704e3ceaa9603af244996144.jpeg","datePublished":"2026-05-29T07:47:34+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"description":"Use AI-generated UX specs with Ant Design and UXPin Merge to build production-ready, consistent, US-localized enterprise interfaces.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-sonnet-4-5-ant-design-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_550483ca704e3ceaa9603af244996144.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_550483ca704e3ceaa9603af244996144.jpeg","width":1536,"height":1024,"caption":"How to build UX using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-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 UX 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\/60031","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=60031"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60031\/revisions"}],"predecessor-version":[{"id":60032,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60031\/revisions\/60032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/60028"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=60031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=60031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=60031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}