{"id":58749,"date":"2026-04-10T02:02:36","date_gmt":"2026-04-10T09:02:36","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=58749"},"modified":"2026-04-10T02:02:36","modified_gmt":"2026-04-10T09:02:36","slug":"build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\/","title":{"rendered":"How to build UI using Claude Haiku 4.5 + Custom Design Systems  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>Want to speed up UI design and development while ensuring consistency?<\/strong> Combine <strong><a href=\"https:\/\/www.anthropic.com\/claude\/haiku\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Haiku 4.5<\/a><\/strong>, an AI tool for fast, accurate UI generation, with <strong><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/strong>, a platform for designing with production-ready components.<\/p>\n<p>Here\u2019s what this approach offers:<\/p>\n<ul>\n<li><strong>Claude Haiku 4.5<\/strong> generates UI layouts 4\u20135x faster than comparable models, with 65% accuracy in following design systems.<\/li>\n<li><strong>UXPin Merge<\/strong> lets you design using real <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/\" style=\"display: inline;\">code-based components<\/a>, eliminating design-to-development gaps.<\/li>\n<li>Together, these tools allow teams to prototype quickly and ship production-ready code, saving time and reducing rework.<\/li>\n<\/ul>\n<p><strong>Key steps to get started:<\/strong><\/p>\n<ol>\n<li>Set up <strong>Claude Haiku 4.5<\/strong> via <a href=\"https:\/\/www.anthropic.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Anthropic<\/a>&#8216;s API (available on platforms like <a href=\"https:\/\/cloud.google.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Google Cloud<\/a> or AWS).<\/li>\n<li>Sync your design system to <strong>UXPin Merge<\/strong> using Git, npm, or <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a>.<\/li>\n<li>Use <a href=\"https:\/\/www.uxpin.com\/forge\" style=\"display: inline;\">UXPin Forge<\/a> to generate components with AI, ensuring alignment with your design standards.<\/li>\n<li>Assemble layouts in UXPin Canvas and test <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-prototype-setting-user-interactions-without-coding\/\" style=\"display: inline;\">interactive prototypes<\/a> with real components.<\/li>\n<\/ol>\n<p>This workflow is ideal for teams aiming to streamline UI creation while maintaining code consistency.<\/p>\n<h2 id=\"prerequisites-and-setup\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Prerequisites and Setup<\/h2>\n<p>Get everything you need to start building efficient UIs with <strong>Claude Haiku 4.5<\/strong> and <strong>UXPin Merge<\/strong>. Setting up your tools in advance will save you from potential headaches down the road.<\/p>\n<h3 id=\"what-you-need-to-get-started\" tabindex=\"-1\">What You Need to Get Started<\/h3>\n<p>To begin, make sure you have access to <strong>Claude Haiku 4.5<\/strong>. Anthropic notes: &quot;Claude Haiku 4.5 is available everywhere today. If you&#8217;re a developer, simply use claude-haiku-4-5 via the Claude API&quot;. You can access it through an Anthropic developer account or via major cloud platforms like <strong><a href=\"https:\/\/aws.amazon.com\/bedrock\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Amazon Bedrock<\/a><\/strong> or <strong>Google Cloud&#8217;s Vertex AI<\/strong>.<\/p>\n<p>You&#8217;ll also need a <strong>UXPin account with Merge technology enabled<\/strong>. UXPin supports integrations with popular libraries such as <strong><a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a>, <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a>, <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Bootstrap<\/a><\/strong>, and <strong><a href=\"https:\/\/ui.shadcn.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">ShadCN<\/a><\/strong>, allowing you to jump into designing right away. If you&#8217;re working with a <strong>custom design system<\/strong>, ensure your components are set up as a code-based library. These are typically <strong><a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> components<\/strong> or <strong>Web Components<\/strong> hosted on platforms like GitHub, Bitbucket, or GitLab, or integrated through tools like Storybook or npm packages.<\/p>\n<p>Additionally, install <strong><a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Node.js<\/a> (v8 or higher)<\/strong> and <strong>npm<\/strong>. If you&#8217;re on Windows, you&#8217;ll need to set up <strong>Windows Subsystem for Linux (WSL)<\/strong> to run the Merge CLI.<\/p>\n<h3 id=\"configuring-uxpin-merge\" tabindex=\"-1\">Configuring <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\/69d83f3109e6c77f4f7a692e\/979f9bd1de4e153314d11176bd18730c.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p>To connect your design system to UXPin, choose the integration method that works best for your setup. Here are the options:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" style=\"display: inline;\">Git Integration<\/a><\/strong>: Directly links to your repository, ensuring a single source of truth.<\/li>\n<li><strong>Storybook Integration<\/strong>: Works with public and private Storybook instances and supports frameworks like <strong>Vue<\/strong> and <strong>Angular<\/strong>.<\/li>\n<li><strong>npm Integration<\/strong>: Allows you to import packages without needing extra developer input.<\/li>\n<\/ul>\n<p>At the root of your design system repository, create a <strong><code>uxpin.config.js<\/code><\/strong> file. This file organizes your components into categories, specifies inclusions, and defines wrappers so UXPin can properly render them. If your codebase aligns with Merge standards, use Clean Integration for a seamless Git connection. If you need more flexibility, opt for Wrapped Integration with Higher-Order Components.<\/p>\n<p>For smoother updates, automate <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/ci-servers\/\" style=\"display: inline;\">syncing with a CI\/CD tool<\/a> like <strong><a href=\"https:\/\/circleci.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">CircleCI<\/a><\/strong>, <strong><a href=\"https:\/\/www.travis-ci.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Travis CI<\/a><\/strong>, or <strong><a href=\"https:\/\/github.com\/actions\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub Actions<\/a><\/strong>. Set your UXPin authentication token as an environment variable to update the Design Editor automatically whenever code changes are committed. Before sharing your setup with your design team, test it locally by running <code>npm start<\/code> in the Merge CLI to launch the Experimental Mode\/Dev Environment.<\/p>\n<p>Once your design system is synced, <strong>Claude Haiku 4.5<\/strong> integrates seamlessly within <strong>UXPin Forge<\/strong>. This AI-powered tool combines generative AI with your code-backed design system. With Merge syncing your components, Forge can use them to create production-ready layouts while staying within the boundaries of your approved design patterns.<\/p>\n<p>Now that your environment is ready, you can dive into building UI components with Claude Haiku 4.5 and UXPin Merge.<\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"how-to-build-ui-with-claude-haiku-45-and-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">How to Build UI with <a href=\"https:\/\/www.anthropic.com\/claude\/haiku\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Haiku 4.5<\/a> and UXPin Merge<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69d83f3109e6c77f4f7a692e\/35b72293d5617410c7301022353c347a.jpg\" alt=\"Claude Haiku 4.5\" style=\"width:100%;\"><\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/69d83f3109e6c77f4f7a692e-1775785909828.jpg\" alt=\"4-Step Workflow for Building UI with Claude Haiku 4.5 and 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;\">4-Step Workflow for Building UI with Claude Haiku 4.5 and UXPin Merge<\/p>\n<\/figcaption><\/figure>\n<p>With your environment set up, you&#8217;re ready to create production-ready UI components and piece them together into full layouts. By combining Claude Haiku 4.5&#8217;s AI capabilities with UXPin Merge&#8217;s code-backed design system, you can craft interfaces that meet your exact development needs.<\/p>\n<h3 id=\"step-1-set-up-claude-haiku-45-in-uxpin-forge\" tabindex=\"-1\">Step 1: Set Up Claude Haiku 4.5 in <a href=\"https:\/\/www.uxpin.com\/forge\" style=\"display: inline;\">UXPin Forge<\/a><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69d83f3109e6c77f4f7a692e\/7f067d0015c0334633dfe3c9f99f257f.jpg\" alt=\"UXPin Forge\" style=\"width:100%;\"><\/p>\n<p>Start by opening UXPin Forge (the AI Component Creator) within your UXPin workspace. In the settings panel, enter your Anthropic API key, which you can generate from the Anthropic Console. Next, select <code>claude-haiku-4-5-20251001<\/code> from the model dropdown to access the latest version, released on October 15, 2025.<\/p>\n<p>This model supports a 200,000-token context window and a 64,000-token max output, making it capable of handling complex UI generation. Pricing is straightforward: $1 per million input tokens and $5 per million output tokens.<\/p>\n<p>To control costs, enable prompt caching in your settings. This feature can cut expenses by up to 90% for repetitive tasks, such as reusing the same design system documentation or CSS frameworks. For simple UI elements like buttons or cards, set token limits between 512 and 1,024 to avoid unnecessary charges.<\/p>\n<p>Once configured, you\u2019re ready to start generating components using specific prompts.<\/p>\n<h3 id=\"step-2-generate-ui-components-with-claude-haiku-45\" tabindex=\"-1\">Step 2: Generate UI Components with Claude Haiku 4.5<\/h3>\n<p>In UXPin Forge, use clear and detailed prompts to create UI components. The AI generates code-backed layouts using elements from your synced design system, whether it\u2019s MUI, Ant Design, Bootstrap, ShadCN, or a custom repository. Every component aligns with your approved design standards.<\/p>\n<p>For more complex elements, specificity is key. Instead of saying, &quot;create a table&quot;, try something like, &quot;generate an auto-populated data table with sortable columns using MUI components&quot;. Claude Haiku 4.5 also supports multimodal input, allowing you to upload interface screenshots. The AI analyzes layouts and produces code that matches your design system&#8217;s patterns.<\/p>\n<p>The streaming response feature lets you see code generation in real time, so you can tweak component properties or themes on the spot. In evaluations, Haiku 4.5 achieves 90% of the performance of the Sonnet 4.5 model.<\/p>\n<blockquote>\n<p>Anthropic notes, &quot;Haiku 4.5 proves you can have both intelligence and rapid output. It handles complex workflows reliably, self-corrects in real time, and maintains momentum without latency overhead&quot;.<\/p>\n<\/blockquote>\n<p>Generated components are automatically saved to your UXPin library, making them reusable across projects. Once you\u2019ve created your components, move to the UXPin Canvas to build complete layouts.<\/p>\n<h3 id=\"step-3-build-ui-layouts-in-uxpin-canvas\" tabindex=\"-1\">Step 3: Build UI Layouts in UXPin Canvas<\/h3>\n<p>After generating components, switch to the UXPin Canvas to assemble them into layouts. Drag and drop AI-generated elements &#8211; like forms, tables, or navigation bars &#8211; directly onto the canvas. Since these components are built with production-ready code from your design system, what you see on the canvas is exactly what developers will ship.<\/p>\n<p>Use the properties panel to refine each component visually. You can adjust spacing, colors, layouts, or even switch themes while staying compliant with your design system. Add <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/variables-and-conditional-interactions-for-interactive-prototyping\/\" style=\"display: inline;\">variables, conditional logic, and expressions<\/a> to simulate real application behavior and test user flows before handing off the design.<\/p>\n<blockquote>\n<p>Larry Sawyer, Lead UX Designer, shared: &quot;When I used UXPin Merge, our engineering time was reduced by around 50%. Imagine how much money that saves across an enterprise-level organization with dozens of designers and hundreds of engineers&quot;.<\/p>\n<\/blockquote>\n<blockquote>\n<p>Mark Figueiredo, Sr. UX Team Lead at T.RowePrice, added: &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>Once your layout is complete, it\u2019s time to review and test.<\/p>\n<h3 id=\"step-4-review-and-test-your-designs\" tabindex=\"-1\">Step 4: Review and Test Your Designs<\/h3>\n<p>Use the &quot;Get Code&quot; feature to review the React code and dependencies for each component, ensuring they align with your codebase standards. You can also open your prototype in StackBlitz to test functionality in a live development environment.<\/p>\n<p>Run through your interactive prototype to ensure all states, transitions, and logic function as expected. Share password-protected previews with stakeholders to gather feedback while keeping the design easy to modify.<\/p>\n<blockquote>\n<p>Brian Demchak, Sr. UX Designer at AAA Digital &amp; Creative Services, explained: &quot;We have fully integrated our custom-built React Design System and can design with our coded components. It has increased our productivity, quality, and consistency, streamlining our testing of layouts and the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" style=\"display: inline;\">developer handoff process<\/a>&quot;.<\/p>\n<\/blockquote>\n<p>Since the components are production-ready, developers can directly use them from your shared repository, eliminating the need for manual translation between design and development.<\/p>\n<h2 id=\"best-practices-for-claude-haiku-45-and-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Best Practices for Claude Haiku 4.5 and UXPin Merge<\/h2>\n<h3 id=\"keep-ai-within-design-system-boundaries\" tabindex=\"-1\">Keep AI Within Design System Boundaries<\/h3>\n<p>To get the most out of Claude Haiku 4.5 and UXPin Merge, it&#8217;s crucial to keep AI outputs aligned with your design system. This means configuring prompts to reference your design tokens &#8211; like colors, typography, and spacing &#8211; and importing component libraries along with validation rules into UXPin Merge. By doing so, you can ensure the AI stays within the boundaries of your established guidelines, eliminating the need for constant manual checks.<\/p>\n<p>For example, a fintech design team successfully integrated Claude Haiku 4.5 with UXPin Merge by loading their Figma-based design system. They used AI prompts to generate button variants that adhered strictly to system tokens. The outcome? <strong>100% compliance across 200+ components<\/strong> and a <strong>50% reduction in redesign time<\/strong>. Using design tokens as a framework not only ensures consistency but also helps scale design efforts while minimizing rework.<\/p>\n<p>Involving the team early in this process enhances these technical safeguards even further.<\/p>\n<h3 id=\"involve-designers-and-developers-early\" tabindex=\"-1\">Involve Designers and Developers Early<\/h3>\n<p>Getting designers and developers involved from the start is key to keeping AI outputs practical and aligned with real-world constraints. Kick things off with joint sessions where both teams can review the design system and refine AI prompts together. UXPin&#8217;s collaborative canvas makes this process even smoother, allowing teams to provide real-time feedback. Designers can validate visuals while developers test code exports.<\/p>\n<p>Clearly defining <strong>RACI roles<\/strong> (Responsible, Accountable, Consulted, Informed) can help avoid bottlenecks. For instance, designers might refine prompts, developers ensure code compatibility, and stakeholders give final approvals. This kind of early collaboration can cut iteration cycles by <strong>30-50%<\/strong> and catch potential issues &#8211; like responsiveness problems &#8211; before the prototyping phase even begins.<\/p>\n<p>This groundwork lays the foundation for faster and more efficient prototyping.<\/p>\n<h3 id=\"prototype-fast-ship-faster\" tabindex=\"-1\">Prototype Fast, Ship Faster<\/h3>\n<p>When design system boundaries and early collaboration are in place, teams can accelerate their workflows significantly. With UXPin Merge, you can sync code to design instantly and create prototypes with just one click. Features like version control and live previews allow for quick iterations, enabling a seamless workflow: ideate, generate, test, and deploy. This approach ensures production-ready code without sacrificing quality.<\/p>\n<p>Enterprise teams have reported impressive results with this method, achieving <strong>3x faster prototyping<\/strong> (reducing timelines from weeks to days) and a <strong>40% decrease in time-to-ship<\/strong>. AI contributes by handling <strong>70% of initial layouts<\/strong>, freeing up teams to focus on refinement. To maintain quality, A\/B test prototypes early and gather feedback from both users and developers. Focus on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/mvp-software-development-how-to\/\" style=\"display: inline;\">MVP prototypes<\/a> that export clean React or Vue code, and keep them updated with design system tokens for continuous improvements.<\/p>\n<p>This streamlined process ensures teams can move quickly while delivering polished, production-ready designs.<\/p>\n<h2 id=\"conclusion\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion<\/h2>\n<h3 id=\"what-enterprise-teams-should-remember\" tabindex=\"-1\">What Enterprise Teams Should Remember<\/h3>\n<p>Pairing <strong>Claude Haiku 4.5&#8217;s<\/strong> fast prototyping capabilities with <strong>UXPin Merge&#8217;s<\/strong> code-backed design system can revolutionize enterprise UI design. This combination offers three key benefits:<\/p>\n<ul>\n<li><strong>Speed<\/strong>: AI-generated components significantly cut down prototyping time.<\/li>\n<li><strong>Alignment<\/strong>: Code-backed prototypes ensure designers and developers stay on the same page.<\/li>\n<li><strong>Efficiency<\/strong>: Feedback cycles are shortened, often dropping from days to just hours.<\/li>\n<\/ul>\n<p>By centralizing your design system within <strong>UXPin Merge<\/strong>, you ensure that Claude Haiku 4.5 produces components that adhere to your standards, helping teams avoid <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/\" style=\"display: inline;\">design debt<\/a>. Enterprises that maintain these practices achieve better compliance while scaling their <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/enterprise-design-system-webinar-recap\/\" style=\"display: inline;\">enterprise design system<\/a> operations seamlessly.<\/p>\n<h3 id=\"how-to-get-started\" tabindex=\"-1\">How to Get Started<\/h3>\n<p>Ready to take advantage of this streamlined workflow? Here\u2019s how you can begin:<\/p>\n<ul>\n<li>Sign up for a <strong>free UXPin trial<\/strong> at <a href=\"https:\/\/uxpin.com\/pricing\" style=\"display: inline;\">uxpin.com\/pricing<\/a>. The trial includes built-in libraries like <strong>MUI<\/strong>, <strong>Ant Design<\/strong>, and <strong>Bootstrap<\/strong>.<\/li>\n<li>Sync your custom design system with a Git repository to ensure it mirrors your production environment.<\/li>\n<li>Configure <strong>Claude Haiku 4.5<\/strong> in UXPin Forge.<\/li>\n<li>Use a simple prompt to generate your first component.<\/li>\n<li>Collaborate with your team to review and export <strong>production-ready React code<\/strong>.<\/li>\n<\/ul>\n<p>For enterprise teams needing custom AI credit limits, advanced security, or dedicated support, reach out to <strong>sales@uxpin.com<\/strong> to discuss tailored Enterprise pricing options.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"how-do-i-connect-my-custom-design-system-to-uxpin-merge\" tabindex=\"-1\" data-faq-q>How do I connect my custom design system to UXPin Merge?<\/h3>\n<p>To link your custom design system with UXPin Merge, you\u2019ll need to integrate its codebase using either <strong>Git<\/strong> or <strong>Storybook<\/strong>. This setup keeps your components synchronized and readily available within UXPin. Once the connection is established, you can work directly with production-ready components from your design system in your prototypes and designs, creating a smooth and efficient workflow.<\/p>\n<h3 id=\"how-can-i-keep-ai-generated-ui-compliant-with-our-design-tokens\" tabindex=\"-1\" data-faq-q>How can I keep AI-generated UI compliant with our design tokens?<\/h3>\n<p>To make sure AI-generated UI stays consistent with your design tokens, leverage AI tools that can analyze your design files. These tools help generate and manage tokens for elements like colors, fonts, and spacing. They can also recommend semantic token names, sync updates directly with your code repositories, and ensure everything remains aligned. Additionally, using structured naming conventions and organizing tokens systematically can help maintain uniformity across all platforms.<\/p>\n<h3 id=\"whats-the-cheapest-way-to-use-claude-haiku-45-for-ui-generation\" tabindex=\"-1\" data-faq-q>What\u2019s the cheapest way to use Claude Haiku 4.5 for UI generation?<\/h3>\n<p>Claude Haiku 4.5 offers a budget-friendly option for UI generation when accessed via <a href=\"https:\/\/openrouter.ai\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">OpenRouter<\/a>. The pricing is straightforward: <strong>$1.00 per million input tokens<\/strong> and <strong>$5.00 per million output tokens<\/strong>. This setup provides an efficient and economical way to generate UIs without breaking the bank.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/prototype-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Sonnet 4.5 + Custom Design Systems  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-claude-haiku-4-5-custom-design-systems-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Haiku 4.5 + Custom Design Systems  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-ui-claude-opus-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Opus 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-ui-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Sonnet 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=69d83f3109e6c77f4f7a692e\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Combine Claude Haiku 4.5 and UXPin Merge to generate production-ready UI components from your design system and speed prototyping.<\/p>\n","protected":false},"author":231,"featured_media":58746,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58749","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 + Custom Design Systems - 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-custom-design-systems-uxpin-merge\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build UI using Claude Haiku 4.5 + Custom Design Systems - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Combine Claude Haiku 4.5 and UXPin Merge to generate production-ready UI components from your design system and speed prototyping.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-10T09:02:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_13b4c3c1730e1543e61239008a9aa58d.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-haiku-4-5-custom-design-systems-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-custom-design-systems-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 + Custom Design Systems &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-04-10T09:02:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/\"},\"wordCount\":2301,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_13b4c3c1730e1543e61239008a9aa58d.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/\",\"name\":\"How to build UI using Claude Haiku 4.5 + Custom Design Systems - 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-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_13b4c3c1730e1543e61239008a9aa58d.jpeg\",\"datePublished\":\"2026-04-10T09:02:36+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-custom-design-systems-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_13b4c3c1730e1543e61239008a9aa58d.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_13b4c3c1730e1543e61239008a9aa58d.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UI using Claude Haiku 4.5 + Custom Design Systems - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to build UI using Claude Haiku 4.5 + Custom Design Systems &#8211; Use UXPin Merge!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\",\"name\":\"Andrew Martin\",\"description\":\"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/andrewSaaS\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/andrewuxpin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to build UI using Claude Haiku 4.5 + Custom Design Systems - 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-custom-design-systems-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UI using Claude Haiku 4.5 + Custom Design Systems - Use UXPin Merge!","og_description":"Combine Claude Haiku 4.5 and UXPin Merge to generate production-ready UI components from your design system and speed prototyping.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-04-10T09:02:36+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_13b4c3c1730e1543e61239008a9aa58d.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-haiku-4-5-custom-design-systems-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-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 + Custom Design Systems &#8211; Use UXPin Merge!","datePublished":"2026-04-10T09:02:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\/"},"wordCount":2301,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_13b4c3c1730e1543e61239008a9aa58d.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\/","name":"How to build UI using Claude Haiku 4.5 + Custom Design Systems - 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-custom-design-systems-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_13b4c3c1730e1543e61239008a9aa58d.jpeg","datePublished":"2026-04-10T09:02:36+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-custom-design-systems-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_13b4c3c1730e1543e61239008a9aa58d.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_13b4c3c1730e1543e61239008a9aa58d.jpeg","width":1536,"height":1024,"caption":"How to build UI using Claude Haiku 4.5 + Custom Design Systems - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-haiku-4-5-custom-design-systems-uxpin-merge\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to build UI using Claude Haiku 4.5 + Custom Design Systems &#8211; Use UXPin Merge!"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b","name":"Andrew Martin","description":"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.","sameAs":["https:\/\/x.com\/andrewSaaS"],"url":"https:\/\/www.uxpin.com\/studio\/author\/andrewuxpin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58749","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=58749"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58749\/revisions"}],"predecessor-version":[{"id":58762,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58749\/revisions\/58762"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/58746"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=58749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=58749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=58749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}