Crea un diseño propio para tus widgets

#Qué es un diseño en Widgetry

Un diseño es un tema propio para tus widgets de MCP Apps: un conjunto de tokens de diseño --wg-* (colores, tipografía, forma, efectos) más un CSS opcional. En Widgetry, el diseño y el tipo de widget van por separado. El tipo (tablero, tabla, gráfico de barras, globo 3D) pone la estructura y el diseño pone la piel. Los estilos de un widget solo leen los tokens, así que cualquier tipo puede llevar cualquier diseño, y un diseño de marca se aplica a todos tus widgets de una vez. Puedes crearlo en el diseñador, desde Diseños, o pedírselo a un agente de IA a través de las tools MCP de Widgetry.

Esta guía trata la parte de Widgetry. Para saber cómo hosts como Claude y ChatGPT le pasan al widget su tema y sus variables CSS, lee temas en MCP Apps.

#Qué tokens puede fijar un diseño

Un diseño puede fijar 30 tokens, en los mismos siete grupos que el diseñador, con la etiqueta del diseñador entre paréntesis.

Lo que un diseño no fija lo pone el host: el texto toma el color de texto del chat, las tarjetas su fondo y la tipografía su fuente.

#Los veinte diseños de serie

Widgetry trae veinte diseños que puedes usar tal cual o como base:

• El de la casa, Widgetry: contorno negro, amarillo mantequilla y subrayado de rotulador en el título.
• Cinco clásicos: Nórdico, Aurora, Brutalista, Editorial y Neón.
• Catorce inspirados en marcas conocidas: Claude, Google, Microsoft, Apple, GitHub, Vercel, Supabase, Stripe, Linear, Notion, Figma, Spotify, Airbnb y Shopify. Toman colores, radios, pesos y carácter tipográfico, nunca logotipos.

Trece siguen el tema claro u oscuro del chat: Widgetry, Nórdico, Editorial, Apple, Claude, Figma, GitHub, Google, Microsoft, Notion, Stripe, Supabase y Vercel. Nórdico es el que más se pega al host: toma de él los colores de texto y de superficie. Los otros siete se quedan en un solo esquema: Aurora, Neón, Linear y Spotify son siempre oscuros, y Brutalista, Airbnb y Shopify siempre claros.

#Cómo crear tu diseño en el diseñador

Los propietarios y editores de una organización pueden crear, editar y borrar diseños. Los lectores solo los ven.

1. Abre Diseños en la barra superior. Los tuyos están en Tuyos y los veinte en De serie. La barra Ver los diseños con cambia el widget de muestra sobre el que se pinta cada tarjeta.
2. Elige una base y duplícala. Pulsa Duplicar en una tarjeta de serie, o ábrela y pulsa Duplicar para editar. La copia se llama "Mi Stripe" (o lo que fuera la base) y se abre el diseñador.
3. Ponle nombre en el campo de arriba. La clave del diseño, que es lo que guardan los widgets, sale del primer nombre y no cambia si lo renombras.
4. Cambia los tokens. El panel dice en qué diseño se basa: lo que no cambies lo hereda de él, y tus valores propios salen en negrita. Los heredados aparecen en gris en cada control, y la flecha junto a un valor tuyo lo devuelve al heredado. Los colores admiten selector o cualquier color CSS escrito a mano; las medidas son deslizadores; fuentes, sombra y caja de titulares son menús.
5. Cambia entre Chat claro y Chat oscuro encima de los controles (ver la sección siguiente).
6. Añade CSS avanzado si los tokens no llegan.
7. Revisa la vista previa. A la derecha se pinta tu diseño en seis tipos a la vez (Indicadores, Tablero, Gráfico de área, El tiempo, Anillos de progreso y Tarjeta aurora), con el tema que tengas elegido.

No hay botón de guardar. El diseñador guarda medio segundo después de cada cambio, y la cabecera dice Guardado, Sin guardar, Guardando o No guardado.

