Quick Design’s design format: make designs with AI or code

A first design

This is a whole poster: a preset size, a gradient background, a soft circle, three pieces of text, an emoji and a line. Positions and sizes are pixels from the top left of the page, and elements later in the list sit on top.

{
  "v": 1, "name": "Bake Sale", "size": "poster",
  "pages": [
    {
      "bg": {"g": ["#fff4e6", "#ffd8a8"], "a": 180},
      "els": [
        {"t": "shape", "sh": "circle", "x": 1150, "y": -250, "w": 900, "h": 900, "fill": "#ff922b", "o": 0.25},
        {"t": "text", "txt": "CHARITY", "x": 150, "y": 300, "w": 1500, "fs": 70, "ff": "Montserrat", "fw": 900, "c": "#d9480f", "ls": 30},
        {"t": "text", "txt": "Bake Sale", "x": 150, "y": 420, "w": 1500, "fs": 300, "ff": "Pacifico", "c": "#5c2d0b", "ef": "lift", "efc": "#d9480f", "an": "rise"},
        {"t": "emoji", "e": "🧁", "x": 700, "y": 1000, "w": 400, "h": 400, "an": "pop"},
        {"t": "text", "txt": "Saturday 10 April · 10am – 2pm\nSt Mary’s Hall, Willow Road", "x": 150, "y": 1550, "w": 1500, "fs": 80, "ff": "Inter", "fw": 700, "c": "#5c2d0b", "lh": 1.4},
        {"t": "line", "x": 750, "y": 1830, "w": 300, "h": 20, "c": "#d9480f", "sw": 8},
        {"t": "text", "txt": "Every penny goes to the Elm Park Animal Rescue", "x": 150, "y": 1920, "w": 1500, "fs": 56, "ff": "Inter", "c": "#7a4a24"}
      ]
    }
  ]
}

Open this poster in Quick Design: it opens as “A design was shared with you”, and Use this template makes it your own design to edit.

Opening a design

1. In a link. Put the JSON, URL-encoded, after https://www.yuzool.com/quick-design/#j=. In JavaScript: 'https://www.yuzool.com/quick-design/#j=' + encodeURIComponent(JSON.stringify(design)). The part after # never reaches a server, so the design stays between you and the person you send it to. Base64url-encoded JSON works after #j= too.
2. By pasting. In Quick Design open Settings › Import a design and paste the JSON or a link.
3. Back out again. Share › Copy as design JSON gives you any design in this format, to keep, change in code or hand to an assistant. Share’s template link (#d=) is the same JSON compressed.

Making designs with an AI assistant

Any assistant that can write JSON can make a Quick Design design. Give it this page’s address and say what you want, for example:

Read https://www.yuzool.com/quick-design/design-format/ and write a Quick Design
design for an Instagram post announcing our book club's first meeting: Thursday
3 December, 7pm, at the Corner Café. Warm colours, a big serif headline, a book icon.
Give me the #j= link.

Open the link it gives you, or paste its JSON into Settings › Import a design. Then change anything by hand, or copy the design JSON back to the assistant and ask for changes. The machine-readable version of this page is the JSON Schema at /quick-design/design-format.schema.json, and every template and list is in /quick-design/templates.json.

The MCP server

Quick Design has a free remote MCP server at https://www.yuzool.com/mcp/quick-design (Streamable HTTP, no key, no account, nothing stored). An assistant that supports MCP can use it to list the templates, fill one in, or check a design it wrote, and it gets back a link to give you.

• Claude: Settings › Connectors › Add custom connector, name it Quick Design and give the URL https://www.yuzool.com/mcp/quick-design. Then ask Claude for a poster, a post or a slide.
• Other MCP clients: add a remote (HTTP) server with the same URL.

The design and its pages

Elements

Every element has a type t and a box: x and y for its top left corner, w and h for its size, all in pixels. These work on any element:

Text

Shapes, lines, icons and emoji

Photo frames and drawings

Fonts, icons and shapes

Fonts (with their weights): Inter 400/700/900, Poppins 400/600/800, Montserrat 400/700/900, Playfair Display 400/700/900, Bebas Neue 400, Anton 400, Pacifico 400, Lobster 400, Dancing Script 400/700, Abril Fatface 400, Oswald 400/700, Raleway 400/800, Lora 400/700, DM Serif Display 400, Space Grotesk 400/700, Archivo Black 400, Righteous 400, Caveat 400/700, Shrikhand 400, Syne 400/800, Fraunces 400/900, Bricolage Grotesque 400/800, Josefin Sans 400/700, Permanent Marker 400, Great Vibes 400, Cormorant Garamond 400/700, Rubik 400/800, Bungee 400, Unbounded 400/800, Libre Baskerville 400/700.

Icons (119): heart star check x plus minus arrow-right arrow-left arrow-up arrow-down chevron circle square triangle home user users mail phone camera music sun moon cloud rain bolt leaf flower tree coffee cake gift bell calendar clock pin globe search sliders lock key cart bag tag dollar chart trend pie trophy crown flag bookmark book pen brush scissors wifi battery play pause mic headphones video image smile thumbs chat send link share download upload trash eye fire drop snow anchor plane car bike rocket diamond sparkle award target paw pizza apple wine building briefcase graduation bulb code quote infinity compass map mountain wave palette dumbbell pulse shield info alert question grid menu at hash percent gem ticket film gamepad dna feather.

Shapes: rect rounded circle tri rtri diamond pent hex oct star burst heart arrow pill blob arch plus bubble ring halfcircle. Photo frames: rect rounded circle arch blob heart star hex diamond pill tri burst.

What Quick Design changes when it opens a design

• Anything it doesn’t know is left out or replaced. Unknown fields are dropped, an unknown font becomes Inter, an unknown shape or frame a rectangle, and an element of an unknown type or with an unknown icon is left out. You’re told how many parts were changed (the browser’s console lists them, and the MCP server returns them as warnings).
• Numbers are kept in range. Pages 16 to 8000 pixels, at most 30 pages, 200 elements a page and 2000 in all, text up to 2000 characters.
• Colours must be colours. Anything that isn’t a CSS colour or a two-colour gradient is replaced, and nothing in a design can carry a web address or HTML.