Style Wireframes and Export React Screens
This guide is currently available in English.
The wireframe editor now has a Visual mode for styling screens and editing their React components. Project styles supply shared colors, typography, spacing, and design notes across your screens.
Open a screen in Visual mode
Open an editable wireframe screen and choose Visual in the Canvas appearance controls. Select a piece on the canvas to work on its React component. Use Wireframe to return to the structural editing view.
Apply a shared project style
In the React design controls, choose Project style and set Style name, colors, Font family, Radius, and Spacing. Add Style notes for AI to describe the look you want, then choose Apply project style. Check the result across screens because the style belongs to the project.
Customize an individual component
Select a piece and edit its React JSX, or enter Describe this piece to request an AI draft using the screen and saved style as context. Review the draft and click Apply component to update the screen. Use starter restores starter code in the editor; you still need to apply it. Copy code copies the selected component.
Preview interactions and copy the screen
Choose Try interactions to test the visual screen, then Select pieces to return to selecting elements. Use Copy screen React to copy the screen as App.jsx. Paste it into your app and validate its behavior there; copying a screen does not implement your product’s backend or data connections.
Keep the style when moving screens
Use the editor’s import/export control to export the wireframe as JSON or ZIP with its project style. When importing, enable Use the imported project style for all screens, if included only when you want that style applied throughout the receiving project. Otherwise, leave it unchecked to keep the current project style.