{"id":58140,"date":"2026-02-08T01:48:39","date_gmt":"2026-02-08T09:48:39","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=58140"},"modified":"2026-02-08T01:48:39","modified_gmt":"2026-02-08T09:48:39","slug":"prototype-gpt-5-mini-custom-design-systems-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/","title":{"rendered":"How to prototype using GPT-5 Mini + Custom Design Systems  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p>Using <a href=\"https:\/\/platform.openai.com\/docs\/models\/gpt-5-mini\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GPT-5 Mini<\/a> with <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> allows you to create prototypes directly from production code, ensuring your designs match development standards. Here\u2019s how it works:<\/p>\n<ul>\n<li><strong>AI-Generated Layouts<\/strong>: GPT-5 Mini builds functional UIs from simple prompts, using real components from libraries like <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 custom <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> systems.<\/li>\n<li><strong>Code-Based Prototypes<\/strong>: <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge connects these designs to your Git repository, <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a>, or npm package, creating a direct link between design and development.<\/li>\n<li><strong>Faster Workflows<\/strong>: This approach reduces engineering time by up to 50%, eliminates <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/convert-design-to-code-better-way\/\" style=\"display: inline;\">design-to-code translation<\/a>, and ensures consistency across products.<\/li>\n<li><strong>Enterprise Scalability<\/strong>: Teams can manage multiple products efficiently by syncing design systems, maintaining compliance, and using AI to streamline processes.<\/li>\n<\/ul>\n<p>To get started, connect your design system to UXPin, configure GPT-5 Mini with an <a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">OpenAI<\/a> API key, and use prompts to generate layouts. Refine designs, add interactivity, and share code-backed prototypes with developers for immediate implementation.<\/p>\n<p>This method <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designers-developers-collaboration\/\" style=\"display: inline;\">bridges the gap between design and development<\/a>, saving time and ensuring precision in large-scale projects.<\/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\/6987d55c676cd2891cb20341\/166107ad15f90b83d2ed56e078d5c196.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=\"what-you-need-before-you-start\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">What You Need Before You Start<\/h2>\n<p>Before diving in, make sure you have an <strong>active UXPin Merge account<\/strong> and a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" style=\"display: inline;\">connected component library<\/a>. You can use open-source options like MUI, Ant Design, <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Bootstrap<\/a>, or <a href=\"https:\/\/tailwindcss.com\/plus\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Tailwind UI<\/a>. If you&#8217;re working with a custom library, connect it through a Git repository, Storybook, or npm package. This ensures the AI-generated components align with your codebase and design standards, setting the stage for efficient prototyping.<\/p>\n<h3 id=\"setting-up-your-custom-design-system-in-uxpin\" tabindex=\"-1\">Setting Up Your Custom Design System in <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6987d55c676cd2891cb20341\/1901070b5fe055019272dd3391795359.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>UXPin provides three integration methods for your design system: <strong>npm packages<\/strong>, <strong>Git repositories<\/strong>, or <strong>Storybook<\/strong>. For custom libraries, such as a modified version of Ant Design, use the <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/merge-component-manager\/\" style=\"display: inline;\">Merge Component Manager<\/a> to input the npm package name and the CSS file path. If you&#8217;re working with a proprietary system, you&#8217;ll need developers to help map design tokens and component properties during Git or Storybook integration. Once everything is connected, the Properties Panel allows you to verify that the component properties in your prototype match your production code.<\/p>\n<p>Allison Barkley, Director of Operations at <a href=\"https:\/\/baremetrics.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Baremetrics<\/a>, highlighted the benefits of this streamlined approach:<\/p>\n<blockquote>\n<p>&quot;Being able to jump straight from design to having code ready to going to be a huge time-saver for our team.&quot;<\/p>\n<\/blockquote>\n<p>After your design system is set up, you&#8217;re ready to enable GPT-5 Mini.<\/p>\n<h3 id=\"configuring-gpt-5-mini-in-uxpin\" tabindex=\"-1\">Configuring <a href=\"https:\/\/platform.openai.com\/docs\/models\/gpt-5-mini\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GPT-5 Mini<\/a> in UXPin<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6987d55c676cd2891cb20341\/acf730064f4502d64cec53d0b8929cd0.jpg\" alt=\"GPT-5 Mini\" style=\"width:100%;\"><\/p>\n<p>Head to the <strong>Settings tab<\/strong> and enter your OpenAI API key. From the AI Models dropdown, select &quot;GPT-5-mini.&quot; This model is designed for fast performance, perfect for generating layout variations quickly and efficiently. Be sure to check your AI credit balance in your account settings &#8211; Core plans come with 200 credits per month, while Growth plans include 500 credits per month.<\/p>\n<h3 id=\"team-alignment\" tabindex=\"-1\">Team Alignment<\/h3>\n<p>Decide on the integration method that works best for your team: built-in libraries for speed, npm for custom packages, or Git\/Storybook for proprietary systems. To ensure consistency, standardize your prompts by using CamelCase for component names and breaking down complex UI requests into smaller, manageable tasks for better accuracy.<\/p>\n<h2 id=\"how-to-build-prototypes-with-gpt-5-mini-and-uxpin-merge\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">How to Build Prototypes with GPT-5 Mini and UXPin Merge<\/h2>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6987d55c676cd2891cb20341-1770514732223.jpg\" alt=\"4-Step Process for Building Prototypes with GPT-5 Mini and UXPin Merge\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">4-Step Process for Building Prototypes with GPT-5 Mini and UXPin Merge<\/p>\n<\/figcaption><\/figure>\n<p>Once your design system is connected and GPT-5 Mini is set up, you&#8217;re ready to start building. The process transitions from <strong>AI-generated layouts<\/strong> to <strong>polished, code-backed prototypes<\/strong> that behave like actual applications. Here&#8217;s a step-by-step guide to get you started.<\/p>\n<h3 id=\"step-1-generate-layouts-using-gpt-5-mini-prompts\" tabindex=\"-1\">Step 1: Generate Layouts Using GPT-5 Mini Prompts<\/h3>\n<p>Begin by opening the <strong>AI Component Creator<\/strong> in the Quick Tools panel of the UXPin Editor. Enter a prompt that clearly specifies the layout and components you need. For instance, instead of requesting &quot;create a dashboard&quot;, try something more detailed like: <em>&quot;create a dashboard with a navigation bar using the AppBar component, a data table using the Table component, and a card grid with three cards.&quot;<\/em><\/p>\n<p>GPT-5 Mini supports <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/\" style=\"display: inline;\">popular React libraries<\/a> like MUI, Ant Design, Bootstrap, and Tailwind, as well as your custom npm packages. If you&#8217;re working on a complex interface, break your request into smaller sections. For example, generate the header first, then the sidebar, and finally the main content area. This modular method ensures better precision and gives you more control over the results.<\/p>\n<p>Once the initial layout is created, move on to refining individual components.<\/p>\n<h3 id=\"step-2-refine-designs-with-real-code-components\" tabindex=\"-1\">Step 2: Refine Designs with Real Code Components<\/h3>\n<p>Use the <strong>AI Helper<\/strong> (the purple &quot;Modify with AI&quot; icon) to fine-tune specific components. Select the component you want to adjust and describe the change you need. For example, you might say: <em>&quot;change the bottom border to 2px solid blue when focused&quot;<\/em> or <em>&quot;increase spacing between cards to 24px.&quot;<\/em> The AI Helper will automatically update styles, layout, spacing, and even text content &#8211; no need for manual property adjustments.<\/p>\n<p>Since you&#8217;re working with actual code components, every change aligns with your production codebase. To ensure accuracy, make specific adjustments and work incrementally. If you need to modify multiple elements, handle them one at a time. Remember, deselecting a component while the AI is processing will cancel the operation.<\/p>\n<p>With your components refined, you can now add interactivity to make your prototype feel even more realistic.<\/p>\n<h3 id=\"step-3-add-interactions-and-conditional-logic\" tabindex=\"-1\">Step 3: Add <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/variables-and-conditional-interactions-for-interactive-prototyping\/\" style=\"display: inline;\">interactions and conditional logic<\/a><\/h3>\n<p>Once your layout is polished, it&#8217;s time to incorporate interactions that simulate real-world behavior. Coded components come with built-in interactivity &#8211; features like tabs, sliders, dropdowns, and calendar pickers function exactly as they would in the final product. For more advanced behavior, use the <strong>Properties Panel<\/strong> to tweak component props according to your logic.<\/p>\n<p>You can also include data-driven functionality. For example, sortable tables will re-render automatically when data sets are updated, creating a dynamic user experience. If you need hover effects or focus borders, include these details in your prompts.<\/p>\n<p>This approach has been successfully used by companies like <a href=\"https:\/\/www.paypal.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">PayPal<\/a> to build prototypes that handle advanced use cases with components functioning just like the final product. Microsoft\u2019s design team took this concept further by syncing their <a href=\"https:\/\/fluent2.microsoft.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Microsoft Fluent<\/a> design system with UXPin Merge. Erica Rider, a UX Architect and Design Leader, shared their experience:<\/p>\n<blockquote>\n<p>&quot;We synced our Microsoft Fluent design system with UXPin&#8217;s design editor via Merge technology. It was so efficient that our 3 designers were able to support 60 internal products and over 1,000 developers.&quot; <\/p>\n<\/blockquote>\n<h3 id=\"step-4-test-and-sync-with-development\" tabindex=\"-1\">Step 4: Test and Sync with Development<\/h3>\n<p>With interactivity in place, it&#8217;s time to validate your prototype using real data and prepare it for development. Test components like sortable tables or grids to ensure they process data correctly. Share password-protected previews with stakeholders to gather feedback before moving forward.<\/p>\n<p>Using shared React components eliminates handoff issues. Edward Nguyen, a UX Architect, highlighted the benefits of this approach:<\/p>\n<blockquote>\n<p>&quot;UXPin prototypes gave our developers enough confidence to build our designs straight in code. If we had to code every prototype and they didn&#8217;t test well, I can only imagine the waste of time and money.&quot; <\/p>\n<\/blockquote>\n<p>When you&#8217;re ready, sync your prototype with your code repository. This allows developers to access the exact components, props, and logic you used, minimizing translation errors and cutting engineering time by about 50%.<\/p>\n<h2 id=\"advanced-techniques-for-enterprise-teams\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Advanced Techniques for Enterprise Teams<\/h2>\n<p>Managing prototypes at scale requires a balance of governance, efficiency, and smooth collaboration between DesignOps and engineering teams. Here&#8217;s how enterprise teams can leverage GPT-5 Mini and UXPin Merge to stay in control while accelerating their workflows.<\/p>\n<h3 id=\"managing-prototypes-across-multiple-products\" tabindex=\"-1\">Managing Prototypes Across Multiple Products<\/h3>\n<p>Consistency is the cornerstone of scaling design efforts. By syncing your design system directly from your Git repository or Storybook into UXPin Merge, you can ensure updates are automatically reflected. This eliminates manual syncing, version mismatches, and redundant work across multiple product lines.<\/p>\n<p>With a 400,000-token context window, GPT-5 Mini can process extensive <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-documentation-guide\/\" style=\"display: inline;\">design system documentation<\/a> and multi-product requirements in a single session. This allows you to generate layouts that pull from your entire component library without losing context or accuracy. For teams managing complex, interconnected products, this removes the need to repeatedly explain design system details to the AI.<\/p>\n<p>This method, already adopted by top-performing teams, ensures that prototypes are consistent and production-ready. It\u2019s a scalable way to enforce design standards while fostering better collaboration across teams.<\/p>\n<h3 id=\"maintaining-governance-and-compliance-with-ai\" tabindex=\"-1\">Maintaining Governance and Compliance with AI<\/h3>\n<p>Once scalable prototypes are established, maintaining compliance becomes essential &#8211; especially in regulated industries or organizations with strict branding standards. AI-generated designs can adhere to these requirements by <strong>assigning roles within your prompts<\/strong>. For instance, instruct GPT-5 Mini to act as a &quot;Senior UX Architect&quot; or &quot;Compliance Officer&quot; to ensure <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/\" style=\"display: inline;\">web accessibility<\/a>, adherence to brand guidelines, and respect for technical constraints.<\/p>\n<p>For critical tasks, prompts can be configured to require summaries and pause for approval before making changes to component libraries. This safeguard prevents unintended refactoring or deletions. Additionally, the <strong>Responses API<\/strong> can enable Zero-Data Retention, ensuring that sensitive prototype data isn\u2019t used for model training &#8211; an essential feature for teams handling confidential information.<\/p>\n<p>To balance performance and precision, adjust the <code>reasoning_effort<\/code> parameter. Use &quot;minimal&quot; for straightforward UIs and &quot;high&quot; for more complex designs. The <code>json_object<\/code> parameter can also standardize output by ensuring the AI generates valid JSON for component properties and design tokens, making it easier to validate outputs against your design system.<\/p>\n<p>If your products need to meet regional standards, specify localization requirements directly in GPT-5 Mini prompts. For example, enforce MM\/DD\/YYYY date formats or imperial units for U.S.-based projects. This approach ensures compliance without requiring manual edits after generation.<\/p>\n<h3 id=\"improving-collaboration-between-designops-and-engineering\" tabindex=\"-1\">Improving Collaboration Between DesignOps and Engineering<\/h3>\n<p>The handoff between design and development is often the biggest bottleneck in organizations. By using production code, UXPin Merge eliminates this friction. Developers receive JSX specifications for every design, including the exact components, props, and logic used by designers. As Larry Sawyer, Lead UX Designer, noted:<\/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>To further streamline collaboration, connect your React library through Git or Storybook so GPT-5 Mini generates layouts using your actual production components. This alignment reduces the need for constant check-ins or approval cycles. DesignOps teams can manage component versions and coordinate releases via <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub<\/a>, ensuring AI-generated layouts stay within technical constraints.<\/p>\n<p>Allison Barkley, Director of Operations at Baremetrics, shared her team\u2019s experience:<\/p>\n<blockquote>\n<p>&quot;The AI component creator is a favorite! &#8230; Being able to jump straight from design to having code ready is going to be a huge time-saver for our team.&quot; <\/p>\n<\/blockquote>\n<p>For quick iterations, GPT-5 Mini can test layouts and variations rapidly, prioritizing speed over complexity. The AI Helper allows DesignOps teams to update visual styles, layouts, and spacing using simple text prompts, cutting down on manual adjustments. This keeps feedback loops short and minimizes back-and-forth communication between teams.<\/p>\n<h2 id=\"conclusion\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion<\/h2>\n<h3 id=\"summary-of-main-benefits\" tabindex=\"-1\">Summary of Main Benefits<\/h3>\n<p>Using GPT-5 Mini alongside UXPin Merge takes enterprise prototyping to a whole new level. By designing with production-ready components, you eliminate the need for the traditional design-to-code translation phase. This ensures consistency and removes gaps between design and development.<\/p>\n<p>This workflow can reduce engineering time by approximately 50% because developers receive production-ready code and detailed specifications instead of static mockups. Even small teams can manage a large workload &#8211; three designers can support as many as 60 internal products and over 1,000 developers using this method. GPT-5 Mini also excels at processing large design system documentation, creating precise layouts that align with your entire component library.<\/p>\n<p>Beyond speed, this method offers control and governance. By syncing your design system directly from Git or Storybook, updates are automatically reflected across all prototypes. AI-generated designs comply with your technical requirements and branding guidelines because they are built using pre-approved components. This creates a scalable, efficient workflow for enterprise teams.<\/p>\n<h3 id=\"how-to-get-started\" tabindex=\"-1\">How to Get Started<\/h3>\n<p>Once production-ready prototypes are in place, moving to implementation is simple. You can connect your component library through Git, Storybook, or npm. If you don\u2019t have a custom library, you can use built-in options like MUI, Ant Design, Bootstrap, or ShadCN &#8211; all accessible directly in the UXPin canvas. Start by generating initial layouts from text prompts, refine them with real code components, add interactions, and share a single link with your development team for immediate use.<\/p>\n<p>For teams looking to scale this process across multiple products, visit <a href=\"https:\/\/www.uxpin.com\/pricing\" style=\"display: inline;\">uxpin.com\/pricing<\/a> to explore Enterprise options. These include custom library AI integration, unlimited AI credits, and dedicated onboarding support. For tailored pricing, you can contact sales@uxpin.com to discuss your organization&#8217;s specific needs.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"how-does-gpt-5-mini-work-with-uxpin-merge-to-improve-prototyping\" tabindex=\"-1\" data-faq-q>How does GPT-5 Mini work with UXPin Merge to improve prototyping?<\/h3>\n<p>GPT-5 Mini simplifies prototyping when paired with UXPin Merge by converting natural language prompts into <strong>ready-to-use UI components<\/strong>. This approach keeps designs uniform, minimizes repetitive tasks, and makes workflows more efficient.<\/p>\n<p>By blending GPT-5 Mini&#8217;s AI-powered functionality with UXPin Merge&#8217;s code-based components, teams can produce high-fidelity prototypes quickly while ensuring seamless collaboration between design and development. This integration allows enterprise teams to meet deployment deadlines faster and deliver refined outcomes with less hassle.<\/p>\n<h3 id=\"how-do-i-set-up-a-custom-design-system-with-uxpin-merge\" tabindex=\"-1\" data-faq-q>How do I set up a custom design system with UXPin Merge?<\/h3>\n<p>To set up a custom design system with <strong>UXPin Merge<\/strong>, start by navigating to the <strong>Design Systems<\/strong> tab located in the top bar of UXPin. Here, you can choose to either create a brand-new design system or manage an existing one.<\/p>\n<p>The next step is to connect your code-based library. To do this, select your Merge library from the dropdown menu under the Design System category, or use the library settings within the editor to establish the connection.<\/p>\n<p>Once the library is linked, UXPin will automatically generate documentation for your components. This documentation includes details like properties and versions, all pulled directly from your code repository. You can further tailor this documentation to match the unique requirements and use cases of your design system.<\/p>\n<p>After completing these steps, your design system will be fully set up. This allows you to create high-fidelity prototypes using components that stay perfectly aligned with your codebase.<\/p>\n<h3 id=\"how-can-enterprise-teams-maintain-compliance-and-governance-when-using-ai-generated-designs\" tabindex=\"-1\" data-faq-q>How can enterprise teams maintain compliance and governance when using AI-generated designs?<\/h3>\n<p>Enterprise teams can stay on top of compliance and governance by setting up <strong>clear standards and guidelines<\/strong> for AI-generated designs. By establishing specific rules for AI outputs, organizations can ensure consistency, maintain security, and align with their internal policies.<\/p>\n<p>To strengthen governance even further, teams should embed AI into a <strong>structured framework<\/strong>. This framework could include tools like APIs, version control systems, and metadata tracking. Such an approach ensures that all AI-generated components align with design systems and meet compliance requirements.<\/p>\n<p>Another key step is to <strong>test and validate<\/strong> AI-generated components before they go live. This process helps confirm quality, security, and adherence to enterprise standards, minimizing risks and reinforcing trust in AI-powered workflows.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/prototype-gpt-5-1-custom-design-systems-uxpin-merge\/\" style=\"display: inline;\">How to prototype using GPT-5.1 + Custom Design Systems  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/prototype-gpt-5-mini-mui-uxpin-merge\/\" style=\"display: inline;\">How to prototype using GPT-5 Mini + MUI  &#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\/prototype-gpt-5-mini-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to prototype using GPT-5 Mini + 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=6987d55c676cd2891cb20341\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Turn text prompts into production-ready, code-backed prototypes using GPT-5 Mini and UXPin Merge that adhere to your design system.<\/p>\n","protected":false},"author":231,"featured_media":58137,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"","yoast_metadesc":"","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to prototype using GPT-5 Mini + Custom Design Systems - Use UXPin Merge! | UXPin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-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 prototype using GPT-5 Mini + Custom Design Systems - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Turn text prompts into production-ready, code-backed prototypes using GPT-5 Mini and UXPin Merge that adhere to your design system.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-08T09:48:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_22ba4785cc2fb36b2c97d5b3cddb25c8.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=\"13 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\\\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"How to prototype using GPT-5 Mini + Custom Design Systems &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-02-08T09:48:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\\\/\"},\"wordCount\":2555,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_22ba4785cc2fb36b2c97d5b3cddb25c8.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\\\/\",\"name\":\"How to prototype using GPT-5 Mini + Custom Design Systems - Use UXPin Merge! | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_22ba4785cc2fb36b2c97d5b3cddb25c8.jpeg\",\"datePublished\":\"2026-02-08T09:48:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_22ba4785cc2fb36b2c97d5b3cddb25c8.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/image_22ba4785cc2fb36b2c97d5b3cddb25c8.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to prototype using GPT-5 Mini + Custom Design Systems - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/prototype-gpt-5-mini-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 prototype using GPT-5 Mini + Custom Design Systems &#8211; Use UXPin Merge!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\",\"name\":\"Andrew Martin\",\"description\":\"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/andrewSaaS\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/andrewuxpin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to prototype using GPT-5 Mini + Custom Design Systems - Use UXPin Merge! | UXPin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to prototype using GPT-5 Mini + Custom Design Systems - Use UXPin Merge!","og_description":"Turn text prompts into production-ready, code-backed prototypes using GPT-5 Mini and UXPin Merge that adhere to your design system.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-02-08T09:48:39+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_22ba4785cc2fb36b2c97d5b3cddb25c8.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"How to prototype using GPT-5 Mini + Custom Design Systems &#8211; Use UXPin Merge!","datePublished":"2026-02-08T09:48:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/"},"wordCount":2555,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_22ba4785cc2fb36b2c97d5b3cddb25c8.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/","name":"How to prototype using GPT-5 Mini + Custom Design Systems - Use UXPin Merge! | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_22ba4785cc2fb36b2c97d5b3cddb25c8.jpeg","datePublished":"2026-02-08T09:48:39+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-custom-design-systems-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_22ba4785cc2fb36b2c97d5b3cddb25c8.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/image_22ba4785cc2fb36b2c97d5b3cddb25c8.jpeg","width":1536,"height":1024,"caption":"How to prototype using GPT-5 Mini + Custom Design Systems - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/prototype-gpt-5-mini-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 prototype using GPT-5 Mini + 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\/58140","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=58140"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58140\/revisions"}],"predecessor-version":[{"id":58141,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58140\/revisions\/58141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/58137"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=58140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=58140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=58140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}