{"id":58180,"date":"2026-02-11T13:29:43","date_gmt":"2026-02-11T21:29:43","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=58180"},"modified":"2026-05-09T03:52:09","modified_gmt":"2026-05-09T10:52:09","slug":"forge-ai-design-tool-react-components","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/","title":{"rendered":"We built an AI design tool that works with your actual React components"},"content":{"rendered":"<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Most AI design tools have a fundamental problem: they generate pixels, not components.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">You describe a UI, AI draws rectangles that look like buttons and cards and inputs. It&#8217;s impressive in demos. Then your engineers rebuild everything from scratch because none of it is connected to your actual component library.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">We built something different. Forge is an AI assistant that works with real, production React components \u2014 the same ones your engineers ship with. Designers work visually, but the output is exportable as production-ready React code.<\/p>\n<h2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">The problem with AI-generated UI<\/h2>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Here&#8217;s what typically happens:<\/p>\n<ol class=\"[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-decimal flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\">Designer uses AI tool to generate a dashboard<\/li>\n<li class=\"whitespace-normal break-words pl-2\">AI produces a static mockup \u2014 shapes, colors, text<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Designer hands off to engineering<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Engineer looks at it, opens the codebase, rebuilds it using actual components<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Designer notices differences, files tickets<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Repeat<\/li>\n<\/ol>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">The AI-generated design was never real. It was a picture of a UI, not a UI.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">This isn&#8217;t a minor inefficiency. It&#8217;s the entire design-to-dev handoff problem that AI was supposed to solve \u2014 except most AI tools just moved the problem earlier in the process.<\/p>\n<h2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">What if AI worked with real components?<\/h2>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">UXPin Merge syncs your production React component library directly into the design tool. Not recreations. Not imported SVGs. The actual components, rendered in the browser.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Designers drag in real <code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">&lt;Button&gt;<\/code>, <code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">&lt;Card&gt;<\/code>, <code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">&lt;DataTable&gt;<\/code> components. They configure real props. They see real states \u2014 hover, disabled, loading, error. What&#8217;s on canvas is what exists in your codebase.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Forge builds on this. When you ask Forge to generate or edit UI, it&#8217;s not drawing shapes \u2014 it&#8217;s placing and configuring actual components from your library.<\/p>\n<h2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">How it works technically<\/h2>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Component sync<\/strong><\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Merge connects to your production React component library via CLI or CI integration. Components render in an iframe inside the editor \u2014 designers see and use your actual code running in the browser.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">We support:<\/p>\n<ul class=\"[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\">React (primary focus)<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Storybook integration<\/li>\n<li class=\"whitespace-normal break-words pl-2\">npm packages<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Git sync for continuous updates<\/li>\n<\/ul>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">When your library updates, the design tool updates. No manual re-sync. No version drift.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Visual editing, real components<\/strong><\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Designers work visually \u2014 dragging components onto a canvas, not writing code. But what they&#8217;re placing are real React components with full fidelity:<\/p>\n<ul class=\"[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\">All props are exposed and configurable in the UI<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Component states (hover, active, disabled, loading) are built-in<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Variants work exactly as defined in your library<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Responsive behavior matches production<\/li>\n<\/ul>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">When a designer configures a <code class=\"bg-text-200\/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]\">&lt;Button variant=\"primary\" disabled&gt;<\/code>, that&#8217;s not a style applied to a rectangle. It&#8217;s the actual prop being set on your actual component.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>AI generation with Forge<\/strong><\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">When Forge generates or modifies UI, it works with these real components. It knows what&#8217;s available in your library, what props each component accepts, and what variants exist.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">The output is a visual design on canvas \u2014 but every element is a real component with real configuration. No fake buttons. No approximated cards. No &#8220;objects that kind of look like your design system.&#8221;<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Forge also maintains conversation context. You can iterate:<\/p>\n<ul class=\"[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\">&#8220;Add a cancel button next to save&#8221;<\/li>\n<li class=\"whitespace-normal break-words pl-2\">&#8220;Make this the compact variant&#8221;<\/li>\n<li class=\"whitespace-normal break-words pl-2\">&#8220;Switch to a horizontal layout&#8221;<\/li>\n<\/ul>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Each prompt modifies the existing design rather than regenerating from scratch. When you want to switch to manual editing, you just do \u2014 there&#8217;s no mode switch, no export. You&#8217;re already working with the real thing.<\/p>\n<p><figure id=\"attachment_58181\" aria-describedby=\"caption-attachment-58181\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-58181 size-full\" title=\"UXP mailing animated asset GS 02 launch\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/UXP_mailing_animated_asset_GS_02_launch.gif\" alt=\"UXP mailing animated asset GS 02 launch\" width=\"800\" height=\"540\" \/><figcaption id=\"caption-attachment-58181\" class=\"wp-caption-text\">UXP mailing animated asset GS 02 launch<\/figcaption><\/figure>\n<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Export as code<\/strong><\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">When you&#8217;re ready to hand off, export the design as React code. The export reflects exactly what&#8217;s on canvas \u2014 same components, same props, same structure.<\/p>\n<div class=\"relative group\/copy bg-bg-000\/50 border-0.5 border-border-400 rounded-lg\">\n<div class=\"text-text-500 font-small p-3.5 pb-0\">jsx<\/div>\n<div class=\"overflow-x-auto\">\n<pre class=\"code-block__code !my-0 !rounded-lg !text-sm !leading-relaxed p-3.5\"><code class=\"language-jsx\"><span class=\"token token\">\/\/ Exported from UXPin<\/span>\n<span class=\"token token\">&lt;<\/span><span class=\"token token\">Card<\/span> <span class=\"token token\">padding<\/span><span class=\"token token attr-equals\">=<\/span><span class=\"token token\">\"<\/span><span class=\"token token\">lg<\/span><span class=\"token token\">\"<\/span><span class=\"token token\">&gt;<\/span>\n  <span class=\"token token\">&lt;<\/span><span class=\"token token\">Form<\/span><span class=\"token token\">&gt;<\/span>\n    <span class=\"token token\">&lt;<\/span><span class=\"token token\">TextField<\/span> <span class=\"token token\">label<\/span><span class=\"token token attr-equals\">=<\/span><span class=\"token token\">\"<\/span><span class=\"token token\">Email<\/span><span class=\"token token\">\"<\/span> <span class=\"token token\">type<\/span><span class=\"token token attr-equals\">=<\/span><span class=\"token token\">\"<\/span><span class=\"token token\">email<\/span><span class=\"token token\">\"<\/span> <span class=\"token token\">\/&gt;<\/span>\n    <span class=\"token token\">&lt;<\/span><span class=\"token token\">Button<\/span> <span class=\"token token\">variant<\/span><span class=\"token token attr-equals\">=<\/span><span class=\"token token\">\"<\/span><span class=\"token token\">primary<\/span><span class=\"token token\">\"<\/span> <span class=\"token token\">size<\/span><span class=\"token token attr-equals\">=<\/span><span class=\"token token\">\"<\/span><span class=\"token token\">lg<\/span><span class=\"token token\">\"<\/span><span class=\"token token\">&gt;<\/span><span class=\"token token plain-text\">Save<\/span><span class=\"token token\">&lt;\/<\/span><span class=\"token token\">Button<\/span><span class=\"token token\">&gt;<\/span>\n  <span class=\"token token\">&lt;\/<\/span><span class=\"token token\">Form<\/span><span class=\"token token\">&gt;<\/span>\n<span class=\"token token\">&lt;\/<\/span><span class=\"token token\">Card<\/span><span class=\"token token\">&gt;<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Engineers receive code that uses their own component library. Nothing to translate. Nothing to rebuild.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>API access<\/strong><\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Component data is also available via <a href=\"https:\/\/www.dreamfactory.com\" target=\"_blank\" rel=\"noopener noreferrer\">API<\/a> \u2014 props, states, variants, structure. This opens up integrations with documentation tools, testing pipelines, or other parts of your workflow.<\/p>\n<h2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">What this changes<\/h2>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>For designers:<\/strong><\/p>\n<ul class=\"[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\">Work visually, but with real components \u2014 not approximations<\/li>\n<li class=\"whitespace-normal break-words pl-2\">All states and variants are built-in, not simulated with overlays<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Prototypes actually work \u2014 real interactions, real responsive behavior<\/li>\n<li class=\"whitespace-normal break-words pl-2\">No learning a new tool; it&#8217;s still a design canvas<\/li>\n<\/ul>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>For engineers:<\/strong><\/p>\n<ul class=\"[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\">Export gives you production-ready React code<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Uses your actual component library \u2014 nothing to translate or rebuild<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Props and structure match what was designed<\/li>\n<li class=\"whitespace-normal break-words pl-2\">No more &#8220;that&#8217;s not how the component works&#8221; conversations<\/li>\n<\/ul>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>For teams:<\/strong><\/p>\n<ul class=\"[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\">Single source of truth between design and code<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Design system adoption is enforced by the tool \u2014 designers can only use what exists<\/li>\n<li class=\"whitespace-normal break-words pl-2\">AI can&#8217;t go off-brand if it only has access to your components<\/li>\n<li class=\"whitespace-normal break-words pl-2\">Faster iteration because there&#8217;s no translation step<\/li>\n<\/ul>\n<h2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Limitations and trade-offs<\/h2>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Being honest about where this doesn&#8217;t work:<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>You need a component library (with a caveat).<\/strong> If your team isn&#8217;t working with coded React components yet, Forge doesn&#8217;t help much. It&#8217;s built for teams that have already invested in a design system. If you&#8217;re still in Figma pushing pixels without a coded library, this isn&#8217;t your tool \u2014 yet.<\/p>\n<ul>\n<li><em><strong>Caveat: <\/strong><\/em>Lucky for you, UXPin Merge has already natively integrated a number of Global component libraries such as MUI, ShadCN, Bootstrap and more. This is a great starting place for those without a custom component library.<\/li>\n<\/ul>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>React-first.<\/strong> Merge has strong support for React. Vue, Angular, and Svelte support is limited or nonexistent. If your stack isn&#8217;t React, the value proposition breaks down.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>AI is still AI.<\/strong> Complex layouts sometimes need manual adjustment. Forge is faster than starting from scratch, but it&#8217;s not a replacement for design judgment. It gets you 80% of the way quickly; you refine the rest with UXPin&#8217;s manual designs tools &#8211; all in one place.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Learning curve.<\/strong> Designers working with Merge need to understand props, variants, and component composition. It&#8217;s more technical than pushing pixels in traditional design tools. Not every designer wants this. For the ones who do \u2014 design engineers, technical designers, systems-thinkers \u2014 it&#8217;s a better way to work.<\/p>\n<h2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Why we built this<\/h2>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">UXPin has been working on code-backed design tools for years. Merge launched in 2019. The hypothesis was always that the design-to-dev gap exists because designers and developers work in different mediums \u2014 pixels vs. code.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Most design tools try to bridge this with better handoff specs, more detailed exports, tighter integrations. But they&#8217;re still generating static artifacts that engineers have to translate.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">AI made this worse before it made it better. Every AI design tool we saw was generating more static pixels for engineers to rebuild. Faster mockups, same translation problem.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Forge is our attempt to make AI useful for teams that have already solved the medium problem. If designers are already working with real components, AI should too. The output should be shippable, not just presentable.<\/p>\n<h2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">The name<\/h2>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">We called it Forge because a forge doesn&#8217;t replace the blacksmith \u2014 it gives them heat and speed. The craft still requires human judgment.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">AI should work the same way. It accelerates the work without replacing the worker.<\/p>\n<h2 class=\"text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold\">Try Forge AI Today<\/h2>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Forge is live now in UXPin. Available to all accounts with AI enabled and free trials.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Simply visit <a href=\"https:\/\/www.uxpin.com\/sign-up?\">uxpin.com\/sign-up<\/a> to get started.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most AI design tools have a fundamental problem: they generate pixels, not components. You describe a UI, AI draws rectangles that look like buttons and cards and inputs. It&#8217;s impressive in demos. Then your engineers rebuild everything from scratch because none of it is connected to your actual component library. We built something different. Forge<\/p>\n","protected":false},"author":231,"featured_media":58189,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-58180","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"Forge: AI Design Tool for Real React Components | UXPin","yoast_metadesc":"","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Forge: AI Design Tool for Real React Components | 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\/forge-ai-design-tool-react-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"We built an AI design tool that works with your actual React components\" \/>\n<meta property=\"og:description\" content=\"Most AI design tools have a fundamental problem: they generate pixels, not components. You describe a UI, AI draws rectangles that look like buttons and cards and inputs. It&#8217;s impressive in demos. Then your engineers rebuild everything from scratch because none of it is connected to your actual component library. We built something different. Forge\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-11T21:29:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-09T10:52:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/unnamed-36.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"559\" \/>\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=\"6 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\\\/forge-ai-design-tool-react-components\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/forge-ai-design-tool-react-components\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"We built an AI design tool that works with your actual React components\",\"datePublished\":\"2026-02-11T21:29:43+00:00\",\"dateModified\":\"2026-05-09T10:52:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/forge-ai-design-tool-react-components\\\/\"},\"wordCount\":1181,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/forge-ai-design-tool-react-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/unnamed-36.jpg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/forge-ai-design-tool-react-components\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/forge-ai-design-tool-react-components\\\/\",\"name\":\"Forge: AI Design Tool for Real React Components | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/forge-ai-design-tool-react-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/forge-ai-design-tool-react-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/unnamed-36.jpg\",\"datePublished\":\"2026-02-11T21:29:43+00:00\",\"dateModified\":\"2026-05-09T10:52:09+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/forge-ai-design-tool-react-components\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/forge-ai-design-tool-react-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/forge-ai-design-tool-react-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/unnamed-36.jpg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/unnamed-36.jpg\",\"width\":1024,\"height\":559,\"caption\":\"Forge AI by UXPin Merge\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/forge-ai-design-tool-react-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"We built an AI design tool that works with your actual React components\"}]},{\"@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":"Forge: AI Design Tool for Real React Components | 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\/forge-ai-design-tool-react-components\/","og_locale":"en_US","og_type":"article","og_title":"We built an AI design tool that works with your actual React components","og_description":"Most AI design tools have a fundamental problem: they generate pixels, not components. You describe a UI, AI draws rectangles that look like buttons and cards and inputs. It&#8217;s impressive in demos. Then your engineers rebuild everything from scratch because none of it is connected to your actual component library. We built something different. Forge","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/","og_site_name":"Studio by UXPin","article_published_time":"2026-02-11T21:29:43+00:00","article_modified_time":"2026-05-09T10:52:09+00:00","og_image":[{"width":1024,"height":559,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/unnamed-36.jpg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"We built an AI design tool that works with your actual React components","datePublished":"2026-02-11T21:29:43+00:00","dateModified":"2026-05-09T10:52:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/"},"wordCount":1181,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/unnamed-36.jpg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/","name":"Forge: AI Design Tool for Real React Components | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/unnamed-36.jpg","datePublished":"2026-02-11T21:29:43+00:00","dateModified":"2026-05-09T10:52:09+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/unnamed-36.jpg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/02\/unnamed-36.jpg","width":1024,"height":559,"caption":"Forge AI by UXPin Merge"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/forge-ai-design-tool-react-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"We built an AI design tool that works with your actual React components"}]},{"@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\/58180","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=58180"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58180\/revisions"}],"predecessor-version":[{"id":59803,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/58180\/revisions\/59803"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/58189"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=58180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=58180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=58180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}