कोड और वायरफ्रेम जनरेशन
अवलोकन
Once you have annotated your image with bounding boxes and assigned behaviors, you can generate either working component code or a wireframe layout. The AI uses the bounding box positions, element types, and behavior directions to produce accurate output.
AI सहायक साइडबार
The AI Assistant panel is the right-side sidebar used to configure and trigger code or wireframe generation. It contains the following controls:
विज़न मॉडल चयनकर्ता
Choose which AI vision model to use for analyzing your images and generating output. Different models may produce different levels of detail and accuracy.
फ्रेमवर्क चयनकर्ता
Pick the target framework for code generation (e.g., React, Vue, Svelte). The generated code will use the selected framework's syntax and patterns.
कंपोनेंट / वायरफ्रेम टैब
Switch between generating component code (Components tab) or wireframe layouts (Wireframes tab) from your annotated images.
इमेज समूह
Lists all your image groups for the current reverse project. Select a group to preview its images and configure generation. Each group shows its image count.
ब्लॉक जनरेट करें
Click to start the AI generation process. The AI analyzes the selected group's images along with any bounding box annotations and behaviors to produce output.
आउटपुट मोड
कोड जनरेट करें
Convert the annotated image into working component code for your target framework (React, Vue, Svelte, etc.). The generated code includes the layout, styling, and any behaviors you defined on the bounding boxes.
वायरफ्रेम जनरेट करें
Export the annotated image as a wireframe layout that opens in the Wireframe tool. Each bounding box becomes a wireframe element that you can further refine, rearrange, and connect to other screens.
कोड जनरेशन सुविधाएँ
फ्रेमवर्क चयन
Choose your target framework before generating. Supported frameworks include React, Vue, Svelte, SolidJS, Angular, and more.
व्यवहार मैपिंग
Behaviors assigned to bounding boxes are translated into event handlers, navigation logic, modals, and other interactive code in the output.
लेआउट सटीकता
The AI uses the bounding box positions and sizes from the image to produce a layout that closely matches the original visual design.
ब्लॉक में सहेजें
Generated components can be saved directly to your Blocks library for reuse across projects.
प्रोजेक्ट में जोड़ें
Insert the generated code directly into your current project as new component files.
सुझाव
For best results, use high-resolution images with clear UI elements. Tightly draw bounding boxes around each element for more accurate code generation. Assign specific behaviors rather than vague descriptions — "opens signup modal" works better than "does something." The AI works best with standard web layouts and common UI patterns.