Portfólio de fotografia
Crie um portfólio online para suas fotografias. Exiba sua arte com design personalizado, layouts perfeitos e interações fluidas, garantindo que seu trabalho brilhe com elegância.
Featured by
Lynne Lau
Why we love this skill
Esta habilidade cria portfólios de fotografia personalizados e impressionantes que refletem verdadeiramente sua estética única. Vai além de modelos básicos, analisando seu trabalho e preferências para gerar um site visualmente coeso, com interações fluidas e design responsivo. Exiba sua arte profissionalmente e atraia seus clientes ideais com um portfólio tão singular quanto sua visão.
Instruções
## Instruções
### Missão Principal
**Contexto:** Criadores (fotógrafos, ilustradores, designers, artistas, etc.) precisam de um portfólio online profissional para exibir seus trabalhos e atrair potenciais clientes ou empregadores. Sites de portfólio tradicionais são caros, demorados para criar e difíceis de personalizar para refletir características estéticas pessoais. Esta Skill visa gerar rapidamente um site de portfólio que combine beleza visual com funcionalidade completa.
**Objetivos Específicos:**
- Crie um site de portfólio completo com exibição de trabalhos, filtragem por categoria e detalhes do trabalho.
- O estilo visual está altamente alinhado com o posicionamento estético e o temperamento de trabalho do criador.
- Experiência interativa fluida, com suporte a múltiplos métodos de navegação (grade/alvenaria/carrossel, etc.)
- Design responsivo, adaptado para desktop e dispositivos móveis
- Opcional: Inclua biografia pessoal, informações de contato e outros módulos auxiliares.
**Principais restrições:**
- A estética é a principal vantagem competitiva; é preciso evitar designs medíocres e padronizados.
Os métodos de apresentação do trabalho devem destacar o trabalho em si, evitando excesso de design que ofusque o conteúdo.
- A velocidade de carregamento e a experiência de navegação devem ser fluidas.
**Antes de iniciar formalmente a tarefa, confirme com o usuário se ele forneceu seus exemplos de trabalho. Só prossiga com a tarefa após confirmar que os materiais estão disponíveis.**
### Etapa 1: Compreender o posicionamento do criador e as preferências estéticas
**Objetivo:** Compreender profundamente o posicionamento de estilo do criador, o público-alvo e as tendências estéticas para estabelecer uma direção clara para o design subsequente.
**Ações:**
- Analisar as **"{amostras de trabalho}"** fornecidas pelo usuário (links ou arquivos de imagem/vídeo), identificando características de estilo visual (tom de cor, composição, atmosfera, tema, etc.)
- Leia atentamente a **"{descrição da preferência estética}"** fornecida pelo usuário, extraindo as palavras-chave:
- Atmosfera geral (ex.: minimalista, vintage, vanguardista, acolhedora, descolada, artística, comercial, etc.)
- Estilos de referência (ex: estilo japonês moderno, moda europeia/americana, Bauhaus, Fauvismo, cyberpunk, etc.)
- Tendências de cores (ex.: preto/branco/cinza, cores de Morandi, alta saturação, gradientes, etc.)
- Preferências de layout (ex.: amplo espaço em branco, colagem densa, simétrico, irregular, etc.)
- Se o usuário fornecer **"{links para sites de referência}"**, visite e analise a linguagem de design, os métodos de interação e as características do layout desses sites.
- Avalie de forma abrangente o tipo de público-alvo (clientes potenciais, instituições de arte, apreciadores em geral, etc.), determinando o ponto de equilíbrio entre profissionalismo e acessibilidade.
**Resultado:** Formular internamente um "perfil estético" claro contendo de 3 a 5 palavras-chave principais de design e descrições específicas da direção visual.
**Após concluir o trabalho, confirme com o usuário se o produto final está satisfatório. Caso contrário, faça os ajustes necessários com base no feedback do usuário até que ele esteja satisfeito.**
Etapa 2: Planejar a estrutura do portfólio e os métodos de interação
**Objetivo:** Projetar a arquitetura de informação e a experiência de navegação mais adequadas com base na quantidade e no tipo de trabalho, bem como nas necessidades do usuário.
**Ações:**
- Conte o número de obras e planeje o sistema de classificação de acordo com as **"{categorias de trabalho}"** (por exemplo, retrato/paisagem/natureza morta, ou por projeto/série/ano, etc.)
- Determinar o método de layout da página inicial:
**Layout em grade:** Adequado para tamanhos de trabalho uniformes, que exigem organização e precisão.
- **Layout de alvenaria (cascata):** Adequado para obras de diversos tamanhos, enfatizando a riqueza visual.
- **Carrossel em tela cheia:** Ideal para um número menor de obras, cada uma exigindo uma exibição imersiva.
**Layout Híbrido:** Combinação de múltiplos métodos, como imagem principal + grade abaixo.
- Interação de filtragem por categoria de design:
- Navegação superior/lateral para alternar entre categorias
- Filtragem de cliques na nuvem de tags
- Seleção no menu suspenso
- Método de exibição da página de detalhes do plano de trabalho:
- Exibição de **sobreposição modal** sem navegação de página
- **Página de detalhes separada** com suporte para navegação à esquerda/direita
- Incluir informações: título da obra, descrição da criação, parâmetros técnicos (opcional), recomendações de trabalhos relacionados (opcional)
- Determinar módulos auxiliares:
- **Página "Sobre":** Foto do criador, declaração pessoal, experiência
- **Módulo de contato:** E-mail, links para redes sociais, formulário de solicitação de colaboração (opcional)
**Resultados esperados:** Diagrama claro da estrutura do website (incluindo lista de páginas/módulos) e descrição do fluxo de interação.
### Etapa 3: Projetar o Sistema Visual (Etapa Principal)
**Objetivo:** Com base no perfil estético, projetar um sistema de linguagem visual completo, garantindo que cada elemento do site contribua para a estética geral.
**Ações:**
**Design do Sistema de Cores:**
Com base nas **"{preferências estéticas}"** e nos tons de cores da paleta, determine a cor primária, a cor de destaque, a cor de fundo e a cor do texto.
- Se a obra em si for colorida, o fundo deve usar cores neutras (branco/cinza/preto) para destacá-la.
- Se a obra for em preto e branco ou tiver tons frios, considere usar cores de fundo quentes ou cores de destaque para adicionar profundidade.
- Forneça códigos de cores específicos (Hex) e descrições de cenários de uso.
**Design de Sistema Tipográfico:**
- Escolha combinações de fontes que combinem com o estilo:
- **Fonte do título:** Pode ser mais distinta, refletindo o tom do estilo (por exemplo, serifada transmite elegância, sem serifa transmite modernidade, manuscrita transmite aconchego)
- **Fonte do corpo do texto:** Priorize a legibilidade, geralmente optando por uma fonte sans-serif limpa.
- Especifique os nomes exatos das fontes (por exemplo, Playfair Display, Helvetica Neue, Noto Serif SC, etc.)
- Defina a hierarquia de tamanhos de fonte (ex.: títulos de 32 a 48px, subtítulos de 18 a 24px, corpo do texto de 14 a 16px)
**Princípios de layout e espaço em branco:**
- Determine a proporção de espaço em branco com base em preferências estéticas:
- **Estilo minimalista:** Espaço em branco abundante, menos obras por tela (2-4)
- **Estilo rico:** Arranjo compacto, mais obras por tela (6-12)
- Defina valores específicos para margens e espaçamento (ex.: margem da página 80px, espaçamento de trabalho 24px)
- Determinar o método de alinhamento (centralizado, alinhado à esquerda, deslocamento irregular, etc.)
**Design de Detalhes Visuais:**
- Estilo do cartão de trabalho: cantos arredondados/retos, sombra/sem sombra, borda/sem borda
- Efeitos ao passar o cursor: zoom, sobreposição, surgimento de informações, mudança de cor, etc.
- Animações de transição: fade in/out, deslizamento, ajuste de velocidade e curvas de suavização.
- Estilo da barra de navegação: fixa/oculta, transparente/sólida, sublinhada/destacada em bloco
**Criação da atmosfera geral:**
- **Se o estilo for artístico:** Adicione texturas sutis, elementos irregulares e tipografia criativa.
**Em caso de estilo comercial:** Mantenha a sobriedade, o profissionalismo, enfatizando a qualidade do trabalho e a clareza das informações.
**Se você tiver um estilo pessoal:** Adicione elementos desenhados à mão, ícones exclusivos e surpresas interativas diferenciadas.
**Padrões de Qualidade:**
- Combinação harmoniosa de cores, com no máximo 4 cores principais.
- Combinações de fontes com no máximo 2 a 3 tipos, hierarquia clara.
- Elementos visuais unificados em estilo, evitando a sensação de mosaico.
O design geral deve ter "pontos memoráveis", mas sem roubar a cena de forma exagerada.
**Resultado:** Um "Documento de Especificação de Design Visual" detalhado, contendo parâmetros específicos e instruções de uso para cores, fontes, layout e detalhes.
Etapa 4: Organizar o conteúdo e os metadados do trabalho
**Objetivo:** Organizar amostras de trabalho fornecidas pelo usuário em dados estruturados, preparando o conteúdo para a geração de um site.
**Ações:**
- Extraia/organize as seguintes informações para cada obra:
- **Arquivo de trabalho:** URL da imagem ou link do vídeo (de **"{exemplos de trabalho}"**)
- **Título da obra:** Use **"{lista de títulos da obra}"** se fornecida; caso contrário, gere títulos descritivos concisos.
- **Categoria de trabalho:** Etiquetar de acordo com **"{categorias de trabalho}"** (suporta múltiplas etiquetas)
- **Descrição do trabalho (opcional):** Use **"{descrição do trabalho}"** se fornecida; caso contrário, deixe em branco ou gere uma breve descrição.
- **Informações sobre o tempo de criação/projeto (opcional):** Adicionar se o usuário fornecer
- Organize as obras por categoria ou ordem cronológica, determinando a prioridade de exibição (quais obras devem ser destacadas na página inicial).
- Se a quantidade de trabalho for grande (>20 peças), sugerimos paginação ou carregamento lento para evitar carregamento inicial lento.
- Prepare o conteúdo da sua biografia pessoal:
- Nome do criador/nome artístico (de **"{informações pessoais}"**)
- Declaração pessoal/filosofia criativa (de **"{personal bio}"**, sugira um complemento do usuário caso não esteja fornecido)
- Informações de contato (e-mail, Instagram, Behance, etc., de **"{contact information}"**)
**Saída:** Lista de dados de trabalho estruturada (formato JSON ou tabela) contendo todos os campos obrigatórios.
---
###
Etapa 5: Gerar site de portfólio
**Objetivo:** Transformar o design visual e os dados de conteúdo em um site interativo.
**Ações:**
- Redija instruções detalhadas para a criação do site, incluindo:
- **Estrutura geral:** Layout da página (página inicial, Sobre, Contato, etc.) e método de navegação
- **Sistema visual:** Referência completa aos parâmetros de cor, fonte, layout e detalhes definidos na Etapa 3.
- **Lógica de interação:**
- Implementação de filtragem por categoria (clicar nas tags para filtrar funciona)
- Método de exibição dos detalhes do trabalho após clicar (modal ou navegação)
- Detalhes dos efeitos de passar o cursor e da animação
- Regras de adaptação responsiva (como o dispositivo móvel ajusta o layout)
- **População de conteúdo:** Consulte a Etapa 4, que organizou os dados de trabalho e as informações pessoais.
- **Otimização de desempenho:** Carregamento lento de imagens, rolagem suave, animações de carregamento, etc.
- Especifique claramente os requisitos estéticos nas instruções, por exemplo:
- "A atmosfera geral deve incorporar {palavras-chave estéticas}, evitando designs padronizados"
- "Os efeitos de passar o cursor sobre os cartões de trabalho devem ser sutis e refinados, não exagerados."
- "As transições de cor devem ser naturais, as animações devem ser suaves (sugere-se um tempo de suavização de 300 a 500 ms)"
- Chame a ferramenta generateWebpage, passando:
- **Instruções:** Instruções detalhadas acima
- **Referências:** Se houver IDs de referência para naves/materiais, passe-os para fornecer contexto.
**Padrões de Qualidade:**
O site carrega e interage normalmente.
- A apresentação visual está em conformidade com as especificações do projeto, sem erros de estilo óbvios.
- Exibição de trabalho concluída, funções de filtragem por categoria funcionando normalmente
- Boa adaptação para dispositivos móveis
**Resultado:** Site de portfólio gerado (exibido automaticamente na conversa).
---
## Especificações de saída
**Entregáveis:**
1. **Site de Portfólio Pessoal (Entregável Principal):**
- Inclui exibição de trabalhos na página inicial, filtragem por categoria, detalhes do trabalho, biografia pessoal, informações de contato e outros módulos.
- O estilo visual está altamente alinhado com as preferências estéticas do usuário.
- Interação fluida, design responsivo
- Link para página web que pode ser compartilhado diretamente
2. **Explicação do Design Visual (Auxiliar):**
- Breve explicação do pensamento de design: por que essas cores, fontes e layouts foram escolhidos.
- Liste os principais parâmetros de design (códigos de cores, nomes de fontes, dimensões principais)
- Ajuda os usuários a entender a lógica do projeto ou a fazer ajustes futuros.
**Requisitos de formatação:**
- O site é uma página HTML interativa, exibida automaticamente na conversa.
- Explicação do projeto apresentada em formato de texto conciso, podendo incluir lista de parâmetros principais.
**Padrões de Qualidade:**
- **Nível estético:** O site apresenta efeitos visuais profissionais, refinados e memoráveis, evitando a sensação de algo genérico e medíocre.
- **Completude funcional:** Funções essenciais como exibição de trabalho, filtragem por categoria e visualização de detalhes operam normalmente
**Experiência do usuário:** Carregamento fluido, interação natural, boa adaptação para dispositivos móveis.
**Precisão do conteúdo:** Todas as obras e informações textuais são precisas, sem omissões ou erros.
---
## Estilo e Apresentação (Seção Principal)
### Filosofia Estética
O design de um site de portfólio deve seguir o princípio de que "o trabalho é rei, o design é auxiliar". Todos os elementos de design (cor, fonte, layout, animação) devem servir à apresentação do trabalho, e não ofuscá-lo. Ao mesmo tempo, o design em si deve ter bom gosto e atenção aos detalhes, refletindo os padrões profissionais do criador.
### Pontos de Design Visual
**Aplicação de Cor:**
- As cores de fundo geralmente usam cores neutras (branco/cinza claro/cinza escuro/preto), tornando as cores da obra as protagonistas.
- As cores de destaque (botões, links, elementos destacados) devem ser usadas com moderação, harmonizando-se com os tons de cores do ambiente de trabalho.
- Evite combinações de cores excessivamente vibrantes ou conflitantes.
- Permite ajustar dinamicamente as cores da interface com base nas cores primárias de trabalho (técnica avançada)
**Seleção de fonte:**
- Priorize fontes com bom gosto, mas sem serem excessivamente ostentosas.
- **Recomendações de fontes em inglês:** Playfair Display (elegante), Montserrat (moderna), Lora (clássica), Raleway (limpa)
- **Recomendações de fontes chinesas:** Source Han Serif (elegante), Source Han Sans (moderna), LXGW WenKai (acolhedora), Zcool QingKe HuangYou (impactante)
- As combinações de fontes devem ter contraste (serifada + sem serifa, ou negrito + fina), mas não mais do que 3 tipos.
**Estética do layout:**
- **Estilo minimalista:** Amplo espaço em branco, 2 a 4 obras por tela, alinhadas ao centro, enfatizando o espaço livre.
- **Estilo de revista:** Layout em grade, tamanhos de trabalho uniformes, organizado e impecável, enfatizando o profissionalismo.
**Estilo artístico:** Layout irregular, tamanhos de obras variados, quebra de padrões, enfatizando a criatividade.
- **Estilo imersivo:** Carrossel em tela cheia, exibindo uma obra por vez, enfatizando o impacto.
- Independentemente do estilo, mantenha o equilíbrio visual e o ritmo.
**Detalhes da interação:**
- **Os efeitos de passar o cursor devem ser sutis e refinados:**
- Leve zoom na imagem (escala: 1,05) + sobreposição semitransparente + título com efeito de fade-in
Ou: alteração de saturação/brilho + realce de borda
- Evite animações exageradas (rotação, inversão, efeitos de luz intermitente).
- Sugere-se uma duração de animação de transição de 300 a 500 ms, utilizando suavização de entrada e saída.
A experiência de rolagem deve ser fluida, podendo-se adicionar efeitos de paralaxe para dar profundidade.
- As animações de carregamento devem ser simples e elegantes, evitando ícones de carregamento chamativos.
**Design responsivo:**
- **Desktop:** Aproveite ao máximo as vantagens do formato widescreen, grade de várias colunas ou exibição de imagens grandes.
- **Tablet:** Ajuste para 2 a 3 colunas, mantendo o equilíbrio visual.
- **Dispositivos móveis:** Coluna única ou dupla, áreas de toque ampliadas, navegação simplificada.
- As informações principais (título, navegação, contato) devem estar claramente visíveis em todos os dispositivos.
### Referências de estilo comuns
**Minimalismo:** Amplo espaço em branco, cores primárias preto/branco/cinza, fontes sem serifa, ícones simples, remoção de toda a decoração.
- **Estilo Japonês Fresco:** Tons suaves (branco-sujo, madeira clara, azul acinzentado), fontes manuscritas, detalhes delicados e aconchegantes
**Editorial de Moda:** Alto contraste, fontes em negrito, layout assimétrico, estilo de fotografia em preto e branco
- **Estilo Vintage:** Texturas envelhecidas, tons amarelos quentes, fontes serifadas, granulação, qualidade cinematográfica.
- **Tecnológico/Futurista:** Fundos escuros, cores fluorescentes como destaque, formas geométricas, efeitos dinâmicos, elementos cyberpunk
**Galeria de Arte:** Fundo totalmente branco, amplo espaço em branco, exibição centralizada das obras, navegação minimalista, simulando a experiência de uma galeria física.
### Armadilhas de design a evitar
- ❌ Uso excessivo de gradientes, sombras e efeitos, dando uma aparência barata.
- ❌ Muitas fontes ou fontes muito rebuscadas, prejudicando a legibilidade.
- ❌ Conflitos de cores ou saturação excessiva, fadiga visual
- ❌ Layout congestionado, falta de espaço entre as obras
- ❌ Animações muito complexas ou lentas, afetando a experiência
- ❌ Adaptação ruim para dispositivos móveis, texto muito pequeno ou botões difíceis de tocar.
- ❌ Design excessivo, deixando que o design roube a cena do trabalho
Related Skills
View allPesquisa 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!
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.
Gerador de prompts de vídeo nº 4
(SeeDance 2.0 Edição Especial)
Portfólio de fotografia
Crie um portfólio online para suas fotografias. Exiba sua arte com design personalizado, layouts perfeitos e interações fluidas, garantindo que seu trabalho brilhe com elegância.
Featured by
Lynne Lau
Why we love this skill
Esta habilidade cria portfólios de fotografia personalizados e impressionantes que refletem verdadeiramente sua estética única. Vai além de modelos básicos, analisando seu trabalho e preferências para gerar um site visualmente coeso, com interações fluidas e design responsivo. Exiba sua arte profissionalmente e atraia seus clientes ideais com um portfólio tão singular quanto sua visão.
Instruções
## Instruções
### Missão Principal
**Contexto:** Criadores (fotógrafos, ilustradores, designers, artistas, etc.) precisam de um portfólio online profissional para exibir seus trabalhos e atrair potenciais clientes ou empregadores. Sites de portfólio tradicionais são caros, demorados para criar e difíceis de personalizar para refletir características estéticas pessoais. Esta Skill visa gerar rapidamente um site de portfólio que combine beleza visual com funcionalidade completa.
**Objetivos Específicos:**
- Crie um site de portfólio completo com exibição de trabalhos, filtragem por categoria e detalhes do trabalho.
- O estilo visual está altamente alinhado com o posicionamento estético e o temperamento de trabalho do criador.
- Experiência interativa fluida, com suporte a múltiplos métodos de navegação (grade/alvenaria/carrossel, etc.)
- Design responsivo, adaptado para desktop e dispositivos móveis
- Opcional: Inclua biografia pessoal, informações de contato e outros módulos auxiliares.
**Principais restrições:**
- A estética é a principal vantagem competitiva; é preciso evitar designs medíocres e padronizados.
Os métodos de apresentação do trabalho devem destacar o trabalho em si, evitando excesso de design que ofusque o conteúdo.
- A velocidade de carregamento e a experiência de navegação devem ser fluidas.
**Antes de iniciar formalmente a tarefa, confirme com o usuário se ele forneceu seus exemplos de trabalho. Só prossiga com a tarefa após confirmar que os materiais estão disponíveis.**
### Etapa 1: Compreender o posicionamento do criador e as preferências estéticas
**Objetivo:** Compreender profundamente o posicionamento de estilo do criador, o público-alvo e as tendências estéticas para estabelecer uma direção clara para o design subsequente.
**Ações:**
- Analisar as **"{amostras de trabalho}"** fornecidas pelo usuário (links ou arquivos de imagem/vídeo), identificando características de estilo visual (tom de cor, composição, atmosfera, tema, etc.)
- Leia atentamente a **"{descrição da preferência estética}"** fornecida pelo usuário, extraindo as palavras-chave:
- Atmosfera geral (ex.: minimalista, vintage, vanguardista, acolhedora, descolada, artística, comercial, etc.)
- Estilos de referência (ex: estilo japonês moderno, moda europeia/americana, Bauhaus, Fauvismo, cyberpunk, etc.)
- Tendências de cores (ex.: preto/branco/cinza, cores de Morandi, alta saturação, gradientes, etc.)
- Preferências de layout (ex.: amplo espaço em branco, colagem densa, simétrico, irregular, etc.)
- Se o usuário fornecer **"{links para sites de referência}"**, visite e analise a linguagem de design, os métodos de interação e as características do layout desses sites.
- Avalie de forma abrangente o tipo de público-alvo (clientes potenciais, instituições de arte, apreciadores em geral, etc.), determinando o ponto de equilíbrio entre profissionalismo e acessibilidade.
**Resultado:** Formular internamente um "perfil estético" claro contendo de 3 a 5 palavras-chave principais de design e descrições específicas da direção visual.
**Após concluir o trabalho, confirme com o usuário se o produto final está satisfatório. Caso contrário, faça os ajustes necessários com base no feedback do usuário até que ele esteja satisfeito.**
Etapa 2: Planejar a estrutura do portfólio e os métodos de interação
**Objetivo:** Projetar a arquitetura de informação e a experiência de navegação mais adequadas com base na quantidade e no tipo de trabalho, bem como nas necessidades do usuário.
**Ações:**
- Conte o número de obras e planeje o sistema de classificação de acordo com as **"{categorias de trabalho}"** (por exemplo, retrato/paisagem/natureza morta, ou por projeto/série/ano, etc.)
- Determinar o método de layout da página inicial:
**Layout em grade:** Adequado para tamanhos de trabalho uniformes, que exigem organização e precisão.
- **Layout de alvenaria (cascata):** Adequado para obras de diversos tamanhos, enfatizando a riqueza visual.
- **Carrossel em tela cheia:** Ideal para um número menor de obras, cada uma exigindo uma exibição imersiva.
**Layout Híbrido:** Combinação de múltiplos métodos, como imagem principal + grade abaixo.
- Interação de filtragem por categoria de design:
- Navegação superior/lateral para alternar entre categorias
- Filtragem de cliques na nuvem de tags
- Seleção no menu suspenso
- Método de exibição da página de detalhes do plano de trabalho:
- Exibição de **sobreposição modal** sem navegação de página
- **Página de detalhes separada** com suporte para navegação à esquerda/direita
- Incluir informações: título da obra, descrição da criação, parâmetros técnicos (opcional), recomendações de trabalhos relacionados (opcional)
- Determinar módulos auxiliares:
- **Página "Sobre":** Foto do criador, declaração pessoal, experiência
- **Módulo de contato:** E-mail, links para redes sociais, formulário de solicitação de colaboração (opcional)
**Resultados esperados:** Diagrama claro da estrutura do website (incluindo lista de páginas/módulos) e descrição do fluxo de interação.
### Etapa 3: Projetar o Sistema Visual (Etapa Principal)
**Objetivo:** Com base no perfil estético, projetar um sistema de linguagem visual completo, garantindo que cada elemento do site contribua para a estética geral.
**Ações:**
**Design do Sistema de Cores:**
Com base nas **"{preferências estéticas}"** e nos tons de cores da paleta, determine a cor primária, a cor de destaque, a cor de fundo e a cor do texto.
- Se a obra em si for colorida, o fundo deve usar cores neutras (branco/cinza/preto) para destacá-la.
- Se a obra for em preto e branco ou tiver tons frios, considere usar cores de fundo quentes ou cores de destaque para adicionar profundidade.
- Forneça códigos de cores específicos (Hex) e descrições de cenários de uso.
**Design de Sistema Tipográfico:**
- Escolha combinações de fontes que combinem com o estilo:
- **Fonte do título:** Pode ser mais distinta, refletindo o tom do estilo (por exemplo, serifada transmite elegância, sem serifa transmite modernidade, manuscrita transmite aconchego)
- **Fonte do corpo do texto:** Priorize a legibilidade, geralmente optando por uma fonte sans-serif limpa.
- Especifique os nomes exatos das fontes (por exemplo, Playfair Display, Helvetica Neue, Noto Serif SC, etc.)
- Defina a hierarquia de tamanhos de fonte (ex.: títulos de 32 a 48px, subtítulos de 18 a 24px, corpo do texto de 14 a 16px)
**Princípios de layout e espaço em branco:**
- Determine a proporção de espaço em branco com base em preferências estéticas:
- **Estilo minimalista:** Espaço em branco abundante, menos obras por tela (2-4)
- **Estilo rico:** Arranjo compacto, mais obras por tela (6-12)
- Defina valores específicos para margens e espaçamento (ex.: margem da página 80px, espaçamento de trabalho 24px)
- Determinar o método de alinhamento (centralizado, alinhado à esquerda, deslocamento irregular, etc.)
**Design de Detalhes Visuais:**
- Estilo do cartão de trabalho: cantos arredondados/retos, sombra/sem sombra, borda/sem borda
- Efeitos ao passar o cursor: zoom, sobreposição, surgimento de informações, mudança de cor, etc.
- Animações de transição: fade in/out, deslizamento, ajuste de velocidade e curvas de suavização.
- Estilo da barra de navegação: fixa/oculta, transparente/sólida, sublinhada/destacada em bloco
**Criação da atmosfera geral:**
- **Se o estilo for artístico:** Adicione texturas sutis, elementos irregulares e tipografia criativa.
**Em caso de estilo comercial:** Mantenha a sobriedade, o profissionalismo, enfatizando a qualidade do trabalho e a clareza das informações.
**Se você tiver um estilo pessoal:** Adicione elementos desenhados à mão, ícones exclusivos e surpresas interativas diferenciadas.
**Padrões de Qualidade:**
- Combinação harmoniosa de cores, com no máximo 4 cores principais.
- Combinações de fontes com no máximo 2 a 3 tipos, hierarquia clara.
- Elementos visuais unificados em estilo, evitando a sensação de mosaico.
O design geral deve ter "pontos memoráveis", mas sem roubar a cena de forma exagerada.
**Resultado:** Um "Documento de Especificação de Design Visual" detalhado, contendo parâmetros específicos e instruções de uso para cores, fontes, layout e detalhes.
Etapa 4: Organizar o conteúdo e os metadados do trabalho
**Objetivo:** Organizar amostras de trabalho fornecidas pelo usuário em dados estruturados, preparando o conteúdo para a geração de um site.
**Ações:**
- Extraia/organize as seguintes informações para cada obra:
- **Arquivo de trabalho:** URL da imagem ou link do vídeo (de **"{exemplos de trabalho}"**)
- **Título da obra:** Use **"{lista de títulos da obra}"** se fornecida; caso contrário, gere títulos descritivos concisos.
- **Categoria de trabalho:** Etiquetar de acordo com **"{categorias de trabalho}"** (suporta múltiplas etiquetas)
- **Descrição do trabalho (opcional):** Use **"{descrição do trabalho}"** se fornecida; caso contrário, deixe em branco ou gere uma breve descrição.
- **Informações sobre o tempo de criação/projeto (opcional):** Adicionar se o usuário fornecer
- Organize as obras por categoria ou ordem cronológica, determinando a prioridade de exibição (quais obras devem ser destacadas na página inicial).
- Se a quantidade de trabalho for grande (>20 peças), sugerimos paginação ou carregamento lento para evitar carregamento inicial lento.
- Prepare o conteúdo da sua biografia pessoal:
- Nome do criador/nome artístico (de **"{informações pessoais}"**)
- Declaração pessoal/filosofia criativa (de **"{personal bio}"**, sugira um complemento do usuário caso não esteja fornecido)
- Informações de contato (e-mail, Instagram, Behance, etc., de **"{contact information}"**)
**Saída:** Lista de dados de trabalho estruturada (formato JSON ou tabela) contendo todos os campos obrigatórios.
---
###
Etapa 5: Gerar site de portfólio
**Objetivo:** Transformar o design visual e os dados de conteúdo em um site interativo.
**Ações:**
- Redija instruções detalhadas para a criação do site, incluindo:
- **Estrutura geral:** Layout da página (página inicial, Sobre, Contato, etc.) e método de navegação
- **Sistema visual:** Referência completa aos parâmetros de cor, fonte, layout e detalhes definidos na Etapa 3.
- **Lógica de interação:**
- Implementação de filtragem por categoria (clicar nas tags para filtrar funciona)
- Método de exibição dos detalhes do trabalho após clicar (modal ou navegação)
- Detalhes dos efeitos de passar o cursor e da animação
- Regras de adaptação responsiva (como o dispositivo móvel ajusta o layout)
- **População de conteúdo:** Consulte a Etapa 4, que organizou os dados de trabalho e as informações pessoais.
- **Otimização de desempenho:** Carregamento lento de imagens, rolagem suave, animações de carregamento, etc.
- Especifique claramente os requisitos estéticos nas instruções, por exemplo:
- "A atmosfera geral deve incorporar {palavras-chave estéticas}, evitando designs padronizados"
- "Os efeitos de passar o cursor sobre os cartões de trabalho devem ser sutis e refinados, não exagerados."
- "As transições de cor devem ser naturais, as animações devem ser suaves (sugere-se um tempo de suavização de 300 a 500 ms)"
- Chame a ferramenta generateWebpage, passando:
- **Instruções:** Instruções detalhadas acima
- **Referências:** Se houver IDs de referência para naves/materiais, passe-os para fornecer contexto.
**Padrões de Qualidade:**
O site carrega e interage normalmente.
- A apresentação visual está em conformidade com as especificações do projeto, sem erros de estilo óbvios.
- Exibição de trabalho concluída, funções de filtragem por categoria funcionando normalmente
- Boa adaptação para dispositivos móveis
**Resultado:** Site de portfólio gerado (exibido automaticamente na conversa).
---
## Especificações de saída
**Entregáveis:**
1. **Site de Portfólio Pessoal (Entregável Principal):**
- Inclui exibição de trabalhos na página inicial, filtragem por categoria, detalhes do trabalho, biografia pessoal, informações de contato e outros módulos.
- O estilo visual está altamente alinhado com as preferências estéticas do usuário.
- Interação fluida, design responsivo
- Link para página web que pode ser compartilhado diretamente
2. **Explicação do Design Visual (Auxiliar):**
- Breve explicação do pensamento de design: por que essas cores, fontes e layouts foram escolhidos.
- Liste os principais parâmetros de design (códigos de cores, nomes de fontes, dimensões principais)
- Ajuda os usuários a entender a lógica do projeto ou a fazer ajustes futuros.
**Requisitos de formatação:**
- O site é uma página HTML interativa, exibida automaticamente na conversa.
- Explicação do projeto apresentada em formato de texto conciso, podendo incluir lista de parâmetros principais.
**Padrões de Qualidade:**
- **Nível estético:** O site apresenta efeitos visuais profissionais, refinados e memoráveis, evitando a sensação de algo genérico e medíocre.
- **Completude funcional:** Funções essenciais como exibição de trabalho, filtragem por categoria e visualização de detalhes operam normalmente
**Experiência do usuário:** Carregamento fluido, interação natural, boa adaptação para dispositivos móveis.
**Precisão do conteúdo:** Todas as obras e informações textuais são precisas, sem omissões ou erros.
---
## Estilo e Apresentação (Seção Principal)
### Filosofia Estética
O design de um site de portfólio deve seguir o princípio de que "o trabalho é rei, o design é auxiliar". Todos os elementos de design (cor, fonte, layout, animação) devem servir à apresentação do trabalho, e não ofuscá-lo. Ao mesmo tempo, o design em si deve ter bom gosto e atenção aos detalhes, refletindo os padrões profissionais do criador.
### Pontos de Design Visual
**Aplicação de Cor:**
- As cores de fundo geralmente usam cores neutras (branco/cinza claro/cinza escuro/preto), tornando as cores da obra as protagonistas.
- As cores de destaque (botões, links, elementos destacados) devem ser usadas com moderação, harmonizando-se com os tons de cores do ambiente de trabalho.
- Evite combinações de cores excessivamente vibrantes ou conflitantes.
- Permite ajustar dinamicamente as cores da interface com base nas cores primárias de trabalho (técnica avançada)
**Seleção de fonte:**
- Priorize fontes com bom gosto, mas sem serem excessivamente ostentosas.
- **Recomendações de fontes em inglês:** Playfair Display (elegante), Montserrat (moderna), Lora (clássica), Raleway (limpa)
- **Recomendações de fontes chinesas:** Source Han Serif (elegante), Source Han Sans (moderna), LXGW WenKai (acolhedora), Zcool QingKe HuangYou (impactante)
- As combinações de fontes devem ter contraste (serifada + sem serifa, ou negrito + fina), mas não mais do que 3 tipos.
**Estética do layout:**
- **Estilo minimalista:** Amplo espaço em branco, 2 a 4 obras por tela, alinhadas ao centro, enfatizando o espaço livre.
- **Estilo de revista:** Layout em grade, tamanhos de trabalho uniformes, organizado e impecável, enfatizando o profissionalismo.
**Estilo artístico:** Layout irregular, tamanhos de obras variados, quebra de padrões, enfatizando a criatividade.
- **Estilo imersivo:** Carrossel em tela cheia, exibindo uma obra por vez, enfatizando o impacto.
- Independentemente do estilo, mantenha o equilíbrio visual e o ritmo.
**Detalhes da interação:**
- **Os efeitos de passar o cursor devem ser sutis e refinados:**
- Leve zoom na imagem (escala: 1,05) + sobreposição semitransparente + título com efeito de fade-in
Ou: alteração de saturação/brilho + realce de borda
- Evite animações exageradas (rotação, inversão, efeitos de luz intermitente).
- Sugere-se uma duração de animação de transição de 300 a 500 ms, utilizando suavização de entrada e saída.
A experiência de rolagem deve ser fluida, podendo-se adicionar efeitos de paralaxe para dar profundidade.
- As animações de carregamento devem ser simples e elegantes, evitando ícones de carregamento chamativos.
**Design responsivo:**
- **Desktop:** Aproveite ao máximo as vantagens do formato widescreen, grade de várias colunas ou exibição de imagens grandes.
- **Tablet:** Ajuste para 2 a 3 colunas, mantendo o equilíbrio visual.
- **Dispositivos móveis:** Coluna única ou dupla, áreas de toque ampliadas, navegação simplificada.
- As informações principais (título, navegação, contato) devem estar claramente visíveis em todos os dispositivos.
### Referências de estilo comuns
**Minimalismo:** Amplo espaço em branco, cores primárias preto/branco/cinza, fontes sem serifa, ícones simples, remoção de toda a decoração.
- **Estilo Japonês Fresco:** Tons suaves (branco-sujo, madeira clara, azul acinzentado), fontes manuscritas, detalhes delicados e aconchegantes
**Editorial de Moda:** Alto contraste, fontes em negrito, layout assimétrico, estilo de fotografia em preto e branco
- **Estilo Vintage:** Texturas envelhecidas, tons amarelos quentes, fontes serifadas, granulação, qualidade cinematográfica.
- **Tecnológico/Futurista:** Fundos escuros, cores fluorescentes como destaque, formas geométricas, efeitos dinâmicos, elementos cyberpunk
**Galeria de Arte:** Fundo totalmente branco, amplo espaço em branco, exibição centralizada das obras, navegação minimalista, simulando a experiência de uma galeria física.
### Armadilhas de design a evitar
- ❌ Uso excessivo de gradientes, sombras e efeitos, dando uma aparência barata.
- ❌ Muitas fontes ou fontes muito rebuscadas, prejudicando a legibilidade.
- ❌ Conflitos de cores ou saturação excessiva, fadiga visual
- ❌ Layout congestionado, falta de espaço entre as obras
- ❌ Animações muito complexas ou lentas, afetando a experiência
- ❌ Adaptação ruim para dispositivos móveis, texto muito pequeno ou botões difíceis de tocar.
- ❌ Design excessivo, deixando que o design roube a cena do trabalho
Related Skills
View allPesquisa 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!
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.
Gerador de prompts de vídeo nº 4
(SeeDance 2.0 Edição Especial)
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
