Habilidades

🎨Site artístico simples e elegante

Transforme seu conteúdo em uma página da web artística, desenhada à mão. Ilustrações requintadas e esquemas de cores conferem às suas informações um toque de aconchego e bom gosto.

installedBy
83
creditsEarned
10,100
🎨Site artístico simples e elegante preview 1
🎨Site artístico simples e elegante preview 2

Why we love this skill

Essa habilidade transforma seu conteúdo em sites minimalistas e elegantes com estilo artístico desenhado à mão, combinando perfeitamente o design digital moderno com a estética tradicional. Ela gera ilustrações personalizadas de forma inteligente, com base nas suas necessidades, e utiliza sistemas sofisticados de cores e tipografia para criar sites repletos de arte e que transmitem a sensação acolhedora da marca, fazendo com que seus produtos ou serviços se destaquem visualmente.

Categorias

webpage

Ferramentas

Instruções

Crie uma página web com base no conteúdo fornecido pelo usuário. Os requisitos de estilo da página web são os seguintes:

### I. Posicionamento do Estilo Visual - **Estilo Artístico Desenhado à Mão**: Adotando um estilo de arte linear, combinando design digital moderno com a estética tradicional do desenho à mão. - **Esquema de Cores**: Utilizando cores neutras (branco-sujo/cinza claro) como base, combinadas com texto principal em cinza escuro, e usando vermelho-alaranjado (cor de destaque) como cor focal visual. - **Tom da Marca**: Refinado, artístico e acolhedor, direcionado a um grupo de usuários exigentes. ### II. Princípios da Estrutura do Layout **Seção Principal (Design da Primeira Tela)** - Layout de colunas da esquerda para a direita (proporção áurea 60:40) - Lado esquerdo: - Título grande (Fonte de exibição, 72-96px), fonte escura, forte impacto visual - Dados principais destacados em cor de destaque (ex.: "15 Cidades, 4749 locais") - Texto de subtítulo conciso e impactante, declarando a proposta de valor principal - Amplo espaço em branco, criando uma sensação de alta qualidade - Lado direito: - Ilustrações personalizadas desenhadas à mão, ocupando 50% do espaço visual - Estilo de ilustração consistente: desenho de linha + detalhes em cores locais - Conteúdo da ilustração profundamente integrado à história da marca - **Design da Barra de Navegação** - Navegação superior minimalista, posicionamento fixo - Logotipo + 2-3 itens do menu principal - Grupo de ícones do lado direito (pesquisa/favoritos/menu) - Fundo transparente ou branco puro com sombras sutis - **Área do Cartão de Conteúdo** - Layout de grade de cartões (3-4 colunas, responsivo) - Cada cartão inclui: - Título (Título 3, 32-40px) - Descrição (2-3 linhas, 16-18px, altura da linha 1,6) - Ilustração complementar desenhada à mão (consistente com o estilo visual principal) - Fundo claro (#F5F3F0), cantos arredondados (8-12px) - Estado ao passar o mouse: Levemente levantado + sombra mais profunda - ### III. Especificações do Sistema de Ilustração **Diretrizes para Criação de Ilustrações** 1. 2. **Processamento de Linhas**: - Use linhas irregulares desenhadas à mão de 1-2px para simular uma textura de pintura realista - Mantenha linhas suaves com um toque de artificialidade, evitando um aspecto mecânico excessivo. 3. **Uso de cores:** - 80% de linhas cinzas + 20% de preenchimento na cor da marca - Laranja-avermelhado usado apenas para enfatizar elementos (pessoas, janelas, edifícios principais) - O fundo usa um degradê bege (#FDFBF7 → #F5F1EB) - 5. **Composição da cena:** - Cenas urbanas: mesclando edifícios icônicos com cenas do cotidiano - Perspectiva aérea ou isométrica - Adição de pequenas figuras para aprimorar a narrativa e a intimidade - 7. **Densidade de detalhes:** - Detalhes ricos em primeiro plano, plano médio moderadamente simplificado e fundo delineado - Manter a hierarquia visual, guiando o olhar para as informações principais - 9. ### IV. Sistema de fontes - **Fonte de exibição (título):** Fonte serifada, robusta e imponente (ex.: Freight Display, Tiempos) - **Fonte do corpo do texto:** Fonte sem serifa, altamente legível (ex.: Inter, Manrope) - **Proporção do tamanho da fonte**: Usa uma escala modular (1,25 ou 1,333) - - **Níveis de peso da fonte**: Leve (300) / Regular (400) / Médio (500) / Negrito (700) - ### V. Detalhes de interação - - **Microanimações**: Os cards flutuam de 4 a 8 pixels ao passar o mouse, tempo de transição de 300 a 400 ms - - **Status de carregamento**: Usa uma tela de esqueleto para manter o tom da marca - - **Pontos de interrupção responsivos**: - - Desktop: 1440px+ - - Tablet: 768-1439px - - Celular: 375-767px - - ### VI. Requisitos de Design Cada design deve incluir: 1. Hierarquia visual clara (obtida através de tamanho/cor/espaço em branco) 2. Pelo menos uma ilustração personalizada (profundamente relacionada ao conteúdo, gerada usando o Nano Banana Pro) 3. 2. 2 a 3 destaques em cores contrastantes (não excedendo 120px) 4. Espaço amplo (espaçamento entre seções ≥ 120px) 5. Caminho de ação do usuário claro 6. --- **Filosofia de Design**: Use uma linguagem visual artística para transmitir a singularidade e o aconchego da marca. Cada pixel serve para contar uma história, não apenas para exibir funcionalidades. O design deve fazer com que os usuários sintam: "Isto é para pessoas que apreciam a vida", em vez de um produto frio e comercial.

Todas as ilustrações da página web foram geradas pelo nano banana pro.

Webページ

Related Skills

View all

Pesquisa de Inteligência de Trabalho | Decodificação Profunda da Inteligência de Trabalho

Pare de adivinhar e comece a saber. De riscos ocultos nos negócios à verdadeira cultura organizacional, transformamos cada descrição de vaga em seu "manual de informações privilegiadas" pessoal — para que você possa se sair bem nas entrevistas como um verdadeiro dono do negócio e conquistar a oferta que deseja. Chega de perguntas sem resposta nas entrevistas! Desvendamos descrições de vagas áridas e as transformamos em "inteligência corporativa" em 10 minutos: deciframos o jargão de RH, revelamos as práticas comerciais e as deficiências reais da empresa e ajudamos você a obter uma "vantagem" nas verificações de antecedentes do seu chefe, vencendo na alta temporada de contratações de março e abril ao explorar a assimetria de informações!

Pesquisa de Inteligência de Trabalho | Decodificação Profunda da Inteligência de Trabalho

Análise de Tendências do Ouro

Painel de Decisão de Investimento em Ouro Diário. Coleta automaticamente os dados mais recentes de fontes confiáveis ​​como CME, WGC e Reuters, fornecendo análises de tendências macroeconômicas, acompanhamento do fluxo de fundos, alertas de risco e estratégias de acumulação de ouro (sinais de alerta verde/amarelo/vermelho). Apresenta um painel visual na web com gráficos de preços do ouro, taxas de prêmio, rendimentos dos títulos do Tesouro dos EUA e outros indicadores-chave para ajudar os investidores a tomar decisões rápidas.

Análise de Tendências do Ouro

Gerador de prompts de vídeo nº 4

(SeeDance 2.0 Edição Especial)

Gerador de prompts de vídeo nº 4

Find your next favorite skill

Explore more curated AI skills for research, creation, and everyday work.

Explore all skills