KuikCodeDocs
APIGuides

Create designed codes

Auto Design from a website, a saved template, the Brand Kit, or plain black on white, plus a logo in the center, all from one POST.

A code created through the API can look like one made in the editor. POST /codes takes a design, and the server runs the same Auto Design engine the dashboard uses, so nothing is left to a "default look" unless you ask for it.

The four kinds

designWhat you getPlan
{ "kind": "auto" }The destination website's brand colors, read from its stylesheet and brand image, turned into a designed code. Add url to read a different site, or palette to skip discovery.PRO
{ "kind": "template", "templateId": "..." }A copy of a saved or system template from GET /templates. templateId at the top level still works as shorthand.Free
{ "kind": "brand" }The workspace Brand Kit: its colors as the palette, its logo in the center.PRO
{ "kind": "plain" }Black on white, no frame. The same as leaving design out.Free

Auto Design always produces a scannable result: every variant's colors are checked against the contrast rules the editor enforces. The answer reports what was applied:

{
  "id": "K02bEPC2SmtopwPr6S-jt",
  "previewUrl": "https://cdn.kuikcode.com/.../preview/Ab3dE9xYz.png",
  "design": { "kind": "auto", "archetype": "framedText", "palette": ["#0f766e", "#f59e0b"], "scanVerified": true },
  "warnings": []
}

warnings carries anything the API had to decide for you, for example "Could not read that website's colors, so the Brand Kit colors were used." Relay them to the person who asked.

Choose a variant first

POST /design/auto renders four variants for a site or palette without creating anything:

{ "url": "https://example.com", "batch": 0 }

Each variant has an index, an archetype (clean, branded, shader, bgGradient, framedText, inverted, playful, wild, bw) and a 512 px previewUrl. Pass the one you like as design: { "kind": "auto", "url": "https://example.com", "batch": 0, "index": 2 }. Increase batch for a different set of four from the same colors. Previews and designed creates share a budget of twelve per minute per key.

Your colors on any design

Every design kind except brand takes colors, one to eight hex values with the most important first. The finished design's own colors (pattern first, then eyes, then frame) are swapped one for one, and the layout stays exactly as it was:

{ "design": { "kind": "template", "templateId": "tpl_3f9a", "colors": ["#456566", "#f59e0b"] } }

The same works on POST /design/auto with an index, to see one variant recolored before creating it, and on PATCH /codes/{id} as colors, to recolor a saved code. The first color becomes the ink, so it has to reach 4.5:1 on white; a lighter one is refused with the measured ratio rather than saved as an unscannable code.

A logo in the center

Send logo on POST /codes or PATCH /codes/{id}, by URL or as bytes:

{ "logo": { "url": "https://example.com/logo.png" } }
{ "logo": { "data": "<base64>", "contentType": "image/png" } }

PNG, JPEG, WebP and SVG up to 5 MB. The image is stored in the workspace Library like an editor upload (raster files are re-encoded to WebP at full pixel size) and set as the code's center logo. A small logo comes back with a warning naming the widest print it stays sharp on. "logo": null on PATCH removes the center logo.

Thumbnails and artwork

Every code created or re-designed through the API gets the 300 px thumbnail the dashboard lists, in previewUrl. For print, GET /codes/{id}/image renders the finished design as PNG, JPG or SVG at any size up to 4096 px.

On this page