Crea códigos diseñados
Auto Design a partir de un sitio web, una plantilla guardada, el Brand Kit o negro sobre blanco simple, más un logo en el centro, todo desde un solo POST.
Un código creado desde la API puede verse como uno hecho en el editor. POST /codes acepta un design, y el servidor ejecuta el mismo motor de Auto Design que usa el panel, así que nada se deja en un "aspecto predeterminado" a menos que lo pidas.
Los cuatro tipos
design | Qué obtienes | Plan |
|---|---|---|
{ "kind": "auto" } | Los colores de marca del sitio web de destino, leídos de su hoja de estilos y de su imagen de marca, convertidos en un código diseñado. Agrega url para leer otro sitio, o palette para saltarte la detección. | PRO |
{ "kind": "template", "templateId": "..." } | Una copia de una plantilla guardada o del sistema, de GET /templates. templateId en el nivel superior sigue funcionando como atajo. | Cualquiera |
{ "kind": "brand" } | El Brand Kit del espacio de trabajo: sus colores como paleta y su logo en el centro. | PRO |
{ "kind": "plain" } | Negro sobre blanco, sin marco. Es lo mismo que omitir design. | Cualquiera |
Auto Design siempre produce un resultado escaneable: los colores de cada variante se revisan con las reglas de contraste que aplica el editor. La respuesta informa lo que se aplicó:
{
"id": "K02bEPC2SmtopwPr6S-jt",
"previewUrl": "https://cdn.kuikcode.com/.../preview/Ab3dE9xYz.png",
"design": { "kind": "auto", "archetype": "framedText", "palette": ["#0f766e", "#f59e0b"], "scanVerified": true },
"warnings": []
}warnings incluye todo lo que la API tuvo que decidir por ti, por ejemplo "Could not read that website's colors, so the Brand Kit colors were used." Transmíteselas a la persona que lo pidió.
Elige primero una variante
POST /design/auto genera cuatro variantes para un sitio o una paleta sin crear nada:
{ "url": "https://example.com", "batch": 0 }Cada variante tiene un index, un archetype (clean, branded, shader, bgGradient, framedText, inverted, playful, wild, bw) y una previewUrl de 512 px. Envía la que te guste como design: { "kind": "auto", "url": "https://example.com", "batch": 0, "index": 2 }. Aumenta batch para obtener otro conjunto de cuatro con los mismos colores. Las vistas previas y las creaciones con diseño comparten un presupuesto de doce por minuto por clave.
Tus colores en cualquier diseño
Todos los tipos de diseño excepto brand aceptan colors, de uno a ocho valores hexadecimales con el más importante primero. Los colores propios del diseño terminado (primero el patrón, luego los ojos y luego el marco) se cambian uno por uno, y la composición se queda exactamente igual:
{ "design": { "kind": "template", "templateId": "tpl_3f9a", "colors": ["#456566", "#f59e0b"] } }Lo mismo funciona en POST /design/auto con un index, para ver una variante con los colores cambiados antes de crearla, y en PATCH /codes/{id} como colors, para cambiar los colores de un código guardado. El primer color se vuelve la tinta, así que tiene que alcanzar un contraste de 4.5:1 sobre blanco; uno más claro se rechaza con la relación medida, en lugar de guardarse como un código que no se puede escanear.
Ajustes finos
design.shape define una forma redonda o cuadrada para el código y su marco. design.tweaks ajusta el diseño terminado como lo hacen las tarjetas Marco, Patrón, Ojos y Bordes del editor, y solo cambian los campos que envías:
{
"design": {
"kind": "auto", "url": "https://example.com", "batch": 0, "index": 1,
"shape": "square",
"tweaks": {
"frame": { "gradient": ["#b8860b", "#f5d27a"], "thickness": 65, "topText": "SCAN", "bottomText": "TAP ON SCREEN", "repeatedShape": "star", "ring": { "color": "#1e2a4a", "thickness": 20 } },
"dots": { "type": "rounded" },
"eyes": { "look": "leaf" },
"border": { "style": "dotted" },
"edge": "stamp"
}
}
}eyes.look acepta los Estilos de ojos del editor (square, rounded, circle, dot, diamond, drop, petal, leaf); innerShape, followFrame y los dos interruptores de esquinas rectas lo afinan. dots.toEdge es la opción Puntos hasta la orilla del editor, para códigos redondos y poligonales.
Los mismos shape y tweaks funcionan en PATCH /codes/{id} para un código guardado. Para ver cualquier diseño antes de guardarlo, POST /design/preview con el mismo objeto design devuelve una imagen generada y las advertencias que tendría la creación.
Un logo en el centro
Envía logo en POST /codes o PATCH /codes/{id}, por URL o como bytes:
{ "logo": { "url": "https://example.com/logo.png" } }{ "logo": { "data": "<base64>", "contentType": "image/png" } }PNG, JPEG, WebP y SVG de hasta 5 MB. La imagen se guarda en la Biblioteca del espacio de trabajo como cualquier archivo subido desde el editor (los archivos de mapa de bits se vuelven a codificar en WebP con su tamaño completo en píxeles) y se pone como logo central del código. Un logo pequeño vuelve con una advertencia que indica el ancho de impresión máximo en el que se mantiene nítido. "logo": null en un PATCH quita el logo central.
Miniaturas y diseño final
Cada código creado o rediseñado desde la API recibe la miniatura de 300 px que muestra el panel en sus listas, en previewUrl. Para imprimir, GET /codes/{id}/image genera el diseño terminado como PNG, JPG o SVG en cualquier tamaño de hasta 4096 px.