Designer MCP
Shared types
The layer fields, fills, flows, strokes and effects that several designer tools take.
Layer fields
The fields of a layer in create_layers and of a change in update_layers. Only type is required, and only on create.
| Field | Type | Description |
|---|---|---|
type | string | frame (a box with children and an optional flow), group, text, rectangle, ellipse, line, image or vector. |
id | string | An id you choose, unused on the page; generated when omitted. |
name | string | The layer's name, and the input's label in batches. Name layers by role ("Headline", "CTA"). |
children | layer[] | Create only: the layers inside a frame or group. |
x, y | number | Position relative to the parent. Ignored inside a flow unless absolute. |
width, height | number | Size. |
rotation | number | Degrees clockwise about the centre. |
skew | number | Lean in degrees, -80 to 80; a positive value tips the top right. |
visible, opacity | boolean, number | Visibility; opacity 0 to 1. |
blend_mode | string | normal, darken, multiply, color_burn, linear_burn, lighten, screen, color_dodge, linear_dodge, overlay, soft_light, hard_light, difference, exclusion, hue, saturation, color, luminosity, pass_through, print_light, knockout (cuts this layer's shape out of the layers below it in its group), fill_below (paints only where the layers below it in its group are). |
constraints | {horizontal, vertical} | How the layer follows a resized parent: horizontal left, right, center, left_right, scale; vertical top, bottom, center, top_bottom, scale. Not for layers a flow places. |
absolute | boolean | Inside a flow: take the layer out of it and place it by x/y. |
flow | flow | Frames: arrange the children in a row or column. |
padding | number | [v, h] | [t, r, b, l] | {top, right, bottom, left} | Frames: inner spacing. |
clip | boolean | Frames: hide children that overflow. |
sizing | {horizontal, vertical} | Inside a flow: each fixed, hug (fit the content) or fill (the space left). |
min_width, max_width, min_height, max_height | number | Limits for hug and fill sizing; 0 clears one. |
fill | fill | One fill, replacing all fills; on text, the text colour. "none" removes fills. |
fills | fill[] | Several fills, painted bottom to top. |
stroke | stroke | Outline; width: 0 removes it. |
radius | number | [tl, tr, br, bl] | Corner radius. |
shadows | {x, y, blur, spread, color, inner}[] | Replaces the shadows; [] removes them. The first lies farthest back and the last nearest the layer, the reverse of CSS. Colour defaults to #00000040. |
blur, background_blur | number | Blur of the layer, or of what is behind it (frosted glass), px; 0 removes it. |
mask | string | Mask the layers above in the same parent: alpha, vector, luminance, alpha_inverted, luminance_inverted or none. |
glass, noise, texture, progressive_blur | effect | Liquid glass, film grain, torn edges, and a blur that grows across the layer. |
text | string | Text content, as one run in the current style. |
runs | text run[] | Differently styled runs (one highlighted word). Each run has text and any text style field below. |
font_family, font_style, font_weight, font_size, italic | string, string, integer, number, boolean | The font. font_family must come from list_fonts; font_style such as "Bold Italic", or font_weight 100 to 900. |
font_axes | Record<string, number> | Variable-font axes, e.g. {"wght": 640}; {} clears them. |
color | string | Text colour as hex; wins over fill on text. |
gradient | gradient | A gradient on the text instead of a solid colour. |
line_height | number | string | px (4 or more), a percentage like "120%", or "auto". |
letter_spacing | number | string | px, or a percentage of the size like "-2%". |
align, vertical_align | string | left, center, right, justified; top, center, bottom. |
text_sizing | string | fixed (wraps and clips), auto_height (wraps, grows down) or auto_width (one line, grows to fit). |
shrink_to_fit | boolean | {min_scale} | Text in a fixed box: shrink until it fits, down to min_scale of the size (0.5). |
wrap | string | balance evens line widths (headlines), pretty avoids a one-word last line, normal fills lines. |
min_last_line_words | integer | Fewest words a paragraph may end on. |
max_lines | integer | Most lines shown; longer text ends in an ellipsis, and auto_height text grows up to it. 0 clears. |
text_case | string | original, upper, lower or title. |
decoration, decoration_style | string | underline, strikethrough, both, or none; solid, dotted, dashed, wavy, double. |
list, paragraph_spacing, paragraph_indent | string, number, number | Paragraphs as bullets, numbers or none; space before each, and first-line indent, px. |
figures, features | string, object | Digit style (default, lining, oldstyle, tabular, tabular_lining); OpenType ligatures, contextual_alternates, fractions, superscript, subscript. |
text_effect | {preset, color?, intensity?} | One-click effect on text: shadow, lift, hollow, splice, echo, glitch, neon, outline, sticker, gradient, extrude (solid 3D depth behind the letters, shading darker as it recedes, on a soft ground shadow; color is the side colour, angle the way the depth runs in degrees clockwise from right, 45 by default; a stroke sent with it outlines the face and the depth together), background (create only: a pill behind the text) or none. intensity scales offsets, blurs and strokes (1 by default, 0.5 subtle, 2 strong). The text stays one layer. |
text_path | boolean | {path, start, align} | Lay the text along an SVG path in the layer's own px. start is where the text sits along the path, 0 to 1 (0 by default); align (start, center or end) says which part of the line sits there; false removes it. For text on an arc, make the path with shape_path text_arc. |
outlines | {color, width}[] | Text: rings outside the stroke, innermost first, each width px thick (white then dark makes a double outline); [] removes them. |
contours | {inset, style, ...}[] | Text: dots (size, spacing, colors) or a line (width, color) along the letters' own shape. inset is the distance from the letter edge, above 0 inside and below 0 outside; lengths are fractions of the font size. [] removes them. |
text_warp | {kind, amount} | Text: bend the lettering. arch (positive curves up, negative sags), bulge (positive makes the middle taller, negative the ends), flag (a wave), perspective (positive narrows the top), bounce (each letter tilted and lifted, like hand lettering) or none. amount -1 to 1, 0.5 by default. |
leading_trim | string | cap_height (the box hugs cap height to baseline) or none. |
baseline_shift | number | On a run: px up (+) or down (-), line kept. |
ring | boolean | {radius, tilt, perspective, back_opacity, start} | Lay the text on a ring in perspective; false removes it. |
image | string | Image layers: a key from find_images, or an https URL (copied into the workspace). |
fit | string | fill (cover, cropping), fit (inside, leaving space), stretch or tile. |
anchor | string | With fit: "fit": the edge or corner the picture sits against when its shape differs from the box: center (default), top, bottom, left, right, top-left, top-right, bottom-left or bottom-right. Lines products of different shapes up across rows. |
place | string | Image layers: box (default) or subject. With subject, x, y, width and height are the box the cut-out's visible subject fills, and the layer grows to fit the file around it (fit becomes fill unless given). With both sizes the subject is centred in the box. An image with no transparent margins is placed by its box, with a note. |
zoom, focus, tile_scale | number, [x, y], number | Zoom into the image (1 as fitted); the point to centre, 0 to 1; tile size as a multiple of the image. |
filters | object | Photo adjustments, each −1 to 1: exposure, contrast, saturation, temperature, tint, highlights, shadows. |
paths | string[] | Vector layers: SVG path data in the layer's own px, one per sub-shape. width and height are the box of the data. |
Fill
A fill is one of:
- A colour:
"#FF5A1F","#FF5A1F80","white"or"none"; or{color, opacity}. - A gradient, flat or as
{gradient: {...}}:type(linear,radial,angular,diamond),stops(required: colours spread evenly, or{color, at}withat0 to 1),angle(linear: 0 left to right, 90 top to bottom),fromandto(linear points),center,radius(0.5 touches the edges),repeat(none,repeat,mirror),opacityandinterpolation: how colours blend between stops,oklab(the default, keeps midpoints bright),oklch(also keeps colourfulness, turning through hue) orsrgb(as imported designs blend). Points are fractions of the layer's box. - An image:
{image, fit, anchor, zoom, focus, opacity, tile_scale, filters}, withimageanhttpsURL or a key.
Flow
A frame's layout flow arranges its children; fields left out keep their values.
| Field | Values |
|---|---|
direction | row, column, wrap (a row that wraps), or none to remove the flow. |
gap, row_gap | Space between children, and between rows of a wrap, px. |
align | Along the flow: start, center, end, space_between, space_around, space_evenly. |
cross_align | Across the flow: start, center, end, stretch, baseline. |
row_align | Wrap only: start, center, end, space_between, space_around. |
width, height | fixed keeps the frame's size; hug grows and shrinks with the children. |
Stroke
width (px; 0 removes it; a new stroke defaults to 1), color (a new stroke defaults to black) or gradient, align (inside, center, outside), dashes ([6, 4]; [] is solid), cap (none, round, square), join (miter, round, bevel), miter_limit, and sides ([top, right, bottom, left] widths, such as [0, 0, 2, 0] for a bottom rule).
Effects
Each effect takes its settings, true for the defaults, or false to remove it.
| Effect | Settings (defaults) |
|---|---|
glass | depth (24), refraction (0.5), dispersion (0.2), radius (8, frost), light_angle (0), light_intensity (0.72) |
noise | kind (mono, duo, multi), color (#00000040), second_color, density (0.5), size (1), opacity (1) |
texture | size (4), depth (4), clip (true), self_only (false: fray only a frame's own fill) |
progressive_blur | radius (required), start_radius (0), from ([0.5, 0]), to ([0.5, 1]), background (false) |
Was this page helpful?
Updated 5 Nov 2026