🎨Arte web elegante e simples
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.
Descrição
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.
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.
Habilidades relacionadas
Ver tudo
Página webCriador de Páginas Exploráveis
Um relatório explica. Uma página permite que as pessoas descubram por si próprias. A YouMind já consegue construir páginas web. O Explorable Explainer decide o que construir — transforma uma pesquisa, um conjunto de dados ou um tópico numa única página interativa, na tradição dos gráficos de redação e das explicações exploráveis: narrativa impulsionada por scroll, gráficos reais, controlos que pode mover, fontes que pode verificar. Ele planifica antes de codificar. Primeiro, aprova um plano de construção: a única pergunta a que a página responde, o momento de revelação — o instante em que o leitor deve sentir "oh" — uma espinha de scroll de cinco a oito secções, duas a quatro interações, cada uma justificada pelo que o leitor aprende ao movê-la, e um contrato de dados que lista todos os números e de onde vieram. Depois, constrói um único ficheiro HTML autónomo, sem etapa de construção. Marcação semântica. Todos os números numa única constante DATA editável no topo. Revelações por scroll que não se quebram num telemóvel. Cada controlo é um elemento de formulário real, operável por teclado, com texto em tempo real a descrever o seu valor atual. A acessibilidade é incorporada, não adicionada à força: contraste de 4,5:1, anéis de foco visíveis, texto alternativo em todo o lado, nenhum significado transmitido apenas pela cor, movimento reduzido respeitado, responsivo a partir de 360px. Antes de entregar, executa uma autoavaliação de cinco pontos e reporta os resultados com honestidade: a revelação realmente funciona, a página ainda se lê com JavaScript desativado, a ordem de tabulação é lógica, todos os números são rastreáveis, há alguma animação que o leitor queira parar. Duas regras que não quebra: nunca inventa dados para fazer um gráfico parecer bom, e avisa-o quando os seus números contradizem o seu rascunho. Para investigadores, analistas, jornalistas, educadores, fundadores independentes e consultores que querem que o seu trabalho seja explorado em vez de ser lido rapidamente.
Página webPágina Web Ukiyo-e Luz Diurna
Um sistema de design web com estilo de luz diurna suave: tela azul-celeste claro (#ebf5ff), texto de exibição extra-grande com peso de fonte fixo em 500 (até 148px responsivo), cartões com cantos arredondados de 32px + pílula de 9999px, CTA sólido quase preto #181d27, blocos de cores pastel e ilustrações flutuantes de argila 3D. A profundidade é obtida apenas pelo deslocamento de tom entre a tela e os cartões, com zero sombra nos cartões de conteúdo. Adequado para necessidades como “estilo luz diurna suave”, “página de destino com ilustrações 3D”, “tela azul-clara”, “estilo cartões arredondados”, “site SaaS”, “estilo Linear/Framer”, com restrições de acessibilidade e responsividade integradas.
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.
🎨Arte web elegante e simples
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.
Descrição
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.
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.
Habilidades relacionadas
Ver tudoPágina webCriador de Páginas Exploráveis
Um relatório explica. Uma página permite que as pessoas descubram por si próprias. A YouMind já consegue construir páginas web. O Explorable Explainer decide o que construir — transforma uma pesquisa, um conjunto de dados ou um tópico numa única página interativa, na tradição dos gráficos de redação e das explicações exploráveis: narrativa impulsionada por scroll, gráficos reais, controlos que pode mover, fontes que pode verificar. Ele planifica antes de codificar. Primeiro, aprova um plano de construção: a única pergunta a que a página responde, o momento de revelação — o instante em que o leitor deve sentir "oh" — uma espinha de scroll de cinco a oito secções, duas a quatro interações, cada uma justificada pelo que o leitor aprende ao movê-la, e um contrato de dados que lista todos os números e de onde vieram. Depois, constrói um único ficheiro HTML autónomo, sem etapa de construção. Marcação semântica. Todos os números numa única constante DATA editável no topo. Revelações por scroll que não se quebram num telemóvel. Cada controlo é um elemento de formulário real, operável por teclado, com texto em tempo real a descrever o seu valor atual. A acessibilidade é incorporada, não adicionada à força: contraste de 4,5:1, anéis de foco visíveis, texto alternativo em todo o lado, nenhum significado transmitido apenas pela cor, movimento reduzido respeitado, responsivo a partir de 360px. Antes de entregar, executa uma autoavaliação de cinco pontos e reporta os resultados com honestidade: a revelação realmente funciona, a página ainda se lê com JavaScript desativado, a ordem de tabulação é lógica, todos os números são rastreáveis, há alguma animação que o leitor queira parar. Duas regras que não quebra: nunca inventa dados para fazer um gráfico parecer bom, e avisa-o quando os seus números contradizem o seu rascunho. Para investigadores, analistas, jornalistas, educadores, fundadores independentes e consultores que querem que o seu trabalho seja explorado em vez de ser lido rapidamente.
Página webPágina Web Ukiyo-e Luz Diurna
Um sistema de design web com estilo de luz diurna suave: tela azul-celeste claro (#ebf5ff), texto de exibição extra-grande com peso de fonte fixo em 500 (até 148px responsivo), cartões com cantos arredondados de 32px + pílula de 9999px, CTA sólido quase preto #181d27, blocos de cores pastel e ilustrações flutuantes de argila 3D. A profundidade é obtida apenas pelo deslocamento de tom entre a tela e os cartões, com zero sombra nos cartões de conteúdo. Adequado para necessidades como “estilo luz diurna suave”, “página de destino com ilustrações 3D”, “tela azul-clara”, “estilo cartões arredondados”, “site SaaS”, “estilo Linear/Framer”, com restrições de acessibilidade e responsividade integradas.
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.
Encontra a tua próxima habilidade favorita
Explora mais habilidades de IA selecionadas para pesquisa, criação e trabalho do dia a dia.