Las mejores skills de Codex para diseño UI.

De serie, Codex diseña pantallas correctas pero vistas. Las skills de diseño le dan gusto: un punto de vista sobre tipografía, espaciado y layout. Estas son las skills y plugins que vale la pena conocer, en qué destaca cada uno y cómo instalarlo.

Actualizado el 6 de noviembre de 2026 · 7 min de lectura

Qué hace realmente una skill de diseño

Una skill es un conjunto de instrucciones que Codex carga cuando una tarea lo requiere. Una skill de diseño suele indicarle a Codex qué fuentes y escalas tipográficas usar, cuánto espacio en blanco dejar, qué patrones de layout evitar porque parecen de plantilla y cómo revisar el resultado. El modelo es el mismo; el brief con el que trabaja es mucho mejor.

La mayoría de las skills de esta lista se distribuyen como plugins de Codex, así que una sola instalación añade un conjunto entero. Después de instalar, abre una sesión nueva de Codex para que se carguen las skills y menciona una con $ seguido de su nombre, o deja que Codex la elija cuando tu petición encaje.

1. Taste Skill (design-taste-frontend)

Ideal para: landing pages, sitios de marketing y rediseños que no deben parecer generados por IA.

Taste Skill es una skill de código abierto con licencia MIT creada por Leonxlnx y una de las skills de diseño más populares de GitHub. Su skill principal, design-taste-frontend, parte de un brief de cliente, elige una de 20 direcciones de arte documentadas, busca fotos con licencia abierta y sus créditos, y revisa el resultado en un navegador a tres anchos. La versión 2.5 (noviembre de 2026) se centra en sitios web corporativos y de marketing, y ya no cubre pantallas de apps. Necesita Node.js 22 o posterior y Chrome, Edge o Chromium.

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

2. Skills de estilo: suave, minimalista y brutalista

Ideal para: cuando ya sabes qué look quieres.

El mismo autor mantiene en una colección aparte sus skills anteriores, de un solo estilo cada una. Cada una se ejecuta solo cuando la llamas por su nombre:

high-end-visual-design: UI tranquila y pulida, con contraste suave, espaciado amplio y animaciones con efecto muelle.
minimalist-ui: UI de producto editorial con una paleta contenida y una estructura limpia.
industrial-brutalist-ui: tipografía suiza austera, contraste marcado y layouts experimentales.
gpt-taste: una variante más estricta ajustada para los modelos GPT y Codex, con más variedad de layouts y animaciones más atrevidas.

codex plugin marketplace add Leonxlnx/taste-skill-classics
codex plugin add taste-skill-classics@taste-skill-classics

3. Skills basadas en imágenes

Ideal para: explorar una dirección visual con imágenes antes de escribir código.

Estas skills piden al agente que genere primero imágenes de diseño. imagegen-frontend-web crea una imagen por sección de la landing page, imagegen-frontend-mobile crea conjuntos coherentes de pantallas de app e image-to-code genera las imágenes, las estudia y después construye la página para que coincida. Necesitan un agente que pueda generar imágenes.

codex plugin marketplace add Leonxlnx/imagegen-skills
codex plugin add imagegen-skills@imagegen-skills

4. La skill frontend-design de Anthropic

Ideal para: un empujón breve y de uso general hacia un diseño intencionado.

Anthropic publica frontend-design en su repositorio abierto anthropics/skills con licencia Apache 2.0. Da pautas sobre dirección estética y tipografía, y sobre decisiones que no parezcan valores por defecto de plantilla. Se escribió para Claude, pero usa el mismo formato SKILL.md, así que puedes copiar la carpeta frontend-design en ~/.agents/skills para usarla en Codex.

5. El plugin de Figma

Ideal para: equipos cuyos diseños y sistema de diseño viven en Figma.

El catálogo de plugins de OpenAI incluye un plugin de Figma que cubre Code to Canvas, Code Connect y las reglas del sistema de diseño. Búscalo en el Plugins Directory o ejecuta /plugins en Codex CLI.

Dónde encaja Codex Design

Codex Design, nuestro plugin, no es una skill de estilo. Le da a Codex un lienzo: pantallas e imágenes de referencia lado a lado, con edición visual de fuentes, colores y espaciado. Funciona junto a cualquiera de las skills anteriores. Deja que una skill de gusto dé forma al diseño y compara en el lienzo las propuestas que produce. Instala Codex Design con un solo prompt.

Escribe una skill para tu propio sistema de diseño

A menudo, la mejor skill de diseño es la tuya. Si tu producto tiene una paleta, unas fuentes y unos componentes, escríbelos una vez y todas las pantallas que diseñe Codex los seguirán. Guarda esto como .agents/skills/acme-ui/SKILL.md en tu repositorio:

---
name: acme-ui
description: Acme’s visual design rules. Use when designing or reviewing any Acme screen, page, or component.
---

# Acme UI

## Foundations
- Colors: ink #1F2430, accent #3B5BDB, surface #F7F8FA. No other hues.
- Type: Inter. Body 16px/1.5, headings 600 weight, never more than 3 sizes per screen.
- Spacing: multiples of 8px. Cards use 24px padding and 12px radius.

## Components
- Primary buttons are solid accent, one per screen.
- Forms put labels above fields, never placeholders as labels.

## Before you finish
- Check contrast meets WCAG AA.
- Check the layout at 390px and 1440px wide.

Haz que la descripción sea concreta. Codex decide cuándo usar una skill a partir de su descripción, así que “Use when designing or reviewing any Acme screen” funciona mejor que “Design rules”.

Consejos

Usa una skill de estilo cada vez. Una skill minimalista y una brutalista dan instrucciones contradictorias.
Llama a la skill por su nombre cuando importe, por ejemplo $minimalist-ui, en lugar de esperar a que Codex la elija.
Lee una skill antes de instalarla. Las skills son instrucciones que se ejecutan con los permisos de tu agente, y los plugins pueden añadir herramientas y hooks.