Frontend Design Styles
Converte fielmente as quatro linguagens de design moderno em código frontend. O núcleo não é "parece parecido", mas sim uma reprodução consistente em três camadas: tokens semânticos + formato de componentes + curvas de animação, para que o resultado seja reconhecido por usuários da plataforma como "isso é iOS", "isso é Material", "isso é Windows".
Quando usar / Não usar
Usar: para gerar ou reformar interfaces com um estilo de design específico; comparar e selecionar entre os quatro estilos; produzir tokens de design e arquivos de tema; realizar revisão visual conforme a linguagem de design.
Não usar: quando o usuário não tem preferência de estilo, apenas quer uma "página bonita" rapidamente → pergunte primeiro se deseja especificar um estilo, ou siga a lógica de recomendação em references/style-router.md; tarefas puramente backend/algorítmicas não são relevantes para este skill.
Resumo rápido das quatro impressões digitais
Aqui estão as características mais marcantes de cada estilo. Antes de implementar, confirme esta tabela; consulte as referências correspondentes para mais detalhes.
| | MIUIX / HyperOS | Apple HIG | Material Design 3 | Fluent 2 |
|---|---|---|---|
| Cor primária | #3482FF (claro) / #277AF7 (escuro) | #007AFF / #0A84FF | Personalizada, linha de base #6750A4 | #0F6CBD |
| Fonte | MiSans | SF Pro (<20pt Text, ≥20pt Display) | Roboto / Roboto Flex | Segoe UI Variable |
| Base do corpo do texto | 16–17px | 17pt | 16sp (body-large) | 14px (body-1) |
| Linguagem de cantos arredondados | Cantos uniformes de 16dp + squircle (mesma origem do iOS, botões não em cápsula) | Cantos contínuos (squircle), contêiner 10–20pt | 12dp card / 28dp FAB & modal / botões totalmente arredondados | Cantos pequenos, controles 4px, modal 8px, nesting −2px |
| Método de hierarquia | Camadas de cor (#FFFFFF / #F7F7F7 / #E8E8E8), quase sem sombras pesadas | Desfoque de material (translucência) + lista agrupada + conteúdo sobrepõe UI | Sobreposição tonal (tonal overlay) primeiro, sombras em segundo | Material (Mica / Acrylic) + sombras múltiplas sutis |
| Animação | Leve, com elasticidade, 200–300ms | Física de mola, 200–300ms, sem linear | Curva de destaque cubic-bezier(0.2,0,0,1), dividida por token de duração | Rápida e contida, 150–250ms, easyEase |
| Alvo de toque/clique | ≥ 48dp | ≥ 44×44pt | ≥ 48dp | Altura do controle 32px (modo compacto/comfortável) |
| Sensação em uma frase | Arredondado, translúcido, tom azul tecnológico | Contido, espaço em branco, conteúdo primeiro | Expressão de cor forte, hierarquia por tonalidade | Produtividade, clareza, nativo para desktop |
Fluxo de trabalho
Passo 1 · Definir estilo. Se o usuário já especificou → use diretamente. Se não → leia references/style-router.md, dê 1 recomendação + 1 alternativa com base no tipo de produto/plataforma/densidade, e peça confirmação ao usuário.
Passo 2 · Ler tokens. Abra o documento de referência correspondente e leia todos os tokens de cor, tipografia, espaçamento, canto, sombra e animação antes de codificar; não confie na memória:
- 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
Passo 3 · Aplicar tokens. Copie diretamente o arquivo assets/tokens/<style>.css como camada de token semântico (já contém temas claro/escuro). Não coloque valores hex nos estilos dos componentes. O modo escuro é alternado via [data-theme="dark"] ou prefers-color-scheme.
Passo 4 · Montar componentes. Implemente conforme as especificações do estilo no references/components-playbook.md (variantes de botão, input, card, navegação, modal, switch, lista). Cada estado de interação (hover / focus / pressed / selected / disabled) deve estar presente; não apenas o estado padrão.
Passo 5 · Adicionar animação + auto teste. Complete as transições conforme references/motion-and-accessibility.md, depois execute python3 scripts/lint_tokens.py <arquivo de saída> --style <estilo>, e revise a lista de verificação abaixo.
Regras absolutas
- Não misturar estilos. Se escolheu Fluent, não use
#007AFFdo iOS, FAB pill do Material ou cantos grandes do HyperOS. Misturar é o erro mais comum. - Tokens primeiro. No CSS dos componentes, só use
var(--xxx), nunca valores literais de cor, tamanho de fonte ou canto. - Fazer os dois temas (claro/escuro) juntos. Todos os quatro sistemas têm valores escuros oficiais; consulte a tabela diretamente, não use
filter: invertou escurecimento manual. - Convenções da plataforma são imutáveis. Ex.: área mínima de toque no iOS 44pt, opacidade da camada de estado do Material, borda inferior de 1px nos controles do Fluent, fundo escuro do HyperOS
#242424(não preto puro). - Acessibilidade é requisito duro. Contraste do corpo do texto ≥ 4.5:1, elementos de UI ≥ 3:1, anel de foco visível, respeitar
prefers-reduced-motion. - Tipografia chinesa deve ser tratada separadamente. Roboto / Segoe UI / SF Pro não têm glifos chineses completos; interfaces em chinês devem usar fallback para fontes como 苹方 / 思源黑体 / MiSans, e reduzir o letter-spacing (espaçamento latino não se aplica ao chinês).
Especificações de entrega
- Por padrão, produza um arquivo HTML executável único (com
<style>e<script>inline), com tokens organizados como variáveis CSS em:root, para que o usuário possa visualizar e copiar facilmente. - Quando o usuário especificar um framework, mude de acordo com as regras de mapeamento em
references/framework-mappings.md: para Tailwind useassets/mappings/tailwind.css; para React/Vue use objeto de token + variáveis CSS; para Compose priorize bibliotecas oficiais (MIUIX comMiuixTheme, M3 comMaterialTheme). - A página de demonstração de componentes pode consultar
assets/templates/showcase.html(os mesmos componentes exibidos lado a lado nos quatro estilos, com alternância de tema e claro/escuro). - Após a saída, execute a verificação obrigatória:
python3 scripts/lint_tokens.py <arquivo de saída> --style <estilo>, três verificações (valor de cor hardcoded / contraste / tokens principais) devem passar; se não, corrija antes de entregar. - Na entrega, explique: qual sistema foi usado, quais desvios foram feitos intencionalmente, como alternar modo escuro, qual a pilha de fallback de fontes.
Lista de auto verificação
Após terminar, verifique cada item; se não passar, corrija:
- Todas as cores vêm de tokens, sem hex hardcoded
- Hierarquia de tipografia não excede 4 níveis, tamanho base do corpo do texto conforme o sistema
- Sistema de cantos arredondados autoconsistente (incluindo cantos aninhados = externo − padding)
- Uso de sombras/materiais conforme o sistema (Material usa sobreposição tonal, Fluent usa Mica/Acrylic, iOS usa desfoque de material, HyperOS usa camadas de cor)
- Todos os estados de interação presentes: hover / focus-visible / active / disabled / selected
- Ambos os temas claro e escuro verificados
- Tamanho do alvo de toque atendido
- Contraste atendido, anel de foco visível
- Animações degradadas sob
prefers-reduced-motion - Fallback de fonte chinesa correto, espaçamento ajustado
- Nenhum elemento estranho de outro sistema
Arquivos de referência
| Arquivo | Conteúdo |
|---|---|
references/style-router.md | Árvore de decisão para seleção entre os 4 estilos, matriz de comparação, zonas proibidas de mistura |
references/miuix-hyperos.md | Tabela completa de tokens MIUIX + características visuais HyperOS + especificações de componentes |
references/apple-hig.md | Tabela completa de cores do sistema + 12 níveis de Dynamic Type + materiais + especificações de componentes |
references/material-design-3.md | 29 papéis de cor claro/escuro completos + 15 níveis de tipografia + forma/altitude/camada de estado |
references/fluent-2.md | Escala de cor neutra/marca + Type Ramp + tamanhos de controle + Mica/Acrylic + tokens de sombra |
references/components-playbook.md | Especificações de implementação para botão/input/card/navegação/modal/switch/lista por estilo |
references/motion-and-accessibility.md | Curvas e durações de animação dos 4 sistemas, requisitos de acessibilidade, lista de revisão |
references/framework-mappings.md | Regras de mapeamento de tokens para Tailwind / React / Vue / Compose / SwiftUI |
scripts/lint_tokens.py | Verificação executável: valores de cor hardcoded, contraste, integridade dos tokens principais |
assets/mappings/tailwind.css | Mapeamento de tokens Tailwind v4 @theme, com os 4 sistemas coexistindo na mesma página |