Skip to main content
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
OutputRaster image (PNG/JPEG)Vector graphic (SVG)
Best forHero images, product shots, lifestyle photos, backgroundsIcons, diagrams, illustrations, logos, animated elements
Scales without losing qualityNoYes
Supports animationNoYes (CSS animations)
Editable as codeNoYes
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.
/Generate Image replace hero banner with a soft gradient sky with floating abstract shapes

/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.
Make the colors warmer and increase the contrast on the main subject.

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: 
/Generate Image replace the hero banner with a cinematic wide shot of a mountain trail at golden hour, photorealistic

/Generate Image replace hero background with a dark abstract gradient with glowing particle shapes
Product and feature visuals: 
/Generate Image add a minimal 3D render of a floating smartphone to the product section, white background, soft shadow

/Generate Image replace the feature card image for "fast delivery" with a sleek isometric package icon, flat style
Team and lifestyle: 
/Generate Image replace the team photo with a warm, candid photo of people collaborating at a wooden desk
Backgrounds and textures: 
/Generate Image add a subtle grain texture background to the testimonials section, muted sage green

/Generate Image replace the pricing section background with a dark mesh gradient, deep blue and purple tones
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: 
/Generate SVG Illustration create a minimal line art icon set for the three feature cards: speed, security, and reliability

/Generate SVG Illustration add an animated notification bell icon with a gentle swing to the subscribe button
Spot illustrations: 
/Generate SVG Illustration add a friendly isometric illustration of a rocket launching from a laptop for the hero section

/Generate SVG Illustration replace the empty state on the dashboard with a line art illustration of a person planting a flag
Diagrams and flows: 
/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

/Generate SVG Illustration create an architecture diagram showing frontend, API, and database layers for the technical docs page
Decorative and background shapes: 
/Generate SVG Illustration add an abstract blob shape behind the hero headline, brand color, low opacity

/Generate SVG Illustration add a subtle wave divider between the hero and features section
Animated SVGs: 
/Generate SVG Illustration create an animated loading spinner that matches my brand colors

/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:
ElementExample
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:
ElementExample
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: 
/Generate Image add a hero background, dark navy with soft aurora-like gradients in teal and violet, no text, abstract

/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: 
Keep the overall composition but change the color palette to warmer tones: amber and cream instead of blue.

Keep the icon style but make the stroke thinner and remove the fill.

​
What’s next?

Visual edit

Click any image to swap, resize, or reposition it in the preview.

Theme

Manage your app’s logo and shared visual assets in one place.

Commands

See the full list of slash commands available in the Build editor.

Chat

Use chat to make broader design changes across your app.