# 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…

Source: https://mockflow.com/developers/reference/item-types/design

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

- `title` (string): Short design name shown as the frame title
- `w` (number, required): Canvas width in px
- `h` (number, required): Canvas height in px
- `bg` (string | object): Page background: "#rrggbb" or a gradient object
- `bgImg` (object): Page picture behind everything {"src","op"} (keep it when modifying)
- `look` (object): Shared look of pictures that belong together: {"style","cast":[{"id","description"}]} (keep it, with any "ref", when modifying)
- `els` (object[], required): The elements in drawing order (first at the back)
    - `id` (string): Only when modifying: the id of an element kept from the existing page
  - `type` (enum<string>, required): One of `text`, `shape`, `image`, `line`, `icon`, `chart`, `table`, `qr` or `map`.
  - `x` (number, required)
  - `y` (number, required)
  - `w` (number, required)
  - `h` (number)
  - `rot` (number)
  - `op` (number)
  - `text` (string)
  - `font` (string)
  - `size` (number)
  - `weight` (number)
  - `color` (string)
  - `align` (enum<string>): One of `left`, `center` or `right`.
  - `lh` (number)
  - `ls` (number)
  - `upper` (boolean)
  - `italic` (boolean)
  - `shape` (string)
  - `fill` (string | object): "#rrggbb", "none", a gradient object or a pattern {"type":"pattern",...}; on text a gradient across the letters
  - `list` (enum<string>): Text: each line a list item. One of `bullet` or `number`.
  - `accent` (string): Text: the colour of ==marked== words
  - `stroke` (string | object): Shape/image outline colour, or for text {"color","w"}
  - `sw` (number)
  - `radius` (number)
  - `src` (string): Image: a picture URL, or "mfimg::" plus a description when this render includes imagery
  - `fit` (enum<string>): One of `cover` or `contain`.
  - `mask` (string)
  - `filter` (string)
  - `shadow` (object)
  - `icon` (string): Icon: a name from the icon list in the description (another word draws the closest)
  - `style` (string): Icon: solid | line. Line: straight | curve | elbow | wave | zigzag | sketch
  - `color2` (string): Icon: duotone second colour
  - `bend` (number): Line: how far a curve or elbow strays (-100..100)
  - `from` (string): Line: id of the element it starts at (a connector)
  - `to` (string): Line: id of the element it ends at (a connector)
  - `kind` (enum<string>): Chart kind. One of `column`, `grouped`, `stacked`, `bar`, `line`, `area`, `pie`, `donut`, `scatter`, `radar`, `heatmap`, `treemap`, `waffle`, `progress`, `ring` or `gauge`.
  - `data` (object[] | string): Chart: rows [{"label","value","values":[...],"x"}]. QR: the link or text it opens
  - `series` (string[]): Chart: the series names when rows carry "values"
  - `rows` (string[][]): Table: rows of cells, the first the header
  - `head` (boolean)
  - `headBg` (string)
  - `headColor` (string)
  - `stripe` (string)
  - `regions` (object[]): Map: [{"id":"US","value":27.4}] by ISO two-letter code
  - `pins` (object[]): Map: [{"lat","lng","label"}]
  - `focus` (string[]): Map: country codes to frame
  - `look` (enum<string>): Map: filled countries, a dotted map or outlines. One of `flat`, `dots` or `outline`.
  - `land` (string)
  - `low` (string)
  - `ink` (string)
  - `colors` (string[])
  - `track` (string)
  - `unit` (string)
  - `prefix` (string)
  - `max` (number)
  - `values` (boolean)
  - `labels` (boolean)
  - `g` (string): Group name: elements sharing one move and select together
  - `name` (string): The layer name shown in the layers panel
  - `deco` (enum<string>): One of `underline` or `strike`.
  - `bg` (string | object): Text: a box behind the words {"color","pad","radius"}. QR: the background colour. Icon: a badge {"shape","color"}
  - `dash` (enum<string>): One of `solid`, `dashed` or `dotted`.
  - `cap1` (enum<string>): One of `none`, `arrow`, `open`, `diamond`, `bar`, `round` or `circle`.
  - `cap2` (enum<string>): One of `none`, `arrow`, `open`, `diamond`, `bar`, `round` or `circle`.
  - `prompt` (string): Image: what the picture shows (kept for Fill images)
  - `cast` (string[]): Image: ids from the look's cast that appear in it
  - `ox` (number)
  - `oy` (number)
  - `zoom` (number)
  - `nw` (number)
  - `nh` (number)
  - `flipX` (boolean)
  - `flipY` (boolean)
  - `lock` (boolean)
  - `hidden` (boolean)

## Example

```json
{
  "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"
      }
    ]
  }
}
```