Design

Design in CSS Studio happens directly on the page. It adds a complete visual editor on top of your real site: sliders, drag handles, a colour picker, gradients, an element tree, and AI-generated variants. Every change you make is the change that gets written to source.

Selection

There are two ways to select elements: the element picker tool, and the Elements panel for structural navigation.

Element picker

Click Select element in the chat tray or press ⌥C to activate element selection mode.

Move your cursor over the page. Elements highlight as you hover. Click one to select it, the Edit Element panel will open with editable values.

Elements panel

Open the Elements panel by clicking the toolbar button:

Or, by pressing the ⌥E shortcut. This shows a hierarchical tree of your page's structure.

Click any node to select that element.

Multi-select

With one element selected, you can select more by holding Shift and clicking additional elements on the page or in the Elements panel.

Press Escape to deselect all.

Adding and removing

Right-click any node in the Elements panel, or a selected element on the page, to open a context menu:

• Duplicate (⌘D): clones the element and inserts it after the original
• Add: add an element as child or sibling
• Delete (Delete): removes the element from the DOM

You can also double-click an element tag in the Elements panel to rename it.

To draw a brand new element onto the page, click Draw element (⌥F) in the chat action row, then drag out a rectangle. An insertion point will show where in the DOM the element will be placed. Hold Space to move the element while drawing. The element is inserted into the DOM and selected for editing.

Reordering

Drag any node via its gripper icon in the tree to reorder it. An insertion line shows where the element will land. Drop it to confirm.

It's also possible to drag flex and grid elements directly on the page to reorder them.

Text

Double-click any element containing text to edit it directly. Press Enter or click outside to confirm changes.

Double-click within an article tag to edit entire articles. Supports Markdown syntax to add bold, italics, inline-code and lists.

Agent notes

While editing text, wrap any span in double square brackets to leave a note for the implementing agent rather than text to insert. The agent reads what's inside as an instruction, uses the surrounding copy as context, and replaces the whole [[ … ]] span with content that satisfies it. The brackets and their contents never reach your source.

Use them to hand off the parts you'd rather not write by hand:

• Get it now [[make punchier]] rewrites the line in a punchier voice.
• That's true! [[fact check]] verifies the surrounding claim and corrects it if needed.
• [[insert modified version of previous diagram here to illustrate]] generates new content from a description alone.

Anything outside the brackets is kept verbatim, and you can mix several notes into one block. Notes work the same way inside attribute values, so you can guide copy like alt text or an aria-label without writing the final string yourself.

Properties

When you select an element, the Edit Element panel appears on the right side of the screen. It shows the element's current CSS values organised into collapsible sections, and every change you make is applied to the page immediately.

Colour picker

Click any colour swatch to open the full colour picker. It supports:

• Colour modes: switch between HEX, RGB, and HSL
• Alpha: adjust transparency with the opacity slider
• Gradients: supported values also allow for gradients. Linear, radial and conic gradients are supported, with multiple colour stops, repeat toggle and angle/position controls.

CSS variables

CSS Studio auto-discovers the CSS custom properties available to the selected element and lists them in the Variables section of the Edit Element panel, where you can edit existing tokens or add new ones.

Hover any style to reveal a variable button. Clicking it opens the token picker, filtered to variables with a compatible type (colour tokens for colour properties, lengths for spacing, and so on).

Updating a variable's value updates every property that references it.

On-page controls

When you select an element, CSS Studio renders interactive handles directly on the page so you can edit spatial properties by dragging, without touching the Edit Element panel. Controls appear on elements at least 50×50 pixels.

Purple handles on each side adjust padding, with opposite sides synchronised by default.

When the element uses flexbox, teal handles between its children adjust gap.

A corner handle adjusts border radius, a rotation handle sits at the top-left, and a resize handle at the bottom-right scales the element. See keyboard shortcuts for modifiers.

Variants

When you're short of inspiration, you can simply ask for ideas. Select an element and click the Generate variants button to produce three to five design alternatives. Add an image or custom prompt to guide the design direction.

Variants are exploratory: nothing is written to source until you accept one. You can iterate on a favourite by selecting it and asking for more, or commit the winner and discard the rest.

Variants follow your existing design system. They reuse your CSS variables, type scale and spacing tokens, so each alternative sits inside the same visual language as the rest of the page rather than reinventing it.

Images

The paperclip icon in the chat action row lets you attach screenshots or reference images. Use it for prompts like "make this section look like this screenshot", or to feed your agent a mood board.

Responsive design

Toggle responsive mode with ⌥B and resize the canvas to a narrower preset. With one or more elements attached to the chat, an Adapt for viewport button appears on the right of the action row. Click it to spawn a task that rewrites the attached elements for the current viewport, adjusting layout, sizing, and typography as needed.