{"id":59970,"date":"2026-05-23T01:44:06","date_gmt":"2026-05-23T08:44:06","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=59970"},"modified":"2026-05-23T01:44:06","modified_gmt":"2026-05-23T08:44:06","slug":"build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/","title":{"rendered":"How to build UX using Claude Opus 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>Want to create better UX faster? Combine <a href=\"https:\/\/www.anthropic.com\/claude\/opus\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Opus 4.5<\/a>, <a href=\"https:\/\/ui.shadcn.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">shadcn\/ui<\/a>, and <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a>.<\/strong> Here&#8217;s how:<\/p>\n<ol>\n<li><strong>Plan with Claude Opus 4.5<\/strong>: Transform product requirements into <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-perfect-user-flows-for-smooth-ux\/\" style=\"display: inline;\">user flows<\/a>, interaction logic, and content strategies.<\/li>\n<li><strong>Use shadcn\/ui Components<\/strong>: Work with flexible, open-source <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> components tailored to your design system.<\/li>\n<li><strong>Design with <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong>: Prototype directly with production-ready code components, reducing handoff issues.<\/li>\n<\/ol>\n<p>This process helps teams cut <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" style=\"display: inline;\">design\u2013development handoff<\/a> time by up to 50%, ensuring consistent, accessible, and production-ready designs. Whether you&#8217;re building dashboards, onboarding flows, or enterprise tools, this workflow saves time and minimizes errors.<\/p>\n<p><strong>Key Benefits<\/strong>:<\/p>\n<ul>\n<li>Aligns design and development with real code components.<\/li>\n<li>Maintains accessibility and design consistency.<\/li>\n<li>Speeds up delivery while reducing rework.<\/li>\n<\/ul>\n<p>Read on to learn how to set up this workflow, integrate tools, and refine your UX process.<\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a10f52eb8967166c8c607df-1779499439039.jpg\" alt=\"Claude Opus 4.5 + shadcn\/ui + UXPin Merge: UX Workflow at a Glance\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Claude Opus 4.5 + shadcn\/ui + UXPin Merge: UX Workflow at a Glance<\/p>\n<\/figcaption><\/figure>\n<h2 id=\"uxpin-merge-product-demo\" tabindex=\"-1\" class=\"sb h2-sbb-cls\"><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> Product Demo<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a10f52eb8967166c8c607df\/1cd66cf3ffa0fb3dfd990971e43eb597.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/5J3wwwbPOz0\" frameborder=\"0\" loading=\"lazy\" allowfullscreen style=\"width: 100%; height: auto; aspect-ratio: 16\/9;\"><\/iframe><\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"setting-up-the-ux-workflow\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Setting Up the UX Workflow<\/h2>\n<p>Before diving into design, it\u2019s crucial to establish a solid workflow. Many UX projects hit roadblocks &#8211; not because of technical challenges, but due to a lack of clarity on goals, tools, and team responsibilities. Taking the time to define these elements early helps avoid unnecessary rework and sets the stage for leveraging AI insights and pre-built components effectively.<\/p>\n<h3 id=\"define-goals-and-success-criteria\" tabindex=\"-1\">Define Goals and Success Criteria<\/h3>\n<p>Start by clearly outlining your objectives, target screens, user actions, and measurable success metrics. For example, instead of a vague goal like &quot;improve the onboarding experience&quot;, aim for something more specific and actionable: <strong>&quot;Reduce onboarding drop-off at step 3 by 20% within 60 days.&quot;<\/strong> Having this clarity ensures that everyone is aligned and working toward the same outcome. Document these goals, along with the relevant screens and actions, before moving forward.<\/p>\n<h3 id=\"role-of-claude-opus-45\" tabindex=\"-1\">Role of <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\/6a10f52eb8967166c8c607df\/72c8f2e175ed12e8fab52b94baa3c47a.jpg\" alt=\"Claude Opus 4.5\" style=\"width:100%;\"><\/p>\n<p>Claude Opus 4.5 acts as your UX strategist, helping you move from broad goals to detailed plans. Once you\u2019ve defined your objectives, you can input structured prompts into Claude to generate <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-create-ux-customer-journey\/\" style=\"display: inline;\">user journey maps<\/a>, interaction logic, screen hierarchies, and even <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/prototyping-for-edge-cases\/\" style=\"display: inline;\">edge case scenarios<\/a>. For instance, if you\u2019re designing an onboarding flow for a SaaS dashboard, Claude can map out the step-by-step journey, flag potential friction points like skipped required fields, and suggest microcopy to address those issues. This results in a design brief that\u2019s grounded in data and logic rather than guesswork. With this detailed brief, you\u2019ll be ready to integrate visual components seamlessly using tools like shadcn\/ui and UXPin Merge.<\/p>\n<h3 id=\"introducing-shadcnui-and-uxpin-merge\" tabindex=\"-1\">Introducing <a href=\"https:\/\/ui.shadcn.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">shadcn\/ui<\/a> and <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a10f52eb8967166c8c607df\/a3a40868f6c28f53a46016746e5d1fb8.jpg\" alt=\"shadcn\/ui\" style=\"width:100%;\"><\/p>\n<p>To speed up UX delivery, combine AI-driven planning with a strong component library. This is where shadcn\/ui and UXPin Merge come in. shadcn\/ui provides accessible, customizable UI components, while UXPin Merge integrates these production-ready components directly into your design canvas, all aligned with your Tailwind configurations. This integration ensures that your prototypes match the final product exactly &#8211; no need for a translation layer or worrying about inconsistencies.<\/p>\n<h2 id=\"using-claude-opus-45-for-ux-planning\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Using Claude Opus 4.5 for UX Planning<\/h2>\n<p>Think of Claude Opus 4.5 as your go-to senior UX strategist &#8211; one that delivers structured, actionable insights tailored to your design system. The trick? Crafting the right prompts to get the best results.<\/p>\n<h3 id=\"writing-effective-prompts\" tabindex=\"-1\">Writing Effective Prompts<\/h3>\n<p>Claude Opus 4.5 thrives when you provide it with a concise project brief upfront. This should include:<\/p>\n<ul>\n<li><strong>Product context<\/strong>: A brief description of what you&#8217;re building.<\/li>\n<li><strong>User personas<\/strong>: Two to three key personas, along with their goals and constraints.<\/li>\n<li><strong>Design system details<\/strong>: Outline component names, Tailwind setup, and any specific rules (e.g., <em>&quot;primary actions are always right-aligned&quot;<\/em>).<\/li>\n<\/ul>\n<p>Once you&#8217;ve set the stage, focus each prompt on a <strong>single task or flow<\/strong>. Here&#8217;s an example for designing an HR compliance dashboard for U.S. enterprise users:<\/p>\n<blockquote>\n<p><em>&quot;You are a senior UX designer helping plan a responsive web app built with React, shadcn\/ui components, and UXPin Merge. Product: a B2B SaaS dashboard that helps U.S. HR managers track employee training completion and compliance deadlines. Primary persona: Dana, an HR Manager who needs to quickly identify overdue trainings, send reminders, and export audit reports. Task: &#8216;Review overdue trainings and send reminders to selected employees.&#8217; Propose a linear user journey for this task. For each step, specify the user intent, screen name, key action, system response, and 2\u20133 suitable shadcn\/ui components by their canonical names (e.g., DataTable, Dialog, Button, Toast). Note any <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/\" style=\"display: inline;\">WCAG 2.1 AA accessibility considerations<\/a>. Respond in a Markdown table.&quot;<\/em><\/p>\n<\/blockquote>\n<p>This type of prompt works because it narrows the focus, specifies the desired format, and ties each step to real components like those in <em>shadcn\/ui<\/em>. Asking for structured outputs &#8211; such as Markdown tables or numbered lists &#8211; makes it easy to transfer the results directly into UXPin docs or other planning tools without extra formatting.<\/p>\n<p>To refine this process further, provide Claude with a <strong>&quot;component whitelist&quot;<\/strong> &#8211; a list of approved shadcn\/ui primitives. Instruct it to flag any suggestions outside this list as a <em>&quot;new component request&quot;<\/em>. This avoids the common pitfall of AI recommending UI patterns that don\u2019t exist in your codebase.<\/p>\n<p>Once you have these structured outputs, the next step is turning them into a practical design brief.<\/p>\n<h3 id=\"turning-ai-output-into-design-briefs\" tabindex=\"-1\">Turning AI Output into Design Briefs<\/h3>\n<p>Take the user journey and distill it into a <strong>component-first design brief<\/strong>. A solid brief should include:<\/p>\n<ul>\n<li><strong>The user problem<\/strong>: What challenge are you solving?<\/li>\n<li><strong>Success criteria<\/strong>: For example, <em>&quot;reduce time to identify overdue trainings by 50%.&quot;<\/em><\/li>\n<li><strong>Screen list and purpose<\/strong>: Clearly define each screen\u2019s role.<\/li>\n<li><strong>Explicit component mapping<\/strong>: Ensure every element aligns with your design system.<\/li>\n<\/ul>\n<p>After drafting the brief, validate it with your team. This ensures every component fits within your established UI guidelines and avoids unnecessary rework.<\/p>\n<p>A design brief like this becomes a shared resource for the entire team. Designers can use it to build in UXPin, engineers can reference it to understand component requirements, and product managers can track the scope. According to <a href=\"https:\/\/www.mckinsey.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">McKinsey<\/a>&#8216;s 2023 research on generative AI in product development, integrating AI into this planning phase can reduce time-to-market by <strong>20\u201330%<\/strong>. However, the key is ensuring AI-generated outputs are reviewed and refined by domain experts before moving into execution. That\u2019s where this brief shines &#8211; it captures Claude\u2019s structured insights while leaving room for human judgment before any components hit the canvas.<\/p>\n<h2 id=\"integrating-shadcnui-with-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Integrating shadcn\/ui with UXPin Merge<\/h2>\n<p>Once your design brief is ready, the next step is integrating shadcn\/ui components into UXPin Merge. This process moves your project from planning into actual component implementation, allowing your team to work with real code components during the design phase.<\/p>\n<h3 id=\"setting-up-shadcnui-in-uxpin-merge\" tabindex=\"-1\">Setting Up shadcn\/ui in UXPin Merge<\/h3>\n<p>To streamline the integration, UXPin offers a boilerplate repository called <strong><code>shadcn-merge<\/code><\/strong>. This repo comes pre-configured with three key files: <code>uxpin.config.js<\/code>, <code>uxpin.webpack.config.js<\/code>, and <code>tailwind.config.js<\/code>. These files connect shadcn\/ui&#8217;s React, <a href=\"https:\/\/www.radix-ui.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Radix UI<\/a>, and <a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Tailwind CSS<\/a> setup with UXPin, so you don\u2019t have to start from scratch.<\/p>\n<p>Here\u2019s how to get started:<\/p>\n<ol>\n<li> Clone the <code>shadcn-merge<\/code> repository. <\/li>\n<li> Run <code>yarn install<\/code> to set up and test the components locally. <\/li>\n<li> Use Experimental Mode to preview components in UXPin with the following command:\n<pre><code>npx uxpin-merge --disable-tunneling <\/code><\/pre>\n<\/li>\n<\/ol>\n<p>This step helps identify rendering issues or styling conflicts early in the process. Once everything works as expected, push your library to UXPin using your library token:<\/p>\n<pre><code>npx uxpin-merge push --token &lt;your-uxpin-library-token&gt; <\/code><\/pre>\n<p>Pay close attention to the <code>components.json<\/code> and <code>themes.js<\/code> files. These control the theming and styling of your components in UXPin, ensuring your designs match production visuals.<\/p>\n<h3 id=\"keeping-components-consistent\" tabindex=\"-1\">Keeping Components Consistent<\/h3>\n<p>After your library is live in UXPin, the focus shifts to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maintenance\/\" style=\"display: inline;\">maintaining consistency throughout your design process<\/a>. With UXPin Merge, <strong>the actual React components are rendered on the canvas<\/strong> &#8211; not static images or approximations. This ensures that what designers use is identical to what engineers will ship, creating a seamless workflow.<\/p>\n<p>Component props are automatically displayed in UXPin\u2019s Properties Panel, where designers can adjust variants, states, and interactions through dropdowns and checkboxes. These settings directly map to the code, removing any guesswork and ensuring precise specifications. For additional control, you can enable advanced custom styling by setting <code>settings: { useUXPinProps: true }<\/code> in <code>uxpin.config.js<\/code> (requires <code>@uxpin\/merge-cli<\/code> version 3.4.3 or newer).<\/p>\n<p>Keeping your design system up to date is straightforward. If your engineering team updates a component or adds a new variant, you can push changes to a separate UXPin branch for review using the <code>--branch<\/code> flag:<\/p>\n<pre><code>npx uxpin-merge push --token &lt;token&gt; --branch &lt;branch-name&gt; <\/code><\/pre>\n<p>This approach keeps the main library stable while allowing designers to test updates and provide feedback before finalizing changes for production. It\u2019s a simple yet effective way to maintain a reliable and adaptable design system.<\/p>\n<h2 id=\"building-and-validating-the-interface-in-uxpin\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Building and Validating the Interface in UXPin<\/h2>\n<p>With the shadcn\/ui components integrated, the interface begins to take shape in UXPin. Now that your shadcn\/ui library is up and running, it&#8217;s time to assemble your interface. Use insights from Claude Opus 4.5 to guide decisions and ensure a thoughtful approach.<\/p>\n<h3 id=\"mapping-ai-output-to-components\" tabindex=\"-1\">Mapping AI Output to Components<\/h3>\n<p>Once your components are ready, the next step is to plan the interface screen by screen. Take Claude&#8217;s output and translate it into a buildable interface by aligning each screen with specific shadcn\/ui components.<\/p>\n<p>For instance, let\u2019s say you\u2019re creating a customer support portal:<\/p>\n<ul>\n<li><strong>Table<\/strong>: Ideal for listing tickets.<\/li>\n<li><strong>Badge<\/strong>: Perfect for displaying status labels.<\/li>\n<li><strong>Tabs<\/strong>: Useful for organizing tickets into categories.<\/li>\n<li><strong>Sheet<\/strong> or <strong>Dialog<\/strong>: Great for showing ticket details.<\/li>\n<li><strong>Textarea<\/strong>: For writing replies.<\/li>\n<li><strong>Toast<\/strong>: To provide user feedback.<\/li>\n<\/ul>\n<p>For an admin settings page, you might use <strong>Card<\/strong> sections for grouping content, along with <strong>Switches<\/strong>, <strong>Selects<\/strong>, and <strong>Form<\/strong> fields for interactivity. By mapping components beforehand, you avoid unnecessary changes later and keep development on track.<\/p>\n<p>Once your component map is complete, start building screens in a logical order: layout containers first, followed by navigation, forms, and then dynamic states like hover, loading, or error. Validating the structure early prevents wasted time on rework when it\u2019s time to apply visual polish.<\/p>\n<p>After assembling the screens, double-check that every element aligns with the design intent and adheres to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/\" style=\"display: inline;\">accessibility standards<\/a>.<\/p>\n<h3 id=\"checking-consistency-and-accessibility\" tabindex=\"-1\">Checking Consistency and Accessibility<\/h3>\n<p>With each screen built, it\u2019s essential to validate both consistency and accessibility. Ensure all UI elements stick to approved shadcn\/ui variants. For example, if a prop like <code>variant=&quot;destructive&quot;<\/code> is available, use it instead of manually overriding colors. This keeps the interface consistent with the design brief and production standards.<\/p>\n<p>Accessibility is just as critical. Since shadcn\/ui components are built on Radix UI primitives, they include features like ARIA attributes, focus management, and keyboard navigation by default. However, how you combine these components can affect accessibility. Here\u2019s what to check:<\/p>\n<ul>\n<li><strong>Keyboard Navigation<\/strong>: Test in UXPin&#8217;s preview to confirm logical focus order and visible focus states.<\/li>\n<li><strong>Dialogs and Menus<\/strong>: Ensure they can be accessed and dismissed using the keyboard.<\/li>\n<li><strong>Color Contrast<\/strong>: Use UXPin to verify text contrast meets WCAG 2.1 AA standards (4.5:1 for body text, 3:1 for large text).<\/li>\n<li><strong>Form Validation Messages<\/strong>: Place error messages directly next to the relevant field rather than in a generic banner.<\/li>\n<\/ul>\n<p>Teams that prioritize these checks during the build phase often save time later. For example, <a href=\"https:\/\/about.allegro.eu\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Allegro<\/a>&#8216;s design system team reported a 90% drop in inconsistencies between design and production after adopting code-backed components via UXPin Merge. Staying disciplined about these steps can help your team achieve similar results.<\/p>\n<h2 id=\"reviewing-refining-and-handing-off\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Reviewing, Refining, and Handing Off<\/h2>\n<h3 id=\"auditing-for-accessibility-and-completeness\" tabindex=\"-1\">Auditing for Accessibility and Completeness<\/h3>\n<p>Before moving forward, conduct a focused audit in UXPin to ensure every screen is complete and that interactions meet accessibility standards.<\/p>\n<p>Map each user scenario from your original Claude Opus 4.5 flow to its corresponding screen. Make sure all critical states &#8211; like default, loading, error, empty, and success &#8211; are fully represented. Don\u2019t overlook edge cases such as permission errors, network timeouts, or empty dashboards; these should have dedicated screens as well.<\/p>\n<p>For accessibility, spend 15\u201320 minutes reviewing your component combinations against WCAG 2.1 AA standards. While shadcn\/ui relies on Radix UI primitives, which handle many accessibility patterns by default, you still need to verify your specific implementations. Check for issues like <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/\" style=\"display: inline;\">color contrast<\/a>, keyboard navigation, and the proper placement of form error messages, dialogs, and menus.<\/p>\n<p>Once the audit is complete, shift to refining the design using feedback from Claude Opus 4.5.<\/p>\n<h3 id=\"refining-ux-with-claude-opus-45\" tabindex=\"-1\">Refining UX with Claude Opus 4.5<\/h3>\n<p>If problems arise, Claude Opus 4.5 can help refine your design, but it\u2019s crucial to keep its input focused. Without clear boundaries, AI suggestions can veer off course and stray from your design system. The key is to provide explicit instructions.<\/p>\n<p>Start by outlining the constraints: list your shadcn\/ui components, token names, and any brand guidelines. Then, ask for critiques rather than full redesigns. For example, a prompt like this works well:<\/p>\n<blockquote>\n<p><em>&quot;You are a senior UX designer reviewing a product built with shadcn\/ui and UXPin Merge. Restrict suggestions to existing components and tokens. Identify issues in information hierarchy and clarity of actions. Propose improvements using only existing components and tokens. Flag any accessibility concerns.&quot;<\/em><\/p>\n<\/blockquote>\n<p>This approach keeps Claude\u2019s suggestions actionable. Instead of introducing new patterns, it might recommend swapping a secondary button for a <code>ghost<\/code> variant to reduce clutter or refining microcopy in an empty state. For <strong>error messages<\/strong>, you can provide Claude with raw system errors and ask it to translate them into clear, user-friendly language. For instance, <code>HTTP 429<\/code> could become <em>&quot;You&#8217;ve hit the request limit. Please wait a moment and try again.&quot;<\/em> After finalizing, insert the refined text into component properties to ensure developers have precise, production-ready references.<\/p>\n<p>Once the UX is polished, move on to the final <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-checklist\/\" style=\"display: inline;\">handoff stage<\/a>.<\/p>\n<h3 id=\"handing-off-with-uxpin-merge\" tabindex=\"-1\">Handing Off with UXPin Merge<\/h3>\n<p>Thanks to the integration of shadcn\/ui components through UXPin Merge, the handoff process is streamlined and eliminates the traditional gaps between design and development. Developers aren\u2019t working from static mockups &#8211; they\u2019re working with <strong>production-ready components<\/strong> that already include documented props, variants, and interaction states.<\/p>\n<p>This seamless transition ensures every element in the prototype directly corresponds to the codebase. Developers can reference exact component names, prop values, and content strings without needing to guess or interpret. With this setup, the handoff process is faster and requires fewer back-and-forth discussions between design and engineering, keeping the workflow efficient and aligned.<\/p>\n<h2 id=\"conclusion-faster-ux-delivery-with-ai-and-code-backed-design\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion: Faster UX Delivery with AI and Code-Backed Design<\/h2>\n<p>The combination of <strong>Claude Opus 4.5<\/strong>, <strong>shadcn\/ui<\/strong>, and <strong>UXPin Merge<\/strong> streamlines the entire UX process by tackling common bottlenecks like lengthy planning phases, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/bringing-design-and-code-together\/\" style=\"display: inline;\">misalignment between design and development<\/a>, and inconsistent components.<\/p>\n<p>Claude Opus 4.5 simplifies the discovery phase, condensing weeks of spec writing into just a few sessions. shadcn\/ui provides accessible, production-ready components backed by real code, while UXPin Merge integrates these React components directly into the design environment. This approach ensures prototypes mirror the actual codebase, significantly reducing delays and communication breakdowns.<\/p>\n<p>The results? Teams working on repeatable flows &#8211; like onboarding, dashboards, or billing &#8211; can achieve <strong>30\u201360% faster UX turnaround<\/strong>. This means fewer redesigns, fewer back-and-forth meetings, and a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" style=\"display: inline;\">smoother engineering handoff<\/a>.<\/p>\n<p>Want to see it in action? Start small. Use Claude Opus 4.5 to plan a single feature and test UXPin Merge on a defined scope, such as an authentication flow or settings page. Track cycle times and note how often engineering requests design changes after implementation begins. These metrics will clearly demonstrate the value of this workflow, making it easier to advocate for broader adoption.<\/p>\n<p>These tools are ready to use today for any React-based product team. AI accelerates the planning, code-backed components maintain standards, and UXPin Merge ensures everything stays aligned &#8211; delivering consistent, accessible, and production-ready designs. Together, they create a faster, more efficient design-to-development process for your projects.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"whats-the-fastest-way-to-start-this-workflow-on-one-feature\" tabindex=\"-1\" data-faq-q>What\u2019s the fastest way to start this workflow on one feature?<\/h3>\n<p>UXPin makes it easy to hit the ground running with its <strong>AI Component Creator<\/strong>, seamlessly integrated with <strong>Claude Opus 4.5<\/strong> and <strong>shadcn\/ui<\/strong> through UXPin Merge. Here&#8217;s how it works:<\/p>\n<ol>\n<li> <strong>Describe Your Vision<\/strong>: Provide a detailed prompt describing the feature or component you need. The AI will generate layout suggestions or even complete React components based on your input. <\/li>\n<li> <strong>Drag and Drop<\/strong>: Once the AI generates the components, simply drag them onto the canvas in UXPin. <\/li>\n<li> <strong>Fine-Tune with AI<\/strong>: Use the AI tools to tweak and refine the components directly on the platform. <\/li>\n<\/ol>\n<p>This streamlined process allows you to quickly prototype with <strong>production-ready components<\/strong>, saving time and reducing setup complexity.<\/p>\n<h3 id=\"how-do-i-keep-claudes-ux-suggestions-aligned-with-my-shadcnui-components\" tabindex=\"-1\" data-faq-q>How do I keep Claude\u2019s UX suggestions aligned with my shadcn\/ui components?<\/h3>\n<p>To ensure Claude&#8217;s UX recommendations work seamlessly with your <strong>shadcn\/ui<\/strong> components, it&#8217;s important to connect your component library to a live data source &#8211; such as the <strong>shadcn\/ui MCP server<\/strong>. This setup guarantees that Claude has access to the most accurate and current component specifications.<\/p>\n<p>Here\u2019s what else you can do:<\/p>\n<ul>\n<li><strong>Document your design system<\/strong>: Create a <code>CLAUDE.md<\/code> file that outlines your design system guidelines. This document acts as a reference point for both AI-generated suggestions and human designers.<\/li>\n<li><strong>Import components into UXPin<\/strong>: By importing your components into a tool like UXPin, you can integrate them directly into your design workflows, ensuring consistency between design and development.<\/li>\n<\/ul>\n<p>Taking these steps bridges the gap between AI-driven suggestions, your design system, and the actual implementation of components.<\/p>\n<h3 id=\"what-should-i-audit-to-ensure-wcag-21-aa-accessibility-in-uxpin-prototypes\" tabindex=\"-1\" data-faq-q>What should I audit to ensure WCAG 2.1 AA accessibility in UXPin prototypes?<\/h3>\n<p>To align UXPin prototypes with <strong>WCAG 2.1 AA standards<\/strong>, focus on these key areas: <strong>keyboard navigation<\/strong>, <strong>contrast ratios<\/strong>, <strong>form labels<\/strong>, <strong>heading structure<\/strong>, and <strong>text resizing<\/strong>.<\/p>\n<ul>\n<li><strong>Keyboard navigation<\/strong>: Make sure all interactive elements are fully accessible via keyboard alone.<\/li>\n<li><strong>Contrast ratios<\/strong>: Ensure text meets the 4.5:1 contrast ratio requirement for clarity and readability.<\/li>\n<li><strong>Form labels<\/strong>: Include proper labels for all form fields to assist screen readers and improve usability.<\/li>\n<li><strong>Heading structure<\/strong>: Use headings that are properly structured and compatible with screen readers.<\/li>\n<li><strong>Text resizing<\/strong>: Verify that content remains functional and readable when scaled up to 200%.<\/li>\n<\/ul>\n<p>Leverage tools like contrast checkers and conduct thorough cross-functional reviews to validate the use of ARIA roles and semantic HTML. These steps will help ensure accessibility for all users.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\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\/prototype-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Sonnet 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-ui-claude-opus-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Opus 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-ui-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Sonnet 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=6a10f52eb8967166c8c607df\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Plan UX with AI and prototype using code-backed components for consistent, accessible interfaces and faster design-to-development handoffs.<\/p>\n","protected":false},"author":231,"featured_media":59967,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-59970","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 UX using Claude Opus 4.5 + shadcn\/ui - 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-ux-claude-opus-4-5-shadcn-ui-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 Opus 4.5 + shadcn\/ui - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Plan UX with AI and prototype using code-backed components for consistent, accessible interfaces and faster design-to-development handoffs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-23T08:44:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_47b1c86f5444ba12ac91bed02f987ab9.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrew Martin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewSaaS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Martin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"How to build UX using Claude Opus 4.5 + shadcn\\\/ui &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-05-23T08:44:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\\\/\"},\"wordCount\":3038,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_47b1c86f5444ba12ac91bed02f987ab9.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\\\/\",\"name\":\"How to build UX using Claude Opus 4.5 + shadcn\\\/ui - Use UXPin Merge! | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_47b1c86f5444ba12ac91bed02f987ab9.jpeg\",\"datePublished\":\"2026-05-23T08:44:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_47b1c86f5444ba12ac91bed02f987ab9.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_47b1c86f5444ba12ac91bed02f987ab9.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UX using Claude Opus 4.5 + shadcn\\\/ui - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-claude-opus-4-5-shadcn-ui-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 Opus 4.5 + shadcn\\\/ui &#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 UX using Claude Opus 4.5 + shadcn\/ui - 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-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UX using Claude Opus 4.5 + shadcn\/ui - Use UXPin Merge!","og_description":"Plan UX with AI and prototype using code-backed components for consistent, accessible interfaces and faster design-to-development handoffs.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-05-23T08:44:06+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_47b1c86f5444ba12ac91bed02f987ab9.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"How to build UX using Claude Opus 4.5 + shadcn\/ui &#8211; Use UXPin Merge!","datePublished":"2026-05-23T08:44:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/"},"wordCount":3038,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_47b1c86f5444ba12ac91bed02f987ab9.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/","name":"How to build UX using Claude Opus 4.5 + shadcn\/ui - Use UXPin Merge! | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_47b1c86f5444ba12ac91bed02f987ab9.jpeg","datePublished":"2026-05-23T08:44:06+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_47b1c86f5444ba12ac91bed02f987ab9.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_47b1c86f5444ba12ac91bed02f987ab9.jpeg","width":1536,"height":1024,"caption":"How to build UX using Claude Opus 4.5 + shadcn\/ui - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-claude-opus-4-5-shadcn-ui-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 Opus 4.5 + shadcn\/ui &#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\/59970","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=59970"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/59970\/revisions"}],"predecessor-version":[{"id":59971,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/59970\/revisions\/59971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/59967"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=59970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=59970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=59970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}