{"id":58836,"date":"2026-04-23T02:32:00","date_gmt":"2026-04-23T09:32:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=58836"},"modified":"2026-04-23T02:32:00","modified_gmt":"2026-04-23T09:32:00","slug":"build-ux-gpt-5-2-shadcn-ui-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/","title":{"rendered":"How to build UX using GPT-5.2 + shadcn\/ui  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>Streamline your UX design process with <a href=\"https:\/\/platform.openai.com\/docs\/models\/gpt-5.2\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GPT-5.2<\/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> These tools enable designers to work with real React components, refine designs using AI, and create production-ready prototypes without starting from scratch. Here&#8217;s how they work together:<\/p>\n<ul>\n<li><strong>GPT-5.2<\/strong>: Generates layouts from wireframes or prompts, reducing design errors by 50% and handling complex design logic with its 400,000-token context window.<\/li>\n<li><strong>shadcn\/ui<\/strong>: A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/react-design-system\/\" style=\"display: inline;\">React component system<\/a> built on <a href=\"https:\/\/www.radix-ui.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Radix UI<\/a>, offering accessible, customizable components that live in your codebase.<\/li>\n<li><strong>UXPin Merge<\/strong>: Integrates directly with your Git repository, allowing designers to use production-ready components for seamless handoffs to developers.<\/li>\n<\/ul>\n<p>This approach eliminates inefficiencies in the design-to-development workflow, ensuring that prototypes are not just visually accurate but fully functional and ready for deployment. By combining AI-driven design with a component-driven system, teams achieve faster, more accurate results while maintaining alignment across design and development.<\/p>\n<p><strong>Key Benefits:<\/strong><\/p>\n<ul>\n<li>Reduce design-to-code inconsistencies<\/li>\n<li>Leverage AI to refine designs with natural language commands<\/li>\n<li>Use production-ready components for scalable, modular design systems<\/li>\n<\/ul>\n<p>Ready to evolve your UX workflow? Dive into the details below.<\/p>\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\/69e9677a09e6c77f4f7e661e\/979f9bd1de4e153314d11176bd18730c.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<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"setting-up-your-environment\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Setting Up Your Environment<\/h2>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/69e9677a09e6c77f4f7e661e-1776910543961.jpg\" alt=\"Setting Up UXPin Merge with shadcn\/ui: Complete Integration Workflow\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Setting Up UXPin Merge with shadcn\/ui: Complete Integration Workflow<\/p>\n<\/figcaption><\/figure>\n<p>To get started with <strong>GPT-5.2<\/strong>, <strong>shadcn\/ui<\/strong>, and <strong>UXPin Merge<\/strong>, you\u2019ll need a specific tech stack and configuration. The setup requires <strong><a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Next.js<\/a><\/strong> with <strong><a href=\"https:\/\/www.typescriptlang.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">TypeScript<\/a><\/strong>, <strong><a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Tailwind CSS<\/a><\/strong>, and <strong><a href=\"https:\/\/zustand.docs.pmnd.rs\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Zustand<\/a><\/strong> for state management. The <strong>shadcn\/ui<\/strong> components are built on <strong>Radix UI primitives<\/strong>, which are designed to provide accessibility right out of the box.<\/p>\n<p>What sets shadcn\/ui apart from traditional component libraries is that it resides directly in your repository. As Vaibhav Gupta puts it:<\/p>\n<blockquote>\n<p>&quot;If you approach shadcn UI as a system instead of a library, it will outperform most traditional UI frameworks &#8211; both in developer experience and production stability.&quot;<\/p>\n<\/blockquote>\n<p>This structure ensures a seamless integration with <strong>UXPin Merge<\/strong> as you proceed.<\/p>\n<h3 id=\"tech-stack-requirements\" tabindex=\"-1\">Tech Stack Requirements<\/h3>\n<p>Here\u2019s what you\u2019ll need for your setup:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Node.js<\/a><\/strong> (version 8 or higher)<\/li>\n<li>Either <strong>npm<\/strong> or <strong>yarn<\/strong><\/li>\n<li>Tailwind CSS configured with <strong>CSS variables<\/strong><\/li>\n<\/ul>\n<p>To support multi-theme designs, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" style=\"display: inline;\">define design tokens<\/a> in your Tailwind configuration (e.g., <code>--brand<\/code>, <code>--radius-md<\/code>). This method makes it easier to create white-label products without the need for a full rebuild.<\/p>\n<p>For better scalability, organize your components into folders based on their purpose: raw components, modified versions, and compositional elements. Use abstractions like a custom <code>AppButton<\/code> component to handle global behaviors, analytics, or loading states.<\/p>\n<h3 id=\"connecting-your-codebase-to-uxpin-merge\" tabindex=\"-1\">Connecting Your Codebase to UXPin Merge<\/h3>\n<p>The connection between your codebase and <strong>UXPin Merge<\/strong> is managed through the <code>uxpin-merge<\/code> CLI tool. This tool syncs your local React components with UXPin\u2019s design editor. Start by running:<\/p>\n<pre><code>yarn install <\/code><\/pre>\n<p>to ensure all dependencies are ready. Then, activate Experimental Mode with:<\/p>\n<pre><code>npx uxpin-merge --disable-tunneling <\/code><\/pre>\n<p>To push your components into UXPin, follow these steps:<\/p>\n<ol>\n<li>Create a new library in the UXPin dashboard by selecting <strong>&quot;Import React components&quot;<\/strong>.<\/li>\n<li>Copy the generated access token.<\/li>\n<li>Deploy your components using:<\/li>\n<\/ol>\n<pre><code>npx uxpin-merge push --token &lt;your-token&gt; <\/code><\/pre>\n<p>If your team works across multiple branches, you can use the <code>--branch &lt;branch_name&gt;<\/code> flag to sync specific versions of your development work. For real-time updates, integrate your UXPin authentication token into your CI\/CD pipeline. Tools like <strong><a href=\"https:\/\/github.com\/actions\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub Actions<\/a><\/strong> or <strong><a href=\"https:\/\/circleci.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">CircleCI<\/a><\/strong> can automatically push changes whenever code is committed.<\/p>\n<p>Finally, configure <strong>shadcn\/ui<\/strong> to ensure your components render correctly within UXPin Merge.<\/p>\n<h3 id=\"configuring-shadcnui-in-merge\" tabindex=\"-1\">Configuring <a href=\"https:\/\/ui.shadcn.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">shadcn\/ui<\/a> in Merge<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69e9677a09e6c77f4f7e661e\/06104a3846ed48903ab6dbb5015d2857.jpg\" alt=\"shadcn\/ui\" style=\"width:100%;\"><\/p>\n<p>Once your environment is ready, you\u2019ll need to adapt <strong>shadcn\/ui<\/strong> for UXPin Merge. This involves setting up two configuration files: <code>uxpin.config.js<\/code> and <code>uxpin.webpack.config.js<\/code>. These files determine which components are available in UXPin and how they\u2019re organized.<\/p>\n<p>To prevent Tailwind from purging necessary styles during the build, extend the <strong>safelist<\/strong> in your <code>tailwind.config.js<\/code> to include shadcn\/ui\u2019s dynamic classes.<\/p>\n<p>The <strong>shadcn-merge<\/strong> repository provides a boilerplate for integration and reflects ongoing updates to maintain compatibility. Each component directory should include a single component with an <code>export default<\/code> statement to ensure proper compilation.<\/p>\n<p>When syncing components, UXPin offers two methods:<\/p>\n<ul>\n<li><strong>Clean Integration<\/strong>: A direct Git connection that enforces strict code standards.<\/li>\n<li><strong>Wrapped Integration<\/strong>: Uses <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/react-design-patterns\/\" style=\"display: inline;\">Higher-Order Components<\/a> for more flexibility.<\/li>\n<\/ul>\n<p>Most teams prefer starting with <strong>Wrapped Integration<\/strong> for its adaptability and transition to <strong>Clean Integration<\/strong> as their design systems evolve.<\/p>\n<h2 id=\"using-gpt-52-in-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Using <a href=\"https:\/\/platform.openai.com\/docs\/models\/gpt-5.2\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GPT-5.2<\/a> in UXPin Merge<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69e9677a09e6c77f4f7e661e\/a3d52ebfdee446b1ae785799dee83d3f.jpg\" alt=\"GPT-5.2\" style=\"width:100%;\"><\/p>\n<p>Once you&#8217;ve set up your environment and configured components, GPT-5.2 takes center stage in refining your design with AI-driven precision. When given clear, detailed prompts, GPT-5.2 excels at generating components that meet your specifications. However, it\u2019s important to note that vague prompts won\u2019t yield the desired results &#8211; this model thrives on clarity. When using Forge AI within UXPin Merge, the quality of the generated components is directly tied to how well you structure your requests.<\/p>\n<h3 id=\"writing-prompts-for-production-ready-outputs\" tabindex=\"-1\">Writing Prompts for Production-Ready Outputs<\/h3>\n<p>The best prompts follow this structure: <strong>Context \u2192 Task \u2192 Constraints \u2192 Output<\/strong>. Start by explaining the user scenario and the purpose of the component you need. Then, detail the task &#8211; whether it\u2019s a login form, navigation menu, or dashboard card. After that, define your constraints, such as which shadcn\/ui components are allowed, specific Tailwind tokens to use, or elements that should be excluded.<\/p>\n<p>Without clear restrictions, GPT-5.2 might introduce unintended styles or elements. To avoid this, use labeled containers like <code>&lt;DESIGN_SYSTEM&gt;<\/code> and <code>&lt;CONSTRAINTS&gt;<\/code> to organize complex requirements. For example, you can specify \u201ctokens-only colors\u201d and prohibit creating new UI elements outside your existing library.<\/p>\n<p>A key strategy is the <strong>&quot;Perfection Loop&quot;<\/strong>. In this approach, you instruct GPT-5.2 to create an internal rubric for an ideal response, evaluate its own output, and refine it until it meets your standards. This self-review process helps catch inconsistencies early, ensuring higher-quality results before transitioning to Forge AI.<\/p>\n<h3 id=\"using-forge-ai-in-uxpin-merge\" tabindex=\"-1\">Using Forge AI in UXPin Merge<\/h3>\n<p>Forge AI, seamlessly integrated into UXPin, generates components that align perfectly with your design system. Unlike other AI tools that might produce generic wireframes, Forge ensures that only approved production components &#8211; like those from shadcn\/ui, <a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a>, <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a>, or your custom library &#8211; are used.<\/p>\n<p>No separate ChatGPT or Claude account is required. You can simply prompt directly within the UXPin canvas. Forge will then map your request to the right components, handle any missing dependencies, and download the necessary assets automatically.<\/p>\n<p>As shadcn, the creator of shadcn\/ui, stated:<\/p>\n<blockquote>\n<p>&quot;This is the ultimate Figma kit for shadcn\/ui. If I were to build a Figma kit, this is what I would&#8217;ve built.&quot;<\/p>\n<\/blockquote>\n<p>Ryan Almoneda, a UX Designer at BlackDuck, shared:<\/p>\n<blockquote>\n<p>&quot;Our company selected shadcn as our primary design library&#8230; Its comprehensive variable system has significantly improved our efforts around branding and accessibility.&quot;<\/p>\n<\/blockquote>\n<p>This integration ensures that AI-generated components align with your design tokens and Tailwind CSS settings, eliminating the typical <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/convert-design-to-code-better-way\/\" style=\"display: inline;\">design-to-code inconsistencies<\/a> that often require extra developer time. These tools help you strike a balance between speed and accuracy in your design workflow.<\/p>\n<h3 id=\"balancing-speed-and-accuracy\" tabindex=\"-1\">Balancing Speed and Accuracy<\/h3>\n<p>With precise prompts and effective component mapping, GPT-5.2&#8217;s <strong>reasoning_effort<\/strong> parameter allows you to control the balance between speed and detail. This parameter ranges from <strong>none<\/strong> (fast, minimal deliberation) to <strong>xhigh<\/strong> (thorough, highly detailed reasoning). For quick layout iterations, use <strong>none<\/strong> or <strong>minimal<\/strong>. For more complex components, like those requiring accessibility features, opt for <strong>medium<\/strong> or <strong>high<\/strong>.<\/p>\n<p>If your request is straightforward, GPT-5.2 may automatically switch to a faster, less resource-intensive model, which can sometimes result in lower-quality outputs. To encourage deeper reasoning, include phrases like &quot;Think carefully about this&quot; or &quot;Think deeply&quot; in your prompt.<\/p>\n<p><a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">OpenAI<\/a> reported that incorporating prior reasoning steps into follow-up requests improved the Tau-Bench Retail score from 73.9% to 78.2%. For ongoing UX workflows in UXPin Merge, this means you can maintain context across tasks while reducing token usage, keeping your sessions efficient and accurate at the same time.<\/p>\n<h2 id=\"building-component-driven-workflows\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Building Component-Driven Workflows<\/h2>\n<p>By combining GPT-5.2 and shadcn\/ui with UXPin Merge, you can streamline workflows through a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" style=\"display: inline;\">component-driven approach<\/a>. Instead of designing isolated screens, this method focuses on creating modular, reusable systems. The components are treated as <strong>source code<\/strong>, integrated directly into your codebase, ensuring scalability and efficiency.<\/p>\n<h3 id=\"designing-with-unified-tokens-and-patterns\" tabindex=\"-1\">Designing with Unified Tokens and Patterns<\/h3>\n<p>At the heart of any component-driven system are design tokens. These tokens, which define elements like color, typography, and spacing, should be set up as CSS variables in the <code>:root<\/code> layer &#8211; for example, <code>--radius-md<\/code> or <code>--brand<\/code>. These tokens can then map directly to your Tailwind configuration. This setup not only supports <strong>multi-theme functionality<\/strong> but also ensures that global style updates ripple across your design system instantly.<\/p>\n<p>To keep your system structured, organize components into <strong>three layers<\/strong>:<\/p>\n<ul>\n<li><strong>UI<\/strong>: The raw shadcn components.<\/li>\n<li><strong>Primitives<\/strong>: Slightly customized components aligned with your brand.<\/li>\n<li><strong>Blocks<\/strong>: Fully composed sections such as pricing tables or dashboard cards.<\/li>\n<\/ul>\n<p>This layered approach avoids unnecessary styling and keeps component APIs clean and predictable. As Vaibhav Gupta puts it:<\/p>\n<blockquote>\n<p>&quot;Shadcn UI isn&#8217;t &#8216;just another component library.&#8217; It&#8217;s a component system built on Radix UI + Tailwind CSS, designed for teams that care about ownership, performance, and long-term scalability.&quot; <\/p>\n<\/blockquote>\n<p>Instead of directly using raw components like <code>Button<\/code> in your layouts, create <strong>product-aware abstractions<\/strong> such as <code>AppButton<\/code>. These abstractions allow you to centralize global behaviors like analytics tracking, role-based permissions, or loading states. This structure not only simplifies maintenance but also aligns with accessibility best practices.<\/p>\n<h3 id=\"using-shadcnui-for-accessibility\" tabindex=\"-1\">Using shadcn\/ui for Accessibility<\/h3>\n<p>Shadcn\/ui, built on Radix UI primitives, ensures accessibility right out of the box. Features like keyboard navigation, screen reader compatibility, and focus management are standard. To maintain these features in UXPin Merge, stick to the <code>asChild<\/code> pattern and avoid overriding default focus styles.<\/p>\n<p>When prototyping, prioritize <strong>CSS-based interactions<\/strong> (like Tailwind&#8217;s <code>group-hover<\/code>) over React state. This reduces JavaScript usage, keeping designs lightweight and ensuring accessibility features remain intact. This balance between performance and accessibility is key in a component-driven workflow.<\/p>\n<h3 id=\"iterating-quickly-with-ai-powered-prototyping\" tabindex=\"-1\">Iterating Quickly with AI-Powered Prototyping<\/h3>\n<p>With a modular system in place, GPT-5.2 can speed up prototyping by fine-tuning components, interactions, and responsive designs &#8211; all while staying within the boundaries of your design system. Instead of designing screens from scratch, focus on assembling <strong>&quot;Blocks&quot;<\/strong> &#8211; pre-built sections that enhance consistency and accelerate delivery.<\/p>\n<p>The shadcn\/ui ecosystem in 2026 offers tools that further boost AI-powered workflows in UXPin Merge. Tools like <strong><a href=\"https:\/\/novel.sh\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Novel<\/a><\/strong> (AI-powered autocompletion for WYSIWYG editors), <strong><a href=\"https:\/\/platejs.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Plate<\/a><\/strong> (rich-text frameworks with AI capabilities), and <strong>Assistant UI<\/strong> (chat interfaces with multiple LLM integrations) integrate seamlessly with UXPin Merge. These tools enable rapid iteration on complex components directly within your design environment.<\/p>\n<p>To ensure clarity and save time for future teams, document your component decisions in a <code>README.md<\/code> file within the components folder. Include details on why a component exists, when to use it, and when to avoid it. Additionally, limit component variants and handle layout logic through parent containers instead of embedding it within components. This keeps your system clean and predictable.<\/p>\n<h2 id=\"scaling-design-systems-with-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Scaling Design Systems with UXPin Merge<\/h2>\n<p>When scaling a design system to support multiple teams and products, <strong>centralization<\/strong> becomes essential. UXPin Merge simplifies this by connecting directly to your Git repository or <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a>, ensuring all designers work with the same production-ready components. This approach eliminates the risk of fragmentation caused by outdated or inconsistent design files.<\/p>\n<p>The results speak for themselves. At Microsoft, just three designers managed <strong>60 internal products and over 1,000 developers<\/strong> by integrating the Fluent design system with UXPin Merge. Erica Rider, a UX Architect, demonstrated that with the right tools and governance, it&#8217;s possible to scale operations without increasing headcount. Similarly, <a href=\"https:\/\/www.paypal.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">PayPal<\/a> achieved seamless consistency between prototypes and final products using UXPin Merge, streamlining their development process. Centralized systems like these ensure consistency and effective management across large-scale design operations.<\/p>\n<h3 id=\"governance-and-role-based-permissions\" tabindex=\"-1\">Governance and Role-Based Permissions<\/h3>\n<p>Scaling a design system also requires clear ownership and access control. A <strong>RACI matrix<\/strong> &#8211; outlining who is Responsible, Accountable, Consulted, and Informed &#8211; clarifies roles and streamlines decision-making. Assigning a <strong>Product Owner<\/strong> for the design system can further simplify approvals and reduce delays.<\/p>\n<p>UXPin Merge supports <strong>role-based access control (RBAC)<\/strong>, enabling tiered permissions. For example, junior designers might have view-only access, while senior team members handle edits and approvals. Contribution tiers can also guide teams on how to propose new components or patterns without disrupting the core system.<\/p>\n<p>Automated validation gates are another key feature, rejecting non-compliant files before they reach production. Without such measures, design systems can experience &quot;entropy&quot;, where up to <strong>40% of UI components<\/strong> deviate from established standards. Automated governance tools can cut design review times by <strong>60%<\/strong> and free up <strong>20% to 30%<\/strong> of team capacity for more innovative work.<\/p>\n<h3 id=\"maintaining-design-system-consistency\" tabindex=\"-1\">Maintaining Design System Consistency<\/h3>\n<p>Consistency across a design system relies on strong governance and enforceable design tokens. UXPin Merge takes this further by syncing with your Git repository and applying <strong><a href=\"https:\/\/www.uxpin.com\/design-tokens\" style=\"display: inline;\">design tokens as binding rules<\/a><\/strong>. For instance, updating a token like <code>--brand<\/code> ensures that changes propagate instantly across all designs, eliminating manual updates and ensuring alignment between design and engineering.<\/p>\n<p>To reduce friction during handoffs, align naming conventions across design tools and codebases. For example, ensure component names in Figma match those in your code. This minimizes errors and streamlines collaboration. Documenting the reasoning behind design decisions &#8211; such as why a specific color is used for destructive actions &#8211; helps maintain clarity and justifies exceptions.<\/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; \u2013 Larry Sawyer, Lead UX Designer <\/p>\n<\/blockquote>\n<p>Using <strong>versioned registries<\/strong> with semantic versioning and deprecation schedules helps manage component updates effectively. With UXPin Merge&#8217;s Git integration, updates flow directly into the design environment, eliminating the need for manual imports.<\/p>\n<h3 id=\"preventing-design-drift-at-scale\" tabindex=\"-1\">Preventing Design Drift at Scale<\/h3>\n<p>Design drift occurs when small, unintended changes &#8211; like hardcoding values or duplicating components &#8211; add up, causing inconsistencies between the design system and production. UXPin Merge addresses this with <strong>Forge AI<\/strong>, which ensures AI-generated layouts use only approved components from your design system. This guarantees that every layout is pre-approved, tested, and ready for development.<\/p>\n<p>For example, when designers request tables, forms, or dashboards, Forge AI automatically pulls from the connected design system, avoiding the generic wireframes often produced by other AI tools. This keeps designs aligned with your codebase.<\/p>\n<p>Automated audits further enhance consistency by flagging WCAG violations or brand drift within your CI\/CD pipeline. This proactive approach catches issues early, reducing costly rework. One telecom company, for instance, reduced compliance violations by <strong>75%<\/strong> using governance dashboards. Automated workflows also save teams an average of <strong>two hours per week<\/strong> on accessibility and compliance checks.<\/p>\n<blockquote>\n<p>&quot;As a full stack design team, UXPin Merge is our primary tool when designing user experiences. We have fully integrated our custom-built React Design System and can design with our coded components. It has increased our productivity, quality, and consistency.&quot; \u2013 Brian Demchak, Sr. UX Designer, AAA Digital &amp; Creative Services <\/p>\n<\/blockquote>\n<h2 id=\"conclusion\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion<\/h2>\n<h3 id=\"key-benefits-of-using-these-tools-together\" tabindex=\"-1\">Key Benefits of Using These Tools Together<\/h3>\n<p>By integrating <strong>GPT-5.2<\/strong>, <strong>shadcn\/ui<\/strong>, and <strong>UXPin Merge<\/strong>, teams can skip the tedious process of converting static designs into production-ready code. Designers work directly with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-components\/\" style=\"display: inline;\">React components<\/a> that are ready for deployment, eliminating manual translation efforts. This streamlined process has shown real impact &#8211; Larry Sawyer, Lead UX Designer, shared that his team cut engineering time by nearly 50% with UXPin Merge.<\/p>\n<p>But it\u2019s not just about speed. Automatic synchronization through CI\/CD tools like GitHub Actions ensures design files are always aligned with the latest production code, avoiding the common issue of design drift. Additionally, GPT-5.2 has reduced error rates in software interface understanding by 50%, leading to AI-generated layouts that are more precise and require fewer revisions. Mark Figueiredo, Senior UX Team Lead at <a href=\"https:\/\/www.troweprice.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">T. Rowe Price<\/a>, highlighted a major time-saving benefit: feedback cycles that once took days now take just hours, significantly shortening project timelines.<\/p>\n<h3 id=\"final-thoughts-on-design-driven-development\" tabindex=\"-1\">Final Thoughts on Design-Driven Development<\/h3>\n<p>These tools aren&#8217;t just for small teams &#8211; they shine at the enterprise level too. Component-driven design is becoming a standard for scalable and efficient workflows, and with 69% of companies already adopting or developing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-best-practices\/\" style=\"display: inline;\">design systems<\/a>, the focus on bridging design and development has never been more critical.<\/p>\n<p>UXPin Merge takes this to another level by ensuring components used in design are fully interactive and identical to those in production. This consistency allows teams managing multiple products or large-scale development projects to work more efficiently and cohesively.<\/p>\n<blockquote>\n<p>&quot;As a full stack design team, UXPin Merge is our primary tool when designing user experiences. We have fully integrated our custom-built React Design System and can design with our coded components. It has increased our productivity, quality, and consistency.&quot; \u2013 Brian Demchak, Sr. UX Designer, AAA Digital &amp; Creative Services <\/p>\n<\/blockquote>\n<p>Ready to eliminate workflow bottlenecks? Explore <a href=\"https:\/\/www.uxpin.com\/pricing\" style=\"display: inline;\">UXPin Merge<\/a> and see how it can redefine your design-to-development process.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"whats-the-fastest-way-to-connect-my-git-repo-to-uxpin-merge\" tabindex=\"-1\" data-faq-q>What\u2019s the fastest way to connect my Git repo to UXPin Merge?<\/h3>\n<p>The quickest method is to use the built-in Git integration available in your UXPin account. This tool lets you sync your custom component libraries directly with UXPin Merge, ensuring updates are smooth and everything stays consistent.<\/p>\n<p>Here\u2019s how to set it up:<\/p>\n<ul>\n<li><strong>Enable Git integration<\/strong>: Plans start at $29\/month.<\/li>\n<li><strong>Connect your Git repository<\/strong>: Link it directly through UXPin.<\/li>\n<li><strong>Sync your components<\/strong>: Enjoy live updates and real-time collaboration with your team.<\/li>\n<\/ul>\n<h3 id=\"how-do-i-keep-shadcnui-tailwind-styles-from-breaking-in-merge\" tabindex=\"-1\" data-faq-q>How do I keep shadcn\/ui + Tailwind styles from breaking in Merge?<\/h3>\n<p>When working with shadcn\/ui components and Tailwind styles in UXPin Merge, it&#8217;s important to handle customizations thoughtfully to avoid potential issues. Here are some practical tips:<\/p>\n<ul>\n<li><strong>Use Tailwind Utility Classes<\/strong>: Instead of modifying the core code of components, rely on Tailwind&#8217;s utility classes for styling. This approach keeps your changes clean and manageable.<\/li>\n<li><strong>Leverage shadcn\/ui Theming Options<\/strong>: Take advantage of the theming features provided by shadcn\/ui, such as CSS variables, to align components with your project&#8217;s design system.<\/li>\n<li><strong>Stay Updated with Tailwind v4<\/strong>: Keep an eye on updates to Tailwind CSS (version 4) to ensure your styles remain compatible and avoid conflicts.<\/li>\n<li><strong>Keep Customizations Modular<\/strong>: Organize your custom styles and changes in a modular way. This ensures your project remains stable and easier to maintain when updates are needed.<\/li>\n<\/ul>\n<p>By following these practices, you can ensure your components are styled in a way that&#8217;s both scalable and reliable for your projects.<\/p>\n<h3 id=\"how-can-i-make-gpt-52-use-only-my-approved-components-and-tokens\" tabindex=\"-1\" data-faq-q>How can I make GPT-5.2 use only my approved components and tokens?<\/h3>\n<p>To make sure GPT-5.2 sticks to your approved components and tokens, it&#8217;s important to use clear and structured prompts. Start with a system-first approach, which prioritizes setting up the model&#8217;s framework before diving into tasks. By focusing on effective <strong>prompt engineering<\/strong> and providing detailed instructions, you can guide the model&#8217;s responses more precisely.<\/p>\n<p>Additionally, implementing system design strategies specifically tailored for GPT-5.2 ensures that it stays aligned with your desired components and tokens throughout interactions. This approach helps maintain control and consistency in the model&#8217;s behavior.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/prototype-gpt-5-2-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using GPT-5.2 + shadcn\/ui &#8211; Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-gpt-5-mini-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using GPT-5 Mini + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-ui-gpt-5-2-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using GPT-5.2 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-ui-gpt-5-1-mui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using GPT-5.1 + MUI  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=69e9677a09e6c77f4f7e661e\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AI-driven, component-first workflows eliminate design-to-code friction by generating production-ready React prototypes from your codebase.<\/p>\n","protected":false},"author":231,"featured_media":58833,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58836","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.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to build UX using GPT-5.2 + 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-gpt-5-2-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 GPT-5.2 + shadcn\/ui - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"AI-driven, component-first workflows eliminate design-to-code friction by generating production-ready React prototypes from your codebase.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-23T09:32:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_d55534a9a5e94c4c2f5da459a0dca2d6.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=\"16 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-gpt-5-2-shadcn-ui-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"How to build UX using GPT-5.2 + shadcn\\\/ui &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-04-23T09:32:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\\\/\"},\"wordCount\":3183,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_d55534a9a5e94c4c2f5da459a0dca2d6.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\\\/\",\"name\":\"How to build UX using GPT-5.2 + shadcn\\\/ui - Use UXPin Merge! | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_d55534a9a5e94c4c2f5da459a0dca2d6.jpeg\",\"datePublished\":\"2026-04-23T09:32:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_d55534a9a5e94c4c2f5da459a0dca2d6.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/image_d55534a9a5e94c4c2f5da459a0dca2d6.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UX using GPT-5.2 + shadcn\\\/ui - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-2-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 GPT-5.2 + 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 GPT-5.2 + 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-gpt-5-2-shadcn-ui-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UX using GPT-5.2 + shadcn\/ui - Use UXPin Merge!","og_description":"AI-driven, component-first workflows eliminate design-to-code friction by generating production-ready React prototypes from your codebase.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-04-23T09:32:00+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_d55534a9a5e94c4c2f5da459a0dca2d6.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"How to build UX using GPT-5.2 + shadcn\/ui &#8211; Use UXPin Merge!","datePublished":"2026-04-23T09:32:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/"},"wordCount":3183,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_d55534a9a5e94c4c2f5da459a0dca2d6.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/","name":"How to build UX using GPT-5.2 + shadcn\/ui - Use UXPin Merge! | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_d55534a9a5e94c4c2f5da459a0dca2d6.jpeg","datePublished":"2026-04-23T09:32:00+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-shadcn-ui-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_d55534a9a5e94c4c2f5da459a0dca2d6.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/04\/image_d55534a9a5e94c4c2f5da459a0dca2d6.jpeg","width":1536,"height":1024,"caption":"How to build UX using GPT-5.2 + shadcn\/ui - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-2-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 GPT-5.2 + 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\/58836","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=58836"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58836\/revisions"}],"predecessor-version":[{"id":58837,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58836\/revisions\/58837"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/58833"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=58836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=58836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=58836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}