Skip to main content
Six ready-to-use prompts for generating front-end code from Figma designs. Match your scenario to the right prompt using the table below.
These prompts require a Figma PAT from a Dev or Full seat. View and Collaborator seats are limited to 6 API calls per month, which is insufficient for code generation. See Figma integration for rate limit details.
Jump to: Single Screen | Responsive Screen | User Flow | Component Logic | Reskin with Library | Add Feature from Figma
Starting contextYou have…Use case
No existing codeA single Figma screenSingle Screen
No existing codeMultiple Figma frames of the same screen at different widthsResponsive Screen
No existing codeMultiple Figma screens representing a user flowUser Flow
No existing codeMultiple Figma frames showing a component’s states/variantsComponent Logic
Existing codebaseExisting code + a target component library (MUI, Ant, SAP, etc.)Reskin with Library
Existing codebaseExisting code + new Figma screens to implementAdd Feature from Figma

​
No Existing Code

These prompts generate new code from Figma input alone.

​
1. Single Screen

Convert the attached Figma screen into pixel-faithful, front-end code.

After implementation, provide screenshots to verify visual fidelity.
Attach - Figma frame URL

​
2. Responsive Screen

The attached Figma URL(s) contains multiple screens of the same UI
at different viewport widths. Each artboard defines a responsive breakpoint.

Generate a single responsive implementation that matches every artboard
exactly at its designed width.

After implementation, provide screenshots at each designed viewport width.
Attach - Figma frame URL(s)

​
3. User Flow

The attached Figma URL(s) contains multiple screens representing sequential
steps in a user flow. Each screen is a distinct view.

Each screen's visual output must match its corresponding Figma frame independently.

After implementation, provide a screenshot of each screen.
Attach - Figma frame URL(s) for each step in the flow

​
4. Component Logic

The attached Figma frames represent a single component across its variant
states and configurations (e.g., default, hover, active, disabled, error,
sizes, themes, responsiveness).

Generate a single component that accepts props to control each variant
dimension shown. Every visual state in the Figma must be reproducible
via props - do not hardcode any single variant.

(Optional) Add a test harness UI that lets me toggle between all variants.

After implementation, render each variant and provide a screenshot grid
showing all states.
Attach - Figma frame URL(s) showing each variant/state of the component

​
Existing Codebase

These prompts work with code you’ve already onboarded to Blitzy.

​
5. Reskin with Component Library

Reskin the attached page/component using [LIBRARY NAME] as the sole
UI library. Read the existing implementation to understand the page's
structure, layout, and behavior - then replace every UI element with
its [LIBRARY NAME] equivalent.

Use [LIBRARY NAME]'s default theme and standard page scaffolding.
Adopt the library's layout idioms where they differ from the current
implementation.

Do not modify business logic, data flow, or API calls. Only the
UI layer changes.

Do not add, remove, or rearrange content - the page must contain
the same information and controls as the original.

After implementation, provide screenshots.
Replace [LIBRARY NAME] with: Material UI, Ant Design, SAP Fiori, shadcn/ui, or your target library.

​
6. Add Feature to Existing Codebase

Add the feature shown in the attached Figma screens to the existing
codebase.

Use the existing codebase to identify:
- File and folder conventions - place new files where expected.
- Routing configuration - add routes for new screens.
- Shared layouts or wrappers the new screens should use.
- Data structures to extend (if the feature adds to an existing list,
  table, or configuration).

Do not refactor, rename, or restructure existing code beyond the minimal insertion points.

After implementation, provide screenshots of each new screen, plus any existing screens that now
display the new feature.
Attach - Figma frame URL(s) for the new feature
Rule available — Add the Enforce Code Style Patterns rule to your project on the platform to ensure generated code follows your existing architectural patterns.