styles.

Ask an agent to

• Put my screenshot in a device frame on a gradient
• Add a new artboard and align its layers
• Apply a magic look to the current design

52 tools

• styles_add_animation

  Adds an animation to a layer (target = layer id) or to the artboard camera (target = "@artboard", props camZoom, camX, camY, camRotation, camRx, camRy). Kinds: "preset" {preset…

  artboardId: string?, anim: object, replaceId: string?

• styles_add_annotation

  Adds a hand-drawn mark to point at part of a design: arrow-curve, arrow, arrow-loop, circle, underline, box, callout, cross, tick, sparkle. x/y is the centre, size its width in px (default 22% of the artboard), color…

  artboardId: string?, kind: string, x: number?, y: number?, size: number?, color: string?, width: number?, rotation: number?, … (list cut; the site may define more)

• styles_add_artboard

  Adds an artboard (one image or video when you export). Give a format id (x-16x9, x-1x1, x-4x5, x-9x16, x-header, ig-post, ig-square, ig-story, ...) or a width and height. Optionally copy another artboard.

  format: string?, width: integer?, height: integer?, name: string?, duration: number?, copyFrom: string?

• styles_add_asset

  Registers an image or video (src is an https URL, or a data: URL for small files) so layers and devices can use it by id. Returns the asset id.

  id: string?, kind: string, name: string?, mime: string, width: number?, height: number?, duration: number?, src: string, … (list cut; the site may define more)

• styles_add_audio

  Adds a sound to the artboard timeline from an audio asset (register it with add_asset kind "audio" first): start (ms on the artboard), trimStart (ms into the file), length (ms, 0 = to the end), volume 0..1, fadeIn and…

  artboardId: string?, track: object

• styles_add_cursor

  Adds a mouse pointer that glides from stop to stop (artboard px; the tip lands on each), pausing and clicking at each one with a ripple, like a screen recording. stops: 2 to 12 points (default: from the lower left to…

  artboardId: string?, stops: array?, start: number?, moveMs: number?, pauseMs: number?, click: boolean?, size: number?, theme: string?, … (list cut; the site may define more)

• styles_add_instance

  Places a linked component at its own size, centred by default. Returns instanceId.

  artboardId: string?, componentId: string, x: number?, y: number?, width: number?, height: number?

• styles_add_layer

  Adds a layer on top (or at index, or inside a group). Types: text, rect, ellipse, star, path, image, video, device, code, chart, group, instance. x/y is the CENTRE in artboard px. Missing fields get good defaults.…

  artboardId: string?, layer: object, parentId: string?, index: integer?

• styles_add_media_from_url

  Downloads an image or video from an https URL into the design (stored in this browser) and places it in the selected or first empty device, or as a new layer.

  url: string

• styles_align_layers

  Aligns layers to the artboard (one layer) or to each other (several): left, hcenter, right, top, vcenter, bottom. Or distributes them evenly: hdistribute, vdistribute.

  artboardId: string?, layerIds: array, align: string

• styles_apply_brand

  Restyles the whole design with a brand: colors (1 to 5 accent colours, most important first), ink (darkest), paper (lightest), head and body fonts ({family, weight}). Saturated colours become the accents (each…

  colors: array, ink: string?, paper: string?, head: object?, body: object?

• styles_apply_layout

  Arranges the artboard's devices with a layout (adding or removing devices to match its count): center (1), hero (1), low (1), turn-left (1), turn-right (1), lean-back (1), flat-lay (1), tilt (1), closeup (1), peek…

  artboardId: string?, layout: string

• styles_apply_template

  Replaces the design with a template (undo brings the old one back). Media already in the design is kept.

  id: string

• styles_auto_animate

  Replaces the artboard's animations with a full choreography: entrances in reading order, life on screen, a camera move and (for some moods) exits. Moods: smooth (Calm rises and slow drifts.) bold (Sharp reveals with…

  artboardId: string?, mood: string?, seed: integer?

• styles_clear_animations

  Removes every animation from an artboard (or from one layer).

  artboardId: string?, layerId: string?

• styles_copy_design

  Makes this design its own copy, with a new id and a name ending in (copy).

• styles_delete_animations

  Deletes animations by id.

  artboardId: string?, animIds: array

• styles_delete_artboard

  Deletes an artboard. The last scene cannot be deleted.

  artboardId: string

• styles_delete_audio

  Removes a sound from the timeline.

  artboardId: string?, trackId: string

• styles_delete_component

  Removes a component. Refuses while instances exist unless detach is true, which makes them independent first.

  componentId: string, detach: boolean?

• styles_delete_layers

  Deletes layers (and their animations).

  artboardId: string?, layerIds: array

• styles_detach_instance

  Replaces an instance with an independent group and its motion, with new layer ids. Returns layerId.

  artboardId: string?, layerId: string

• styles_duplicate_layers

  Duplicates layers with their animations, offset by (dx, dy) px (default 24, 24). Returns the new ids.

  artboardId: string?, layerIds: array, dx: number?, dy: number?

• styles_export_image

  Exports the current artboard as an image file the person downloads (png, jpg or webp, scale 1 to 4).

  format: string?, scale: number?

• styles_get_documentread-only

  Returns the whole design as JSON: artboards (size, duration, background), their layers (bottom to top) and animations. Read this before editing so you use real ids.

• styles_group_layers

  Puts layers (siblings) into a new group. Children keep their place on the artboard. mask: true makes the bottom one a mask, so the others show only inside its shape (an image inside text, a reveal through a moving…

  artboardId: string?, layerIds: array, name: string?, mask: boolean?

• styles_import_svg

  Turns SVG markup (a logo, an icon, a Figma "Copy as SVG") into editable path layers, one per shape, in a group you can animate shape by shape (stagger, draw the strokes with trim, morph). Fills, strokes, gradients…

  artboardId: string?, svg: string, x: number?, y: number?, size: number?, name: string?

• styles_list_backgroundsread-only

  Lists background presets (id, name, collection). Use the returned `bg` object with update_artboard {background}.

  collection: string?

• styles_list_componentsread-only

  Lists each component id, name, width, height and number of instances across the design.

• styles_list_devicesread-only

  Lists device models (id, name, category, finishes) for device layers.

• styles_list_layersread-only

  Lists the layers of an artboard (id, type, name, box) from bottom to top, flattened, with their parent group.

  artboardId: string?

• styles_list_templatesread-only

  Lists templates (id, name, category, format). Apply one with apply_template.

  category: string?

• styles_magic_look

  Restyles a mockup in one go from the screenshot's own colours: a matching background, a layout that suits the screen and a shadow. Change seed for another take.

  artboardId: string?, seed: integer?

• styles_make_component

  Moves selected layers and their motion into a linked component, replacing them with an instance. Like Group, uses selected siblings in the first selected layer's parent and leaves other parents alone. Adjacent layers…

  artboardId: string?, layerIds: array, name: string?

• styles_make_sizes

  Copies an artboard into other formats (x-16x9, x-1x1, x-4x5, x-9x16, x-header, ig-post, ig-square, ig-story, ...), each as a new artboard. Layers keep their place relative to the artboard and scale so nothing…

  artboardId: string?, formats: array

• styles_morph_to

  Smart animate: animates this artboard into another one. Layers are matched by name and type; matched layers move, resize, turn, fade and change colour to match, text changes, new layers fade in and missing ones fade…

  artboardId: string?, toArtboardId: string, start: number?, length: number?, easing: object?

• styles_move_artboard

  Moves an artboard to a new position in the list.

  artboardId: string, index: integer

• styles_paste_layers

  Pastes layers with their animations, media and linked components into an artboard with new layer ids, offset by (dx, dy). Identical components are reused; conflicting component ids are remapped without changing…

  artboardId: string?, layers: array?, anims: array?, assets: object?, components: array?, dx: number?, dy: number?, animsOnly: boolean?, … (list cut; the site may define more)

• styles_play

  Plays or pauses the animation preview, or moves the playhead to t ms.

  playing: boolean?, t: number?

• styles_rename_component

  Changes a component name.

  componentId: string, name: string

• styles_reorder_layer

  Moves a layer in the stack: to "front", "back", "forward", "backward", or a numeric index (0 = bottom).

  artboardId: string?, layerId: string, to

• styles_see_designread-only

  Returns a picture of the current artboard (at time t ms, default the playhead) so you can check your work.

  t: number?, size: number?

• styles_select_artboard

  Shows an artboard in the editor.

  artboardId: string

• styles_set_document

  Sets the design name, the "made with styles" credit mark on exports (on by default), 3D mode, or your own mark (watermark): mark = { text, assetId (an image asset, for a logo), corner bl|br|tl|tr|bc, size, opacity…

  name: string?, credit: boolean?, mode3d: boolean?, mark?, film: object?

• styles_shift_animations

  Moves animations in time by `by` ms, or staggers them: each next one (in the given order) starts `stagger` ms after the previous.

  artboardId: string?, animIds: array, by: number?, stagger: number?

• styles_ungroup

  Dissolves a group, keeping its children where they are.

  artboardId: string?, layerId: string

• styles_update_animation

  Changes an animation: start, end (ms), easing, to/from, preset, mode, effect, split, muted.

  artboardId: string?, animId: string, patch: object

• styles_update_artboard

  Changes an artboard: name, width, height (or format id), duration (ms), fps, background, bgFx {noise, blur, vignette}, camera {zoom, x, y, rotation, rx, ry}, vfx {type, intensity}. Resizing lays the design out again…

  artboardId: string?, format: string?, name: string?, width: integer?, height: integer?, duration: number?, fps: integer?, background?, … (list cut; the site may define more)

• styles_update_audio

  Changes a sound on the timeline (start, trimStart, length, volume, fadeIn, fadeOut, loop).

  artboardId: string?, trackId: string, patch: object

• styles_update_instance

  Merges layer overrides and changes offset (ms), loop or the linked component. resetOverrides clears all overrides first; an empty layer override clears that layer.

  artboardId: string?, layerId: string, overrides: object?, offset: number?, loop: boolean?, componentId: string?, resetOverrides: boolean?

• styles_update_layer

  Changes any properties of a layer (position x/y is the centre, width, height, rotation, scale, opacity 0..1, rx/ry tilt in degrees, shadow, blur, fill, text, style, media, model, finish, frame...). Nested objects like…

  artboardId: string?, layerId: string, patch: object

• styles_update_layers

  Applies the same patch to several layers at once.

  artboardId: string?, layerIds: array, patch: object