Skip to main content
Workflows and prompts for designers - from importing Figma designs to iterating on visual details and redesigning client sites.
Replace the placeholder details (in brackets) with your own specifics - URLs, color codes, design references, and client details.

​
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:
1

Copy your Figma URL

Copy your Figma file or frame URL (you need view or edit access to the file).
2

Paste the URL

Go to rocket.new and paste the URL.
3

Select your platform

Select Web as your platform.
4

Generate the app

Rocket imports your screens and generates a working web app.
After import, use prompts to refine: 
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:
1

Copy your Figma URL

Copy your Figma mobile screens URL.
2

Paste the URL

Go to rocket.new and paste the URL.
3

Select your platform

Select Mobile as your platform.
4

Generate the app

Rocket generates a Flutter app for iOS and Android.
After import, use prompts to refine: 
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.

Figma import guide

Full walkthrough for importing Figma designs, platform setup, and design guidelines.

​
Visual iteration

​
Refine typography and spacing

Task type: Build 
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 
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 
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 
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) 
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) 
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) 
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 
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?

Prompts for developers

Rapid prototypes, API integrations, and custom code.

Prompting for Build

Learn to describe apps and redesigns more effectively.

Website overhaul workflow

Full redesign workflow from benchmark to deploy.

Visual edit

Click any element to tweak colors, spacing, and layout directly.