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

# Prompts for designers

> Figma imports, visual iteration, and client site redesigns with Rocket.new.

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 />

Workflows and prompts for designers - from importing Figma designs to iterating on visual details and redesigning client sites.

<Info>
  Replace the placeholder details (in brackets) with your own specifics - URLs, color codes, design references, and client details.
</Info>

## Import from Figma

Figma import is a URL-based flow - no text prompt needed. Paste your Figma URL and Rocket generates your app automatically.

### Convert a Figma design to a web app

**How to start:**

<Steps>
  <Step title="Copy your Figma URL">
    Copy your Figma file or frame URL (you need view or edit access to the file).
  </Step>

  <Step title="Paste the URL">
    Go to [rocket.new](https://rocket.new) and paste the URL.
  </Step>

  <Step title="Select your platform">
    Select **Web** as your platform.
  </Step>

  <Step title="Generate the app">
    Rocket imports your screens and generates a working web app.
  </Step>
</Steps>

**After import, use prompts to refine:**

```plaintext wrap theme={null}
Make the sidebar collapsible and add smooth transitions between pages. Connect Supabase for user authentication.
```

**What to expect:** A pixel-accurate implementation of your Figma design as a working web app. After import, iterate using chat exactly like any other Build task.

***

### Convert a Figma design to a mobile app

**How to start:**

<Steps>
  <Step title="Copy your Figma URL">
    Copy your Figma mobile screens URL.
  </Step>

  <Step title="Paste the URL">
    Go to [rocket.new](https://rocket.new) and paste the URL.
  </Step>

  <Step title="Select your platform">
    Select **Mobile** as your platform.
  </Step>

  <Step title="Generate the app">
    Rocket generates a Flutter app for iOS and Android.
  </Step>
</Steps>

**After import, use prompts to refine:**

```plaintext wrap theme={null}
Add pull-to-refresh on the feed screen, swipe-to-delete on list items, and connect Firebase for push notifications.
```

**What to expect:** A cross-platform mobile app that implements your Figma mobile design. Use chat to add logic, interactions, and integrations.

<Card horizontal title="Figma import guide" icon="figma" href="/build/create/figma/overview">
  Full walkthrough for importing Figma designs, platform setup, and design guidelines.
</Card>

## Visual iteration

### Refine typography and spacing

**Task type:** Build

```plaintext wrap theme={null}
Refine the typography across the entire app. Use [font name] for headings and [font name] for body text. Set heading sizes to: h1 = 48px, h2 = 36px, h3 = 24px. Body text should be 16px with 1.6 line height. Increase the spacing between sections to 80px. Add 24px padding inside all card components.
```

**What to expect:** Updated typography and spacing applied consistently across all pages.

***

### Color palette swap

**Task type:** Build

```plaintext wrap theme={null}
Update the color scheme to: primary = [hex code], secondary = [hex code], background = [hex code], text = [hex code], accent = [hex code]. Apply these consistently across all pages - buttons, links, headings, backgrounds, and borders. Keep the current layout and structure unchanged.
```

**What to expect:** A complete color refresh applied globally without affecting layout or functionality.

***

### Animation and micro-interactions

**Task type:** Build

```plaintext wrap theme={null}
Add subtle animations throughout the app: fade-in on page load for hero sections, smooth hover transitions on buttons and cards (scale up slightly and add shadow), slide-in animations for content sections as they scroll into view, and a smooth page transition between routes. Keep animations performant - nothing should feel sluggish.
```

**What to expect:** Polished micro-interactions that make the app feel more refined and responsive.

***

### Component library consistency

**Task type:** Build

```plaintext wrap theme={null}
Audit the design consistency across all pages. Make sure: all buttons use the same border radius, padding, and font weight. All cards have consistent shadows, borders, and padding. All form inputs match in style. Headings follow the same hierarchy everywhere. Fix any inconsistencies you find.
```

**What to expect:** A visually consistent app where every component follows the same design system.

## Client site redesigns

### Full site redesign for a client

**Task type:** Build (Redesign)

```plaintext wrap theme={null}
Redesign the website at [client-site.com]. The client wants a modern, premium look. Keep the existing content structure but transform the visual design: updated typography (use a clean sans-serif like Inter or DM Sans), new color palette based on [brand color], more whitespace, modern card layouts, and improved mobile responsiveness. The homepage, about page, and contact page are the priority.
```

**What to expect:** A redesigned version of the client's site that preserves their content while dramatically improving the visual design.

***

### Landing page conversion optimization

**Task type:** Build (Redesign)

```plaintext wrap theme={null}
Redesign the landing page at [url] with a focus on conversion. Move the primary CTA above the fold. Add a sticky header with a CTA button. Improve the social proof section - make testimonials more prominent with photos and company logos. Add urgency elements (limited time offer, spots remaining). Streamline the pricing section to reduce decision fatigue.
```

**What to expect:** A conversion-optimized redesign of the existing landing page.

***

### Portfolio site refresh

**Task type:** Build (Redesign)

```plaintext wrap theme={null}
Redesign my portfolio at [url]. I want a minimal, editorial aesthetic - lots of whitespace, large project images, clean typography. Use a monochrome palette with one accent color ([hex code]). The project grid should use a masonry layout. Add smooth hover animations on project cards and a full-screen project detail view.
```

**What to expect:** A redesigned portfolio with a refined, editorial aesthetic.

## Design research

### Design trend analysis

**Task type:** Solve

```plaintext wrap theme={null}
What are the current design trends for [type of app/website - e.g., SaaS dashboards, e-commerce, fintech apps] in 2026? Cover visual design (typography, color, layout), interaction patterns, and UX conventions. Include 5-10 examples of well-designed products in this category and explain what makes them effective.
```

**What to expect:** A trend report with specific examples and design principles you can reference in your work.

## What's next?

<CardGroup cols={2}>
  <Card title="Prompts for developers" icon="code" href="/learn/prompt-starters/for-developers">
    Rapid prototypes, API integrations, and custom code.
  </Card>

  <Card title="Prompting for Build" icon="hammer" href="/learn/guides/for-build">
    Learn to describe apps and redesigns more effectively.
  </Card>

  <Card title="Website overhaul workflow" icon="paintbrush" href="/learn/workflows/website-overhaul">
    Full redesign workflow from benchmark to deploy.
  </Card>

  <Card title="Visual edit" icon="wand-magic-sparkles" href="/build/editor/visual-edit">
    Click any element to tweak colors, spacing, and layout directly.
  </Card>
</CardGroup>