Code & Wireframe Generation
Overview
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 Assistant Sidebar
The AI Assistant panel is the right-side sidebar used to configure and trigger code or wireframe generation. It contains the following controls:
Vision Model Selector
Choose which AI vision model to use for analyzing your images and generating output. Different models may produce different levels of detail and accuracy.
Framework Selector
Pick the target framework for code generation (e.g., React, Vue, Svelte). The generated code will use the selected framework's syntax and patterns.
Components / Wireframes Tabs
Switch between generating component code (Components tab) or wireframe layouts (Wireframes tab) from your annotated images.
Image Groups
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.
Generate Blocks
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.
Output Modes
Generate Code
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.
Generate Wireframe
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.
Code Generation Features
Framework Selection
Choose your target framework before generating. Supported frameworks include React, Vue, Svelte, SolidJS, Angular, and more.
Behavior Mapping
Behaviors assigned to bounding boxes are translated into event handlers, navigation logic, modals, and other interactive code in the output.
Layout Accuracy
The AI uses the bounding box positions and sizes from the image to produce a layout that closely matches the original visual design.
Save to Blocks
Generated components can be saved directly to your Blocks library for reuse across projects.
Add to Project
Insert the generated code directly into your current project as new component files.
Tips
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.