## Documentation Index

Fetch the complete documentation index at: [https://magicpatterns.mintlify.dev/docs/llms.txt](https://magicpatterns.mintlify.dev/docs/llms.txt)

Use this file to discover all available pages before exploring further.

In this lesson, you will learn how to keep prototypes on-brand by using components, tokens, and libraries so generated UI matches your product standards. Self-serve setup lives under the [design systems overview](/content/docs/documentation/design-systems/overview/index.html) and [self-serve setup](/content/docs/documentation/design-systems/self-serve/overview/index.html): [Rules](/content/docs/documentation/design-systems/self-serve/rules/index.html), [fonts and typography](/content/docs/documentation/get-started/fonts/index.html), [colors](/content/docs/documentation/design-systems/self-serve/colors/index.html), and [using components](/content/docs/documentation/custom-components/using-components/index.html). Teams can connect a real React library by sharing [component code](/content/docs/documentation/design-systems/using-your-real-design-system/component-code/index.html) (for example NPM, GitHub Packages, or a manual bundle). See [using your real design system](/content/docs/documentation/design-systems/using-your-real-design-system/overview/index.html) for connecting your library and onboarding.

Use your Real Design Systems in this AI tool | Magic Patterns - YouTube

Tap to unmute

[Use your Real Design Systems in this AI tool | Magic Patterns](https://www.youtube.com/watch?v=obZRvV-w_WQ)

[**Next: Team Workflows and Sharing** 
\
\
Continue to lesson five and collaborate with your team.](/content/docs/documentation/guide/team-workflows-and-sharing/index.html)