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

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.0/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.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 — 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