Communitygithub.com

frogg435/frontend-design-styles

Asistente para implementar y restaurar estilos de interfaz de usuario, cubriendo los sistemas de diseño MIUIX/HyperOS, Apple HIG, Google Material Design 3 y Microsoft Fluent 2. Ideal para generar interfaces con un estilo específico, comparar opciones, crear tokens de diseño y código frontend ejecutable.

¿Qué es frontend-design-styles?

Esta habilidad permite a un agente de IA implementar fielmente cuatro sistemas de diseño principales en código frontend: Xiaomi MIUIX/HyperOS, Apple HIG, Google Material Design 3 y Microsoft Fluent 2. No se trata solo de una apariencia superficial, sino de una reproducción consistente en tres capas: tokens semánticos (colores, tipografía, espacios), morfología de componentes y curvas de animación. El asistente puede generar código HTML/CSS/JS, React, Vue, Tailwind o incluso mapeos a Compose/Kotlin, siempre utilizando variables CSS o tokens del framework para mantener la coherencia. También es útil para auditar interfaces existentes y verificar su conformidad con una especificación de diseño. Incluye un flujo de trabajo de 5 pasos: definir el estilo, leer los tokens de la referencia, aplicar los tokens, construir componentes con todos los estados interactivos, y añadir animaciones más una autoverificación con un linter. Las reglas estrictas prohíben mezclar estilos, usar valores literales en CSS, y exigen que se implementen tanto el tema claro como el oscuro. Se presta especial atención a la accesibilidad (contrastes, foco visible, `prefers-reduced-motion`) y al tratamiento específico de la tipografía china (fuentes de respaldo y ajuste de kerning).

Compatible con~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add frogg435/frontend-design-styles
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Frontend Design Styles

Lleva fielmente los cuatro sistemas de diseño principales al código frontend. El núcleo no es "parecerse", sino reproducir de manera consistente en tres capas: tokens semánticos + morfología de componentes + curvas de animación, para que el resultado sea reconocible por los usuarios de esa plataforma como "esto es iOS / esto es Material / esto es Windows".

Cuándo usarlo / No usarlo

Usarlo: Generar o modificar interfaces con un estilo de diseño específico; comparar y contrastar entre los cuatro estilos; producir tokens de diseño y archivos de tema; realizar revisiones visuales según un lenguaje de diseño.

No usarlo: El usuario no tiene preferencia de estilo, solo quiere una "página bonita" rápidamente → preguntar primero si quiere un estilo específico, o seguir la lógica de recomendación en references/style-router.md; tareas puramente de backend/algoritmos no están relacionadas con esta habilidad.

Referencia rápida de las cuatro huellas de estilo

Estas son las características de mayor reconocibilidad. Antes de cualquier implementación, consulta esta tabla; para detalles, revisa la referencia correspondiente.

| | MIUIX / HyperOS | Apple HIG | Material Design 3 | Fluent 2 | |---|---|---|---| | Color principal | #3482FF (claro) / #277AF7 (oscuro) | #007AFF / #0A84FF | Por roles, línea base #6750A4 | #0F6CBD | | Tipografía | MiSans | SF Pro (<20pt Text, ≥20pt Display) | Roboto / Roboto Flex | Segoe UI Variable | | Tamaño base del texto | 16–17px | 17pt | 16sp (body-large) | 14px (body-1) | | Lenguaje de bordes redondeados | Radio uniforme de 16dp + squircle (mismo origen que iOS, botones no son cápsula) | Radio de curvatura continua (squircle), contenedores 10–20pt | 12dp tarjetas / 28dp FAB y ventanas emergentes / botones completamente redondos | Bordes pequeños, controles 4px, ventanas emergentes 8px, anidados −2px | | Técnica de jerarquía | Capas por tono de color (#FFFFFF / #F7F7F7 / #E8E8E8), casi sin sombras pesadas | Desenfoque de material (translucency) + listas agrupadas + contenido sobre UI | Superposición tonal (tonal overlay) primero, sombras después | Material (Mica / Acrylic) + sombras múltiples de bajo perfil | | Animación | Ligera, con rebote elástico, 200–300ms | Física de resorte, 200–300ms, sin linear | Curva de énfasis cubic-bezier(0.2,0,0,1), clasificada por duración de token | Rápida y contenida, 150–250ms, easyEase | | Objetivo táctil/de clic | ≥ 48dp | ≥ 44×44pt | ≥ 48dp | Altura del control 32px (modo compacto/confort) | | Esencia en una frase | Redondeado, transparente, sentido tecnológico azul | Contención, espacio en blanco, contenido primero | Fuerte expresividad cromática, jerarquía mediante tonos | Productividad, claridad, nativo de escritorio |

Flujo de trabajo

Paso 1 · Definir el estilo. El usuario ya lo especificó → úsalo. No especificado → lee references/style-router.md, según la forma del producto/plataforma/densidad da 1 recomendación + 1 alternativa, y pide confirmación al usuario.

Paso 2 · Leer los tokens. Abre el documento de referencia correspondiente, lee todos los colores, escalas tipográficas, espacios, bordes redondeados, sombras y animaciones antes de empezar a escribir, no confíes en la memoria:

  • MIUIX / HyperOS → references/miuix-hyperos.md
  • Apple HIG → references/apple-hig.md
  • Material Design 3 → references/material-design-3.md
  • Fluent 2 → references/fluent-2.md

Paso 3 · Aplicar los tokens. Copia directamente assets/tokens/<style>.css como capa de tokens semánticos (ya incluye tema claro/oscuro), no escribas valores hex en los estilos de los componentes. El modo oscuro se cambia mediante [data-theme="dark"] o prefers-color-scheme.

