Using custom design systems with AI

Which design systems can be used by AI?

You must check [AI access] for published libraries before they can be selected and used by AI.

Access point 1

Team workspace - Assets tab (requires edit access to the library file)

Access point 2

Bottom left corner of the Libraries modal (requires edit access to the library file)

Access point 3

Admin Console - Library Management (for Enterprise admins only)

Workflow for using custom design systems with AI

1. Select the target design system

Open the AI panel in the design file, select [Custom design system] in the dialog, and then choose a library file enabled for AI. Once selected, you can use prompts to generate designs that match the style of the chosen component library.

2. Enter appropriate prompts

Prompting best practices

• Prompts should closely align with the style and semantic scope of the selected component library to improve generation quality.
• Conflicts between the two will negatively impact generation results and component utilization rate.
• If there are modules on the page not covered by the component library, AI will dynamically generate them based on semantics rather than force-fitting mismatched components.

Things to avoid

• Style conflicts: e.g., the component library is a light-themed enterprise style, but the prompt requests a dark-themed finance UI.
• Context conflicts: e.g., the component library is for dashboards, but the prompt requests a mini-program login page.
• Structural conflicts: e.g., the component library only contains form components, but the prompt requests e-commerce cards.
• Brand conflicts: e.g., the prompt requests a strong brand visual identity, but the component library lacks one.