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
nene@YouMind.AI
Why we love this skill
Essa habilidade cria sites de portfólio personalizados e impressionantes que realmente destacam seu trabalho. Ela projeta meticulosamente cada detalhe visual, garantindo que sua estética única brilhe sem concessões.
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 allSistema de revisão de páginas web HTML
Permita que sua equipe faça anotações diretamente nos elementos da página da web no navegador. Sem necessidade de configuração, reconhecimento automático, geração inteligente de sugestões de modificação com IA e exportação de relatórios de revisão que podem ser compreendidos diretamente pelo assistente de programação de IA. 🔥 Principais recursos: ⚡ Inicialização em 30 segundos - Basta fornecer um tema e uma página da web com um sistema de revisão será gerada automaticamente. 🤖 Inteligência de IA - Digite "fonte muito pequena" e a IA gerará automaticamente a sugestão "altere para 18px PingFang SC". 💾 Nunca perdido - Os comentários são salvos automaticamente no IndexedDB e podem ser restaurados atualizando a página. 📊 Colaboração em equipe - 5 identidades de função (produto/design/desenvolvimento/edição/operações), com código de cores. 🎯 Posicionamento preciso - Clique em títulos, botões, ícones e planos de fundo para identificar cada elemento filho.
StoryCanvas
Auxilia criadores a transformar referências estéticas existentes em especificações narrativas reutilizáveis, baseadas em páginas e no estilo JSON, por meio de múltiplas rodadas de verificação.
Para ser PDF
Este software converte conteúdo de referência, como artigos, relatórios, notas, Markdown e texto extraído de PDFs, em arquivos HTML de alta qualidade para impressão em formato A4. Ele seleciona cores de destaque de forma adaptativa com base no tema do conteúdo, incorpora ilustrações minimalistas desenhadas à mão em SVG, corrige automaticamente problemas de impressão, como páginas em branco, linhas isoladas e elementos truncados ao exportar PDFs, e abre o PDF diretamente com um painel de visualização na etapa final, permitindo que os usuários visualizem, imprimam ou exportem PDFs sem precisar copiar e colar código.
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
nene@YouMind.AI
Why we love this skill
Essa habilidade cria sites de portfólio personalizados e impressionantes que realmente destacam seu trabalho. Ela projeta meticulosamente cada detalhe visual, garantindo que sua estética única brilhe sem concessões.
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 allSistema de revisão de páginas web HTML
Permita que sua equipe faça anotações diretamente nos elementos da página da web no navegador. Sem necessidade de configuração, reconhecimento automático, geração inteligente de sugestões de modificação com IA e exportação de relatórios de revisão que podem ser compreendidos diretamente pelo assistente de programação de IA. 🔥 Principais recursos: ⚡ Inicialização em 30 segundos - Basta fornecer um tema e uma página da web com um sistema de revisão será gerada automaticamente. 🤖 Inteligência de IA - Digite "fonte muito pequena" e a IA gerará automaticamente a sugestão "altere para 18px PingFang SC". 💾 Nunca perdido - Os comentários são salvos automaticamente no IndexedDB e podem ser restaurados atualizando a página. 📊 Colaboração em equipe - 5 identidades de função (produto/design/desenvolvimento/edição/operações), com código de cores. 🎯 Posicionamento preciso - Clique em títulos, botões, ícones e planos de fundo para identificar cada elemento filho.
StoryCanvas
Auxilia criadores a transformar referências estéticas existentes em especificações narrativas reutilizáveis, baseadas em páginas e no estilo JSON, por meio de múltiplas rodadas de verificação.
Para ser PDF
Este software converte conteúdo de referência, como artigos, relatórios, notas, Markdown e texto extraído de PDFs, em arquivos HTML de alta qualidade para impressão em formato A4. Ele seleciona cores de destaque de forma adaptativa com base no tema do conteúdo, incorpora ilustrações minimalistas desenhadas à mão em SVG, corrige automaticamente problemas de impressão, como páginas em branco, linhas isoladas e elementos truncados ao exportar PDFs, e abre o PDF diretamente com um painel de visualização na etapa final, permitindo que os usuários visualizem, imprimam ou exportem PDFs sem precisar copiar e colar código.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
