When using Google Stitch to generate multiple screens for the same app, UI inconsistencies often appear across the project. This is especially noticeable in foundational design elements such as the TabBar, navigation bar, custom icon sets, logos, as well as overall color usage, corner radius, and typography hierarchy. Without project-level component extraction and reuse, these elements tend to drift stylistically from screen to screen, making it difficult to maintain a consistent design system and increasing the amount of manual correction required. I would like Stitch to support turning key UI elements from existing screens into reusable project-level components, and to prioritize reusing those components or following predefined design rules in future generations, so that visual consistency and long-term design efficiency can be significantly improved.
this, otherwise stitch is only good for initial idea generation afterwards you just move to whatever tool allows you to stick with predefined components…
Hey @Seven_Chen thanks for sharing this with us. Right now, the best way to keep things consistent is to use the design.md file in your sidebar as the project’s “source of truth.” If you explicitly list your hex codes, corner radii, and nav bar rules there, stitch is forced to follow those rules instead of guessing and making things up as it goes.
Another life-saver is to Shift + Click all your screens at once and just tell the tool to “standardize the headers and tabs across all these to match Screen 1.” It’s a lot faster than fixing them one by one.
Are we able to have the option to generate a design.md / design system from right clicking a variant?
Hey @Kavodel_Lasode, try right-clicking any design variant and selecting Design System to explore the different screen options. Please let me know if you have any feedback after testing it out. Thanks!