Panel Spec Designer

Responsive by design · use Phone preview to reflow

Calibrating text metrics…

Rendering

Start with a screen Pick a template above — or drag a component from the left

Account

Project

Ready

Properties

Click something to edit

Labels, fields, and buttons edit here — then Generate.

Label

Link to page

Pick a page for navigation in Preview.

Size, pin, and visibility for this component. Expert controls stay collapsed.

Orientation & size

Portrait intent

Landscape intent

Cross-device width

Cross-device height

Pin top (CSS top / safe area) Pin bottom (CSS bottom) Pin leading (CSS left) Pin trailing (CSS right)

Horizontal justify

Min width (px)

Max width (px)

Min height (px)

Max height (px)

Lock aspect ratio Fluid type (clamp / vw)

Containing block

Peer flow

Align self

Order

Sticky edge

Object fit

Subgrid (inherit parent tracks)

Overflow

Host style var

Scroll snap type

Scroll snap align

@media max-width

@media min-width

@media orientation

@container max-width

@container min-width

@container style()

@container scroll-state

These write layoutConstraints + css — preview and AI use the same responsive rules.

Visible in

Viewport

How this panel exports for rotation and reflow.

Layout strategy

Orientations