{"id":42765,"date":"2025-05-21T14:04:34","date_gmt":"2025-05-21T05:04:34","guid":{"rendered":"https:\/\/designcompass.org\/?p=42765"},"modified":"2025-05-21T14:07:01","modified_gmt":"2025-05-21T05:07:01","slug":"google-ui-design-tool-stitch","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2025\/05-1tp-3tea\/21\/google-ui-design-tool-stitch\/","title":{"rendered":"Stitch, a UI design tool created by Google"},"content":{"rendered":"<p class=\"wp-embed-aspect-16-9 wp-has-aspect-ratio\">Google has unveiled a new experimental tool called Stitch. Stitch is an AI-powered design tool that can design user interfaces with just a simple text description or image input, and then turn the results into actual front-end code. The tool, which was first introduced through Google Labs on May 20, focuses on bridging the gap between design and development by leveraging the multimodal capabilities of the Gemini 2.5 Pro model.<\/p>\n\n\n\n<p>Stitch is a project conceived by product designers and engineers, with the goal of providing a workflow that simultaneously satisfies the creative needs of designers and the technical needs of developers. Users can create UIs using text or image-based input, and then export them to Figma or convert them directly into code that can be applied to real web environments.<\/p>\n\n\n\n<p><strong>1. Create a UI based on natural language<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Users simply describe in English the features, color scheme, and user experience of the app they want to create, and Stitch generates a visual interface based on that.<\/li>\n<\/ul>\n\n\n\n<p><strong>2. Create an image-based UI<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Upload a whiteboard sketch, a screenshot of a UI you like, or a rough wireframe and Stitch will analyze it and turn it into a digital UI.<\/li>\n<\/ul>\n\n\n\n<p><strong>3. Iterative design experiments<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can create a variety of designs by experimenting with different layouts, components, and styles. It reflects the iterative nature of UI design, allowing for rapid idea experimentation.<\/li>\n<\/ul>\n\n\n\n<p><strong>4. Linkage functions for development<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can paste designs into Figma for easy team collaboration and design system integration, and it also provides ready-to-use front-end code based on the generated UI.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-embed-aspect-16-9 wp-has-aspect-ratio\">Google wants to provide a new flow through Stitch that allows anyone to easily design and implement apps. It is currently available in an experimental stage in Google Labs, and users can experience it for themselves at stitch.withgoogle.com.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-09-1024x576.jpg\" alt=\"\" class=\"wp-image-42757\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-09-1024x576.jpg 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-09-300x169.jpg 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-09-768x432.jpg 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-09-1536x864.jpg 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-09-18x10.jpg 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-09-1320x743.jpg 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-09-600x338.jpg 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-09.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">(C)Google<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-10-1024x576.jpg\" alt=\"\" class=\"wp-image-42758\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-10-1024x576.jpg 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-10-300x169.jpg 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-10-768x432.jpg 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-10-1536x864.jpg 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-10-18x10.jpg 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-10-1320x743.jpg 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-10-600x338.jpg 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-10.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">(C)Google<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-11-1024x576.jpg\" alt=\"\" class=\"wp-image-42759\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-11-1024x576.jpg 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-11-300x169.jpg 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-11-768x432.jpg 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-11-1536x864.jpg 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-11-18x10.jpg 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-11-1320x743.jpg 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-11-600x338.jpg 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-11.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">(C)Google<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-12-1024x576.jpg\" alt=\"\" class=\"wp-image-42760\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-12-1024x576.jpg 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-12-300x169.jpg 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-12-768x432.jpg 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-12-1536x864.jpg 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-12-18x10.jpg 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-12-1320x743.jpg 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-12-600x338.jpg 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-12.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">(C)Google<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-13-1024x576.jpg\" alt=\"\" class=\"wp-image-42761\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-13-1024x576.jpg 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-13-300x169.jpg 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-13-768x432.jpg 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-13-1536x864.jpg 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-13-18x10.jpg 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-13-1320x743.jpg 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-13-600x338.jpg 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-13.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">(C)Google<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-14-1024x576.jpg\" alt=\"\" class=\"wp-image-42762\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-14-1024x576.jpg 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-14-300x169.jpg 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-14-768x432.jpg 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-14-1536x864.jpg 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-14-18x10.jpg 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-14-1320x743.jpg 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-14-600x338.jpg 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-14.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">(C)Google<\/figcaption><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">More and Sources<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/stitch.withgoogle.com\/\">https:\/\/stitch.withgoogle.com\/<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>\uad6c\uae00\uc774 \uc0c8\ub85c\uc6b4 \uc2e4\ud5d8\uc801 \ub3c4\uad6c \u2018Stitch\u2019\ub97c \uacf5\uac1c\ud588\uc2b5\ub2c8\ub2e4. Stitch\ub294 \uac04\ub2e8\ud55c \ud14d\uc2a4\ud2b8 \uc124\uba85\uc774\ub098 \uc774\ubbf8\uc9c0 \uc785\ub825\ub9cc\uc73c\ub85c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc124\uacc4\ud558\uace0, \uadf8 \uacb0\uacfc\ub97c \uc2e4\uc81c \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc\ub85c \uc804\ud658\ud560 \uc218 \uc788\ub294 AI \uae30\ubc18 \ub514\uc790\uc778 \ub3c4\uad6c\uc785\ub2c8\ub2e4. 5\uc6d4 20\uc77c \uad6c\uae00 \ub7a9\uc2a4\ub97c \ud1b5\ud574 \uccab \uc120\uc744 \ubcf4\uc778 \uc774 \ub3c4\uad6c\ub294 Gemini 2.5 Pro \ubaa8\ub378\uc758 \uba40\ud2f0\ubaa8\ub2ec \ub2a5\ub825\uc744 \ud65c\uc6a9\ud574 \ub514\uc790\uc778\uacfc \uac1c\ubc1c\uc758 \uac04\uadf9\uc744 \uc881\ud788\ub294 \ub370 \uc9d1\uc911\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. Stitch\ub294 \uc81c\ud488 \ub514\uc790\uc774\ub108\uc640 \uc5d4\uc9c0\ub2c8\uc5b4\uac00 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":42756,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,621],"tags":[137,613,2193],"class_list":["post-42765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-service","tag-137","tag-ai","tag-io2025"],"acf":[],"jetpack_featured_media_url":"https:\/\/designcompass.org\/wp-content\/uploads\/2025\/05\/stitch-08.jpg","publishpress_future_action":{"enabled":false,"date":"2026-05-12 14:13:36","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/42765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/comments?post=42765"}],"version-history":[{"count":0,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/42765\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media\/42756"}],"wp:attachment":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media?parent=42765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/categories?post=42765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/tags?post=42765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}