Melhoria Estética Front-end
Melhoria Estética Front-end
Prévia
Descrição
Personalidade tipográfica única Estética cyberpunk escura Layout dinâmico assimétrico Animações de carregamento cuidadosamente orquestradas Criação de atmosfera imersiva
Recomendado por
nene@YouMind
Por que recomendamos esta habilidade
Cansado de designs genéricos de “AI slop”? Esta habilidade supera a mediocridade com tipografia única, cores ousadas, animações sutis, layout inovador e fundos profundos, criando interfaces impressionantes. Guia prático para destacar seu trabalho e alcançar avanço visual.
Instruções
Evite a estética medíocre de "IA descuidada" e crie uma interface surpreendentemente única.
## Cinco Dimensões Essenciais
**1. Tipografia**
- ❌ Proibido: Inter, Roboto, Arial, fontes do sistema
- ✅ Escolha: Fontes únicas e distintas
- ✅ Combinação: Fonte de destaque + Fonte do corpo do texto, alto contraste
- ✅ Dicas: Contraste extremo na espessura da fonte (100 vs 900), ampla gama de tamanhos de fonte (3x+)
**2. Cor e Tema**
- ✅ Mantenha uma estética consistente usando variáveis CSS.
- ✅ Cor dominante + cor de destaque vibrante
- ❌ Evite: Gradiente roxo + fundo branco
- ✅ Inspiração: temas de IDE, estética cultural
**3. Movimento**
- ✅ As animações CSS têm prioridade (HTML)
- ✅ Biblioteca de Movimentos
- ✅ Foco em Alto Impacto: Um Carregamento de Página Cuidadosamente Selecionado > Microinterações Dispersas
- ✅ Acionador de rolagem, surpresa ao passar o mouse
**4. Layout Espacial**
- ✅ Fluxo assimétrico, sobreposto e diagonal
- ✅ Quebre a grade, use o espaço em branco de forma ousada OU tenha uma densidade controlada.
**5. Informações Gerais**
- ✅ Criar atmosfera e profundidade
- ✅ Malha gradiente, ruído, padrões geométricos
- ✅ Transparência em camadas, sombras dramáticas, bordas decorativas
## Princípios-chave
- Cada projeto deve ser diferente para evitar convergências repetitivas.
- Alcançar uma visão estética que corresponda à complexidade.
A complexidade extrema exige um design meticuloso, enquanto o minimalismo requer sobriedade e precisão.
Liberte-se do pensamento convencional e faça escolhas verdadeiramente únicas.
⚡ Resumo em uma linha
Fonte exclusiva + esquema de cores arrojado + animação meticulosa + layout inovador + fundo atmosférico = design de interface inesquecível
Rejeitar: Inter/Roboto, fundo branco com gradiente roxo, layout monótono
📋 Lista de verificação rápida
Dimensões e itens de inspeção
As fontes devem evitar Inter/Roboto? Existem combinações de cores exclusivas?
O esquema de cores possui um tema unificado? Deve-se evitar o uso de gradientes roxos?
A animação possui um efeito de carregamento cuidadosamente coreografado?
O layout se desvia da grade convencional?
O fundo cria profundidade e atmosfera?
Habilidades relacionadas
Ver tudoCyberpunk
Compila a cena do usuário em prompts nativos em chinês para ImageGen e prompts em inglês para imagens estáticas no Midjourney, no estilo de《Cyberpunk: Edgerunners》: neon ácido e bordas duras. Ideal para contornos angulosos, blocos de sombra nítidos e iluminação artificial com cores altamente saturadas, priorizando o impacto gráfico bidimensional em vez da densidade de detalhes;
EscreverAssistente de Layout para Contas
Um assistente de layout e aprimoramento visual criado para donos de contas pessoais, operadores de contas empresariais e iniciantes sem experiência em design. Informe o tipo e o conteúdo do artigo para receber recomendações automáticas de hierarquia de títulos, tamanho dos parágrafos, formas de destacar informações importantes e posição dos separadores, além de sugestões de cores baseadas na identidade da marca, fontes, tamanhos de fonte e palavras-chave para o estilo das imagens. Gera códigos de templates compatíveis com os principais editores ou estilos em Markdown, ajudando operadores sem conhecimentos de design a criar artigos profissionais, bonitos e fáceis de ler.
SlidesEditorial Brutalista para Devs
Transforme seu conteúdo temático, artigos, conhecimento, revisões de projetos, textos de cursos ou apresentações de ferramentas em um conjunto de slides horizontais no estilo 'Editorial Brutalista para Desenvolvedores'. O estilo geral combina design brutalista, layout de revista independente e estética de terminal de desenvolvedor: fundo bege claro, bordas pretas grossas, sombras duras, blocos de alto contraste, títulos extra grossos, fontes monoespaçadas, layout modular de web/terminal/cartões, criando uma forte sensação de expressão de conteúdo técnico. Esta habilidade primeiro extrai a estrutura do conteúdo, depois determina um ponto central para cada slide, gerando automaticamente título, frase explicativa, módulos de conhecimento, conclusão e componentes visuais adequados. É particularmente adequada para introdução de ferramentas de IA, práticas de Agent, decomposição de projetos open source, organização de conteúdo de cursos, resumo de metodologias, explicação de funcionalidades de produtos e revisões técnicas. O resultado final são slides horizontais 16:9, com unidade visual, leitura clara, espaçamento adequado e estilo marcante, apresentando um efeito de expressão avançado que parece 'um autor de projeto open source compartilhando tecnologia, e ao mesmo tempo uma revista de design independente contando uma história'.
Informações
- Versão
- v1
- Última atualização
- Créditos por execução
- Conforme o uso
- Modelos
- Automático