{"id":58982,"date":"2026-05-06T01:32:50","date_gmt":"2026-05-06T08:32:50","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=58982"},"modified":"2026-05-06T01:32:50","modified_gmt":"2026-05-06T08:32:50","slug":"build-ux-gpt-5-mini-custom-design-systems-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/","title":{"rendered":"How to build UX using GPT-5 Mini + Custom Design Systems  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>Want faster UX workflows?<\/strong> <a href=\"https:\/\/platform.openai.com\/docs\/models\/gpt-5-mini\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GPT-5 Mini<\/a> paired with <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> can cut design-to-deployment timelines by up to 86%. Instead of static mockups, you\u2019ll create production-ready code directly from AI prompts, fully aligned with your design system.<\/p>\n<h3 id=\"key-benefits\" tabindex=\"-1\">Key Benefits:<\/h3>\n<ul>\n<li><strong>Speed:<\/strong> Reduce prototyping time from weeks to hours.<\/li>\n<li><strong>Accuracy:<\/strong> Generate code that matches your design system perfectly.<\/li>\n<li><strong>Efficiency:<\/strong> Eliminate <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" style=\"display: inline;\">design handoff<\/a> errors and reduce bugs by 25%.<\/li>\n<\/ul>\n<h3 id=\"how-it-works\" tabindex=\"-1\">How It Works:<\/h3>\n<ol>\n<li><strong>Set Up <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong>: Integrate your component libraries (e.g., <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>\/<a href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Vue<\/a> components).<\/li>\n<li><strong>Configure GPT-5 Mini<\/strong>: Use AI to generate components directly from prompts, adhering to your <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" style=\"display: inline;\">design tokens<\/a>.<\/li>\n<li><strong>Build Prototypes<\/strong>: Drag and drop AI-generated components into UXPin Canvas, tweak them, and export production-ready code.<\/li>\n<\/ol>\n<p>This approach streamlines collaboration between designers and developers, ensuring faster, more consistent results. Start creating code-backed prototypes in minutes with UXPin Merge and GPT-5 Mini.<\/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\/69fa85c374a8318574a51a55\/1cd66cf3ffa0fb3dfd990971e43eb597.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/QY7xfXBTVn4\" frameborder=\"0\" loading=\"lazy\" allowfullscreen style=\"width: 100%; height: auto; aspect-ratio: 16\/9;\"><\/iframe><\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"setting-up-uxpin-merge-with-gpt-5-mini\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Setting Up <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge with <a href=\"https:\/\/platform.openai.com\/docs\/models\/gpt-5-mini\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GPT-5 Mini<\/a><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69fa85c374a8318574a51a55\/6094cfc3d9b96c253bb215bce042ec5d.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/69fa85c374a8318574a51a55-1778030530210.jpg\" alt=\"UXPin Merge and GPT-5 Mini Setup Workflow: 3-Step Integration Process\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">UXPin Merge and GPT-5 Mini Setup Workflow: 3-Step Integration Process<\/p>\n<\/figcaption><\/figure>\n<p>To get started, make sure you have an active UXPin account (starting at $19\/month for team plans as of 2026) and an OpenAI API key for GPT-5 Mini (costing $0.15 per million tokens). Enable Merge by navigating to <strong>Account Settings &gt; Add-ons<\/strong> on uxpin.com. For your OpenAI API key, generate one at platform.openai.com\/api-keys. Ensure you&#8217;re using API version 2025-12-01 or later. UXPin Merge supports libraries like React, Vue, and <a href=\"https:\/\/angular.dev\/overview\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Angular<\/a>.<\/p>\n<h3 id=\"connecting-custom-component-libraries-to-uxpin-merge\" tabindex=\"-1\">Connecting Custom Component Libraries to UXPin Merge<\/h3>\n<p>If you&#8217;re using libraries like MUI, Ant Design, <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Bootstrap<\/a>, or <a href=\"https:\/\/ui.shadcn.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">ShadCN<\/a>, you&#8217;re in luck &#8211; UXPin already includes these, so there&#8217;s no need to import them. However, if you&#8217;ve created your own component library, you&#8217;ll need to connect it manually.<\/p>\n<p>Here\u2019s how:<\/p>\n<ol>\n<li> Go to <strong>Merge &gt; New Library<\/strong> in your UXPin dashboard. <\/li>\n<li> Choose your <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub<\/a> or <a href=\"https:\/\/about.gitlab.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitLab<\/a> repository, or upload a ZIP file of your coded components (React or Vue, up to 50 MB). <\/li>\n<li> Define your component props using a JSON schema. For example:\n<pre><code class=\"language-json\">{ &quot;variant&quot;: [&quot;primary&quot;, &quot;secondary&quot;], &quot;size&quot;: &quot;medium&quot; } <\/code><\/pre>\n<\/li>\n<li> Click <strong>Sync<\/strong> to let UXPin auto-generate style properties from your CSS-in-JS setup. <\/li>\n<li> Drag a sample component into the Canvas to confirm it complies with your design system and that style properties are correctly generated. <\/li>\n<\/ol>\n<p>For best results, avoid inline styles. Instead, use design tokens like <code>--color-primary: #007BFF<\/code> to maintain consistency. If you&#8217;re working with MUI v6, import <code>@mui\/material<\/code> and map tokens such as <code>theme.palette.primary.main<\/code>.<\/p>\n<p>Once your custom library is connected, proceed to configure GPT-5 Mini in UXPin Forge for seamless integration with your design tokens and libraries.<\/p>\n<h3 id=\"configuring-gpt-5-mini-via-uxpin-forge\" tabindex=\"-1\">Configuring GPT-5 Mini via <a href=\"https:\/\/www.uxpin.com\/forge\" style=\"display: inline;\">UXPin Forge<\/a><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69fa85c374a8318574a51a55\/448438ae71a7eb96a2bcd9eb19c5a5ab.jpg\" alt=\"UXPin Forge\" style=\"width:100%;\"><\/p>\n<p><strong>UXPin Forge<\/strong> serves as the AI hub within UXPin. To set up GPT-5 Mini:<\/p>\n<ol>\n<li>Open <strong>Forge &gt; AI Models<\/strong> from the UXPin sidebar.<\/li>\n<li>Add GPT-5 Mini by pasting your OpenAI API key.<\/li>\n<li>Set the context window to <strong>128k tokens<\/strong> &#8211; ideal for handling <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/\" style=\"display: inline;\">AI design systems<\/a>.<\/li>\n<li>Link your custom library from Merge, or use pre-loaded libraries like MUI.<\/li>\n<\/ol>\n<p>Forge automatically enforces your design rules, ensuring consistency across your system. For example, it can ensure all buttons maintain a consistent border radius of 8px.<\/p>\n<p>To further streamline the process, upload your design tokens in <strong>Forge &gt; Design Tokens<\/strong> using JSON or YAML format. Here\u2019s an example:<\/p>\n<pre><code class=\"language-json\">{    &quot;colors&quot;: {      &quot;primary&quot;: { &quot;100&quot;: &quot;#E3F2FD&quot; }    },    &quot;spacing&quot;: {      &quot;s&quot;: &quot;8px&quot;    }  } <\/code><\/pre>\n<p>Set a system prompt, such as <em>&quot;Generate React components using MUI, adhering to tokens.json.&quot;<\/em> Forge will preview outputs against your tokens and flag any inconsistencies, such as invalid hex codes. For additional security, use environment variables (e.g., <code>UXPIN_GPT_KEY<\/code>), enable IP whitelisting, and set a rate limit of 100 requests per minute. This setup costs $0.60 per million output tokens.<\/p>\n<h2 id=\"generating-ux-components-with-gpt-5-mini\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Generating UX Components with GPT-5 Mini<\/h2>\n<p>With GPT-5 Mini and UXPin Forge set up, you\u2019re ready to create component-driven UX designs. GPT-5 Mini excels in delivering cleaner layouts, better typography, and improved spacing in about 70% of front-end scenarios. The trick lies in crafting prompts that enforce design tokens and avoid hard-coded values.<\/p>\n<h3 id=\"writing-prompts-for-components-with-design-tokens\" tabindex=\"-1\">Writing Prompts for Components with Design Tokens<\/h3>\n<p>Effective prompts follow a clear structure: <strong>Role, Task, Context, Reasoning, Output Format,<\/strong> and <strong>Stop Conditions<\/strong>. Start by defining the model\u2019s identity with &quot;You are&quot; instead of &quot;Act as.&quot; For example, &quot;You are a senior frontend engineer specializing in design systems&quot; helps anchor the model\u2019s responses more effectively.<\/p>\n<p>A critical part of prompt writing is enforcing design standards. Include specific instructions that prohibit hard-coded colors and require the use of global CSS variables. For example:<\/p>\n<pre><code>You are a React developer building MUI components. Use only design tokens from tokens.json. Do not hard-code hex or RGB values. Reference CSS variables like --primary or --spacing-unit. <\/code><\/pre>\n<p>Organize your instructions using Markdown headers to improve clarity. Adjust parameters such as <em>reasoning_effort<\/em> and <em>verbosity<\/em> to control the level of detail in the output.<\/p>\n<blockquote>\n<p>&quot;GPT-5 is, by default, thorough and comprehensive when trying to gather context&#8230; To reduce the scope &#8211; including limiting tangential tool-calling action and minimizing latency &#8211; switch to a lower reasoning_effort.&quot; &#8211; OpenAI <\/p>\n<\/blockquote>\n<p>Using &quot;Contract-First Prompting&quot; can reduce revision cycles by 40\u201360% and token usage by 25\u201335%. Feeding the model your design token files or component libraries as context ensures the generated code integrates smoothly into your existing codebase.<\/p>\n<h3 id=\"building-interactive-prototypes-in-uxpin-canvas\" tabindex=\"-1\">Building Interactive Prototypes in UXPin Canvas<\/h3>\n<p>Once your prompts are refined, you can begin <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-prototype-setting-user-interactions-without-coding\/\" style=\"display: inline;\">assembling interactive prototypes<\/a> in UXPin Canvas.<\/p>\n<p>GPT-5 Mini supports <strong>Structured Outputs<\/strong> and <strong>Function Calling<\/strong>, which are crucial for generating components that UXPin Canvas can parse. Its 400,000-token context window allows it to reference extensive design system documentation or large component libraries during the generation process.<\/p>\n<p>When components are generated in Forge, they appear directly in the UXPin Canvas. You can drag them into your artboard, tweak properties, and set up interactions. The model performs well, achieving an 88% success rate on the Aider Polyglot benchmark for multi-language code editing. This reliability makes it a solid choice for creating production-ready prototypes.<\/p>\n<p>To refine layouts or styling, upload component screenshots. This visual debugging step helps GPT-5 Mini identify and fix issues before handoff. With an average latency of 4.53 seconds and a throughput of 57.96 tokens per second, you can iterate quickly and efficiently.<\/p>\n<p>For generating complex interactive elements like data tables, multi-step forms, or dashboards with conditional logic, use the custom plain text tool. This approach eliminates JSON formatting errors and streamlines the process.<\/p>\n<h3 id=\"syncing-and-exporting-code-ready-designs\" tabindex=\"-1\">Syncing and Exporting Code-Ready Designs<\/h3>\n<p>After finalizing your prototype, UXPin Merge syncs it automatically with your development team. Because the design uses real components, there\u2019s no translation layer &#8211; what you see in Canvas is exactly what developers will ship.<\/p>\n<p>To create a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" style=\"display: inline;\">developer handoff document<\/a>, click <strong>Share &gt; Spec Mode<\/strong>. This document includes component names, props, design tokens, and interaction logic. Developers can copy code snippets directly or export the entire prototype as React, Vue, or Angular code using <strong>Merge &gt; Export Code<\/strong>.<\/p>\n<p>For teams working with GitHub or GitLab, enable auto-sync in your Merge settings. This ensures that any updates to components in Canvas are pushed directly to your repository.<\/p>\n<p>GPT-5 Mini offers a cost-effective solution for generating high volumes of components. This streamlined process ensures efficient, design system\u2013aligned development from initial prototype to final production.<\/p>\n<h2 id=\"example-building-a-dashboard-with-gpt-5-mini-and-mui\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Example: Building a Dashboard with GPT-5 Mini and <a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/69fa85c374a8318574a51a55\/783fdc1e189f3004bde66e1979b15b35.jpg\" alt=\"MUI\" style=\"width:100%;\"><\/p>\n<p>Let\u2019s break down how to create an analytics dashboard using <strong>UXPin Merge<\/strong>, <strong>GPT-5 Mini<\/strong>, and the <strong>MUI component library<\/strong>. This example shows how to go from an initial idea to a code-ready prototype, all in one seamless workflow.<\/p>\n<p>Start by enabling the <strong>MUI library<\/strong> in UXPin Merge. Since MUI is already integrated, there\u2019s no need to import files or set up external accounts. Just open <strong>UXPin Canvas<\/strong>, go to <strong>Libraries<\/strong>, and activate the MUI library.<\/p>\n<p>Next, configure <strong>GPT-5 Mini<\/strong> using UXPin Forge. Adjust the <code>reasoning_effort<\/code> parameter to handle more advanced components like data grids, interactive charts, and multi-column layouts. With GPT-5 Mini\u2019s large 400,000-token context window, you can input the entire MUI design token file and component API documentation. This ensures the generated code stays consistent with your design system.<\/p>\n<p>Now it\u2019s time to craft your prompt. Here\u2019s an example:<\/p>\n<p><em>&quot;You are a React developer building a sales analytics dashboard using MUI. Use only design tokens from tokens.json. Include a top navigation bar with MUI AppBar, a sidebar with MUI Drawer, and a main content area with MUI Data Grid displaying monthly revenue. Add two MUI Cards with summary metrics and one MUI Line Chart showing trends. Reference CSS variables like &#8211;primary-color and &#8211;spacing-unit.&quot;<\/em><\/p>\n<p>To fine-tune the layout further, upload a <strong>visual reference<\/strong> of your desired dashboard. GPT-5 Mini can process both text and images, translating your wireframe into precise MUI components.<\/p>\n<p>Within seconds, a functional dashboard appears in UXPin Canvas. It includes interactive data tables, navigation, and placeholders for charts. From here, you can adjust component properties, tweak spacing, and set up interactions directly in Canvas. Once satisfied, you can either click <strong>Share &gt; Spec Mode<\/strong> to create a <a href=\"https:\/\/www.uxpin.com\/studio\/handoff\/\" style=\"display: inline;\">developer handoff<\/a> document or use <strong>Merge &gt; Export Code<\/strong> to push the React code directly to your repository. The entire process is quick and efficient.<\/p>\n<p>This example highlights how GPT-5 Mini and UXPin Merge simplify the journey from concept to production-ready code, making the design-to-development workflow faster and more intuitive.<\/p>\n<h2 id=\"benefits-of-using-uxpin-merge-for-ai-driven-ux-development\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Benefits of Using UXPin Merge for AI-Driven UX Development<\/h2>\n<p>Building on the earlier steps of setup and generation, let&#8217;s explore how UXPin Merge, combined with GPT-5 Mini, reshapes design-to-development workflows.<\/p>\n<h3 id=\"faster-deployment-with-component-driven-design\" tabindex=\"-1\">Faster Deployment with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" style=\"display: inline;\">Component-Driven Design<\/a><\/h3>\n<p>UXPin Merge eliminates the frustrating and time-consuming handoff between designers and developers. By using code-backed components that are ready for production, your designs can move directly from the canvas to deployment.<\/p>\n<p>Take <a href=\"https:\/\/www.paypal.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">PayPal<\/a>&#8216;s UX team as an example. In November 2021, a team of just five designers &#8211; supporting over 1,000 developers &#8211; adopted UXPin Merge with Microsoft&#8217;s Fluent design system. The results were impressive: a one-page prototype that previously took over an hour to create was completed in just 8 minutes.<\/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<ul>\n<li>Larry Sawyer, Lead UX Designer <\/li>\n<\/ul>\n<\/blockquote>\n<p>When GPT-5 Mini is added into the mix, the process speeds up even more, cutting project timelines from weeks to just days.<\/p>\n<p>But it\u2019s not just about speed. UXPin Merge ensures your designs stick to the standards of your design system, preventing costly errors down the road.<\/p>\n<h3 id=\"maintaining-design-system-standards-with-ai\" tabindex=\"-1\">Maintaining Design System Standards with AI<\/h3>\n<p>One common challenge with AI-generated designs is <strong>inconsistency<\/strong>. Many generic AI tools can produce components that don\u2019t align with your design system, leading to rework and fragmented designs. UXPin Merge solves this problem by restricting GPT-5 Mini to work only with your pre-approved component library.<\/p>\n<p>Whether you&#8217;re using your custom React components or built-in libraries like MUI, GPT-5 Mini generates designs exclusively from those components. This ensures a single source of truth, eliminating deviations from your design tokens.<\/p>\n<p>This approach guarantees that every prototype &#8211; whether created by a designer or AI &#8211; meets brand guidelines, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-accessibility\/\" style=\"display: inline;\">design system accessibility<\/a> requirements, and technical specifications. It avoids the common pitfall of producing visually appealing but impractical mockups.<\/p>\n<blockquote>\n<p>&quot;As a full stack design team, UXPin Merge is our primary tool when designing user experiences&#8230; It has increased our productivity, quality, and consistency, streamlining our testing of layouts and the developer handoff process.&quot;<\/p>\n<ul>\n<li>Brian Demchak, Sr. UX Designer, AAA Digital &amp; Creative Services <\/li>\n<\/ul>\n<\/blockquote>\n<h2 id=\"wrapping-up\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Wrapping Up<\/h2>\n<p>The pairing of <strong>GPT-5 Mini and UXPin Merge<\/strong> is changing the game for UX teams. Instead of spending weeks <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/convert-design-to-code-better-way\/\" style=\"display: inline;\">converting static designs into code<\/a>, you can now create production-ready prototypes in just days &#8211; or even hours. By keeping AI within the boundaries of your custom design system, you can avoid inconsistencies and speed up development.<\/p>\n<p>Here\u2019s what teams are experiencing: <strong>50\u201370% faster prototyping<\/strong>, <strong>80% fewer design-dev misalignments<\/strong>, and <strong>30% lower maintenance costs<\/strong>. One fintech company even cut their deployment timeline from four sprints to just one per feature &#8211; without a single styling issue.<\/p>\n<p>This approach isn\u2019t just about speed; it\u2019s about improving quality too. When AI-generated components are synced directly with your source repository, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maintenance\/\" style=\"display: inline;\">design system updates<\/a> happen automatically. Plus, exporting prototypes as React code means developers can focus on shipping features instead of rebuilding them.<\/p>\n<p>Looking ahead, the gap between teams leveraging code-first tools and those sticking to old workflows is only going to grow. By 2027, experts predict that <strong>70% of UX processes will involve AI assistance<\/strong>. The real question isn\u2019t whether to adopt this approach &#8211; it\u2019s how soon you can make the shift.<\/p>\n<p>Want to see it in action? Start your free trial at <a href=\"https:\/\/uxpin.com\/merge\" style=\"display: inline;\">uxpin.com\/merge<\/a>. Connect your component library, test your first GPT-5 Mini prompt, and create your first production-ready prototype in minutes. This integration could be the key to revolutionizing how your team works.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"what-do-i-need-to-connect-my-design-system-to-uxpin-merge\" tabindex=\"-1\" data-faq-q>What do I need to connect my design system to UXPin Merge?<\/h3>\n<p>To link your design system with UXPin Merge, you\u2019ll need a well-organized design system and a compatible component library. Merge allows you to sync with production-ready components, even those created using GPT-5 Mini. The process involves a few key steps: integrating your design system, configuring API keys, and aligning components with your team&#8217;s workflow. This setup helps maintain smooth collaboration and consistency throughout your projects.<\/p>\n<h3 id=\"how-do-i-keep-gpt-5-mini-from-using-hard-coded-colors-or-spacing\" tabindex=\"-1\" data-faq-q>How do I keep GPT-5 Mini from using hard-coded colors or spacing?<\/h3>\n<p>To maintain flexibility and consistency in your design system, rely on <strong>design tokens<\/strong> instead of hard-coding colors or spacing. These tokens act as reusable variables for elements like your color palette (e.g., HEX, HSL values), typography, and spacing scales. By generating these tokens and referencing them in your prompts to GPT-5 Mini, you ensure that the AI adheres to your style guidelines. This approach avoids fixed styles in your components and keeps everything aligned with your design system.<\/p>\n<h3 id=\"whats-the-safest-way-to-use-an-openai-api-key-in-uxpin-forge\" tabindex=\"-1\" data-faq-q>What\u2019s the safest way to use an OpenAI API key in UXPin Forge?<\/h3>\n<p>The best way to handle an OpenAI API key in UXPin Forge is by keeping it secure on the server side. Instead of embedding the key directly in your codebase, rely on <strong>environment variables<\/strong> or a <strong>key management service<\/strong> to keep it private. Avoid exposing API keys in client-side environments like browsers or mobile apps, as these can easily lead to unauthorized access. Most importantly, <strong>never commit API keys to source code repositories<\/strong> &#8211; this can make them vulnerable to misuse.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\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\/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<li><a href=\"\/studio\/blog\/build-ui-gpt-5-mini-mui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using GPT-5 Mini + MUI  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-ui-gpt-5-mini-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to build UI 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=69fa85c374a8318574a51a55\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create production-ready UI components from prompts using GPT-5 Mini and UXPin Merge; sync design tokens and export React\/Vue code.<\/p>\n","protected":false},"author":231,"featured_media":58979,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58982","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.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to build UX 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\/build-ux-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 build UX using GPT-5 Mini + Custom Design Systems - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Create production-ready UI components from prompts using GPT-5 Mini and UXPin Merge; sync design tokens and export React\/Vue code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-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-05-06T08:32:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_eecda42e73cf20e5a178f27b22525b67.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=\"12 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-mini-custom-design-systems-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"How to build UX using GPT-5 Mini + Custom Design Systems &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-05-06T08:32:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\\\/\"},\"wordCount\":2444,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_eecda42e73cf20e5a178f27b22525b67.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\\\/\",\"name\":\"How to build UX 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\\\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_eecda42e73cf20e5a178f27b22525b67.jpeg\",\"datePublished\":\"2026-05-06T08:32:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_eecda42e73cf20e5a178f27b22525b67.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image_eecda42e73cf20e5a178f27b22525b67.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build UX using GPT-5 Mini + Custom Design Systems - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-ux-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 build UX 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 build UX 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\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build UX using GPT-5 Mini + Custom Design Systems - Use UXPin Merge!","og_description":"Create production-ready UI components from prompts using GPT-5 Mini and UXPin Merge; sync design tokens and export React\/Vue code.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-05-06T08:32:50+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_eecda42e73cf20e5a178f27b22525b67.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"How to build UX using GPT-5 Mini + Custom Design Systems &#8211; Use UXPin Merge!","datePublished":"2026-05-06T08:32:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/"},"wordCount":2444,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_eecda42e73cf20e5a178f27b22525b67.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/","name":"How to build UX 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\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_eecda42e73cf20e5a178f27b22525b67.jpeg","datePublished":"2026-05-06T08:32:50+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-gpt-5-mini-custom-design-systems-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_eecda42e73cf20e5a178f27b22525b67.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/05\/image_eecda42e73cf20e5a178f27b22525b67.jpeg","width":1536,"height":1024,"caption":"How to build UX using GPT-5 Mini + Custom Design Systems - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-ux-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 build UX 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\/58982","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=58982"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58982\/revisions"}],"predecessor-version":[{"id":58983,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58982\/revisions\/58983"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/58979"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=58982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=58982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=58982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}