> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Generate images and SVGs

> Generate AI images and vector SVGs directly in your Rocket.new app. Part of the only vibe solutioning platform with research, building, and intelligence.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

<Note>
  Image and SVG generation are only available on the **web browser**. They are not supported in the Rocket mobile app.
</Note>

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.

<Divider />

## 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.

<Divider />

## How to use

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="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
    ```
  </Step>

  <Step title="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.
    ```
  </Step>
</Steps>

<Divider />

## 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.
</Note>

<Divider />

## 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
```

<Divider />

## 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.
```

<Divider />

## What's next?

<CardGroup cols={2}>
  <Card title="Visual edit" icon="arrow-pointer" href="/build/editor/visual-edit">
    Click any image to swap, resize, or reposition it in the preview.
  </Card>

  <Card title="Theme" icon="palette" href="/build/editor/theme">
    Manage your app's logo and shared visual assets in one place.
  </Card>

  <Card title="Commands" icon="pen-field" href="/build/editor/commands">
    See the full list of slash commands available in the Build editor.
  </Card>

  <Card title="Chat" icon="messages" href="/build/editor/chat">
    Use chat to make broader design changes across your app.
  </Card>
</CardGroup>