#Qué hereda de la base

Una copia conserva todo lo de su base que no pises: sus tokens, el CSS de su lienzo (el resplandor que se mueve en Aurora, las líneas de escaneo de Neón, el subrayado de rotulador del de la casa) y sus retoques por tipo. Los cinco clásicos tienen pequeños ajustes en los estilos de cada tipo de widget, escritos para ese diseño; tu copia los mantiene porque cada widget sigue diciéndole a sus estilos cuál es el diseño base. El de la casa y los inspirados en marcas funcionan solo con tokens. Si duplicas uno tuyo, la copia se lleva sus valores propios, su CSS y su base.

#Valores para el chat claro y el oscuro

Los valores de Chat claro son los generales: valen también cuando el chat está en oscuro, salvo que los cambies en Chat oscuro, que guarda los que solo se usan con el chat oscuro. Hay una trampa: si la base tiene su propio valor de noche para un token, ese valor sigue ganando en un chat oscuro. Stripe, por ejemplo, usa un acento más claro en oscuro, así que un acento cambiado solo en claro se ve solo en chats claros. Con una base que tiene versión de noche, pon también los colores de tu marca en Chat oscuro y mira la vista previa en ese modo.

#CSS avanzado

La caja CSS avanzado se añade después de los tokens, para fondos animados, texturas o cualquier cosa que los tokens no digan. Es parte del diseño, así que solo llega a los widgets que lo llevan, y puedes afinar un tipo concreto con sus clases. Dos reglas: admite hasta 50.000 caracteres, y los estilos del propio widget se cargan después, así que una regla del widget con la misma especificidad gana. Un valor de token no puede llevar ;, {, } ni <.

/* A paper grain on the canvas, behind every widget that wears the design. */
html { background-image: radial-gradient(rgb(0 0 0 / .04) 1px, transparent 1px); background-size: 4px 4px; }

#Aplicar un diseño a un widget

Cada widget lleva un diseño. En el editor, la fila Diseño del widget, encima de la vista previa, muestra todos los de serie y los tuyos: pulsa uno para cambiarlo, y usa Claro y Oscuro para verlo con los dos temas del chat. El enlace de al lado abre el diseño actual (Editar este diseño si es tuyo, Ver o duplicar este diseño si es de serie). Un widget nuevo empieza con Nórdico salvo que tú o tu agente elijáis otro.

#Qué pasa al editar o borrar un diseño

Un widget guarda una referencia a su diseño, no una copia. Cuando editas un diseño, cambian todos los widgets que lo llevan: las tools del /mcp de Widgetry sirven la versión nueva en la siguiente petición, y un servidor MCP que enlaza un widget publicado la recoge la próxima vez que lo lee (el código de enlace guarda una copia durante un minuto). Los ficheros descargados son una foto fija: descárgalos otra vez para llevarte el cambio.

Puedes borrar un diseño tuyo con Borrar en el diseñador, pero solo si ningún widget lo lleva, borradores incluidos. Si no, Widgetry se niega y dice cuántos widgets lo usan: cámbiales el diseño antes. Los diseños de serie no se pueden borrar.

#Cómo hacer un diseño de marca que funcione

