image_to_component
Convert a screenshot, mockup, or wireframe image into framework-specific component code. Supports React, Next.js, Vue, Angular, Svelte, HTML, and UI libraries like shadcn/ui.
Instructions
Convert a screenshot, mockup, or wireframe image into framework-specific component code. Supports React, Next.js, Vue, Angular, Svelte, and HTML. Optionally uses shadcn/ui, Radix, Headless UI, PrimeVue, or Material UI.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| image_data | Yes | Base64-encoded image data of the screenshot, mockup, or wireframe to convert into a component | |
| image_mime_type | No | MIME type of the image | image/png |
| framework | Yes | Target framework for generated code | |
| component_name | No | Optional name for the generated component (auto-detected if omitted) | |
| component_library | No | Component library to use in generated code | none |
| description | No | Optional textual description of the UI in the image to guide code generation (e.g., "A pricing page with 3 tiers and a toggle for monthly/annual billing") | |
| dark_mode | No | Generate dark mode variant |