Applying a design system to your projects ensures that every generated screen automatically matches your brand.
How to Apply a Design System to a Project
- Open or create a Moonchild project where you want to use your design system.
- Click the “Add DS” button in the project interface.
- Select your design system from the list.
- You can try the design system templates available on Moonchild.
- From this point forward, all new UI screens, user flows, and prototypes will use the selected design system.
Generating Screens with Your Design System
You can generate screens with your design system by:
- Choose and attach your design system.
- Prompt Moonchild to generate a screen as you normally would: "Create a student enrollment form" or "Generate a dashboard for viewing analytics."
- Moonchild references your design system's guidelines (forms show progress indication), themes (your brand colors), and components (your input fields and buttons).
- Review the generated screen—it automatically uses your data table components, card styles, color tokens, form patterns, spacing rules, and brand typography.
- Make any adjustments from the chat.
What Design Systems Enable
When you use a design system, you get on-brand designs from the first generation rather than generating generic screens and spending hours restyling them. A dashboard uses your specific data table component and card styles. A settings page follows your exact form patterns and spacing rules. An onboarding flow applies your brand typography and interaction patterns.
The design system acts as a constraint layer during generation, ensuring everything matches your product's visual language. This is where AI design generation becomes genuinely useful for product teams—consistent, on-brand results without extensive manual restyling.