reverse_engineer_component
Extract the HTML, CSS, interactivity states, and accessibility of any design component. Optionally specify a screen region to crop and zoom for focused analysis.
Instructions
Reverse-engineer a single component from a design. Optionally specify a screen region to crop + zoom for focused analysis. Returns HTML structure, CSS layout, styling details, all states (hover/active/focus/disabled), and accessibility requirements.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| region | No | Optional: specific screen region (x, y, width, height) to crop and analyze | |
| reference | Yes | Design file (video or image path) | |
| element_description | No | Optional: description of the element to analyze (e.g. 'pricing card', 'nav item') |