HomeCasa Prompts

Tokens de diseño y especificación de componentes

Define los tokens de un sistema de diseño (primitivos, semánticos y de componente) y especifica componentes con estados, variantes y accesibilidad. Pensado para ChatGPT, Claude y Gemini. Incluye 5 variables personalizables y se copia gratis en un clic.

Avanzado · Texto · Pendiente de revisión editorial

Pensado para:

Prompt

Actúa como diseñador de sistemas de diseño con experiencia llevando tokens de Figma a código.

Producto: {{producto}}.
Plataformas: {{plataformas}}.
Identidad de marca disponible: {{marca}}.
Componentes prioritarios: {{componentes}}.
Requisito de accesibilidad: {{nivel_accesibilidad}}.

Entrega, en este orden:
1. Arquitectura de tokens en tres capas (primitivos → semánticos → de componente) y convención de nombres, con ejemplos.
2. Tokens primitivos: escala de color (9-10 pasos por tono, generada a partir de la marca), tipografía (escala modular con tamaños, interlineados y pesos), espaciado (base 4 u 8), radios, sombras, opacidades y duraciones de animación.
3. Tokens semánticos para tema claro y oscuro (fondo, superficie, texto, borde, acción, estados de éxito, aviso, error e información), verificando el contraste de cada pareja texto/fondo.
4. Exportación en formato W3C Design Tokens (JSON) y su equivalente en variables CSS.
5. Para cada componente prioritario, una ficha con: anatomía, variantes, tamaños, estados (reposo, hover, foco, activo, deshabilitado, carga, error), tokens que consume, comportamiento con teclado, atributos ARIA y qué no hacer.
6. Reglas de gobierno: cuándo crear un token nuevo, cómo deprecar y cómo versionar.

Restricciones:
- No inventes colores de marca: si no los tengo, propón una paleta provisional marcada como [PROVISIONAL].
- Indica los ratios de contraste calculados; si alguno no cumple, propón la alternativa.
- Pregúntame lo que falte antes de definir los tokens semánticos.

Cómo usarlo

  1. Indica los colores y tipografías de marca que ya tienes (en hexadecimal si es posible).
  2. Elige pocos componentes prioritarios para empezar: botón, campo de texto, tarjeta y modal.
  3. Importa el JSON en Tokens Studio para Figma o en Style Dictionary para generar el código.
  4. Revisa los ratios de contraste con una herramienta externa antes de aprobar la paleta.

Ejemplo de uso

Producto: app de banca para autónomos · Plataformas: web y móvil · Marca: azul #1E40AF y tipografía Inter · Componentes: botón, input, tarjeta, modal.

Resultado de ejemplo

1. Arquitectura de tokens

NivelEjemploUso
Primitivocolor.blue.800 = #1E40AFValor bruto, nunca en componentes
Semánticocolor.action.primary = {color.blue.800}Intención, cambia por tema
Componentebutton.primary.bg = {color.action.primary}Solo lo consume un componente

Convención: categoría.propiedad.variante.estado, p. ej. color.text.on-action.disabled.

3. Contraste (tema claro)

Par texto/fondoRatioWCAG 2.2 AA
Blanco sobre azul #1E40AF8,72:1✅
Blanco sobre coral #F973622,74:1❌
#111827 sobre coral #F973626,47:1✅

Propuesta: usar el coral solo como fondo con texto oscuro, o un coral oscurecido para texto sobre blanco (5,62:1 con #B4412F, [PROVISIONAL]).

4. Exportación

{
  "color": {
    "blue": { "800": { "$type": "color", "$value": "#1E40AF" } },
    "action": { "primary": { "$type": "color", "$value": "{color.blue.800}" } }
  }
}
:root { --color-blue-800: #1E40AF; --color-action-primary: var(--color-blue-800); }

5. Botón — estados

Reposo, hover, foco (anillo de 2 px visible), activo, deshabilitado, cargando (aria-busy="true"), error…

Datos clave

Categoría
Diseño UI/UX · Design systems
Tipo de resultado
Texto
Nivel
Avanzado
Pensado para
ChatGPT, Claude y Gemini
Verificado en
Pendiente de verificación editorial
Variables
Producto, Plataformas, Identidad de marca, Componentes prioritarios y Nivel de accesibilidad
Idioma
Español
Precio
Gratis, sin registro
Actualizado
07/11/2026

Preguntas frecuentes

¿Para qué sirven los tokens semánticos si ya tengo los primitivos?

Los primitivos describen valores («azul 600») y los semánticos describen intenciones («color de acción principal»). Gracias a esa capa puedes cambiar de tema o de marca sin tocar cada componente.

¿Qué formato de tokens debo usar?

El formato del grupo comunitario W3C Design Tokens es el estándar emergente y lo entienden herramientas como Tokens Studio y Style Dictionary, que generan CSS, iOS o Android a partir de él.

¿Para qué sirve este prompt?

Define los tokens de un sistema de diseño (primitivos, semánticos y de componente) y especifica componentes con estados, variantes y accesibilidad.

¿Con qué herramientas de IA funciona?

Está pensado para ChatGPT, Claude y Gemini. Todavía no lo hemos verificado en estas herramientas, por lo que los resultados pueden variar entre ellas.

¿Cómo personalizo el prompt?

Pulsa «Personalizar» y rellena las variables (Producto, Plataformas, Identidad de marca, Componentes prioritarios y Nivel de accesibilidad). El texto se actualiza al instante y después puedes copiarlo con un clic. Los valores se guardan solo en tu navegador.

¿Necesito experiencia para usarlo?

Es de nivel avanzado: está pensado para personas con experiencia en el tema que sepan evaluar y ajustar el resultado.

¿Este prompt es gratis?

Sí. Todos los prompts de HomeCasa Prompts son gratuitos, sin registro ni suscripción. Puedes usarlos también en proyectos profesionales.

¿Puedo fiarme del resultado de la IA?

Úsalo como un borrador de calidad: revisa siempre datos, cifras y afirmaciones importantes antes de publicarlos o tomar decisiones.

Prompts relacionados