Menu
Design
What the Style panel doesn't cover yet
The styling the Style panel doesn't offer today, and how to get each one by asking the AI.
The Style panel covers typography, spacing, backgrounds and borders, and the layout tools cover flex and grid layouts, lists, tables and form fields. For everything else, ask the AI. Select the element first, so the AI knows what you mean.
| Not in the panel | Ask the AI, for example |
|---|---|
| Width and height, including maximum and minimum sizes | Make this section's content no wider than 1000px and center it. |
| Turning an element into a flex or grid layout | Lay out these items in a row with space between them. |
| Position, such as a sticky header or an element layered on top of another | Make the header stay at the top when you scroll. |
| Layering order (what appears in front) | Put the badge in front of the image. |
| Shadows | Give the cards a soft shadow. |
| Opacity of a whole element | Make this image 80% transparent. (To make just a color see-through, use opacity in the color picker.) |
| Hover, focus and pressed states | Make the buttons darken slightly and lift when you hover over them. |
| Transitions and animations | Fade the hero text in when the page loads. |
| Rotating, scaling and moving | Tilt the photo slightly to the left. |
| Hiding an element at some screen sizes | Hide this image on phones. |
| How images fill their frame (crop vs fit) and aspect ratio | Show the product photos as squares, cropped to fill. |
| Overflow (scrolling or clipping content that doesn't fit) | Let this table scroll sideways on phones. |
| Cursor style | Show a pointer cursor over the whole card. |
| Gradients the gradient builder can't make | Make the background a gradient from navy through purple to pink, at a 120° angle. |