{"slug": "use-your-design-system-when-you-create-prototypes-in-aha-roadmaps", "title": "Use your design system when you create prototypes in Aha! Roadmaps", "summary": "Aha! Labs Inc. has launched design system support for AI-generated prototypes in Aha! Roadmaps, allowing product managers to apply brand colors, typography, layouts, and UI components to prototypes created with the Elle AI assistant. The feature is available to all Aha! Roadmaps customers, with workspace owners able to create and modify design systems and contributors able to apply them. This update follows the recent addition of similar capabilities to Aha! Builder.", "body_md": "# Use your design system when you create prototypes in Aha! Roadmaps\n\nThe more a prototype looks and feels like your actual product, the easier it is for people to imagine using it. That leads to better feedback. You can now bring your design system into [Aha! Roadmaps](/roadmaps/overview) to create AI prototypes that match your brand's colors, typography, layouts, and UI components.\n\nSet up a reusable design system in Aha! Roadmaps — so your prototypes better reflect the product experience you want to test and share.\n\n## Create more realistic prototypes\n\nWe [recently launched](/blog/use-your-design-system-when-you-create-ai-apps-with-aha-builder) the ability to use your design system when you create applications with Aha! Builder. Now, we are bringing the same capabilities to Aha! Roadmaps.\n\nYou could already use [Elle, the AI assistant in Aha! software](/roadmaps/ai-assistant), to generate a prototype from a feature or prompt. With today's update, you can configure your brand's colors, typography, layouts, shapes, and UI components so Elle can automatically apply them to your prototypes.\n\nCreate a design system for an individual workspace or at the workspace line level to share it across multiple teams. Once this system is set up, PMs can easily select it whenever they create or update a prototype.\n\nHere is what you can do:\n\n**Add a design system:** Upload a screenshot of your application or design system files, or describe what you need in a conversation with Elle.**Apply it to a prototype:** Select the design system when you generate a new prototype or add it to an existing one.**Refine the details:** Select and modify your design system at any time. Changes to the design system are automatically reflected in prototypes that use it.\n\nHere is a design system we created for Fredwin Cycling, a fictitious application. We created the system once and can now use those familiar elements across prototypes.\n\nDesign systems are available for all [Aha! Roadmaps](/roadmaps/overview) customers. Workspace owners can create and modify design systems. Contributors can apply them to prototypes.\n\nLet us show you:\n\n## How to get started\n\nFrom your\n\n**Workspace** settings, navigate to**Design systems**.Upload a file or screenshot, or describe your design system to create a new one.\n\nReview the design system Elle creates.\n\nMake updates as needed with the\n\n**pointer** tool.When creating a new prototype, apply the design system from the\n\n**+** button in the Elle chat.For an existing prototype, apply the design system from the dropdown menu at the top of the record.\n\n**Pro tip: **Create your design system at the workspace line level. This ensures every workspace underneath it can inherit the same styles and components.\n\n📚 For more details, read the [full support article](https://support.aha.io/aha-roadmaps/support-articles/knowledge/prototypes/apply-a-design-system-to-prototypes~7673922378800474745).\n\nA realistic prototype gives customers and colleagues something concrete to react to. They can use the functionality, see how it fits with the rest of the product, and tell you what works and what needs to change. That is the kind of feedback you want before engineering starts building.\n\nThere is plenty more to explore with prototyping in Aha! Roadmaps. Watch our [recent tutorial on prototyping](link) for more details.\n\n**Start a free trial of Aha! Roadmaps**\n\n[Aha! Roadmaps](/product/overview) is the best way to set strategy, prioritize features, and create interactive prototypes. It also includes everything in Aha! Ideas Essentials, Aha! Whiteboards Essentials, and Aha! Knowledge Essentials to provide a complete product management solution. Sign up for a [free 30-day trial](/signup?product=roadmaps&referrer=%2Fblog%2Fuse-your-design-system-when-you-create-prototypes-in-aha-roadmaps) or [join a live demo](/demo?referrer=%2Fblog%2Fuse-your-design-system-when-you-create-prototypes-in-aha-roadmaps) to see why more than 1 million product builders trust our software to build lovable products and be happy doing it.", "url": "https://wpnews.pro/news/use-your-design-system-when-you-create-prototypes-in-aha-roadmaps", "canonical_source": "https://www.aha.io/blog/use-your-design-system-when-you-create-prototypes-in-aha-roadmaps", "published_at": "2026-08-17 16:34:44+00:00", "updated_at": "2026-08-17 17:40:47.286679+00:00", "lang": "en", "topics": ["artificial-intelligence", "generative-ai", "ai-products", "ai-tools"], "entities": ["Aha! Labs Inc.", "Aha! Roadmaps", "Aha! Builder", "Elle", "Fredwin Cycling"], "alternates": {"html": "https://wpnews.pro/news/use-your-design-system-when-you-create-prototypes-in-aha-roadmaps", "markdown": "https://wpnews.pro/news/use-your-design-system-when-you-create-prototypes-in-aha-roadmaps.md", "text": "https://wpnews.pro/news/use-your-design-system-when-you-create-prototypes-in-aha-roadmaps.txt", "jsonld": "https://wpnews.pro/news/use-your-design-system-when-you-create-prototypes-in-aha-roadmaps.jsonld"}}