> ## Documentation Index
> Fetch the complete documentation index at: https://dhiwisepvtltd-5e04e6a4.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Generation

> Generate AI images and vector SVGs directly in your Rocket.new app without leaving the editor.

> [!NOTE]
>
> Image and SVG generation are only available on the **web browser**. They are not supported in the Rocket mobile app.

Generate visuals directly in chat without leaving the editor. Type a command, describe what you want, and Rocket generates and places it in your app.

## Image generation vs SVG generation

Two commands, two different use cases.

| | `/Generate Image` | `/Generate SVG Illustration` |
| :- | :- | :- |
| **Output** | Raster image (PNG/JPEG) | Vector graphic (SVG) |
| **Best for** | Hero images, product shots, lifestyle photos, backgrounds | Icons, diagrams, illustrations, logos, animated elements |
| **Scales without losing quality** | No | Yes |
| **Supports animation** | No | Yes (CSS animations) |
| **Editable as code** | No | Yes |

Use `/Generate Image` for photographic, painterly, or rendered visuals.

Use `/Generate SVG Illustration` for anything that needs to scale, animate, or be adjusted in code.

## How to use

Both commands run from the chat panel inside the Build editor.

**1. Open the screen you want to update**

Navigate to the page or screen where you want the visual placed. Both commands are screen-aware and target what is currently open in your preview.

**2. Type the command in chat**

Type `/Generate Image` or `/Generate SVG Illustration` followed by a description of the visual and where to place it.

```plaintext wrap theme={null}
/Generate Image replace hero banner with a soft gradient sky with floating abstract shapes
```

```plaintext wrap theme={null}
/Generate SVG Illustration add a process flow diagram showing user signup to dashboard in the onboarding section
```

**3. Review and refine**

Rocket generates the visual and places it in the specified location. If the result is not quite right, send a follow-up message to adjust it. You do not need to re-run the slash command; plain chat messages work for refinements.

```plaintext wrap theme={null}
Make the colors warmer and increase the contrast on the main subject.
```

```plaintext wrap theme={null}
Simplify the illustration. Remove the background and make it line art only.
```

## Generate Image

Use this for photographic and rendered visuals: hero banners, product mockups, backgrounds, feature card images, lifestyle shots, and abstract art.

**Hero and banner images:**

```plaintext wrap theme={null}
/Generate Image replace the hero banner with a cinematic wide shot of a mountain trail at golden hour, photorealistic
```

```plaintext wrap theme={null}
/Generate Image replace hero background with a dark abstract gradient with glowing particle shapes
```

**Product and feature visuals:**

```plaintext wrap theme={null}
/Generate Image add a minimal 3D render of a floating smartphone to the product section, white background, soft shadow
```

```plaintext wrap theme={null}
/Generate Image replace the feature card image for "fast delivery" with a sleek isometric package icon, flat style
```

**Team and lifestyle:**

```plaintext wrap theme={null}
/Generate Image replace the team photo with a warm, candid photo of people collaborating at a wooden desk
```

**Backgrounds and textures:**

```plaintext wrap theme={null}
/Generate Image add a subtle grain texture background to the testimonials section, muted sage green
```

```plaintext wrap theme={null}
/Generate Image replace the pricing section background with a dark mesh gradient, deep blue and purple tones
```

> [!NOTE]
>
> One clear visual idea per command works best. Combining multiple unrelated ideas in a single prompt often produces mixed results.

## Generate SVG Illustration

Use this for scalable graphics: icons, spot illustrations, diagrams, empty states, mascots, animated elements, and decorative shapes. SVG output is clean code you can edit directly.

**Icons:**

```plaintext wrap theme={null}
/Generate SVG Illustration create a minimal line art icon set for the three feature cards: speed, security, and reliability
```

```plaintext wrap theme={null}
/Generate SVG Illustration add an animated notification bell icon with a gentle swing to the subscribe button
```

**Spot illustrations:**

```plaintext wrap theme={null}
/Generate SVG Illustration add a friendly isometric illustration of a rocket launching from a laptop for the hero section
```

```plaintext wrap theme={null}
/Generate SVG Illustration replace the empty state on the dashboard with a line art illustration of a person planting a flag
```

**Diagrams and flows:**

```plaintext wrap theme={null}
/Generate SVG Illustration add a step-by-step diagram showing how the product works: signup, connect, launch. Place it in the how-it-works section
```

```plaintext wrap theme={null}
/Generate SVG Illustration create an architecture diagram showing frontend, API, and database layers for the technical docs page
```

**Decorative and background shapes:**

```plaintext wrap theme={null}
/Generate SVG Illustration add an abstract blob shape behind the hero headline, brand color, low opacity
```

```plaintext wrap theme={null}
/Generate SVG Illustration add a subtle wave divider between the hero and features section
```

**Animated SVGs:**

```plaintext wrap theme={null}
/Generate SVG Illustration create an animated loading spinner that matches my brand colors
```

```plaintext wrap theme={null}
/Generate SVG Illustration add a looping draw-on animation to the checkmark icon on the success screen
```

## Writing better prompts

Clear prompts produce better results. Include these three things in every prompt:

**For images: subject, style, and placement:**

| Element | Example |
| :- | :- |
| Subject | "modern home office with natural light and a coffee cup" |
| Style | "photorealistic", "soft gradient", "minimal 3D render", "cinematic", "abstract" |
| Placement | "replace hero image", "add to pricing card", "replace the team photo in the About section" |

**For SVGs: style, content, and placement:**

| Element | Example |
| :- | :- |
| Style | "isometric", "line art", "geometric", "duotone", "flat", "outlined" |
| Content | "rocket launching from a server rack", "user flow from login to dashboard", "three-step onboarding diagram" |
| Placement | "replace hero graphic", "add to features section", "icon for the subscribe button" |

**Be specific about color and tone:**

```plaintext wrap theme={null}
/Generate Image add a hero background, dark navy with soft aurora-like gradients in teal and violet, no text, abstract
```

```plaintext wrap theme={null}
/Generate SVG Illustration create a geometric icon for "analytics" in my brand colors (#6C63FF and white), line art style
```

**Describe what to keep and what to change when iterating:**

```plaintext wrap theme={null}
Keep the overall composition but change the color palette to warmer tones: amber and cream instead of blue.
```

```plaintext wrap theme={null}
Keep the icon style but make the stroke thinner and remove the fill.
```

## What's next?

> **[Visual edit](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/visual-edit.md)**
>
> Click any image to swap, resize, or reposition it in the preview.

> **[Theme](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/theme.md)**
>
> Manage your app's logo and shared visual assets in one place.

> **[Commands](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/commands.md)**
>
> See the full list of slash commands available in the Build editor.

> **[Chat](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/chat.md)**
>
> Use chat to make broader design changes across your app.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.