Paso 4 · Construir componentes. Implementa según las especificaciones de componentes de ese estilo en references/components-playbook.md (variantes de botones, campos de entrada, tarjetas, navegación, ventanas emergentes, interruptores, listas). Cada estado interactivo (hover / focus / pressed / selected / disabled) debe estar presente, no solo el estado por defecto.

Paso 5 · Añadir animación + autoverificación. Completa las transiciones según references/motion-and-accessibility.md, luego ejecuta python3 scripts/lint_tokens.py <archivo_generado> --style <estilo>, y luego pasa la lista de verificación punto por punto (ver más abajo).

Reglas de hierro

  1. No mezclar estilos. Si eliges Fluent, no uses #007AFF de iOS, ni el FAB tipo píldora de Material, ni las tarjetas de gran radio de HyperOS. La mezcla es el modo de fallo más común.
  2. Los tokens primero. En el CSS de los componentes solo deben aparecer var(--xxx), no valores literales de color, tamaño de fuente o radio de borde.
  3. Hacer ambos temas, claro y oscuro. Los cuatro sistemas tienen valores oficiales para el modo oscuro; consulta la tabla directamente, no uses filter: invert ni ajustes manuales cutres.
  4. Las convenciones de la plataforma no se modifican. Por ejemplo, el área mínima de clic en iOS es 44pt, la opacidad de la capa de estado de Material, el borde inferior de 1px en controles de Fluent, el fondo oscuro #242424 de HyperOS (no negro puro).
  5. Accesibilidad es un requisito estricto. Contraste de texto principal ≥ 4.5:1, elementos UI ≥ 3:1, el anillo de foco debe ser visible, respeta prefers-reduced-motion.
  6. La tipografía china debe tratarse por separado. Roboto / Segoe UI / SF Pro no tienen glifos completos para chino; las interfaces en chino deben usar fuentes de respaldo como PingFang / Source Han Sans / MiSans, y reducir el letter-spacing (el kerning latino no aplica al chino).

Especificaciones de entrega

  • Por defecto se genera HTML ejecutable en un solo archivo (<style> + <script> en línea), los tokens se organizan como variables CSS en :root, para que el usuario pueda previsualizar y copiar fácilmente.
  • Cuando el usuario especifica un framework, se cambia; las reglas de mapeo están en references/framework-mappings.md: Tailwind usa assets/mappings/tailwind.css; React/Vue usa objetos de token + variables CSS; Compose prioriza las bibliotecas oficiales (MIUIX usa MiuixTheme, M3 usa MaterialTheme).
  • La página de demostración de componentes puede referenciarse en assets/templates/showcase.html (misma combinación de componentes presentada en los cuatro estilos, con tema y modo claro/oscuro intercambiables).
  • Después de la generación, ejecuta obligatoriamente la validación: python3 scripts/lint_tokens.py <archivo_generado> --style <estilo>, tres comprobaciones (valores de color hardcodeados / contraste / tokens esenciales) deben pasar; si no, corrige y luego entrega.
  • Al entregar, explica: qué sistema se usó, qué desviaciones intencionadas hay, cómo se cambia el modo oscuro, y cuál es la pila de fuentes de respaldo.

Lista de verificación

Después de terminar, revisa punto por punto; si no pasa, corrige:

  • Todos los colores provienen de tokens, sin hex hardcodeado
  • La jerarquía tipográfica no supera 4 niveles, el tamaño base del texto cumple con el sistema
  • El sistema de bordes redondeados es coherente (incluye radio anidado = radio exterior − padding)
  • El uso de sombras/materiales sigue el sistema (Material usa superposición tonal, Fluent usa Mica/Acrylic, iOS usa desenfoque de material, HyperOS usa capas de tono)
  • Todos los estados interactivos están presentes: hover / focus-visible / active / disabled / selected
  • Ambos temas, claro y oscuro, han sido verificados
  • El tamaño del objetivo de clic cumple con los estándares
  • El contraste es adecuado, el anillo de foco es visible
  • Con prefers-reduced-motion, las animaciones se degradan
  • La fuente de respaldo para chino es correcta, el kerning se ha ajustado
  • No hay contaminación de otros sistemas

Archivos de referencia

ArchivoContenido
references/style-router.mdÁrbol de decisión para selección de estilo, matriz de comparación, zonas prohibidas de mezcla
references/miuix-hyperos.mdTabla completa de tokens MIUIX + características visuales de HyperOS + especificaciones de componentes
references/apple-hig.mdTabla completa de colores del sistema + 12 niveles de Dynamic Type + materiales + especificaciones de componentes
references/material-design-3.mdTabla completa de 29 roles de color (claro/oscuro) + 15 niveles de escala tipográfica + forma/altura/capa de estado
references/fluent-2.mdEscala de colores neutros/colores de marca + Type Ramp + tamaños de control + Mica/Acrylic + tokens de sombra
references/components-playbook.mdEspecificaciones de implementación por estilo para botones/inputs/tarjetas/navegación/ventanas emergentes/interruptores/listas
references/motion-and-accessibility.mdCurvas de animación y duración de los cuatro sistemas, requisitos estrictos de accesibilidad, lista de revisión
references/framework-mappings.mdReglas de mapeo de tokens para Tailwind / React / Vue / Compose / SwiftUI
scripts/lint_tokens.pyValidación ejecutable: valores de color hardcodeados, contraste, integridad de tokens esenciales
assets/mappings/tailwind.cssMapeo de tokens @theme de Tailwind v4, los cuatro sistemas pueden coexistir en la misma página

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community