{"id":58644,"date":"2026-03-31T18:50:02","date_gmt":"2026-04-01T01:50:02","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/"},"modified":"2026-05-09T04:47:59","modified_gmt":"2026-05-09T11:47:59","slug":"build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/","title":{"rendered":"How to build UI using Claude Opus 4.5 + Custom Design Systems  &#8211;  Use UXPin Merge!"},"content":{"rendered":"<p><strong>Want to create production-ready UIs faster and more efficiently?<\/strong> Combining <strong><a href=\"https:\/\/www.anthropic.com\/claude\/opus\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Opus 4.5<\/a><\/strong> with <strong><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/strong> lets you <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-workflow-with-code-components\/\" style=\"display: inline;\">design directly with code-backed components<\/a>, eliminating the gap between design and development. This approach ensures consistency, reduces errors, and speeds up deployment.<\/p>\n<p><strong>Key Takeaways:<\/strong><\/p>\n<ul>\n<li><strong>Claude Opus 4.5<\/strong> generates accurate, AI-driven UI layouts with fewer iterations.<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong> uses real, production-ready components from libraries like <a href=\"https:\/\/mui.com\/material-ui\/\" 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>, or your custom design system.<\/li>\n<li>No more mockups &#8211; designs are ready for development from the start.<\/li>\n<\/ul>\n<p><strong>Who Benefits?<\/strong><\/p>\n<ul>\n<li><strong>Designers:<\/strong> Rapid prototyping within design system rules.<\/li>\n<li><strong>Developers:<\/strong> Skip rebuilding designs; use pre-approved components.<\/li>\n<li><strong>Leadership:<\/strong> Faster time-to-market with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-governance\/\" style=\"display: inline;\">design system governance<\/a>.<\/li>\n<\/ul>\n<p><strong>What You Need:<\/strong><\/p>\n<ul>\n<li>UXPin account with Merge access.<\/li>\n<li>Git repository for custom design systems.<\/li>\n<li>Optional <a href=\"https:\/\/www.databricks.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Databricks<\/a> workspace for enterprise data workflows.<\/li>\n<\/ul>\n<p>This guide walks you through connecting your design system, crafting prompts for Claude, and refining layouts in UXPin. Ready to streamline your UI process? Let&#8217;s dive in.<\/p>\n<h2 id=\"what-you-need-to-get-started\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">What You Need to Get Started<\/h2>\n<p>To begin creating ready-to-use UIs with Claude Opus 4.5 and UXPin Merge, you&#8217;ll need a few tools in place. Luckily, UXPin simplifies the process by offering built-in access to Claude models and popular design libraries like MUI, Ant Design, <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Bootstrap<\/a>, and ShadCN. This means you can dive right into designing. However, if your organization relies on a custom design system, you&#8217;ll need to handle a bit of additional setup.<\/p>\n<p>Here&#8217;s what you&#8217;ll need:<\/p>\n<ul>\n<li><strong>A UXPin account with Merge access<\/strong><\/li>\n<li><strong>A Databricks workspace<\/strong> (if you&#8217;re using Claude Opus 4.5 for enterprise data workflows)<\/li>\n<li><strong>A Git repository<\/strong> (<a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub<\/a>, <a href=\"https:\/\/about.gitlab.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitLab<\/a>, or <a href=\"https:\/\/bitbucket.org\/product\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Bitbucket<\/a>) for custom design system code<\/li>\n<\/ul>\n<p>Once you&#8217;ve got these basics covered, you&#8217;re ready to access Claude Opus 4.5 and configure your design system for Merge.<\/p>\n<h3 id=\"how-to-access-claude-opus-45\" tabindex=\"-1\">How to Access <a href=\"https:\/\/www.anthropic.com\/claude\/opus\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Opus 4.5<\/a><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69cb11571b352ff267ccbb09\/b8d94dd27b68a59dc47f9cd456cf8db1.jpg\" alt=\"Claude Opus 4.5\" style=\"width:100%;\"><\/p>\n<p>Getting started with Claude Opus 4.5 is simple once your account and workspaces are ready.<\/p>\n<p>Claude Opus 4.5, developed by <a href=\"https:\/\/www.anthropic.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Anthropic<\/a>, is their most advanced model designed for tackling complex coding and multi-step reasoning tasks. Through UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/generate-ui-with-ai\/\" style=\"display: inline;\">AI Component Creator<\/a>, you can use Claude to generate layouts directly with your design system components &#8211; no need for a separate Claude account.<\/p>\n<blockquote>\n<p>&quot;Claude Opus 4.5 excels at autonomous long-horizon coding tasks, capable of planning and executing complex software projects that span hours or days.&quot;<br \/> \u2013 Databricks <\/p>\n<\/blockquote>\n<p>If your team handles UI requirements with governed data access, you can also access Claude Opus 4.5 via Databricks. Tools like AI Functions and Agent Bricks make it especially useful for creating dashboards or forms tailored to your data schemas. For organizations requiring secure, self-hosted data access, <a href=\"https:\/\/www.dreamfactory.com\" target=\"_blank\" rel=\"noopener noreferrer\">DreamFactory<\/a> provides governed API access to any data source, enabling your LLMs and applications to safely connect to backend systems with role-based access controls. On top of that, the model operates at just one-third of the cost of earlier versions like Opus 4.1. Databricks users can even test Claude 4.5 in the Agent Bricks AI Playground before fully integrating it into their workflows.<\/p>\n<h3 id=\"how-to-prepare-your-custom-design-system-for-merge\" tabindex=\"-1\">How to Prepare Your Custom Design System for Merge<\/h3>\n<p>If you&#8217;re working with a custom design system, you&#8217;ll need to integrate it with UXPin Merge to enable AI-powered UI generation. While UXPin offers over 90 interactive components out of the box, connecting your organization&#8217;s unique design system ensures that Claude references the exact components you use.<\/p>\n<p>UXPin Merge supports three integration methods:<\/p>\n<ul>\n<li><strong>Git integration<\/strong><\/li>\n<li><strong><a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a> integration<\/strong><\/li>\n<li><strong>npm package integration<\/strong><\/li>\n<\/ul>\n<p>For React or Web components, Git integration is often the most flexible. This involves hosting your design system in a repository (e.g., GitHub, GitLab, or Bitbucket), allowing UXPin to pull components directly. If you&#8217;re using frameworks like Vue or Angular, <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" style=\"display: inline;\">Storybook integration<\/a> is a better fit, as it supports over 15 frameworks. The key is ensuring your code serves as the single source of truth, with interactivity and proper documentation in place. This setup allows Claude Opus 4.5 to generate layouts that meet your production standards right out of the gate.<\/p>\n<p>Take Microsoft&#8217;s UX team, for example. By syncing their Fluent design system with UXPin Merge, just three designers were able to support 60 internal products and over 1,000 developers. This efficiency stems from having a well-structured design system before integration.<\/p>\n<blockquote>\n<p>&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;<br \/> \u2013 Larry Sawyer, Lead UX Designer <\/p>\n<\/blockquote>\n<p>Once your Git repository is connected, Claude Opus 4.5 will generate layouts using only your approved components. This eliminates generic placeholders and ensures every design aligns with your standards, making the transition to development seamless.<\/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-uis-step-by-step\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">How to Build UIs: Step-by-Step<\/h2>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/69cb11571b352ff267ccbb09-1774924909622.jpg\" alt=\"3-Step Process to Build Production-Ready UIs with Claude Opus 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;\">3-Step Process to Build Production-Ready UIs with Claude Opus 4.5 and UXPin Merge<\/p>\n<\/figcaption><\/figure>\n<p>With your design system connected and Claude Opus 4.5 ready to go, you can dive into creating production-ready user interfaces. The process is simple: connect your repository, craft clear prompts, and tweak the AI-generated layouts directly in the UXPin canvas. This ensures your designs are aligned with developer-ready components from the start.<\/p>\n<h3 id=\"step-1-connect-your-design-system-to-uxpin-merge\" tabindex=\"-1\">Step 1: Connect Your Design System to <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\/69cb11571b352ff267ccbb09\/c655eecee45d81ac73a89de996f9d5b1.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p>If you&#8217;re using built-in libraries like MUI, Ant Design, Bootstrap, or ShadCN, you can skip this step &#8211; UXPin already integrates these. For custom design systems, as set up earlier, your system is now ready to go. Open the Merge settings, choose your integration method (Git, Storybook, or npm), add your repository URL, and authenticate. This step loads your custom components into the UXPin library along with their properties and documentation.<\/p>\n<p>Once connected, your <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-components\/\" style=\"display: inline;\">design system&#8217;s components<\/a> will appear in the UXPin library panel. This ensures Claude Opus 4.5 uses only the approved components from your production code when generating layouts.<\/p>\n<h3 id=\"step-2-write-claude-opus-45-prompts-for-merge-components\" tabindex=\"-1\">Step 2: Write Claude Opus 4.5 Prompts for Merge Components<\/h3>\n<p>The key to accurate UI layouts lies in clear, detailed prompts. Start by defining a role for Claude, like &quot;Expert UI Developer for UXPin Merge&quot;, and structure your prompt using XML tags. Use <code>&lt;instructions&gt;<\/code> for directives, <code>&lt;context&gt;<\/code> for background information, and <code>&lt;example&gt;<\/code> for sample outputs. As Anthropic explains:<\/p>\n<blockquote>\n<p>&quot;Think of Claude as a brilliant but new employee who lacks context on your norms and workflows. The more precisely you explain what you want, the better the result.&quot;<\/p>\n<\/blockquote>\n<p>For large design system libraries, include detailed documentation at the top of your prompt and save your specific query for the end. If you&#8217;re tackling a complex layout, enable adaptive reasoning with the directive <code>thinking: {type: &quot;adaptive&quot;}<\/code> to help Claude work through component hierarchies before generating the layout.<\/p>\n<p>Be specific in your instructions. Instead of asking for suggestions, use the <code>&lt;default_to_action&gt;<\/code> directive to have Claude implement components directly. Include 3\u20135 examples wrapped in <code>&lt;example&gt;<\/code> tags, and clearly state constraints like &quot;Use only components from the provided JSON library.&quot; For larger tasks, break them into smaller steps &#8211; like generating the header first, reviewing it, and then moving on to the sidebar. This approach keeps you in control and allows for review at each stage.<\/p>\n<h3 id=\"step-3-generate-and-refine-layouts-in-uxpin-canvas\" tabindex=\"-1\">Step 3: Generate and Refine Layouts in <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Canvas<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69cb11571b352ff267ccbb09\/05a85ecffbd5f61e014ccc38b07d01f1.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>Once Claude generates the layout, it will appear on the UXPin canvas using real, production-ready components &#8211; not static visuals. This is where Merge technology shines. Every element is tied to your design system&#8217;s code, ensuring consistency with your development environment.<\/p>\n<p>You can refine the layout directly on the canvas using the properties panel to adjust size, color, and state. These changes will automatically adhere to your design system&#8217;s constraints. Built-in tools, like spacing and typography scales, make it easy to fine-tune the structure.<\/p>\n<p>The canvas also supports interactivity, allowing you to test component states like hover, click, and focus during refinement. This eliminates the traditional <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" style=\"display: inline;\">design-to-development handoff<\/a> since your prototype is already aligned with production code.<\/p>\n<p>As of March 2026, UXPin Merge works seamlessly with advanced language models like Claude Opus 4.5 and GPT-4.1. This integration allows you to turn text prompts into interactive, code-ready layouts in minutes. By bridging the gap between design and development, your team can move from concept to deployment in a matter of days &#8211; saving time without sacrificing quality.<\/p>\n<p>With your refined UI layout ready for production, the next step is testing interactivity on the UXPin canvas. Stay tuned for how to do that in the next section.<\/p>\n<h2 id=\"how-to-test-and-prototype-ai-generated-uis\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">How to Test and Prototype AI-Generated UIs<\/h2>\n<p>After refining your layout, the next step is testing its interactivity. When Claude Opus 4.5 generates your layout on the UXPin canvas, you&#8217;re working with <strong>code-backed components<\/strong>. These components come with built-in interactivity, states, and logic directly from your design system&#8217;s code. This means you can test elements like dropdowns, form validations, and hover states without needing a developer to create a prototype.<\/p>\n<p>With UXPin Merge, you get <strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototypes-improve-usability-testing\/\" style=\"display: inline;\">functional fidelity<\/a><\/strong> &#8211; your prototype behaves exactly like the final product because it uses the same React or Web components as your production environment.<\/p>\n<h3 id=\"how-to-test-interactivity-in-uxpin\" tabindex=\"-1\">How to Test Interactivity in UXPin<\/h3>\n<p>Testing AI-generated UIs in UXPin is simple. Just click the <strong>Preview<\/strong> button to interact with your prototype as if it were live. You can navigate between pages, click buttons, fill out forms, and trigger component states like loading, error, or empty data. Since these are real components, they respond exactly as they would in production.<\/p>\n<p>The <strong>AI Helper<\/strong> allows you to refine interactivity using natural language prompts, making adjustments quick and intuitive.<\/p>\n<p>For more complex workflows, consider testing with <strong>real data<\/strong> instead of placeholders. Replacing generic text with actual dates, prices, or user names can help identify edge cases and confirm the UI handles production-level content density effectively. Additionally, you can use <strong><a href=\"https:\/\/www.uxpin.com\/studio\/webinars\/limitless-interactive-prototyping-with-variables-conditional-interactions-js-expressions\/\" style=\"display: inline;\">variables and conditional logic<\/a><\/strong> to mimic realistic user flows, such as pagination or multi-step forms, before development begins.<\/p>\n<p>Once you&#8217;re confident the prototype behaves as intended, the next step is syncing these improvements back to your design system.<\/p>\n<h3 id=\"how-to-sync-changes-back-to-your-design-system\" tabindex=\"-1\">How to Sync Changes Back to Your Design System<\/h3>\n<p>When your prototype&#8217;s interactivity meets production standards, you can update your design system directly from UXPin. Satisfied with the prototype? Use UXPin&#8217;s <strong>Git integration<\/strong> to sync changes back to your design system repository. This ensures a continuous loop between design and production, keeping everyone aligned and working from a single source of truth.<\/p>\n<p>The <strong>Export to <a href=\"https:\/\/stackblitz.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">StackBlitz<\/a><\/strong> feature is another powerful tool, giving developers a live, editable environment for immediate code inspection. You can also copy production-ready React code, complete with dependencies, directly from the canvas.<\/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 how this process has transformed workflows:<\/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=\"tips-for-enterprise-teams\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Tips for Enterprise Teams<\/h2>\n<p>Scaling design and development workflows across large teams is no small feat. Enterprise teams often juggle dozens of designers and hundreds of engineers, making alignment a challenge. That&#8217;s where <strong>Claude Opus 4.5<\/strong> paired with <strong>UXPin Merge<\/strong> comes in. Together, they create a <strong>unified component language<\/strong>, ensuring designers and developers work from the same code-backed components. The result? What&#8217;s designed is exactly what gets built.<\/p>\n<h3 id=\"how-to-use-merge-ai-for-enterprise-workflows\" tabindex=\"-1\">How to Use Merge AI for Enterprise Workflows<\/h3>\n<p>Say goodbye to handoffs and hello to efficiency. By connecting your organization&#8217;s custom React design system to UXPin Merge via <strong>Git integration<\/strong>, designers can work directly with pre-approved, production-ready components. Then, Claude Opus 4.5&#8217;s <strong>AI Component Creator<\/strong> takes it a step further, generating complex UI structures &#8211; think data tables or multi-step forms &#8211; using these same components.<\/p>\n<p>Here&#8217;s what this looks like in action:<\/p>\n<blockquote>\n<p>&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<p>For teams without an established custom system, UXPin has you covered. Its enterprise-grade libraries, like <strong>MUI<\/strong>, <strong><a href=\"https:\/\/tailwindcss.com\/plus\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Tailwind UI<\/a><\/strong>, and <strong>Ant Design<\/strong>, provide production-ready components right out of the box. Combine these with Claude Opus 4.5&#8217;s <strong>prompt-based iteration<\/strong> to quickly generate multiple layout options from a single prompt. This approach allows teams to explore designs faster without stepping outside enterprise constraints, making the design-to-development process seamless.<\/p>\n<p>These tools don&#8217;t just streamline workflows &#8211; they also pave the way for better design governance.<\/p>\n<h3 id=\"how-to-maintain-governance-and-scalability\" tabindex=\"-1\">How to Maintain Governance and Scalability<\/h3>\n<p>Efficiency is just one part of the equation. To truly scale, teams need a unified design system that maintains consistency. Rebuilding design mockups from scratch? That&#8217;s a recipe for chaos. UXPin Merge eliminates this issue by syncing your Git component repository directly to the design environment. This creates a <strong>single source of truth<\/strong> where design and code are always in sync.<\/p>\n<p>Brian Demchak, Sr. UX Designer at AAA Digital &amp; Creative Services, shared how this approach transformed their workflow:<\/p>\n<blockquote>\n<p>&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 developer handoff process.&quot; <\/p>\n<\/blockquote>\n<p>With Git integration and versioning, UXPin Merge ensures continuous alignment between design and production code. It delivers production-ready React code, complete specs, and dependencies &#8211; no more manual redlining or compliance headaches. This synchronization reinforces the code-backed component integration across your workflow, keeping everything running smoothly and efficiently.<\/p>\n<h2 id=\"conclusion\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion<\/h2>\n<p>Creating user interfaces with <strong>Claude Opus 4.5<\/strong> and <strong>UXPin Merge<\/strong> transforms how <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/enterprise-ui-app\/\" style=\"display: inline;\">enterprise UI design<\/a> is approached. Forget about mockups &#8211; jump straight into designing with production-ready components. This method not only removes handoff delays but also accelerates development timelines while ensuring consistent, production-quality results.<\/p>\n<p><strong>Claude Opus 4.5<\/strong> brings powerful features to the table. With an <strong>80.9% score<\/strong> on industry-standard software engineering tests and the ability to generate code with <strong>50\u201375% fewer errors<\/strong>, it offers a significant efficiency boost. When paired with UXPin Merge&#8217;s integration of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/static-style-guides-interactive-components\/\" style=\"display: inline;\">interactive design systems<\/a>, AI-generated layouts are ready for production in record time.<\/p>\n<p>For enterprise teams, this combination creates smoother workflows, reduces inefficiencies, and ensures consistent governance through Git-backed synchronization. With Git integration, updates flow seamlessly from design to production, cutting down on design drift and governance issues.<\/p>\n<p>By merging AI capabilities with a code-backed design system, the design-to-development process becomes faster and more reliable. Whether you&#8217;re working with <strong>MUI<\/strong>, <strong>Ant Design<\/strong>, <strong>Bootstrap<\/strong>, <strong>ShadCN<\/strong>, or custom components, UXPin Merge keeps your design system unified. Merge AI ensures your workflow stays within the boundaries of your approved design system, offering both speed and dependability.<\/p>\n<p>This approach delivers the best of both worlds: rapid development and high-quality output. Ready to elevate your UI design process? Start building with your design system today at <a href=\"https:\/\/uxpin.com\/pricing\" style=\"display: inline;\">uxpin.com\/pricing<\/a>.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"how-do-i-get-my-custom-design-system-into-uxpin-merge\" tabindex=\"-1\" data-faq-q>How do I get my custom design system into UXPin Merge?<\/h3>\n<p>To bring your custom design system into UXPin Merge, you&#8217;ll need to link its codebase to UXPin via <strong>Git<\/strong> or <strong>Storybook<\/strong>. This connection enables UXPin to sync with the actual, code-backed components from your design system. Once everything is set up, you can directly use these components within UXPin to build prototypes that stay true to your design guidelines. This approach ensures your UI components remain consistent and streamlines the overall workflow.<\/p>\n<h3 id=\"what-should-i-include-in-a-claude-opus-45-prompt-to-get-the-right-components\" tabindex=\"-1\" data-faq-q>What should I include in a Claude Opus 4.5 prompt to get the right components?<\/h3>\n<p>To create precise components with Claude Opus 4.5, it&#8217;s essential to craft detailed prompts. Be clear about the <strong>type of component<\/strong> you need &#8211; whether it&#8217;s a button, input field, or something else. Include specifics like <strong>design system standards<\/strong>, <strong>visual styles<\/strong>, and <strong>interaction states<\/strong> (e.g., hover, focus, disabled). Don&#8217;t forget to mention any <strong>layout or data requirements<\/strong> that are relevant.<\/p>\n<p>Using clear and specific language helps ensure the output matches your design system and integrates smoothly with your existing codebase, resulting in well-aligned, production-ready UI elements.<\/p>\n<h3 id=\"how-can-i-validate-interactivity-and-states-before-development-starts\" tabindex=\"-1\" data-faq-q>How can I validate interactivity and states before development starts?<\/h3>\n<p>You can test interactivity and component states before diving into development by building prototypes with <strong>Claude Opus 4.5<\/strong>, your custom design system, and <strong>UXPin Merge<\/strong>. This method allows you to simulate and evaluate UI behaviors, interactions, and states directly within the prototype. By refining and previewing everything in UXPin, you can spot and fix potential issues early, making the development process smoother and more efficient.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/prototype-claude-opus-4-5-mui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Opus 4.5 + MUI  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-claude-opus-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Opus 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/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-opus-4-5-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Opus 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=69cb11571b352ff267ccbb09\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Generate production-ready UIs by using AI to place code-backed components from your design system, reducing handoffs and errors.<\/p>\n","protected":false},"author":231,"featured_media":58641,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"","yoast_metadesc":"","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to build UI using Claude Opus 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-opus-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 Opus 4.5 + Custom Design Systems - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Generate production-ready UIs by using AI to place code-backed components from your design system, reducing handoffs and errors.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-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-01T01:50:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-09T11:47:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_06ba4ac2d160332a14ac984096594c2c.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=\"14 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-opus-4-5-custom-design-systems-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-opus-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 Opus 4.5 + Custom Design Systems &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-04-01T01:50:02+00:00\",\"dateModified\":\"2026-05-09T11:47:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\\\/\"},\"wordCount\":2717,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_06ba4ac2d160332a14ac984096594c2c.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\\\/\",\"name\":\"How to build UI using Claude Opus 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-opus-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_06ba4ac2d160332a14ac984096594c2c.jpeg\",\"datePublished\":\"2026-04-01T01:50:02+00:00\",\"dateModified\":\"2026-05-09T11:47:59+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_06ba4ac2d160332a14ac984096594c2c.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_06ba4ac2d160332a14ac984096594c2c.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UI using Claude Opus 4.5 + Custom Design Systems - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ui-claude-opus-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 Opus 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 Opus 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-opus-4-5-custom-design-systems-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UI using Claude Opus 4.5 + Custom Design Systems - Use UXPin Merge!","og_description":"Generate production-ready UIs by using AI to place code-backed components from your design system, reducing handoffs and errors.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-04-01T01:50:02+00:00","article_modified_time":"2026-05-09T11:47:59+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_06ba4ac2d160332a14ac984096594c2c.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-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 Opus 4.5 + Custom Design Systems &#8211; Use UXPin Merge!","datePublished":"2026-04-01T01:50:02+00:00","dateModified":"2026-05-09T11:47:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/"},"wordCount":2717,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_06ba4ac2d160332a14ac984096594c2c.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/","name":"How to build UI using Claude Opus 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-opus-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_06ba4ac2d160332a14ac984096594c2c.jpeg","datePublished":"2026-04-01T01:50:02+00:00","dateModified":"2026-05-09T11:47:59+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-4-5-custom-design-systems-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_06ba4ac2d160332a14ac984096594c2c.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_06ba4ac2d160332a14ac984096594c2c.jpeg","width":1536,"height":1024,"caption":"How to build UI using Claude Opus 4.5 + Custom Design Systems - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ui-claude-opus-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 Opus 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\/58644","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=58644"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58644\/revisions"}],"predecessor-version":[{"id":59828,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58644\/revisions\/59828"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/58641"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=58644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=58644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=58644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}