• Comprueba el contraste en los dos temas. Texto sobre tarjeta, texto secundario sobre hundido y --wg-on-accent sobre --wg-accent. Un color de marca que funciona como acento sobre blanco suele fallar sobre una tarjeta oscura. Claude pide como mínimo contraste WCAG AA.
• Separa bien las cinco series. Los gráficos de barras, de área y donut y los anillos de progreso colorean sus series con --wg-c1 a --wg-c5. Pon tu color de marca en la Serie 1 y varía la luminosidad además del tono, para que se distingan también con daltonismo, y que --wg-positive y --wg-negative no se confundan con ellas.
• Usa fuentes del sistema. Los menús de fuente ofrecen diez pilas del sistema (Sans del sistema, Helvética, Geométrica, Pesada, Serif de libro, Didona, Georgia, Redondeada, Monoespaciada, Máquina de escribir), y cada una se ve con lo que tenga instalado el dispositivo de quien mira. Los hosts bloquean cualquier origen que el recurso del widget no declare en su CSP, y un diseño no tiene forma de declarar el origen de una fuente, así que una fuente web cargada desde el CSS avanzado no llega al chat. Lo explica la guía de CSP en MCP Apps. Si dejas Texto heredado en una base que no lo fija, como Nórdico, se usa la fuente del propio chat.
• Mantén la forma coherente. Un radio para las tarjetas y otro menor para etiquetas y barras, un grosor de línea, una sombra.
• Prueba con los tipos exigentes. El diseñador enseña seis. Abre en el editor un widget de los demás tipos, elige tu diseño y alterna Claro y Oscuro: una tabla y un gráfico de barras para datos densos, líneas y series, y un globo 3D y un carrusel 3D para los colores de lienzo y superficie que pinta un script.

#Crear un diseño con tu agente

Con una credencial de editor o propietario, un agente conectado al MCP de Widgetry tiene las mismas herramientas de diseño que tú en la web. Prepáralo con la guía para conectar Widgetry a tu agente.

• widgetry_list_designs lista los diseños de serie y los tuyos.
• widgetry_get_design lee los tokens de claro y oscuro y el CSS de un diseño, y lista todos los tokens que se pueden fijar.
• widgetry_create_design crea un diseño a partir de otro (from), si quieres ya con tokens, darkTokens, css y un summary.
• widgetry_update_design cambia un diseño tuyo. tokens y darkTokens sustituyen cada uno el conjunto entero de valores propios, así que hay que mandar todos los que se quieran conservar.
• widgetry_delete_design borra uno que no lleve ningún widget.

Un widget lleva un diseño por su campo design, que fija widgetry_update_widget. Prueba con un prompt así, con una marca inventada:

Crea un diseño para Larkspur Tea con los colores de la marca: verde profundo #1f4d3a, ámbar #e8b04b y crema #f7f3ea. Tiene que funcionar con el chat claro y con el oscuro. Después aplícaselo al tablero de ventas.

El agente lee una base con widgetry_get_design y luego llama a widgetry_create_design con argumentos como estos:

{
  "name": "Larkspur",
  "from": "nordic",
  "summary": "Larkspur Tea: lienzo crema, tinta verde profunda y detalles en ámbar.",
  "tokens": {
    "--wg-bg": "#f7f3ea",
    "--wg-surface": "#fffdf8",
    "--wg-ink": "#1d2b24",
    "--wg-accent": "#1f4d3a",
    "--wg-on-accent": "#ffffff",
    "--wg-c1": "#1f4d3a", "--wg-c2": "#e8b04b", "--wg-c3": "#7a9e8a", "--wg-c4": "#b5523b", "--wg-c5": "#4a6b8a",
    "--wg-radius": "10px"
  },
  "darkTokens": {
    "--wg-bg": "#121a16",
    "--wg-surface": "#1a2620",
    "--wg-ink": "#f1ede4",
    "--wg-accent": "#e8b04b",
    "--wg-on-accent": "#1d2b24",
    "--wg-c1": "#6fbf98", "--wg-c2": "#e8b04b", "--wg-c3": "#a9c7b6", "--wg-c4": "#e08a70", "--wg-c5": "#8fb0d0"
  }
}

Las series se repiten en darkTokens porque Nórdico (nordic) tiene su propia paleta de noche, que si no ganaría con el chat oscuro. Después el agente busca el tablero de ventas con widgetry_list_widgets y llama a widgetry_update_widget con su slug y "design": "larkspur". Si el widget está publicado, el cambio está en vivo en la siguiente petición. Abre el diseño en Diseños para verlo en la vista previa y retocar a mano el token que haga falta. Para que el agente construya también el widget entero, mira cómo crear widgets de MCP Apps con un agente de IA.