Frontend Design

Qué hace este skill

• Abre con una breve pregunta (deseos/no-gos/referencias) o anuncia defaults transparentes
• Elige una dirección de diseño deliberada y distintiva y la justifica (anti-AI-slop)
• Genera design tokens (color, tipografía, espaciado, radio) como variables CSS o config de Tailwind
• Produce código semántico listo para producción, con navegación móvil y footer obligatorios
• Usa motion, parallax sutil y glass cards de forma deliberada (legibilidad + fallback)
• Controla en continuo WCAG 2.2 / MDN / web.dev y corrige los incumplimientos
• Ejecuta una QA por capturas de pantalla en varios breakpoints en páginas completas e informa

Descripción

Frontend Design es un skill para el diseño de interfaces (UI) front-end: crea interfaces distintivas y listas para producción en lugar de AI slop genérico, comprobando de forma continua la accesibilidad web, el contraste de color, el foco de teclado, el desplazamiento de diseño (CLS) y el rendimiento. Un design engineer en un skill: elige una dirección de diseño deliberada y distintiva en lugar del look de IA genérico (sin Inter/Roboto por defecto, sin clichés de degradado morado, sin card-in-card), produce design tokens reutilizables y código listo para producción en tu stack (HTML/CSS+Tailwind por defecto, React/Vue/Svelte a petición), mientras controla los estándares primarios (WCAG 2.2, MDN, web.dev): a11y, foco, teclado, contraste, estabilidad de diseño (CLS), motion y rendimiento, con correcciones. Además, un verdadero proceso de producción: breve pregunta inicial, motion deliberada, parallax sutil y glass cards con reglas de legibilidad estrictas, navegación móvil y footer obligatorios, tipografía segura para palabras largas, y una QA por capturas de pantalla en varios breakpoints (sin desbordamiento horizontal, sin colisiones de texto) como validación dura. Bonito, correcto y pensado como un producto terminado.

Ejemplos

Respuestas de ejemplo. Pueden variar según la IA y el modelo.

Qué no hace

• Sin «AI slop» genérico (salvo que se quiera explícitamente como marca)
• Sin logos/imágenes/marcas inventados: placeholders con medidas en lugar de assets falsos
• Sin backend, sin conexión real de datos
• Sin cifras de rendimiento medidas (para eso → Web Vitals)

Compatibilidad y técnica

Probado (interno)

3 escenarios

Runtime recomendado

Claude Opus o Sonnet

Modos

Crear · Autoauditoría y corrección · QA por capturas de pantalla (varios breakpoints)

Entradas

Brief/descripción · código UI existente · captura/referencia

Formato de salida

Dirección de diseño + tokens + código (HTML/CSS/Tailwind, React/Vue/Svelte) + informe de autocontrol

Subcategoría

UI & Design

Licencia

Proprietär

Perfil de seguridad

Qué incluye

• frontend-design-1.3.2/4 archivos
  • .claude-plugin/marketplace.json
  • plugins/frontend-design/skills/frontend-design/4 archivos

    • SKILL.md
    • manifest.json
    • references/2 archivos

      • frontend-design-guidelines.md
      • frontend-design-production-rules.md
  • .agents/skills/frontend-design/→ universal, mismo contenido (Codex, Cursor, Copilot, Gemini, Windsurf, Cline)
  • LICENSE.txt

Instalación

También como prompt de chat

Nota

Mejor con contexto: framework objetivo (React/Vue/Svelte o HTML/CSS/Tailwind), marca/tono y, si existe, design system o tokens; sin estos datos el skill pregunta brevemente. El autochequeo integrado cubre contraste, foco, layout shift y rendimiento, pero no sustituye una auditoría web completa, para eso → Web Vitals o Doctor Web.

Historial de cambios

• v1.3.225.09.2026Compatibilidad actualizada: proyectos de ChatGPT y subida de skills (Business/Enterprise/Edu) en lugar de los GPT personalizados, que OpenAI retira a finales de 2026.
• v1.3.124.09.2026Actualización de mantenimiento: las preguntas de seguimiento ahora usan la herramienta de preguntas nativa de tu plataforma (3 preguntas como máximo, opción recomendada primero, lista numerada como alternativa, nunca bloquea ejecuciones desatendidas). Además, tipografía más limpia en todos los archivos entregados.
• v1.3.001.07.2026Proceso de producción, no solo una superficie: breve pregunta inicial (deseos/no-gos/referencias), motion deliberada, parallax sutil y glass cards con reglas de legibilidad estrictas, navegación móvil + footer obligatorios, tipografía segura en maquetación (palabras largas probadas activamente) y QA por capturas de pantalla en varios breakpoints como validación dura. Nuevo: las imágenes de fondo se convierten en placeholders limpios y claramente etiquetados: una imagen real solo si el runtime puede generarla (p. ej. ChatGPT o una CLI con generación de imágenes); los gráficos SVG/CSS simples se dibujan directamente. Nueva referencia frontend-design-production-rules.md.
• v1.2.022.06.2026Salida nativa de la plataforma: ahora usa activamente el formato nativo de tu plataforma, con tablas, listas de control, bloques de código y opciones clicables/botón, con alternativa numerada en plataformas no interactivas. Además, metadatos internos que preparan el próximo constructor de agentes.
• v1.1.018.06.2026Guía ampliada: formularios (autocomplete/type/inputmode, etiquetas, sin bloqueo de pegado), táctil y tamaño de objetivo (WCAG 2.2 SC 2.5.8, touch-action, overscroll-behavior), modo oscuro (color-scheme), hidratación/SSR, retoque tipográfico, navegación/estado, todo basado en fuentes primarias, redactado con nuestras palabras.
• v1.0.018.06.2026Primera versión según AUTHORING v2: creación guiada por el diseño con control de calidad continuo (WCAG 2.2/MDN/web.dev), disciplina anti-AI-slop, design tokens, adaptable al stack (Tailwind por defecto); rúbrica references + evals internas; ejemplos entrada/respuesta realistas.

Preguntas frecuentes