{"id":60137,"date":"2026-06-05T01:26:37","date_gmt":"2026-06-05T08:26:37","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=60137"},"modified":"2026-06-05T01:26:37","modified_gmt":"2026-06-05T08:26:37","slug":"build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/","title":{"rendered":"How to build UX using Claude Haiku 4.5 + Custom Design Systems  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>Want to speed up UX design while ensuring consistency?<\/strong> 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> with <strong><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/strong> allows enterprise teams to create scalable, production-ready UX faster. Claude Haiku 4.5 generates structured UX outputs like user flows and component trees, while <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge turns them into interactive prototypes using real production components. Together, these tools eliminate inefficiencies, reduce rework, and align design with development.<\/p>\n<h3 id=\"key-takeaways\" tabindex=\"-1\">Key Takeaways:<\/h3>\n<ul>\n<li><strong>Claude Haiku 4.5<\/strong>: AI-driven tool for generating UX artifacts (flows, layouts, copy) tailored to design systems.<\/li>\n<li><strong>UXPin Merge<\/strong>: Prototyping tool that uses live code components for accurate, developer-ready designs.<\/li>\n<li><strong>Custom Design Systems<\/strong>: Ensure consistency, accessibility (<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">WCAG 2.1 AA<\/a>), and compliance across products.<\/li>\n<\/ul>\n<h3 id=\"why-it-works\" tabindex=\"-1\">Why It Works:<\/h3>\n<ol>\n<li><strong>AI Efficiency<\/strong>: Claude Haiku 4.5 integrates compliance and accessibility into UX outputs.<\/li>\n<li><strong>Component-Driven Prototypes<\/strong>: UXPin Merge ensures designs mirror production code.<\/li>\n<li><strong>Seamless Workflow<\/strong>: Outputs from Claude feed directly into UXPin for faster prototyping.<\/li>\n<\/ol>\n<p>This approach addresses common enterprise challenges: inconsistent UX, slow workflows, and design-development misalignment. By integrating AI with design systems, teams can deliver high-quality, compliant UX at scale.<\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a2212bdde8dfabce3720a7c-1780622101917.jpg\" alt=\"Claude Haiku 4.5 + UXPin Merge: Enterprise UX Workflow\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Claude Haiku 4.5 + UXPin Merge: Enterprise UX Workflow<\/p>\n<\/figcaption><\/figure>\n<h2 id=\"uxpin-merge-ai-smarter-ui-generation-that-follows-your-design-system\" tabindex=\"-1\" class=\"sb h2-sbb-cls\"><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> AI: Smarter UI Generation That Follows Your Design System<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a2212bdde8dfabce3720a7c\/1cd66cf3ffa0fb3dfd990971e43eb597.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/QY7xfXBTVn4\" frameborder=\"0\" loading=\"lazy\" allowfullscreen style=\"width: 100%; height: auto; aspect-ratio: 16\/9;\"><\/iframe><\/p>\n<h2 id=\"the-tools-claude-haiku-45-uxpin-merge-and-custom-design-systems\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">The Tools: <a href=\"https:\/\/www.anthropic.com\/claude\/haiku\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Haiku 4.5<\/a>, <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge, and Custom Design Systems<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a2212bdde8dfabce3720a7c\/35b72293d5617410c7301022353c347a.jpg\" alt=\"Claude Haiku 4.5\" style=\"width:100%;\"><\/p>\n<p>Each of these tools plays a distinct role in creating a smooth and efficient UX workflow. Before diving into how they work together, let\u2019s break down what each tool does and why they complement one another so effectively.<\/p>\n<h3 id=\"what-claude-haiku-45-brings-to-ux-teams\" tabindex=\"-1\">What Claude Haiku 4.5 Brings to UX Teams<\/h3>\n<p>Claude Haiku 4.5 is a fast and lightweight model designed to handle structured tasks at scale. Its key strengths  &#8211;  <strong>hybrid reasoning<\/strong>, <strong>coding support<\/strong>, and <strong>structured output generation<\/strong>  &#8211;  make it a powerful ally for UX teams.<\/p>\n<p>With hybrid reasoning, Claude Haiku can analyze complex user journeys step by step. It identifies edge cases, branching paths, and interaction gaps before a single component is even placed on the canvas. Its coding support allows designers and engineers to generate lightweight code artifacts, such as <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> props schemas or JSON structures, that align directly with design system components. The structured output generation feature creates formatted tables, user flow outlines, acceptance criteria, or UX copy variants that are ready to plug into design specs or prototypes.<\/p>\n<p>For U.S. enterprise teams, this tool is especially valuable because it allows compliance requirements to be embedded directly into prompts. Whether you\u2019re designing a consent dialog that aligns with <a href=\"https:\/\/en.wikipedia.org\/wiki\/Health_Insurance_Portability_and_Accountability_Act\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">HIPAA<\/a> or a financial disclosure flow that meets <a href=\"https:\/\/www.ftc.gov\/business-guidance\/privacy-security\/gramm-leach-bliley-act\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GLBA<\/a> standards, Claude Haiku ensures these constraints are consistently reflected in its outputs.<\/p>\n<p>Next, let\u2019s look at how UXPin Merge takes these outputs and turns them into production-ready prototypes.<\/p>\n<h3 id=\"how-uxpin-merge-powers-component-driven-design\" tabindex=\"-1\">How UXPin Merge Powers Component-Driven Design<\/h3>\n<p>UXPin Merge bridges the gap between the design canvas and live code components, ensuring that every element  &#8211;  buttons, form fields, data tables, modals  &#8211;  matches production-quality React, Vue, or Web Components.<\/p>\n<p>Instead of creating UI elements from scratch, designers use real components with their actual props, states, and behaviors. They can configure variants such as size, color, and error states directly, while design tokens for spacing, typography, color, and border radius are centrally defined and automatically applied. This approach removes the need for a translation layer between design and development.<\/p>\n<p>According to UXPin\u2019s own data, teams using Merge can build prototypes <strong>2\u20133\u00d7 faster<\/strong> because they assemble screens from pre-built, code-based components rather than redrawing or redlining UI elements. Merge-based prototypes also reduce design-to-development handoff rework by <strong>up to 60%<\/strong>, making the workflow more efficient and less error-prone.<\/p>\n<p>With these capabilities, UXPin Merge seamlessly integrates with custom design systems to create scalable and compliant UX solutions.<\/p>\n<h3 id=\"the-role-of-custom-design-systems\" tabindex=\"-1\">The Role of Custom Design Systems<\/h3>\n<p>A custom design system is a company-specific library of reusable UI components, interaction patterns, design tokens, and guidelines tailored to your brand, products, and regulatory needs. For U.S. enterprises, this is a critical distinction. Existing systems like <strong><a href=\"https:\/\/carbondesignsystem.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">IBM Carbon<\/a><\/strong>, <strong><a href=\"https:\/\/developer.microsoft.com\/en-us\/fluentui\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Microsoft Fluent<\/a><\/strong>, and <strong><a href=\"https:\/\/www.lightningdesignsystem.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Salesforce Lightning<\/a><\/strong> are built to address enterprise requirements, including complex data tables, multi-step forms, and dashboards. These systems ensure that components meet WCAG 2.1 AA and <a href=\"https:\/\/www.ada.gov\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">ADA<\/a> standards, with features like keyboard accessibility, focus management, ARIA labels, and proper color contrast.<\/p>\n<p>This focus on accessibility is more important than ever. <a href=\"https:\/\/webaim.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">WebAIM<\/a>\u2019s 2024 analysis of the top 1 million homepages found that <strong>96.3% had detectable WCAG violations<\/strong>, and digital accessibility lawsuits have steadily increased over the last decade, according to the U.S. Department of Justice.<\/p>\n<p>When Claude Haiku 4.5, UXPin Merge, and a custom design system are used together, they create a seamless workflow: AI generates structured, constraint-aware UX artifacts \u2192 designers turn those artifacts into realistic, production-ready prototypes \u2192 the design system ensures consistency and compliance at every stage. This closed-loop process is what makes the combination of these tools so effective for enterprise UX teams.<\/p>\n<h2 id=\"setting-up-claude-haiku-45-and-uxpin-merge-for-your-team\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Setting Up Claude Haiku 4.5 and UXPin Merge for Your Team<\/h2>\n<p>Laying the groundwork is crucial before diving into writing prompts. Skipping steps can lead to delays and complications mid-project.<\/p>\n<h3 id=\"what-us-based-teams-need-before-starting\" tabindex=\"-1\">What U.S.-Based Teams Need Before Starting<\/h3>\n<p>To ensure a smooth workflow, there are four key prerequisites:<\/p>\n<ol>\n<li> <strong>API Access to Claude Haiku 4.5<\/strong>: Start by securing an active <a href=\"https:\/\/www.anthropic.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Anthropic<\/a> account with billing set up in USD. Store API keys securely in a secrets manager &#8211; never hard-code them into prompts or scripts. Configure environment variables separately for development, staging, and production environments. <\/li>\n<li> <strong>UXPin Account with Merge Enabled<\/strong>: You&#8217;ll need to be on a Growth or Enterprise plan with at least one Merge source connected. This could be a Git repository, <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a>, or an NPM package. For Enterprise teams, setting up SSO (like SAML with <a href=\"https:\/\/www.okta.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Okta<\/a>) is essential to meet U.S. enterprise security standards. Plan details can be reviewed at <a href=\"https:\/\/uxpin.com\/pricing\" style=\"display: inline;\">uxpin.com\/pricing<\/a>. <\/li>\n<li> <strong>Custom Component Library<\/strong>: Build this using a modern framework, typically React with TypeScript, that mirrors your production UI. Ensure components are documented with clear props, states, and variants. Store them in a version-controlled repository with protected branches to maintain integrity. <\/li>\n<li> <strong>Legal and Compliance Readiness<\/strong>: Develop a data handling policy that explicitly prohibits sending sensitive data like PHI or PCI through prompts. This policy should pass an InfoSec review and include any necessary DPA or BAA addenda for industries like healthcare or finance. <\/li>\n<\/ol>\n<h3 id=\"how-to-structure-prompts-and-documentation\" tabindex=\"-1\">How to Structure Prompts and Documentation<\/h3>\n<p>Effective documentation is key to success. Maintain two layers of documentation:<\/p>\n<ul>\n<li><strong>Full Design System Document<\/strong>: Host this in a tool like <a href=\"https:\/\/www.atlassian.com\/software\/confluence\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Confluence<\/a> or <a href=\"https:\/\/www.notion.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Notion<\/a> for detailed reference.<\/li>\n<li><strong>AI-Facing Spec<\/strong>: A condensed, one-to-two-page version designed to fit within a prompt&#8217;s context window.<\/li>\n<\/ul>\n<p>Your AI-facing spec should include a token reference for your 20\u201350 most-used tokens (e.g., <code>color.background.surface<\/code>, <code>spacing.lg<\/code>) and a plain-language component reference. Each component entry should briefly describe its purpose, list required props with allowed values, and note constraints, such as <em>&quot;Button text: 1\u201330 characters&quot;<\/em> or <em>&quot;Must be used inside LayoutGrid.&quot;<\/em><\/p>\n<p>For U.S.-specific conventions, always include formatting rules directly in your prompts &#8211; dates as MM\/DD\/YYYY, times in 12-hour format with AM\/PM, and currency as $1,000.00 with a comma as the thousands separator.<\/p>\n<p>When creating prompt templates, include:<\/p>\n<ul>\n<li><strong>Context Block<\/strong>: Briefly describe the product, target audience, and device focus.<\/li>\n<li><strong>Constraints Block<\/strong>: Specify that only listed components and tokens should be used.<\/li>\n<li><strong>Desired Output Format<\/strong>: Define how the output should look, such as numbered steps or a JSON-like component tree.<\/li>\n<\/ul>\n<p>Store these templates in a shared prompt library, adding notes about what works well and potential pitfalls. This shared resource transforms individual learning into a team-wide advantage.<\/p>\n<h3 id=\"team-roles-and-responsibilities\" tabindex=\"-1\">Team Roles and Responsibilities<\/h3>\n<p>With strong documentation and a solid technical setup in place, assigning clear team roles ensures smooth collaboration. Here&#8217;s how tasks are typically divided:<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Role<\/th>\n<th>Primary Responsibilities<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Designers \/ UX<\/strong><\/td>\n<td>Write prompts for flows and screens, translate Claude outputs into Merge prototypes, and validate AI suggestions against accessibility and brand standards.<\/td>\n<\/tr>\n<tr>\n<td><strong>Developers \/ Front-End Engineers<\/strong><\/td>\n<td>Build and maintain the component library, manage the Merge integration (e.g., Git\/Storybook connections, build issues, updates), and evaluate the technical feasibility of AI recommendations.<\/td>\n<\/tr>\n<tr>\n<td><strong>Design System Owners \/ Design Ops<\/strong><\/td>\n<td>Define and enforce token and component standards, maintain AI-facing documentation, and update AI usage guidelines.<\/td>\n<\/tr>\n<tr>\n<td><strong>Product Managers<\/strong><\/td>\n<td>Provide requirements, personas, and scenario descriptions for prompts, ensuring outputs align with business goals and compliance needs.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Using a RACI framework (Responsible, Accountable, Consulted, Informed) for tasks like prompt creation, AI review, Merge implementation, and production handoff keeps roles clear and minimizes rework as your workflow scales.<\/p>\n<h2 id=\"how-to-use-claude-haiku-45-to-drive-ux-decisions-in-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">How to Use Claude Haiku 4.5 to Drive UX Decisions in UXPin Merge<\/h2>\n<p>Once your team structure and documentation are set, it\u2019s time to put Claude Haiku 4.5 to work. The process is simple: you &quot;teach&quot; Claude about your Merge component library, then ask it to create UX artifacts &#8211; like flows, layouts, and copy &#8211; that directly reference those components. These outputs integrate seamlessly into UXPin Merge, enabling actionable design decisions that align with your component-driven prototypes.<\/p>\n<h3 id=\"how-to-write-effective-prompts-for-claude-haiku\" tabindex=\"-1\">How to Write Effective Prompts for Claude Haiku<\/h3>\n<p>One common mistake is writing prompts that are too vague. For example, a prompt like <em>&quot;Design an approval screen for our enterprise app&quot;<\/em> will generate generic suggestions that don\u2019t align with your Merge library. To get actionable results, your prompts need to be more specific and system-aware.<\/p>\n<p>A good prompt includes four key elements:<\/p>\n<ul>\n<li><strong>Context block<\/strong>: Specify the product type, user role, and target device.<\/li>\n<li><strong>Design system block<\/strong>: Name your Merge library and list the components Claude should use.<\/li>\n<li><strong>Constraints block<\/strong>: Define requirements like WCAG 2.1 AA compliance, U.S. formatting standards, or maximum steps in a flow.<\/li>\n<li><strong>Desired output format<\/strong>: Specify how results should be structured, such as a component tree, numbered steps, or a JSON-like format.<\/li>\n<\/ul>\n<p>Here\u2019s a comparison to clarify:<\/p>\n<p><strong>Vague prompt:<\/strong> <em>&quot;Create a job requisition form for HR.&quot;<\/em><\/p>\n<p><strong>System-aware prompt:<\/strong><br \/> <em>&quot;You are assisting with UX design for an enterprise HR web app. Use only components from our UXPin Merge library, which wraps MUI v5: <code>PageLayout<\/code>, <code>Form<\/code>, <code>FormField<\/code>, <code>Select<\/code>, <code>Button<\/code>, <code>Alert<\/code>. Propose a screen-level layout for &#8216;Create New Job Requisition&#8217; with exact component names and key props. Follow WCAG 2.1 AA, use U.S. English copy, USD currency formatted as <code>$1,250.00<\/code>, and MM\/DD\/YYYY dates. Output as a hierarchical component tree.&quot;<\/em><\/p>\n<p>The second prompt produces actionable outputs like <code>FormField {label: &quot;Hiring Manager&quot;, type: &quot;text&quot;, required: true}<\/code> or <code>Button {variant: &quot;primary&quot;, label: &quot;Submit for Approval&quot;, disabled: false}<\/code> &#8211; ready for immediate use in Merge.<\/p>\n<p>For complex workflows, like a 3-step budget approval process involving amounts such as $50,000.00, you can be even more specific. For instance, instruct Claude to use <code>Stepper {currentStep: 2}<\/code>, <code>DataTable {columns: [...], sortable: true}<\/code>, and <code>Modal {role: &quot;dialog&quot;, ariaLabelledBy: &quot;approval-title&quot;}<\/code>. The more detail you provide, the more actionable the results.<\/p>\n<h3 id=\"using-claude-haiku-for-ux-planning\" tabindex=\"-1\">Using Claude Haiku for UX Planning<\/h3>\n<p>Claude Haiku supports UX planning across three main areas, all of which directly feed into UXPin Merge:<\/p>\n<ul>\n<li><strong>User flows<\/strong>: Claude can generate detailed end-to-end flows tailored to U.S. personas, such as an HR manager or finance approver. These flows can include decision points, error paths, and edge cases like role-based restrictions or high-dollar approvals. By requesting numbered steps, you ensure each step maps clearly to a page or state in UXPin.<\/li>\n<li><strong>Information architecture<\/strong>: Quickly generate navigation options &#8211; flat or nested &#8211; that align with typical U.S. enterprise mental models. For example, sections like <em>Admin<\/em>, <em>Billing<\/em>, <em>Compliance<\/em>, and <em>Reports<\/em> can be mapped to specific Merge layouts or templates, giving stakeholders pre-structured options to review.<\/li>\n<li><strong>UX copy<\/strong>: Claude can draft en-US microcopy, error messages, and empty states that fit your brand\u2019s tone. For regulated industries, it can also create compliance-ready consent notices and audit disclosures. However, always have a human legal expert review any final language.<\/li>\n<\/ul>\n<p>By ensuring every output directly references Merge components, you reduce back-and-forth and make the design process more efficient.<\/p>\n<h3 id=\"checking-and-refining-ai-outputs\" tabindex=\"-1\">Checking and Refining AI Outputs<\/h3>\n<p>Once Claude generates the initial outputs, review and refine them carefully. AI outputs are starting points, not final specs. Skipping this step can lead to serious issues &#8211; especially for enterprise teams. For instance, U.S. federal ADA website lawsuits exceeded 4,000 in 2023, highlighting the risks of neglecting accessibility.<\/p>\n<p>Review the outputs, annotate any issues, and prompt Claude for revisions while staying within your Merge component constraints.<\/p>\n<p>During accessibility checks, guide Claude with a prompt like:<br \/> <em>&quot;Audit the design above against WCAG 2.1 AA. Flag color contrast issues, missing ARIA labels, keyboard navigation gaps, and any focus state problems. Output a checklist of required changes using only our Merge component library.&quot;<\/em><\/p>\n<p>Claude can also identify fields that may expose PII or PHI, suggest minimizing data collection, and recommend where consent notices are necessary. However, for industries like healthcare and finance, a human compliance reviewer must approve all final language. This iterative process ensures AI outputs meet U.S. enterprise standards and are ready for prototype implementation.<\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"turning-claude-haiku-outputs-into-designs-in-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Turning Claude Haiku Outputs into Designs in UXPin Merge<\/h2>\n<p>Once Claude&#8217;s outputs are refined, you can transform them into functional designs using <strong>UXPin Merge<\/strong>. This tool bridges the gap between AI-generated ideas and production-ready interfaces, making the process both efficient and accurate.<\/p>\n<h3 id=\"mapping-ai-outputs-to-uxpin-merge-components\" tabindex=\"-1\">Mapping AI Outputs to UXPin Merge Components<\/h3>\n<p>To ensure consistency, map Claude&#8217;s suggested outputs directly to your design system&#8217;s components in UXPin Merge. Create a reference document &#8211; like a spreadsheet &#8211; that links AI terms to their corresponding component names. Here&#8217;s an example:<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>AI Output Term<\/th>\n<th>UXPin Merge Component<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>&quot;search box&quot;<\/td>\n<td><code>SearchInput<\/code><\/td>\n<\/tr>\n<tr>\n<td>&quot;notification banner&quot;<\/td>\n<td><code>AlertBanner<\/code><\/td>\n<\/tr>\n<tr>\n<td>&quot;data grid&quot;<\/td>\n<td><code>DataTable<\/code><\/td>\n<\/tr>\n<tr>\n<td>&quot;side panel with form&quot;<\/td>\n<td><code>SidePanel<\/code> + <code>UserForm<\/code><\/td>\n<\/tr>\n<tr>\n<td>&quot;step indicator&quot;<\/td>\n<td><code>Stepper<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>For any UI elements that Claude suggests but aren&#8217;t part of your library, try building them using existing components. For instance, a &quot;summary card&quot; could be created by combining a <code>Container<\/code>, <code>Icon<\/code>, <code>Heading<\/code>, <code>Text<\/code>, and <code>Button<\/code>. Keep track of these gaps, as they can inform future updates to your design system.<\/p>\n<p>When it comes to styling, translate Claude&#8217;s descriptive phrases &#8211; like &quot;brand blue&quot; or &quot;large heading&quot; &#8211; into your design tokens (e.g., <code>color.primary.600<\/code>, <code>space.200<\/code>, <code>fontSize.xl<\/code>). This ensures that your designs stay aligned with the system and avoid deviations over time.<\/p>\n<h3 id=\"step-by-step-building-an-enterprise-feature\" tabindex=\"-1\">Step-by-Step: Building an Enterprise Feature<\/h3>\n<p>Let\u2019s break down how to build a specific feature &#8211; like a <strong>User Access Management<\/strong> screen &#8211; using Claude&#8217;s outputs and UXPin Merge components.<\/p>\n<ol>\n<li> <strong>Define the Feature Brief<\/strong>: Start by prompting Claude with a clear description of the feature. For example, an admin interface where users can invite, edit, and revoke roles, adhering to role-based access control (RBAC) and a desktop-first layout. <\/li>\n<li> <strong>Organize the Output<\/strong>: Request Claude to provide a structured table with details like <code>screen_id<\/code>, <code>screen_name<\/code>, <code>components<\/code>, <code>variants<\/code>, and <code>states<\/code>. For example:\n<ul>\n<li><em>&quot;UM-01 \/ User list \/ <code>TopNav<\/code>, <code>PageHeader<\/code>, <code>FilterPanel<\/code>, <code>DataTable<\/code>, <code>Pagination<\/code> \/ <code>Table.row.selected<\/code> \/ loading, no_results.&quot;<\/em><\/li>\n<\/ul>\n<\/li>\n<li> <strong>Start in UXPin Merge<\/strong>: Use a <strong>&quot;Data table page&quot; template<\/strong> as your base. Add the components specified by Claude and configure their props accordingly. For example:\n<ul>\n<li>Clicking &quot;Invite user&quot; should open a <code>SidePanel<\/code> containing a <code>UserForm<\/code>.<\/li>\n<li>Submitting the form triggers a <code>ToastNotification<\/code> success message and refreshes the <code>DataTable<\/code>.<\/li>\n<\/ul>\n<\/li>\n<li> <strong>Iterate with Claude<\/strong>: Share your prototype with Claude for feedback. Provide screenshots or detailed descriptions and ask for a heuristics review. Use this feedback to refine the design while sticking to your existing components and tokens &#8211; no creating new patterns or exceptions. <\/li>\n<\/ol>\n<p>This method ensures that AI-generated ideas translate effectively into enterprise-grade designs.<\/p>\n<h3 id=\"keeping-design-and-development-in-sync\" tabindex=\"-1\">Keeping Design and Development in Sync<\/h3>\n<p>One of the biggest advantages of UXPin Merge is how it eliminates the traditional design-to-development handoff. Designers and developers work with the same coded components, ensuring that what\u2019s designed is exactly what gets shipped.<\/p>\n<p>Here\u2019s how it works:<\/p>\n<ul>\n<li>Developers can inspect UXPin prototypes to view component props, states, and data bindings, allowing them to start building immediately.<\/li>\n<li>During design reviews, invite engineers into UXPin to validate component usage in real time. This removes the need for separate spec documents and reduces the risk of misinterpretation.<\/li>\n<li>Any updates developers make to the codebase are automatically reflected in UXPin, ensuring that both teams stay aligned.<\/li>\n<\/ul>\n<p>According to UXPin, this process can reduce UI development time by 60\u201370% and cut handoff cycles from weeks to just days. By working in this unified system, you maintain consistency and speed across the entire design and development workflow.<\/p>\n<h2 id=\"scaling-and-governing-enterprise-ux-with-claude-haiku-45-and-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Scaling and Governing Enterprise UX with Claude Haiku 4.5 and UXPin Merge<\/h2>\n<p>Creating one solid feature is manageable, but ensuring consistency across dozens of features, products, and teams? That\u2019s where things get tricky. Tools like Claude Haiku 4.5 and UXPin Merge provide a structured way to streamline feature delivery while maintaining consistency on an enterprise scale.<\/p>\n<h3 id=\"governance-practices-for-us-enterprise-teams\" tabindex=\"-1\">Governance Practices for U.S. Enterprise Teams<\/h3>\n<p>A scalable design system starts with clear ownership. UXPin Merge offers a <strong>tiered permission model<\/strong> with three roles:<\/p>\n<ul>\n<li><strong>Admins<\/strong>: Manage library updates and component versioning.<\/li>\n<li><strong>Contributors<\/strong>: Designers and front-end engineers who can propose changes but can\u2019t publish them.<\/li>\n<li><strong>Consumers<\/strong>: Product designers, PMs, and developers who work only with approved components.<\/li>\n<\/ul>\n<p>Admins should exclusively handle core design tokens like colors, typography, and spacing, as well as any changes to the Git connection tied to the Merge library. This ensures no unauthorized adjustments sneak in.<\/p>\n<p>Accessibility governance deserves equal attention. U.S. enterprises face increasing legal risks, with <strong>over 3,000 web accessibility lawsuits filed annually in federal courts<\/strong> in recent years. To mitigate these risks, build WCAG 2.1 AA compliance directly into your coded components. This means addressing focus states, ARIA attributes, and color contrast upfront. For industries like government, healthcare, or finance, include <strong><a href=\"https:\/\/www.section508.gov\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Section 508<\/a><\/strong> requirements in your governance documentation. Claude Haiku can assist by generating accessibility acceptance criteria for new features and flagging WCAG 2.1 AA gaps in user flows.<\/p>\n<p>However, it\u2019s important to treat Claude Haiku as a starting point, not the final say. Any component spec or pattern it generates should go through a human review process. A biweekly design system council &#8211; comprising design, engineering, product, and accessibility experts &#8211; can review proposals, approve deprecations, and prioritize fixes. This collaborative approach ensures quality and alignment across teams.<\/p>\n<h3 id=\"how-to-measure-progress\" tabindex=\"-1\">How to Measure Progress<\/h3>\n<p>To gauge the effectiveness of your governance practices, rely on clear metrics:<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Metric<\/th>\n<th>What It Tells You<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Component reuse rate<\/strong><\/td>\n<td>Percentage of prototype screens built with approved Merge components versus custom elements.<\/td>\n<\/tr>\n<tr>\n<td><strong>Time-to-first-prototype<\/strong><\/td>\n<td>Hours from initial requirements to an interactive prototype in UXPin Merge.<\/td>\n<\/tr>\n<tr>\n<td><strong>Design change requests post-handoff<\/strong><\/td>\n<td>Frequency of developers seeking clarification after design approval.<\/td>\n<\/tr>\n<tr>\n<td><strong>UX defect rate<\/strong><\/td>\n<td>Bugs in QA or production caused by inconsistent UI patterns.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>For U.S.-based teams, these metrics can translate time savings into cost savings. For example, if a five-person team saves 8 hours per feature at $90\/hour, that\u2019s $3,600 saved per feature &#8211; compelling evidence to justify further investment.<\/p>\n<p>Claude Haiku can also help with this analysis. By analyzing exports from <a href=\"https:\/\/www.atlassian.com\/software\/jira\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Jira<\/a>, UXPin, or your Git repository, it can identify trends like teams using deprecated components or areas where rework tickets are piling up.<\/p>\n<h3 id=\"using-claude-haiku-to-grow-your-design-system\" tabindex=\"-1\">Using Claude Haiku to Grow Your Design System<\/h3>\n<p>Governance and measurement are crucial, but continuous growth is what keeps a design system relevant. Design systems often stagnate when teams lack the time to identify missing elements. Claude Haiku can help by analyzing product UIs &#8211; whether through descriptions or screenshots &#8211; and spotting recurring patterns that haven\u2019t been formalized. It can cluster similar elements and draft a component spec, giving your team a clear starting point instead of a blank slate.<\/p>\n<p>Keeping documentation up to date is another common challenge. Claude Haiku can simplify this by analyzing commit messages and pull request descriptions from your repository, then generating clear, human-readable release notes for designers and product managers. As Larry Sawyer, Lead UX Designer, shared about using UXPin Merge:<\/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>Additionally, Claude can process usability findings, support tickets, or NPS feedback to summarize recurring UX complaints. These insights can highlight missing or broken components, ensuring updates are driven by real user needs.<\/p>\n<h2 id=\"conclusion-ship-better-ux-faster-with-claude-haiku-45-and-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion: Ship Better UX Faster with Claude Haiku 4.5 and UXPin Merge<\/h2>\n<p>Claude Haiku 4.5 helps you turn requirements into actionable designs, while UXPin Merge ensures those designs translate into production-ready interfaces. Haiku simplifies complex tasks like creating user flows, defining edge cases, and structuring content. Merge takes it from there, enabling teams to build interfaces using trusted, developer-approved components.<\/p>\n<p>What sets this combination apart for U.S. enterprise teams is the <em>closed loop<\/em> it establishes. AI directs what needs to be designed, and Merge defines how it should be implemented. This synergy reduces rework, minimizes handoff issues, and ensures consistent UX across teams, time zones, and product lines.<\/p>\n<p>Maintaining this workflow requires strong governance. Standardized prompt templates, clear ownership of design systems, and regular cross-functional reviews are essential to avoid chaos as teams grow. While the tools speed up processes, <strong>human judgment remains vital for maintaining quality<\/strong>.<\/p>\n<p>To get started, focus on a small, manageable feature &#8211; like a billing settings page using USD pricing and MM\/DD\/YYYY date formats. Create a targeted Haiku prompt, match the output to existing Merge components, and conduct a quick review with your design, engineering, and product teams. Learn from the process, refine your prompts, and iterate.<\/p>\n<p>This integrated approach connects design and development, making scalable UX a reality. Designers gain the freedom to explore ideas without redoing foundational work, developers work with aligned specifications, and executives see measurable improvements in cycle times and reduced rework costs.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"how-do-i-safely-use-claude-haiku-45-without-sending-sensitive-data\" tabindex=\"-1\" data-faq-q>How do I safely use Claude Haiku 4.5 without sending sensitive data?<\/h3>\n<p>To use Claude Haiku 4.5 securely, make sure your organization allows the integration of external tools with your codebase. When working with private repositories, rely on secure, read-only connections using access tokens or SSH keys. Be cautious with API keys &#8211; remember, they\u2019re visible only once during generation, so store them securely. For enterprise-level projects, double-check that your setup aligns with your company\u2019s security policies, including those for AI tools, internal design systems, and proprietary code.<\/p>\n<h3 id=\"what-should-be-in-an-ai-facing-design-system-spec-for-claude\" tabindex=\"-1\" data-faq-q>What should be in an AI-facing design system spec for Claude?<\/h3>\n<p>To create an AI-friendly design system spec for Claude, you&#8217;ll want to include a few key elements to ensure clarity and usability. Here&#8217;s how you can structure it:<\/p>\n<h3 id=\"design-tokens\" tabindex=\"-1\"><strong>Design Tokens<\/strong><\/h3>\n<p>Design tokens are the building blocks of your design system. These include <strong>colors<\/strong>, <strong>typography<\/strong>, <strong>spacing<\/strong>, and more. Represent these as JSON or CSS variables for easy integration. For example:<\/p>\n<pre><code class=\"language-json\">{   &quot;colors&quot;: {     &quot;primary&quot;: &quot;#4A90E2&quot;,     &quot;secondary&quot;: &quot;#50E3C2&quot;,     &quot;background&quot;: &quot;#FFFFFF&quot;,     &quot;text&quot;: &quot;#333333&quot;   },   &quot;typography&quot;: {     &quot;fontFamily&quot;: &quot;Arial, sans-serif&quot;,     &quot;fontSize&quot;: {       &quot;small&quot;: &quot;12px&quot;,       &quot;medium&quot;: &quot;16px&quot;,       &quot;large&quot;: &quot;24px&quot;     }   },   &quot;spacing&quot;: {     &quot;small&quot;: &quot;8px&quot;,     &quot;medium&quot;: &quot;16px&quot;,     &quot;large&quot;: &quot;32px&quot;   } } <\/code><\/pre>\n<p>These tokens provide a single source of truth for your design elements.<\/p>\n<h3 id=\"component-library\" tabindex=\"-1\"><strong>Component Library<\/strong><\/h3>\n<p>Document your components in detail, covering their <strong>states<\/strong>, <strong>props<\/strong>, and <strong>usage guidelines<\/strong>. Each component should include examples of different states like hover, focus, and disabled. For instance:<\/p>\n<h4 id=\"button-component\" tabindex=\"-1\">Button Component<\/h4>\n<ul>\n<li><strong>States<\/strong>: Default, Hover, Active, Disabled<\/li>\n<li><strong>Props<\/strong>:\n<ul>\n<li><code>type<\/code>: Defines the button type (<code>primary<\/code>, <code>secondary<\/code>, <code>tertiary<\/code>)<\/li>\n<li><code>size<\/code>: Specifies button size (<code>small<\/code>, <code>medium<\/code>, <code>large<\/code>)<\/li>\n<li><code>onClick<\/code>: Function triggered on click<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Usage Example<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">&lt;Button type=&quot;primary&quot; size=&quot;medium&quot; onClick={handleClick}&gt;   Submit &lt;\/Button&gt; <\/code><\/pre>\n<h3 id=\"accessibility-standards\" tabindex=\"-1\"><strong>Accessibility Standards<\/strong><\/h3>\n<p>Ensure the design system adheres to <strong>WCAG 2.1 AA<\/strong> and <strong>Section 508<\/strong> compliance. This includes:<\/p>\n<ul>\n<li>Sufficient color contrast (e.g., a minimum contrast ratio of 4.5:1 for text)<\/li>\n<li>Keyboard navigability for all interactive elements<\/li>\n<li>Proper ARIA roles for components<\/li>\n<li>Descriptive alt text for images<\/li>\n<\/ul>\n<h3 id=\"localization-formats\" tabindex=\"-1\"><strong>Localization Formats<\/strong><\/h3>\n<p>Define formats for <strong>currency<\/strong>, <strong>dates<\/strong>, and <strong>units<\/strong> to support global users. For the United States:<\/p>\n<ul>\n<li><strong>Currency<\/strong>: <code>$1,234.56<\/code><\/li>\n<li><strong>Date<\/strong>: <code>MM\/DD\/YYYY<\/code><\/li>\n<li><strong>Units<\/strong>: Use imperial measurements (e.g., inches, pounds)<\/li>\n<\/ul>\n<p>By organizing the spec with structured tags like <code>&lt;design_tokens&gt;<\/code> and <code>&lt;components&gt;<\/code>, you&#8217;ll create a clear and maintainable hierarchy for your design system. This approach ensures consistency, accessibility, and adaptability for AI-driven applications.<\/p>\n<h3 id=\"how-do-i-map-claudes-outputs-into-uxpin-merge-components-quickly\" tabindex=\"-1\" data-faq-q>How do I map Claude\u2019s outputs into UXPin Merge components quickly?<\/h3>\n<p>To connect Claude&#8217;s outputs to UXPin Merge components, start by syncing your design system with Merge through the CLI. Then, leverage the Forge AI assistant to integrate AI-generated outputs with your code-based components. Make sure to use clear prompts that reference specific design tokens or component names for accuracy. Forge will automatically map layouts to your components, and you can fine-tune these directly on the canvas using the properties panel &#8211; all while maintaining alignment with your design system.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\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<li><a href=\"\/studio\/blog\/build-ux-claude-haiku-4-5-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to build UX using Claude Haiku 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=6a2212bdde8dfabce3720a7c\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use AI-generated component-aware UX and code-based Merge prototypes to build consistent, accessible enterprise interfaces faster.<\/p>\n","protected":false},"author":231,"featured_media":60134,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"Build UX with Claude Haiku & UXPin Merge","yoast_metadesc":"Use AI-generated component-aware UX and code-based Merge prototypes to build consistent, accessible enterprise interfaces faster.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.7 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build UX with Claude Haiku &amp; UXPin Merge<\/title>\n<meta name=\"description\" content=\"Use AI-generated component-aware UX and code-based Merge prototypes to build consistent, accessible enterprise interfaces faster.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-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 UX using Claude Haiku 4.5 + Custom Design Systems - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Use AI-generated component-aware UX and code-based Merge prototypes to build consistent, accessible enterprise interfaces faster.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-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-06-05T08:26:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_1a61c4f9870233ce241a1dac941776ea.png\" \/>\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\/png\" \/>\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=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-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 UX using Claude Haiku 4.5 + Custom Design Systems &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-06-05T08:26:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/\"},\"wordCount\":3983,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/image_1a61c4f9870233ce241a1dac941776ea.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/\",\"name\":\"Build UX with Claude Haiku & UXPin Merge\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/image_1a61c4f9870233ce241a1dac941776ea.png\",\"datePublished\":\"2026-06-05T08:26:37+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"description\":\"Use AI-generated component-aware UX and code-based Merge prototypes to build consistent, accessible enterprise interfaces faster.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/image_1a61c4f9870233ce241a1dac941776ea.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/image_1a61c4f9870233ce241a1dac941776ea.png\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UX using Claude Haiku 4.5 + Custom Design Systems - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-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 UX 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":"Build UX with Claude Haiku & UXPin Merge","description":"Use AI-generated component-aware UX and code-based Merge prototypes to build consistent, accessible enterprise interfaces faster.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UX using Claude Haiku 4.5 + Custom Design Systems - Use UXPin Merge!","og_description":"Use AI-generated component-aware UX and code-based Merge prototypes to build consistent, accessible enterprise interfaces faster.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-06-05T08:26:37+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_1a61c4f9870233ce241a1dac941776ea.png","type":"image\/png"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-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 UX using Claude Haiku 4.5 + Custom Design Systems &#8211; Use UXPin Merge!","datePublished":"2026-06-05T08:26:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/"},"wordCount":3983,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_1a61c4f9870233ce241a1dac941776ea.png","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/","name":"Build UX with Claude Haiku & UXPin Merge","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_1a61c4f9870233ce241a1dac941776ea.png","datePublished":"2026-06-05T08:26:37+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"description":"Use AI-generated component-aware UX and code-based Merge prototypes to build consistent, accessible enterprise interfaces faster.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-haiku-4-5-custom-design-systems-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_1a61c4f9870233ce241a1dac941776ea.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/06\/image_1a61c4f9870233ce241a1dac941776ea.png","width":1536,"height":1024,"caption":"How to build UX using Claude Haiku 4.5 + Custom Design Systems - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-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 UX 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\/60137","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=60137"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60137\/revisions"}],"predecessor-version":[{"id":60138,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60137\/revisions\/60138"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/60134"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=60137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=60137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=60137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}