screenshot-to-component
Screenshot To Component
Purpose
Recreate a UI screenshot as a clean, editable Figma component with meaningful nesting, reusable subcomponents, sensible properties, and design-system-ready structure. Prioritize component architecture over pixel-perfect tracing while keeping the visual match close.
When To Use
Use for screenshots of panels, sidebars, modals, drawers, menus, popovers, cards, toolbars, forms, table rows, lists, or dense app surfaces; or when a visible component should become reusable in Figma.
Do not use for full-page website generation, production code generation, broad design-system creation, pure visual critique, or illustration/icon design as the main task.
Ask Only If Needed
Proceed from the screenshot unless missing context materially changes the structure. Ask only about target platform when sizing depends on it, an existing design system the user references, whether to create one component or a component set, or which visible state to prioritize when states conflict. Infer spacing, colors, labels, and icons from the screenshot.