Waiting
Customize and export code (opens in a new tab)Compare designs
Each model builds its own version. Pick your favorite and customize it.
Desktop preview
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
How to create best utility components?
Describe one practical task. Tell the AI exactly what the tool or supporting control should help someone do. Provide sample inputs, expected outputs, and the labels that make the task understandable.
Keep the interface focused. Specify the controls and feedback needed for that task, along with the space available in the surrounding page. Ask for clear grouping instead of adding unrelated features.
Review realistic outcomes. Compare normal, empty, and error states. Check the design with longer values and connect any generated visual controls to the actual utility logic.
Examples of utilities components
Solstice
Video call with screen share, study timer, and todo overlay
A screen-sharing video session where a presenter's shared 3D scene fills the main area, with a study timer and todo checklist overlaid at top left and a participant video tile at bottom right. The layout is a full-width shared-screen stage with floating widgets and a top participant/status bar.
Explore component generators
Generate any section of your website with the same multi-model workflow.
No categories match your search.
