​
How to Set Up (2 minutes)

Presets are a way to configure a default prompt or style like, “You are designing for [insert your company name]. Always use #228B22 as my primary button color.”

If you have a brand guideline, upload that to ChatGPT and ask it to create a default prompt for Magic Patterns for you.

1

In the dropdown where you choose a preset, select 'New Preset +'.

2

Fill out the name and default prompt of your preset.

3

Click save, which will then show your new preset in the dropdown.

4

Generate a new design with that preset selected. In this case, a Stripe invoice page.

​
Library Integration

Presets are not just for styling. They can also be connected to your Component Libraries to ensure consistent component usage across your designs.

When you connect a preset to a component library:

  1. The AI will automatically use components from your library when generating designs
  2. You don’t need to manually reference components using @component syntax in the prompt

This creates a powerful workflow where your preset defines both the styling and component usage patterns, ensuring maximum consistency across your designs.

1

Open preset settings and connect a library

Click on the preset you want to connect to a library and look for the “Connect a Library” option.

2

Select your component library

Choose the library containing your pre-built components.

3

Generate designs with automatic component usage

Now when you generate designs with this preset, it will automatically use components from your connected library.

You can still manually reference components using @ in your prompts, but connecting a library to your preset makes this automatic.

​
Example Preset Default Prompt

More than 100,000+ presets have been created by our community.

Neobrutalist Preset
You are designing for a company called "Acme Inc," which makes rockets.

You MUST ALWAYS design in a neo-brutalist style.

Visual Style:
- Style: Neo-brutalist
- Layout:
  - Structure: High-contrast, rigid grid
  - Borders: Thick, visible, solid black or dark gray
  - Corners: Sharp 90-degree angles only
  - Effects: Flat design only; no shadows, gradients, or blurs

Color Palette:
- Primary Colors:
  - Green: #00ff00
  - Aqua: #00ffff
  - Pink: Use prominently for emphasis (headings, calls-to-action, etc.)
- Secondary Colors:
  - Black: #000000
  - White: #ffffff
  - Gray: #333333
- Guidelines: Use flat, solid fills only. No gradients or soft transitions.

Typography:
- Font Style: Use monospace (font-mono)
- Font Size: Large and dominant
- Characteristics: Highly legible, blocky, and utilitarian
- Text Effects: None — avoid shadows, glows, or embellishments

Design Rules:
Avoid:
- Gradients
- Shadows
- Rounded corners
- Subtle effects
- Glossy or polished finishes

Embrace:
- Raw functionality
- Visible layout structure
- Industrial and technical visual tone
- Unfinished or intentionally crude elements