Design

Updated 9 Nov 20264 min read

Send "type": "design".

Create an editable graphic DESIGN (render_design) in a MockFlow IdeaBoard design frame: posters, flyers, banners, social posts and ads (Instagram, Facebook, LinkedIn, X, Pinterest, TikTok), YouTube thumbnails, menus, infographics, memes, podcast/album/book covers, product listing images, business cards, invitations, brand layouts. You write ONE page of positioned text, shapes, pictures and lines as JSON, never HTML or CSS; MockFlow draws it and the user edits every element afterwards. For UI screens use render_wireframe; for a single picture use render_image.

Also available as the MCP tool render_design. The same payload works through either surface.

Fields

data

titlestring

Short design name shown as the frame title

wnumberrequired

Canvas width in px

hnumberrequired

Canvas height in px

bgstring | object

Page background: "#rrggbb" or a gradient object

bgImgobject

Page picture behind everything {"src","op"} (keep it when modifying)

lookobject

Shared look of pictures that belong together: {"style","cast":[{"id","description"}]} (keep it, with any "ref", when modifying)

elsobject[]required

The elements in drawing order (first at the back)

Child attributes

idstring

Only when modifying: the id of an element kept from the existing page

typeenum<string>required

One of text, shape, image, line, icon, chart, table, qr or map.

xnumberrequired

ynumberrequired

wnumberrequired

hnumber

rotnumber

opnumber

textstring

fontstring

sizenumber

weightnumber

colorstring

alignenum<string>

One of left, center or right.

lhnumber

lsnumber

upperboolean

italicboolean

shapestring

fillstring | object

"#rrggbb", "none", a gradient object or a pattern {"type":"pattern",...}; on text a gradient across the letters

listenum<string>

Text: each line a list item. One of bullet or number.

accentstring

Text: the colour of ==marked== words

strokestring | object

Shape/image outline colour, or for text {"color","w"}

swnumber

radiusnumber

srcstring

Image: a picture URL, or "mfimg::" plus a description when this render includes imagery

fitenum<string>

One of cover or contain.

maskstring

filterstring

shadowobject

iconstring

Icon: a name from the icon list in the description (another word draws the closest)

stylestring

color2string

Icon: duotone second colour

bendnumber

Line: how far a curve or elbow strays (-100..100)

fromstring

Line: id of the element it starts at (a connector)

tostring

Line: id of the element it ends at (a connector)

kindenum<string>

Chart kind. One of column, grouped, stacked, bar, line, area, pie, donut, scatter, radar, heatmap, treemap, waffle, progress, ring or gauge.

dataobject[] | string

Chart: rows [{"label","value","values":[...],"x"}]. QR: the link or text it opens

seriesstring[]

Chart: the series names when rows carry "values"

rowsstring[][]

Table: rows of cells, the first the header

headboolean

headBgstring

headColorstring

stripestring

regionsobject[]

Map: [{"id":"US","value":27.4}] by ISO two-letter code

pinsobject[]

Map: [{"lat","lng","label"}]

focusstring[]

Map: country codes to frame

lookenum<string>

Map: filled countries, a dotted map or outlines. One of flat, dots or outline.

landstring

lowstring

inkstring

colorsstring[]

trackstring

unitstring

prefixstring

maxnumber

valuesboolean

labelsboolean

gstring

Group name: elements sharing one move and select together

namestring

The layer name shown in the layers panel

decoenum<string>

One of underline or strike.

bgstring | object

Text: a box behind the words {"color","pad","radius"}. QR: the background colour. Icon: a badge {"shape","color"}

dashenum<string>

One of solid, dashed or dotted.

cap1enum<string>

One of none, arrow, open, diamond, bar, round or circle.

cap2enum<string>

One of none, arrow, open, diamond, bar, round or circle.

promptstring

Image: what the picture shows (kept for Fill images)

caststring[]

Image: ids from the look's cast that appear in it

oxnumber

oynumber

zoomnumber

nwnumber

nhnumber

flipXboolean

flipYboolean

lockboolean

hiddenboolean

Example

{
  "type": "design",
  "data": {
    "title": "Q4 Launch Planning",
    "w": 0,
    "h": 0,
    "bg": "string",
    "bgImg": {},
    "look": {},
    "els": [
      {
        "id": "string",
        "type": "text",
        "x": 0,
        "y": 0,
        "w": 0,
        "h": 0,
        "rot": 0,
        "op": 0,
        "text": "Interview 5 users",
        "font": "string"
      }
    ]
  }
}

Was this page helpful?