Generating UI components using Magic Patterns is mainly divided into the following steps:
- Select Design System: Option to expose a design system (e.g. Material UI) or import a customized design system
- input prompt: In the main interface input box, enter a specific text description, the more detailed the description, the better the generation of results
- Upload reference content (optional): You can upload a reference image or Figma file by clicking on "Upload Image" or "Import Figma".
- Generate Preview: Click the "Generate" button and the AI will generate the UI components in a few seconds, which can be viewed in the preview window on the right.
- Editorial adjustments: adjust the layout, colors or fonts, and view and edit React code via the code tabs
- Exported Uses: export as Figma file or download React code directly
Important: Complex UIs may require step-by-step generation of individual components before they can be combined. Each generation operation consumes one Credit, but error generation or "Fix with AI" does not.
This answer comes from the articleMagic Patterns: AI Tools for Rapidly Generating User Interface DesignsThe
May not be reproduced without permission:AI productivity tools " How to generate UI components using Magic Patterns? What are the specific steps?
English 
简体中文 
日本語 
Deutsch 
Português do Brasil