Skip to main content

​
What are Presets?

Presets are a way to configure a default prompt and consistent styles. Example: “You are designing for [insert your company name]. Always use #228B22 as my primary button color.”

​
Consistent Styles

If you have a brand guideline, upload that to ChatGPT and ask it to create a default prompt for Magic Patterns for you!
It takes 2 minutes to set up a preset:
1

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

2

Fill out the name and default prompt of your preset. Use ChatGPT to generate a default prompt for you!

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

​
Automatic Component Usage

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
1

Open preset settings

From the dashboard when creating a new design, click the preset dropdown and select the preset you want to edit.
2

Connect a library

In the preset settings modal, click “Connect a Library” and select your component library.
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

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