🎨Arte web elegante e simples
🎨Arte web elegante e simples
Pré-visualização
Descrição
Transforme o conteúdo numa página web artística com estilo desenhado à mão. Ilustrações de linhas refinadas e paletas de cores dão calor e elegância à sua mensagem.
Recomendado por
nene@YouMind
Porque recomendamos esta habilidade
Esta Skill transforma conteúdo em páginas web artísticas desenhadas à mão, combinando design moderno e estética tradicional. Gera ilustrações personalizadas com cores e tipografia requintados para páginas web com arte e calor de marca, destacando visualmente o seu produto.
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.
Habilidades relacionadas
Ver tudo
Página webPágina Fashion Creative Design
Sistema de design de páginas web em estilo de cartaz de moda editorial: tela de papel creme quente (#fffef7), títulos muito grandes com peso de fonte 300 (64–84px), fotografia em sangria total, zero sombras, cartões com cantos retos e botões com cantos arredondados em forma de pílula de 1440px. Adequado para necessidades como «estilo de design de moda», «layout de revista», «estilo de cartaz», «página de livro de arte», «portfólio de estúdio», «página de galeria», entre outros. Pode transformar qualquer conteúdo numa página de estilo editorial de alta-costura.
Ilustração semiplana realista
Também já se deparou com este desafio na comunicação visual — A marca precisa de transmitir sofisticação, mas as ilustrações totalmente planas parecem sempre demasiado simples, sem calor nem textura? Quer usar um estilo realista para mostrar os detalhes de um produto, mas receia que a imagem fique demasiado complexa e desvie a atenção do conteúdo? Como representar conceitos abstratos, narrativas emocionais ou ideias complexas? Por mais que tente, parece faltar sempre algo: ou é demasiado literal, ou demasiado enigmático? Percorre bancos de imagens inteiros sem encontrar uma imagem que seja simultaneamente moderna, elegante e capaz de captar com precisão a ideia central? O que procuramos é uma linguagem visual “no ponto certo” — com sentido de design, sem perder a autenticidade; simples e marcante, mas também delicada e apelativa. Agora, basta introduzir um texto para gerar uma ilustração semiplana realista, dando à sua marca, conteúdo ou conceito um encanto visual único. O que é? Uma ferramenta inteligente de geração que transforma texto em ilustrações modernas de estilo semiplano realista. Combina habilmente os contornos simples da ilustração plana com a luz suave e o volume do estilo realista, encontrando o equilíbrio mais elegante entre o “demasiado simples” e o “demasiado elaborado”. Como utilizar? Em apenas três passos Introduza o seu texto — seja uma história de marca, um monólogo emocional, uma descrição de produto ou um conceito filosófico abstrato, a ferramenta capta com precisão a ideia central; (opcional) Ajuste as preferências de composição ou a orientação cromática — pode definir o tom da imagem ou deixá-la explorar livremente; Gere — uma ilustração com composição cuidada, cores sofisticadas e textura delicada é apresentada de imediato. Não precisa de conhecimentos de desenho: basta dizer “o quê” e a ferramenta trata de “como desenhar”. O que torna a sua linguagem visual única? Contornos, mas não planos — preserva as linhas de contorno simples e modernas da ilustração plana, mas utiliza sombras suaves e um volume subtil para dar presença aos objetos e evitar um resultado demasiado simples; Realista, mas não fotográfico — rejeita a complexidade dos detalhes ao nível de uma fotografia e conserva apenas o calor proporcionado pela luz e pelos materiais, para criar imagens credíveis, mas abertas à imaginação; Pura, mas não vazia — utiliza sempre um fundo branco puro, concentrando toda a atenção visual no motivo principal e garantindo uma imagem limpa, contida e sempre centrada na mensagem que pretende transmitir. Cada obra alcança um equilíbrio subtil entre sentido de design e força narrativa. Em que contextos pode ser utilizada? Visualização de histórias de marca — ilustrações modernas adaptadas à identidade da sua marca, transmitindo símbolos visuais contidos e sofisticados; Imagens para conteúdos aprofundados — torne artigos, relatórios ou colunas menos monótonos, criando uma ressonância entre imagem e texto; Descrição de produtos / apresentação de conceitos — transforme funcionalidades complexas ou ideias abstratas numa linguagem visual clara e elegante; Quadros decorativos / design de capas — imagens limpas e sofisticadas, naturalmente adequadas a livros, álbuns ou à decoração de espaços. Recebe mais do que uma simples imagem Receberá uma ilustração limpa, sem qualquer texto que interfira, acompanhada de uma análise do estilo visual — uma breve explicação sobre o motivo pelo qual foram escolhidas determinada composição, luz e paleta de cores para acompanhar o seu texto. Assim, poderá compreender melhor a lógica de design por detrás da imagem e explicar mais facilmente a ideia à sua equipa.
Paisagens em aguarela japonesa
Transforme fotos de paisagens e ruas numa ilustração artística em aguarela, desenhada à mão, com um estilo de galeria japonês, amplas áreas de papel em branco e uma composição tipográfica manuscrita requintada. ✨ Destaques principais Estética de espaço em branco digna de galeria: o motivo principal surge pequeno e centrado, rodeado por amplas margens de papel de algodão bege com textura, evocando a qualidade da papelaria moderna e das impressões artísticas. Autêntica textura de aguarela feita à mão: apresenta naturalmente aguadas, camadas de cor translúcidas e contornos soltos, sem linhas rígidas nem um aspeto digital. Síntese inteligente da cena: preserva os principais pontos de referência, os contornos dos edifícios e a luz e sombra características da imagem original, simplificando naturalmente fundos complexos e elementos desnecessários. Composição tipográfica manuscrita e poética: na parte inferior da imagem, acrescenta automaticamente uma frase breve e poética, acompanhada do ano, numa caligrafia manuscrita em tons de cinzento-escuro ou azul-escuro, criando uma atmosfera quotidiana, serena e contida. 📸 Ideal para Recriar memórias de viagem: transforme ruas, lojas, montanhas e paisagens marítimas da sua viagem em postais com um toque retro. Design criativo pessoal: crie fundos para telemóvel, cartazes de papelaria, postais físicos e impressões decorativas. Imagens para redes sociais: crie capas visuais elegantes, contidas e coerentes para plataformas como Xiaohongshu e WeChat Moments. 🚀 Como utilizar Carregue qualquer fotografia de paisagem, arquitetura ou rua com uma composição clara para gerar automaticamente uma impressão artística em aguarela com o mesmo estilo.
Informações
- Versão
- v1
- Última atualização
- Créditos por execução
- Conforme a utilização
- Modelos
- Automático