{"id":58689,"date":"2026-04-08T02:09:44","date_gmt":"2026-04-08T09:09:44","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=58689"},"modified":"2026-04-08T02:09:44","modified_gmt":"2026-04-08T09:09:44","slug":"build-ui-claude-haiku-4-5-ant-design-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\/","title":{"rendered":"How to build UI using Claude Haiku 4.5 + Ant Design  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p>Building UIs for enterprise applications can be faster and more efficient by combining <strong><a href=\"https:\/\/www.anthropic.com\/claude\/haiku\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Haiku 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>. Here&#8217;s how these tools work together:<\/p>\n<ul>\n<li><strong>Claude Haiku 4.5<\/strong>: An AI tool that generates <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> components from simple text prompts, making UI development easier and quicker.<\/li>\n<li><strong>Ant Design<\/strong>: A robust React-based component library with pre-built, customizable elements tailored for enterprise needs.<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong>: A design tool that integrates live code components into the design process, ensuring consistency between design and development.<\/li>\n<\/ul>\n<p>This approach eliminates common design-to-development issues, speeds up workflows by 3-5x, and reduces <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" style=\"display: inline;\">design handoff problems<\/a> by 68%. Designers and developers can work with the same production-ready components, saving time and ensuring accuracy.<\/p>\n<p><strong>Key Benefits:<\/strong><\/p>\n<ul>\n<li>Generate UI layouts with Claude Haiku 4.5 in seconds.<\/li>\n<li>Use Ant Design&#8217;s 60+ components for enterprise-grade UIs.<\/li>\n<li>Prototype with real code in UXPin Merge for consistency.<\/li>\n<\/ul>\n<h2 id=\"generate-ui-designs-faster-new-ai-tool-for-uiux\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Generate UI Designs Faster: New AI Tool for UI\/UX<\/h2>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/aYjKZS9WD7w\" 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-your-environment\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Setting Up Your Environment<\/h2>\n<p>Get started with Claude Haiku 4.5, Ant Design, and UXPin Merge without any hassle. This setup brings everything together seamlessly &#8211; no need for separate AI subscriptions, external design libraries, or complicated installations. Here&#8217;s how you can configure your environment step by step.<\/p>\n<h3 id=\"how-to-access-claude-haiku-45-in-uxpin\" tabindex=\"-1\">How to Access <a href=\"https:\/\/www.anthropic.com\/claude\/haiku\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Haiku 4.5<\/a> in <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/mars-images.imgix.net\/seobot\/screenshots\/www.anthropic.com-e7c9acf005b8cd7d7508096d9ff69e40-2026-04-08.jpg?auto=compress\" alt=\"Claude Haiku 4.5\" style=\"width:100%;\"><\/p>\n<p>Claude Haiku 4.5 is directly integrated into UXPin through the <strong>AI Component Creator<\/strong> tool. You don\u2019t need to sign up for any external AI services. Simply open the AI Component Creator in UXPin\u2019s canvas, choose Claude as your model, and start entering prompts. UXPin supports both <a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">OpenAI<\/a> and Claude models, giving you the flexibility to generate UI components with ease.<\/p>\n<p>For instance, if you type a prompt like <em>&quot;a responsive data table with Ant Design styling and sorting functionality,&quot;<\/em> the tool will generate production-ready JSX code. These components render as real code, which you can export as React code complete with all necessary dependencies.<\/p>\n<h3 id=\"how-to-use-ant-design-components-in-uxpin-merge\" tabindex=\"-1\">How to Use <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a> Components in <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69d59c7509e6c77f4f7a2710\/7a059d1494600100204ca0ac57f2c213.jpg\" alt=\"Ant Design\" style=\"width:100%;\"><\/p>\n<p>Once you\u2019ve generated your UI code, you can leverage Ant Design\u2019s pre-built components in UXPin Merge. Ant Design is included as a built-in React library in UXPin Merge. To access it, go to the Libraries section in the UXPin editor and select Ant Design. From there, you can drag and drop ready-made components &#8211; like tables, forms, or modals &#8211; directly onto your canvas. Each component is powered by React code, allowing you to adjust variants and customize properties such as padding and spacing right within the editor. Ant Design trial kits make it easy to prototype quickly without starting from scratch.<\/p>\n<h3 id=\"connecting-uxpin-merge-to-your-code-repository\" tabindex=\"-1\">Connecting UXPin Merge to Your Code Repository<\/h3>\n<p>If your team uses custom components, you can keep your designs up to date by linking UXPin Merge to your code repository. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/meet-uxpin-merge\/\" style=\"display: inline;\">UXPin Merge integrates with Git repositories<\/a> via a CI\/CD pipeline. Start by installing the Merge CLI tool using npm, then create a <code>uxpin.config.js<\/code> file in your repository\u2019s root directory to define component paths, categories, and webpack settings.<\/p>\n<p>Next, generate an authentication token by setting up a new library in the UXPin Design Editor. Add this token as an environment variable in your CI\/CD tools. Once everything is configured, every code commit will automatically sync updates to the design editor. This ensures your design and development teams are always aligned, creating a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/\" style=\"display: inline;\">single source of truth<\/a>.<\/p>\n<p>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 his experience with the process:<\/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<h2 id=\"how-to-build-uis-with-claude-haiku-45-and-ant-design\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">How to Build UIs with Claude Haiku 4.5 and Ant Design<\/h2>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/69d59c7509e6c77f4f7a2710-1775613673922.jpg\" alt=\"5-Step Process to Build UIs with Claude Haiku 4.5 and Ant Design in UXPin Merge\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">5-Step Process to Build UIs with Claude Haiku 4.5 and Ant Design in UXPin Merge<\/p>\n<\/figcaption><\/figure>\n<p>Once your environment is set up, you can follow these five steps to turn your design ideas into fully functional UI components. This process ensures your designs are consistent and ready for production, covering everything from initial planning to final testing.<\/p>\n<h3 id=\"step-1-plan-your-component-structure-with-claude-haiku-45\" tabindex=\"-1\">Step 1: Plan Your Component Structure with Claude Haiku 4.5<\/h3>\n<p>Start by outlining the structure of your UI. Use a detailed prompt to map out the hierarchy of components. Open the AI Component Creator in UXPin and leverage Claude Haiku 4.5 to define the logical layout of your interface. For example, if you&#8217;re designing a <strong>sales analytics dashboard<\/strong>, your prompt might look like this:<br \/> <em>&quot;Outline a component structure for a sales dashboard using Ant Design components: top-level Layout with Sider menu, Header, Content area containing Grid of Cards with Metrics, Table for data, and LineChart; include props and nesting.&quot;<\/em><\/p>\n<p>This generates a clear component tree, showing how elements like Layout, Sider, Header, and Content fit together. This step ensures your UI remains modular and scalable, which is especially important for enterprise-level applications where consistency across teams is key.<\/p>\n<h3 id=\"step-2-write-clear-prompts-for-claude-haiku-45\" tabindex=\"-1\">Step 2: Write Clear Prompts for Claude Haiku 4.5<\/h3>\n<p>The next step is to craft precise prompts using a <strong>Context + Task + Constraints + Example<\/strong> format. Be specific about the Ant Design version (v5), component names (e.g., Button, Modal, Form), required props (e.g., <code>type=&quot;primary&quot;<\/code>, <code>size=&quot;large&quot;<\/code>), and the desired output format (React JSX code).<\/p>\n<p>Here&#8217;s an example prompt:<br \/> <em>&quot;Using Ant Design 5, generate a responsive Form component with Input, Select, and Submit Button for user registration; include validation rules and Tailwind classes for UXPin Merge; output as ready-to-use JSX.&quot;<\/em><\/p>\n<p>This clarity ensures the generated code works seamlessly in UXPin.<\/p>\n<h3 id=\"step-3-generate-ant-design-components\" tabindex=\"-1\">Step 3: Generate Ant Design Components<\/h3>\n<p>Now, use your refined prompts to generate components. Claude Haiku 4.5 provides <strong>ready-to-use JSX code<\/strong>, complete with imports and props. The AI utilizes its understanding of React and Ant Design to create components that can immediately function in UXPin Merge. For instance, if you need a metric card, the output might look like this:<\/p>\n<pre><code class=\"language-jsx\">import { Card, Typography } from 'antd'; const { Title } = Typography; const MetricCard = ({ title, value }) =&gt; (   &lt;Card title={&lt;Title level={4}&gt;{title}&lt;\/Title&gt;} style={{ width: 300 }}&gt;     &lt;p&gt;{value}&lt;\/p&gt;   &lt;\/Card&gt; ); export default MetricCard; <\/code><\/pre>\n<p>Review the code and make adjustments if needed. This step ensures the generated components match your production standards while remaining interactive within UXPin&#8217;s canvas.<\/p>\n<h3 id=\"step-4-import-and-customize-components-in-uxpin-merge\" tabindex=\"-1\">Step 4: Import and Customize Components in UXPin Merge<\/h3>\n<p>Once the components are generated, sync them with UXPin Merge. Drag and drop components from the library panel onto your canvas and customize their properties in the Properties panel. You can modify props (e.g., change a Button&#8217;s style from &quot;default&quot; to &quot;primary&quot;), tweak CSS variables (e.g., <code>--ant-primary-color: #1890ff<\/code>), or add states like hover effects or disabled functionality.<\/p>\n<p>To ensure consistency, map your design system variables in the Merge <code>config.json<\/code> file. Test the components across various breakpoints &#8211; mobile, tablet, and desktop &#8211; using UXPin&#8217;s preview modes.<\/p>\n<h3 id=\"step-5-add-interactions-and-test-your-prototype\" tabindex=\"-1\">Step 5: Add Interactions and Test Your Prototype<\/h3>\n<p>The final step involves adding interactions, variables, and logic to simulate application behavior. Use UXPin&#8217;s interaction builder to link actions, like a button click triggering a Modal via <code>onClick<\/code>. Define variables (e.g., user data in JSON format) and create logic flows (e.g., if\/else conditions for form validation). For Ant Design components, you can connect events like <code>onFinish<\/code> for Forms to mimic real-world functionality.<\/p>\n<p>Test your prototype in <strong>Prototype mode<\/strong>, simulating user flows, checking responsiveness, and verifying performance. Once satisfied, export the prototype for <a href=\"https:\/\/www.uxpin.com\/handoff\" style=\"display: inline;\">developer handoff<\/a> as a shareable link or video. This ensures the design and code are perfectly aligned.<\/p>\n<p>UXPin case studies show teams using this workflow achieve <strong>70% faster prototyping<\/strong>, cutting the time to build a single page from 4 hours to just 1.2 hours, and experience <strong>50% fewer revisions<\/strong> during handoff. By working with real code components instead of static mockups, the gap between design and development is effectively eliminated.<\/p>\n<h2 id=\"aligning-ant-design-with-your-design-system\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Aligning Ant Design with Your Design System<\/h2>\n<p>Ant Design&#8217;s default theme is great for many applications, but enterprise teams often need to tailor it to reflect their brand identity. With UXPin Merge, you can easily customize Ant Design tokens while keeping everything consistent across your organization. This way, you work with production-ready components that match your design system perfectly.<\/p>\n<h3 id=\"customizing-ant-design-tokens\" tabindex=\"-1\">Customizing Ant Design Tokens<\/h3>\n<p>Ant Design relies on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" style=\"display: inline;\">design tokens to manage visual elements<\/a> like colors, typography, spacing, and border radius. To align these tokens with your brand, you can modify their values in your UXPin Merge configuration. Start by opening the <code>config.json<\/code> file in your connected repository. From there, override default tokens such as <code>--ant-primary-color<\/code> to match your brand&#8217;s primary color. For instance, you might change it from <code>#1890ff<\/code> to <code>#FF5733<\/code> for a bold and energetic appearance.<\/p>\n<p>You can also adjust typography tokens like <code>--ant-font-family<\/code> to reflect your brand&#8217;s font (e.g., switching to <strong>Inter<\/strong> instead of the default). Similarly, tweak spacing tokens like <code>--ant-padding-lg<\/code> or <code>--ant-margin-md<\/code> to align with your design grid, such as using 8px or 4px increments. Once you sync these updates with UXPin Merge, your Ant Design components will automatically adopt your brand&#8217;s visual identity.<\/p>\n<p>For more advanced adjustments, the Properties panel in UXPin Merge allows precise token edits. This ensures that every component adheres to your design guidelines, creating a seamless connection between design and development.<\/p>\n<h3 id=\"maintaining-consistency-across-teams\" tabindex=\"-1\">Maintaining Consistency Across Teams<\/h3>\n<p>Once you&#8217;ve customized your design tokens, it&#8217;s critical to maintain consistency across all projects. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-governance\/\" style=\"display: inline;\">Centralized governance<\/a> is the key to ensuring that everyone uses the same components and tokens. UXPin Merge integrates directly with your Git repository, so any updates to your design system tokens or components are automatically shared across all projects. This prevents teams from accidentally using outdated or mismatched components.<\/p>\n<blockquote>\n<p>&quot;Consistent design reduces cognitive load on users, as they don&#8217;t have to learn new patterns for each section of your interface.&quot; &#8211; UI Laws <\/p>\n<\/blockquote>\n<p>To promote consistency, establish clear guidelines for how components should be used. For example, ensure functional elements like &quot;Save&quot; or &quot;Cancel&quot; buttons always appear in the same spot. Similarly, use consistent navigational patterns like breadcrumbs, menus, and headers across all internal applications.<\/p>\n<p>UXPin&#8217;s Roles &amp; Permissions feature (available with the Growth plan) can also help maintain order. By controlling who can edit design system components, you can ensure that only authorized team members make changes, keeping your design system intact and reliable.<\/p>\n<h2 id=\"best-practices-for-using-claude-haiku-45-ant-design-and-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Best Practices for Using Claude Haiku 4.5, Ant Design, and UXPin Merge<\/h2>\n<p>Working with AI-generated components requires a shift in approach compared to traditional design workflows. Tools like Claude Haiku 4.5 thrive on precise, detailed instructions. Instead of vague commands like &quot;fix the bug&quot;, provide clear specifications, include file references, and describe the expected versus actual behavior to achieve better results.<\/p>\n<h3 id=\"improving-designer-developer-collaboration\" tabindex=\"-1\">Improving Designer-Developer Collaboration<\/h3>\n<p>UXPin Merge streamlines collaboration by letting designers and developers work with the same production-ready components. By using Ant Design components directly in the design process, you remove the need for translation layers between design and development. This shared framework reduces misunderstandings, meaning fewer meetings to explain functionality and more time spent building.<\/p>\n<p>To maximize this process, establish a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/\" style=\"display: inline;\">single source of truth for your design system<\/a>. Since UXPin Merge syncs directly with your Git repository, any updates to components or tokens automatically propagate across all projects. Designers can confidently prototype without worrying about rebuilding later, while developers can rely on specifications that match the code they&#8217;ll deploy. This alignment allows teams to focus on identifying and addressing potential issues before they arise.<\/p>\n<h3 id=\"avoiding-common-mistakes\" tabindex=\"-1\">Avoiding Common Mistakes<\/h3>\n<p>One frequent mistake when working with AI-generated code is submitting outputs without a thorough review. While Claude Haiku 4.5 may generate components that look correct, subtle issues like logic errors, security vulnerabilities, or inefficiencies can still lurk beneath the surface. As Karthikeyan R from <a href=\"https:\/\/www.trellix.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Trellix<\/a> warns:<\/p>\n<blockquote>\n<p>&quot;Claude Code is a command-line tool, not a mind reader. When you type &#8216;fix the bug,&#8217; you are rolling the dice.&quot; <\/p>\n<\/blockquote>\n<p>Treat AI-generated code as a starting point, not the final product. Review and refine edge cases, improve error handling, and adjust data types to ensure the component is truly production-ready. Avoid overwhelming the model with overly large or unfocused prompts, which can lead to errors or irrelevant outputs. Instead, break down complex tasks into smaller, focused requests.<\/p>\n<p>Another common pitfall is neglecting to provide explicit instructions. Even with clear overarching directives, AI tools like Claude may miss specific constraints, such as file delimiters or procedural changes. To avoid this, use precise scoping syntax (e.g., <code>@[path\/to\/file]<\/code>) to limit changes to the relevant code segments. As Vincent Parrett advises:<\/p>\n<blockquote>\n<p>&quot;With &#8216;AI&#8217; you absolutely have to guide it with an iron hand.&quot; <\/p>\n<\/blockquote>\n<p>Taking these precautions ensures a smoother workflow and sets the foundation for scaling across larger teams.<\/p>\n<h3 id=\"scaling-your-workflow-for-large-teams\" tabindex=\"-1\">Scaling Your Workflow for Large Teams<\/h3>\n<p>Once you&#8217;ve refined individual practices, scaling your workflow requires strong governance and automation. Building on the principle of maintaining a single source of truth, scaling involves implementing automated safeguards like static analysis and CI\/CD pipelines. UXPin&#8217;s Roles &amp; Permissions feature (available with the Growth plan) helps control who can edit design system components, ensuring consistency and preventing unauthorized changes across projects. This is particularly critical when multiple teams are involved in <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maintenance\/\" style=\"display: inline;\">maintaining a unified brand experience<\/a>.<\/p>\n<p>For enterprise-level operations, combine AI generation with static analysis, type-checking, and CI\/CD gates to catch issues before they impact your main repository. This proactive approach creates a feedback loop, allowing teams to identify and fix errors early, reducing the risk of problems in production.<\/p>\n<p>While AI can speed up workflows, it doesn&#8217;t replace expertise &#8211; it complements it. As Ivan Annovazzi from <a href=\"https:\/\/flare.co.ke\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Flare Emergency Response<\/a> notes:<\/p>\n<blockquote>\n<p>&quot;AI does not replace experience; it requires human expertise.&quot; <\/p>\n<\/blockquote>\n<p>The success of AI in your process depends on your team&#8217;s ability to write clear prompts, critically evaluate generated code, and maintain a strong architectural vision. With these skills, AI becomes a powerful tool to enhance your workflow rather than a source of technical debt.<\/p>\n<h2 id=\"conclusion\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion<\/h2>\n<p>Bringing together Claude Haiku 4.5, Ant Design, and UXPin Merge transforms how enterprise teams build user interfaces. This trio creates a seamless connection between design and development, serving as a single source of truth. With AI generating production-ready code, designers prototyping with live components, and developers receiving precise specs, the result is a workflow that dramatically boosts efficiency.<\/p>\n<p>The impact is clear in the numbers. Teams using UXPin Merge have reported cutting engineering time by nearly 50%. Feedback loops that used to drag on for days now take just hours.<\/p>\n<p>This efficiency stems from removing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/convert-design-to-code-better-way\/\" style=\"display: inline;\">unnecessary handoffs<\/a>. When designers work directly with production-ready Ant Design components, there&#8217;s no need to rebuild static mockups. Claude Haiku 4.5 speeds up the process by generating complex layouts from simple prompts, while UXPin Merge ensures every interaction, state, and token stays perfectly aligned with your design system. For enterprise teams, this tight alignment eliminates the common gap between design intent and the final product.<\/p>\n<p><strong>Start small<\/strong> to see the benefits in action. Use Claude Haiku 4.5 to create an Ant Design table or form, bring it into UXPin Merge, customize it to fit your brand, and track the time saved. By beginning with a single component and gradually scaling up, you can extend this streamlined approach across your entire design system while maintaining consistent governance and automation.<\/p>\n<p>These tools don&#8217;t replace your team&#8217;s expertise &#8211; they enhance it. The value they bring depends on your team&#8217;s ability to craft thoughtful prompts, evaluate generated code critically, and maintain a solid architectural foundation.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"whats-the-fastest-way-to-write-prompts-that-output-usable-ant-design-v5-jsx\" tabindex=\"-1\" data-faq-q>What\u2019s the fastest way to write prompts that output usable Ant Design v5 JSX?<\/h3>\n<p>The quickest way to get results with <strong>Claude Sonnet 4.5<\/strong> is by crafting <strong>clear and detailed prompts<\/strong>. When you provide precise instructions, the AI can generate React layouts with Ant Design components more effectively.<\/p>\n<p>Here are some tips to refine your prompts:<\/p>\n<ul>\n<li><strong>Be descriptive about UI elements<\/strong>: Clearly outline the design and structure you want.<\/li>\n<li><strong>Mention specific Ant Design components<\/strong>: Specify the exact components or features you need.<\/li>\n<li><strong>Include layout, styling, and interactions<\/strong>: Give details about how elements should look and behave.<\/li>\n<\/ul>\n<p>Additionally, linking your API key and keeping prompts concise can significantly improve the AI&#8217;s ability to produce production-ready JSX code.<\/p>\n<h3 id=\"how-do-i-sync-my-teams-custom-react-components-into-uxpin-merge-from-git\" tabindex=\"-1\" data-faq-q>How do I sync my team\u2019s custom React components into UXPin Merge from Git?<\/h3>\n<p>To bring your team\u2019s custom React components into UXPin Merge, you can use UXPin\u2019s Git integration. This handy feature allows you to pull components straight from your Git repository and ensures they stay updated automatically.<\/p>\n<p>The process involves a few key steps: connecting your Git repository, setting up the integration, and importing components into UXPin Merge. Once connected, any updates made in Git will sync automatically, keeping your components aligned and ready for seamless prototyping.<\/p>\n<h3 id=\"how-can-i-theme-ant-design-tokens-so-prototypes-match-our-brand-exactly\" tabindex=\"-1\" data-faq-q>How can I theme Ant Design tokens so prototypes match our brand exactly?<\/h3>\n<p>To make sure your prototypes reflect your brand, you can tweak Ant Design tokens by replacing the default settings with your brand\u2019s specific colors, fonts, and design details. This means setting up a custom theme configuration where you define tokens like <em>primary<\/em>, <em>secondary<\/em>, and <em>background<\/em> colors. When you pair these custom tokens with UXPin, you\u2019ll maintain a unified visual style across both prototypes and the final product, ensuring your designs stay aligned with your brand\u2019s identity.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\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-haiku-4-5-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Haiku 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=69d59c7509e6c77f4f7a2710\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Build production-ready React UIs by generating Ant Design components with Claude Haiku 4.5 and prototyping them in UXPin Merge.<\/p>\n","protected":false},"author":231,"featured_media":58686,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58689","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>How to build UI using Claude Haiku 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-haiku-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 Haiku 4.5 + Ant Design - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Build production-ready React UIs by generating Ant Design components with Claude Haiku 4.5 and prototyping them in UXPin Merge.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-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-08T09:09:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_7e31fc59824d28169a02c8e8ea209f3a.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrew Martin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewSaaS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Martin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-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 Haiku 4.5 + Ant Design &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-04-08T09:09:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\\\/\"},\"wordCount\":2885,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_7e31fc59824d28169a02c8e8ea209f3a.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\\\/\",\"name\":\"How to build UI using Claude Haiku 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-haiku-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_7e31fc59824d28169a02c8e8ea209f3a.jpeg\",\"datePublished\":\"2026-04-08T09:09:44+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_7e31fc59824d28169a02c8e8ea209f3a.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_7e31fc59824d28169a02c8e8ea209f3a.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UI using Claude Haiku 4.5 + Ant Design - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-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 Haiku 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 Haiku 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-haiku-4-5-ant-design-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UI using Claude Haiku 4.5 + Ant Design - Use UXPin Merge!","og_description":"Build production-ready React UIs by generating Ant Design components with Claude Haiku 4.5 and prototyping them in UXPin Merge.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-04-08T09:09:44+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_7e31fc59824d28169a02c8e8ea209f3a.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-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 Haiku 4.5 + Ant Design &#8211; Use UXPin Merge!","datePublished":"2026-04-08T09:09:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\/"},"wordCount":2885,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_7e31fc59824d28169a02c8e8ea209f3a.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\/","name":"How to build UI using Claude Haiku 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-haiku-4-5-ant-design-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_7e31fc59824d28169a02c8e8ea209f3a.jpeg","datePublished":"2026-04-08T09:09:44+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-ant-design-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_7e31fc59824d28169a02c8e8ea209f3a.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_7e31fc59824d28169a02c8e8ea209f3a.jpeg","width":1536,"height":1024,"caption":"How to build UI using Claude Haiku 4.5 + Ant Design - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-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 Haiku 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\/58689","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=58689"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58689\/revisions"}],"predecessor-version":[{"id":58696,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58689\/revisions\/58696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/58686"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=58689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=58689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=58689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}