Figma to Code

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

After implementation, provide screenshots to verify visual fidelity.

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.

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.

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.

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.

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.