{"id":54967,"date":"2024-10-14T02:11:56","date_gmt":"2024-10-14T09:11:56","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=54967"},"modified":"2024-10-16T02:38:02","modified_gmt":"2024-10-16T09:38:02","slug":"ai-design-system","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/","title":{"rendered":"AI Design System \u2013 Are We There?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/AI-Tools-for-Designers-1024x512.webp\" alt=\"AI Tools for Designers\" class=\"wp-image-54912\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/AI-Tools-for-Designers-1024x512.webp 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/AI-Tools-for-Designers-600x300.webp 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/AI-Tools-for-Designers-768x384.webp 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/AI-Tools-for-Designers.webp 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>AI is set to revolutionize the way design systems are created, managed, and scaled. According to industry experts, AI\u2019s efficiency in automating repetitive tasks like code generation, component resizing, and documentation can significantly reduce the time required to build and maintain design systems. Let\u2019s see if we\u2019re ready to implement Design Systems created and managed by AI.<\/p>\n\n\n\n<p>Design systems powered by AI need to be flexible, data-driven, and scalable. UXPin Merge complements these requirements by providing a unified platform where AI-first design systems can be backed with real code, enhancing both design speed and accuracy. As design systems become increasingly complex, UXPin Merge bridges the gap between designers and developers. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access to UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <h3 class=\"discover-merge__heading\">Design UI with code-backed components.<\/h3>\n            <p class=\"discover-merge__text\">Use the same components in design as in development. Keep UI consistency at scale.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Try UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is an AI Design System?<\/h2>\n\n\n\n<p>An AI Design System is a type of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\">desi<\/a><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">g<\/a><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\">n system<\/a> built with artificial intelligence. Unlike traditional design systems that rely solely on designers to <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\" target=\"_blank\" rel=\"noreferrer noopener\">build and maintain consistency<\/a>, AI design systems utilize machine learning algorithms and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/data-driven-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">data-driven insights<\/a> to automate repetitive tasks, create UI design elements, and ensure <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">coherence across digital products<\/a>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Real-World Examples of AI Design Systems<\/h2>\n\n\n\n<p>Several companies are already leveraging AI to build and optimize their design systems, focusing on automating repetitive tasks, enhancing scalability, and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/productivity-hacks-for-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">improving overall efficiency<\/a>. Here are some notable examples:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>GitHub<\/strong>: Diana Mounter, Head of Design at GitHub, mentioned that <a href=\"https:\/\/webflow.com\/blog\/how-ai-will-transform-design-systems\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">AI significantly accelerates building and developing design systems<\/a>, making it easier to generate new layouts and ensure consistency across components. AI enables GitHub to automate tedious design tasks and focus on more strategic, creative work.<\/li>\n\n\n\n<li><strong>Airbnb<\/strong>: <a href=\"https:\/\/blog.logrocket.com\/ux-design\/how-designers-use-ai-product-design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Airbnb integrates AI into its design system by using machine learning algorithms to classify and understand its 150+ design components<\/a>. This allows AI to automate the creation of prototypes based on user behavior and preferences, which reduces the manual effort needed to create and maintain their design system.<\/li>\n\n\n\n<li><strong>Spotify<\/strong>: Spotify uses AI-driven predictive analytics to <a href=\"https:\/\/blog.logrocket.com\/ux-design\/how-designers-use-ai-product-design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">refine its design system and personalize user experiences<\/a>. The company\u2019s AI-powered DJ uses algorithms to analyze user data and generate design decisions that align with user preferences and expectations, making their design systems highly adaptive and personalized.<\/li>\n\n\n\n<li><strong>IKEA<\/strong>: Through the IKEA Place app, the company utilizes AI to visualize furniture placements in users&#8217; homes. This application not only <a href=\"https:\/\/blog.logrocket.com\/ux-design\/how-designers-use-ai-product-design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">helps customers see how items fit in their space<\/a> but also automates the layout generation process, contributing to IKEA\u2019s internal design system efficiency.<\/li>\n\n\n\n<li><strong>Autodesk&#8217;s Spacemaker AI<\/strong>: Spacemaker AI, acquired by Autodesk, uses AI to <a href=\"https:\/\/builtworlds.com\/news\/blueprints-budgeting-15-companies-integrating-ai-construction\/\" target=\"_blank\" rel=\"noreferrer noopener\">optimize site planning and urban layouts<\/a>. The tool automates the creation of complex design models, providing architects and planners with AI-generated suggestions for building layouts based on environmental data such as sunlight and noise levels. This AI-driven approach is integrated into Autodesk\u2019s larger design system strategy, enhancing the scalability and accuracy of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-decisions\/\" target=\"_blank\" rel=\"noreferrer noopener\">design decisions<\/a>\u200b.<\/li>\n<\/ol>\n\n\n\n<p>These companies showcase how AI can be integrated into design systems to automate repetitive tasks, provide real-time insights, and personalize the user experience\u2014all while maintaining consistency and scalability. As more organizations explore AI-driven design systems, we\u2019re likely to see increased <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/7-great-design-system-management-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">adoption<\/a> and innovation in this area.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Key Benefits of Including AI in Design Systems<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Automation of Repetitive Tasks<\/h3>\n\n\n\n<p>AI can handle mundane tasks like resizing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/components-in-figma-vs-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\">components<\/a>, generating layouts, and maintaining style consistency, freeing up designers to focus on strategic, creative work. This enables faster <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-iteration-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">iteration<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/quantifying-designops-impact-webinar-summary\/\" target=\"_blank\" rel=\"noreferrer noopener\">reduces the time spent on manual adjustments<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Scaling Existing Design Systems<\/h3>\n\n\n\n<p>AI can generate code-backed components that adhere to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-best-practices\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system guidelines<\/a>, making it easier to maintain design consistency across products. This ensures that AI-generated designs are aligned with existing design standards and development practices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Building Multi-Brand Design Systems Fast<\/h3>\n\n\n\n<p>AI can analyze design systems to create UI components and design elements that <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">adapt to specific brands<\/a>. This capability allows designers to deliver <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/app-personalization-for-mobile-users\/\" target=\"_blank\" rel=\"noreferrer noopener\">unique experiences<\/a> without compromising on quality or coherence.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Analysis and Predictions<\/h3>\n\n\n\n<p>Who has the time to measure design system effectiveness? This task can be delegated to artificial intelligence tools. AI can monitor <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-create-ux-customer-journey\/\" target=\"_blank\" rel=\"noreferrer noopener\">user interactions<\/a> in real-time, providing insights into usability issues and predicting how users will respond to different <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">design elements<\/a>. This helps designers make informed decisions and iterate faster, ensuring optimal user experiences.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using Text Prompts to Generate UI Elements<\/h3>\n\n\n\n<p>AI can now generate foundational elements of a design system, such as spacing and typography scales, from basic text prompts. This significantly reduces the time needed for initial setup and helps teams maintain a structured and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-documentation-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">well-documented design system<\/a> from the get-go.<\/p>\n\n\n\n<p>Read about using <em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/chatgpt-in-ui-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">ChatGPT in UI Design<\/a><\/em>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Challenges of AI in Design Systems<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Accessibility and Ethical AI<\/h3>\n\n\n\n<p>Ensuring that AI-powered design tools are accessible to all users, including those with disabilities, remains a significant challenge. <a href=\"https:\/\/design.google\/library\/ux-ai\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">According to Google Design<\/a>, AI must be trained carefully to avoid reinforcing biases and to ensure inclusivity for all users\u200b.<\/p>\n\n\n\n<p>Designers need to consider how their AI-generated components interact with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/persona-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">diverse user groups<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/accessibility-testing-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">test for accessibility<\/a> from the outset.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Maintaining Human-Centered Design<\/h3>\n\n\n\n<p>While AI is adept at handling routine tasks, it cannot replace <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/human-centered-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">human intuition, empathy, and emotional intelligence<\/a>.<\/p>\n\n\n\n<p>Dan Mall, founder of Design System University, emphasizes that AI \u201chas not reached the point where it can judge what\u2019s good and what\u2019s not, what might be emotionally resonant with a human audience, and what might just be junk\u201d (as in <a href=\"https:\/\/webflow.com\/blog\/how-ai-will-transform-design-systems\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Webflow\u2019s article about AI<\/a>.) \u200bTherefore, designers must use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ai-tools-for-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">AI as a complementary tool<\/a> that supports their creativity rather than as a replacement for human decision-making.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Privacy and Data Security<\/h3>\n\n\n\n<p>AI systems often rely on large amounts of user data to generate insights and predict behaviors. Designers need to ensure that this data is collected, stored, and used responsibly to protect user privacy and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/the-elements-of-trustworthy-ui-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">build trust<\/a>. AI-driven design systems should prioritize <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-security-tips\/\" target=\"_blank\" rel=\"noreferrer noopener\">data security<\/a> and maintain transparency around how user data is leveraged for design decisions\u200b, as stated by <a href=\"https:\/\/adamfard.com\/blog\/ai-ux-design\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Adam Fard\u2019s Design Studio<\/a>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Top 5 Tips to Address AI-Driven Design System Challenges<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Inclusive Training Data \u2013 <\/strong>Train AI models with diverse datasets that reflect various demographics, abilities, and cultural contexts. This reduces bias and ensures that generated components cater to a broad range of users, supporting the creation of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-accessibility\/\" target=\"_blank\" rel=\"noreferrer noopener\">accessible and inclusive design systems<\/a>.<\/li>\n\n\n\n<li><strong>Bias Audits and Continuous Monitoring \u2013 <\/strong>Regularly audit AI models for bias and ethical fairness. Implement continuous monitoring to detect and address any biased behaviors, ensuring your AI tools remain neutral and inclusive throughout their usage lifecycle.<\/li>\n\n\n\n<li><strong>Iterative Design with Human Oversight \u2013 <\/strong>Adopt an iterative design process where AI provides initial suggestions or generates components, but human designers review and refine these outputs. This approach helps maintain human-centered design principles and ensures AI-generated elements <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/the-practical-guide-to-empathy-map-creating-a-10-minute-persona\/\" target=\"_blank\" rel=\"noreferrer noopener\">resonate with users on an emotional level<\/a>.<\/li>\n\n\n\n<li><strong>Minimize Data Collection and Enhance Privacy \u2013 <\/strong>Limit data collection to what\u2019s necessary for AI training and improvement. Apply anonymization techniques and encryption to protect user data, and clearly communicate data usage policies to maintain transparency and build user trust.<\/li>\n\n\n\n<li><strong>Transparent Documentation and Communication \u2013 <\/strong>Document how AI models are trained, the data used, and the ethical steps taken to ensure <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/inclusive-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">inclusivity<\/a> and security. Transparent documentation fosters trust and promotes responsible use of AI in design systems.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to Build an AI Design System with UXPin<\/h2>\n\n\n\n<p>Many design tools on the market today, like Uizard or Framer, offer AI-powered features for prototyping and automating components, but they lack a unified platform that seamlessly integrates with development. While these tools are effective for quick iterations and ideation, they often fall short when it comes to maintaining design consistency and creating <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">development-ready components at scale<\/a>.<\/p>\n\n\n\n<p>That\u2019s where UXPin Merge stands out. Unlike other tools, <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> is an end-to-end design platform that enables designers and developers to work with real <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">React or Web components within the design environment<\/a>. The addition of the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/generate-ui-with-ai\/\" target=\"_blank\" rel=\"noreferrer noopener\">AI Component Creator<\/a> further enhances this capability by automating the generation of code-backed components from text prompts or images, bridging the gap between design and development.<\/p>\n\n\n\n<p>With UXPin, you\u2019re not just designing in isolation\u2014you\u2019re <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">creating a complete, scalable, and consistent design system<\/a> that is in sync with your development codebase. Let\u2019s explore how you can leverage these powerful features to build an AI-driven design system from scratch.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Setting Up Your Design System in UXPin<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How To Use Design Systems | UXPin Tutorial\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/1fjX2oZq9c4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><em>Old but great explanation of how design systems work in UXPin<\/em>.<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Create a New Design System<\/strong>\n<ul class=\"wp-block-list\">\n<li>Open UXPin and navigate to the <strong>Design Systems<\/strong> tab at the top of your dashboard.<\/li>\n\n\n\n<li>Click the <strong>Create Design System<\/strong> button. Choose the option to \u201cCreate from Scratch\u201d to start with a clean slate.<\/li>\n\n\n\n<li>Name your design system and define its purpose. For example, \u201cAI-Powered Design System for Web Applications.\u201d<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Define Core Elements<\/strong>\n<ul class=\"wp-block-list\">\n<li>In the design system interface, set up the core elements such as <strong>colors<\/strong>, <strong>typography<\/strong>, and <strong>spacing<\/strong>.<\/li>\n\n\n\n<li><strong>Colors<\/strong>: Add your primary, secondary, and neutral colors. You can type in HEX codes or import colors directly from a website URL.<\/li>\n\n\n\n<li><strong>Typography<\/strong>: Define text styles like headings, paragraphs, and captions by adding font families, weights, and sizes.<\/li>\n\n\n\n<li><strong>Spacing and Grid<\/strong>: Set spacing values and grid structures to ensure design consistency.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Create Design Tokens<\/strong><strong><br><\/strong>Design tokens are style values that represent the design decisions needed to build a UI\u2014such as colors, typography, and spacing. Use design tokens in your design system to maintain consistency and scale your system across different platforms.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Generating UI Components with AI Component Creator<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/blog_header_ai-1024x512.webp\" alt=\"blog header ai\" class=\"wp-image-54890\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/blog_header_ai-1024x512.webp 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/blog_header_ai-600x300.webp 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/blog_header_ai-768x384.webp 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/blog_header_ai.webp 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Enable AI Component Creator<\/strong>\n<ul class=\"wp-block-list\">\n<li>If you are on the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-ai-and-templates\/\" target=\"_blank\" rel=\"noreferrer noopener\">Merge AI plan<\/a> or have <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">Merge enabled<\/a>, go to the <strong>AI Component Creator<\/strong> in UXPin\u2019s Editor.<\/li>\n\n\n\n<li>Enter your OpenAI API key in the <strong>Settings<\/strong> tab to enable the AI functionality.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Generate Components from Text Prompts<\/strong>\n<ul class=\"wp-block-list\">\n<li>Open the <strong>Prompt<\/strong> tab in the AI Component Creator.<\/li>\n\n\n\n<li>Write a prompt describing the component you want to create. For example:<br><em>\u201cCreate a primary button component with rounded corners, a blue background, and white text. The button should use the MUI library.\u201d<\/em><\/li>\n\n\n\n<li>Select the React library you want to use, such as MUI or Ant Design, and click <strong>Generate<\/strong>.<\/li>\n\n\n\n<li>Review the generated component. If needed, make adjustments to its properties or styles directly in UXPin.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Create Components from Uploaded Images<\/strong>\n<ul class=\"wp-block-list\">\n<li>If you have a visual design that you want to turn into a code-backed component, use the <strong>Upload Image<\/strong> option in the AI Component Creator.<\/li>\n\n\n\n<li>Upload the image, and the AI will analyze it to generate a fully coded component using your selected React library (MUI, Ant Design, or React-Bootstrap).<\/li>\n\n\n\n<li>Review the generated code and structure, and integrate it into your design system\u2019s component library.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Transform Existing UXPin Components<\/strong>\n<ul class=\"wp-block-list\">\n<li>If you already have existing static elements in UXPin, right-click on the component and choose the AI transformation option to convert it into a code-backed component.<\/li>\n\n\n\n<li>The AI will apply the appropriate library (e.g., MUI) and generate code, making the component development-ready.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Organizing Your AI-Driven Design System<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Create and Document UI Patterns<\/strong>\n<ul class=\"wp-block-list\">\n<li>In the <strong>Design System<\/strong> interface, go to the <strong>UI Patterns<\/strong> section.<\/li>\n\n\n\n<li>Group similar components (e.g., buttons, forms, modals) together and add descriptions to document usage guidelines, props, and variations.<\/li>\n\n\n\n<li>Use the AI Component Creator to generate variations of these components based on text prompts. For example, creating variations of a button with different colors or icon placements.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Add Accessibility Guidelines<\/strong>\n<ul class=\"wp-block-list\">\n<li>Define accessibility standards for your components by adding descriptions and guidelines. For example, set minimum color contrast ratios and ensure keyboard navigation for interactive elements.<\/li>\n\n\n\n<li>Use AI to test components against accessibility standards, such as checking for WCAG compliance or generating accessible labels and alt text.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Set Up Component Variants<\/strong>\n<ul class=\"wp-block-list\">\n<li>In UXPin, create component variants (e.g., primary, secondary, and disabled states for buttons) to cover various use cases.<\/li>\n\n\n\n<li>Define responsive behaviors for components using UXPin\u2019s interactions and breakpoint settings.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Create Live Code Integration Using UXPin Merge<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Import Code Components with UXPin Merge<\/strong>\n<ul class=\"wp-block-list\">\n<li>Import live code components from your repository using UXPin Merge. Merge allows you to sync your design system with code components, ensuring that the design system reflects the latest codebase.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Document and Share Code-backed Components<\/strong>\n<ul class=\"wp-block-list\">\n<li>Document your code-backed components directly in the design system, adding links to code repositories and usage guidelines for developers.<\/li>\n\n\n\n<li>Use UXPin\u2019s Spec Mode to allow developers to inspect code, view component props, and access documentation\u2014all within UXPin.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Maintaining and Scaling Your AI-Driven Design System<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Update Components with AI Assistance<\/strong>\n<ul class=\"wp-block-list\">\n<li>As your design system evolves, use the AI Component Creator to update components or generate new ones. AI can help you maintain consistency by adhering to design system rules and standards.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Use AI to Analyze and Optimize the Design System<\/strong>\n<ul class=\"wp-block-list\">\n<li>Implement AI tools like UXPin\u2019s AI Component Creator to analyze your design system for redundancies, inconsistencies, or gaps.<\/li>\n\n\n\n<li>Use these insights to refine and optimize your design system, ensuring it remains scalable and relevant.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Collaborate and Iterate with Stakeholders<\/strong>\n<ul class=\"wp-block-list\">\n<li>Share the AI-driven design system with stakeholders for feedback and collaboration.<\/li>\n\n\n\n<li>Use UXPin\u2019s collaboration features to receive comments and iterate on the design system components quickly.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Ready to Use an AI-Driven Design System?<\/h2>\n\n\n\n<p>AI is poised to become a co-pilot in design systems, augmenting the abilities of designers and creating new opportunities for innovation. As AI continues to advance, it will enable more predictive design, personalized user experiences, and greater efficiency in managing and scaling design systems. Designers who embrace AI as a complementary tool will be better equipped to create the next generation of digital experiences that are both intuitive and scalable.<\/p>\n\n\n\n<p>Creating an AI-driven design system in UXPin not only accelerates the design process but also ensures that your components are development-ready and aligned with best practices. By leveraging the AI Component Creator, you can automate repetitive tasks, maintain consistency, and create a scalable design system that bridges the gap between design and development.<\/p>\n\n\n\n<p>Ready to build your own AI-powered design system?<a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\"> Request access to UXPin Merge<\/a> and start transforming your design process today.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>AI is set to revolutionize the way design systems are created, managed, and scaled. According to industry experts, AI\u2019s efficiency in automating repetitive tasks like code generation, component resizing, and documentation can significantly reduce the time required to build and maintain design systems. Let\u2019s see if we\u2019re ready to implement Design Systems created and managed<\/p>\n","protected":false},"author":3,"featured_media":54912,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199],"tags":[],"class_list":["post-54967","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems"],"yoast_title":"","yoast_metadesc":"Can you build a design system with AI? Let's explore what artificial intelligence can do for design systems and how to implement it.","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>AI Design System \u2013 Are We There? | UXPin<\/title>\n<meta name=\"description\" content=\"Can you build a design system with AI? Let&#039;s explore what artificial intelligence can do for design systems and how to implement it.\" \/>\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\/ai-design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AI Design System \u2013 Are We There?\" \/>\n<meta property=\"og:description\" content=\"Can you build a design system with AI? Let&#039;s explore what artificial intelligence can do for design systems and how to implement it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-14T09:11:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T09:38:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/AI-Tools-for-Designers.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"AI Design System \u2013 Are We There?\",\"datePublished\":\"2024-10-14T09:11:56+00:00\",\"dateModified\":\"2024-10-16T09:38:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/\"},\"wordCount\":2305,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/AI-Tools-for-Designers.webp\",\"articleSection\":[\"Blog\",\"Design Systems\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/\",\"name\":\"AI Design System \u2013 Are We There? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/AI-Tools-for-Designers.webp\",\"datePublished\":\"2024-10-14T09:11:56+00:00\",\"dateModified\":\"2024-10-16T09:38:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Can you build a design system with AI? Let's explore what artificial intelligence can do for design systems and how to implement it.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/AI-Tools-for-Designers.webp\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/AI-Tools-for-Designers.webp\",\"width\":1200,\"height\":600,\"caption\":\"AI Tools for Designers\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ai-design-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AI Design System \u2013 Are We There?\"}]},{\"@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\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"AI Design System \u2013 Are We There? | UXPin","description":"Can you build a design system with AI? Let's explore what artificial intelligence can do for design systems and how to implement it.","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\/ai-design-system\/","og_locale":"en_US","og_type":"article","og_title":"AI Design System \u2013 Are We There?","og_description":"Can you build a design system with AI? Let's explore what artificial intelligence can do for design systems and how to implement it.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/","og_site_name":"Studio by UXPin","article_published_time":"2024-10-14T09:11:56+00:00","article_modified_time":"2024-10-16T09:38:02+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/AI-Tools-for-Designers.webp","type":"image\/webp"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"AI Design System \u2013 Are We There?","datePublished":"2024-10-14T09:11:56+00:00","dateModified":"2024-10-16T09:38:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/"},"wordCount":2305,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/AI-Tools-for-Designers.webp","articleSection":["Blog","Design Systems"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/","name":"AI Design System \u2013 Are We There? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/AI-Tools-for-Designers.webp","datePublished":"2024-10-14T09:11:56+00:00","dateModified":"2024-10-16T09:38:02+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Can you build a design system with AI? Let's explore what artificial intelligence can do for design systems and how to implement it.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/AI-Tools-for-Designers.webp","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/10\/AI-Tools-for-Designers.webp","width":1200,"height":600,"caption":"AI Tools for Designers"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ai-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"AI Design System \u2013 Are We There?"}]},{"@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\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54967","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=54967"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54967\/revisions"}],"predecessor-version":[{"id":54971,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54967\/revisions\/54971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/54912"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=54967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=54967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=54967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}