> ## Documentation Index > Fetch the complete documentation index at: https://www.macaly.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Design Layouts, imagens, ícones, fotos e design visual para o teu projeto. *** ## Design personalizado Mostra ao agente qualquer imagem, captura de ecrã ou esboço e ele adapta-se ao estilo. Escolhe tipos de letra, cores, espaçamento e layouts com base na direção que lhe dás. Tudo é responsivo em todos os dispositivos por predefinição. **Como usar** Descreve o aspeto e a sensação que queres. Partilha capturas de ecrã, mood boards ou sites de referência. Diz "torna isto melhor" a qualquer momento para reformular o design. **Exemplos de prompts:** ``` Cria uma landing page para o meu SaaS de gestão de stocks para restaurantes. Quero uma sensação limpa e de confiança, semelhante à Linear ou à Stripe. Secção hero escura com um mockup do produto, grelha de funcionalidades com ícones e uma tabela de preços com três níveis no fundo. ``` ``` Reformula a minha página inicial usando esta captura de ecrã do Airbnb como referência. Tenho alojamento local no Algarve e quero um layout semelhante, mas com cores mais quentes, terracota e creme. Mantém a barra de pesquisa em destaque e acrescenta uma secção para as nossas 6 propriedades em destaque. ``` ``` Reformula o meu site para transmitir uma sensação mais premium e editorial. Sou estratega de marca para clientes de moda de luxo. Pensa numa Vogue que se cruza com uma agência de topo. Usa imagens grandes a sangue total, texto mínimo e muito espaço em branco. ``` *** ## Criação e edição de imagens Descreve uma imagem e o agente cria-a. Carrega uma foto e diz-lhe o que mudar. Carrega qualquer imagem e pede para remover o fundo. Cada imagem recebe uma ligação permanente. Tu escolhes o formato: horizontal, quadrado ou vertical. As edições podem usar mais do que uma imagem. Carrega a foto que queres alterar e até 13 imagens de referência: o agente tira das referências o estilo, as cores ou os objetos e aplica-os à imagem original. A remoção do fundo produz um PNG verdadeiramente transparente, que podes colocar sobre qualquer fundo. **Como usar** Descreve como a imagem deve ser: estilo, ambiente, cores, motivo. Para edições, carrega a imagem e explica as alterações. Quando juntares referências, diz qual é a imagem a alterar e o que deve vir das outras. Para remover o fundo, basta carregar e pedir. **Exemplos de prompts:** ``` Gera uma imagem hero para a minha landing page fintech. Quero um gradiente fluido e abstrato em tons de azul profundo e roxo, com formas geométricas subtis. Formato horizontal para ocupar toda a largura da página. ``` ``` Remove o fundo desarrumado de cozinha desta foto de produto do nosso vaso de cerâmica. Substitui-o por um fundo bege suave e limpo, e mantém as sombras naturais para que continue com um aspeto realista. ``` ``` Cria três ilustrações flat para o fluxo de onboarding do meu SaaS: uma para a configuração da conta, uma para colaboração em equipa num painel, e outra para a celebração de conclusão. Usa azul-petróleo e laranja quente como cores principais. ``` ``` Edita a primeira foto do nosso sofá para ficar com a iluminação e o chão de madeira da segunda foto, e põe ao lado a planta da terceira foto. Deixa o sofá exatamente como está. ``` *** ## Favicon Gera um favicon para o separador do navegador. Os designs simples funcionam melhor porque os favicons são muito pequenos. Pensa em formas fortes, letras únicas ou ícones minimalistas. **Como usar** Descreve o ícone que queres. Menciona o nome da marca, as cores e o estilo. Quanto mais simples, melhor fica legível em tamanhos pequenos. **Exemplos de prompts:** ``` Cria um favicon para a minha torrefação de café chamada "Ember". Faz um ícone minimalista de chama em laranja queimado sobre um fundo escuro. Precisa de ser reconhecível a 16x16 pixels, por isso mantém tudo simples. ``` ``` Gera um favicon para a minha empresa de consultoria. Apenas a letra "A" num tipo de letra sans-serif simples, texto branco sobre um círculo azul-marinho. Deve corresponder ao tom profissional do resto do site. ``` ``` Faz um favicon para a minha app de fitness chamada "Pulse". Usa um ícone de linha em forma de batimento cardíaco em verde vivo sobre preto. Algo energético e moderno, ao estilo do ícone da Strava. ``` *** ## Pesquisa de fotos Pesquisa fotos de banco de imagens gratuitas e adiciona-as diretamente ao teu projeto. Sem taxas de licenciamento, sem necessidade de atribuição. Filtra por orientação, tamanho e cor. **Como usar** Descreve as fotos que precisas: motivo, ambiente, iluminação e onde vão ficar no site. **Exemplos de prompts:** ``` Encontra-me 4 a 5 fotos lifestyle para um site de coworking. Preciso de fotos de pessoas a trabalhar em escritórios modernos e luminosos, com luz natural, portáteis abertos e algumas fotos de colaboração. Horizontal para a secção hero e recortes quadrados para a secção da equipa. ``` ``` Pesquisa fotografia de comida com tons quentes para o site do meu restaurante farm-to-table. Fotos em grande plano de pratos empratados, mesas de madeira rústicas e ingredientes frescos. Tons terrosos, nada demasiado encenado ou artificial. ``` ``` Encontra uma foto hero para a landing page da minha startup fintech. Algo abstrato e profissional. Paisagem urbana ao anoitecer, arquitetura limpa ou um fundo subtil com tema tecnológico. Formato largo, tons de azul frio. ``` *** ## Pesquisa de ícones Pesquisa numa biblioteca de ícones, ilustrações e emojis. Obténs conjuntos coordenados no mesmo estilo, em vez de ícones desencontrados de fontes diferentes. Personaliza cores, tamanho e estilo. SVG ou PNG. **Como usar** Descreve que ícones precisas e onde vão ficar. Menciona o estilo (linha, preenchido, flat) e as cores. Pedir ícones relacionados em conjunto mantém-nos consistentes. **Exemplos de prompts:** ``` Encontra-me um conjunto coordenado de ícones de linha para a secção de funcionalidades do meu SaaS: análises, colaboração, segurança, integrações e suporte. Todos no mesmo estilo minimalista de linha, cor azul-marinho. ``` ``` Pesquisa ilustrações coloridas para o fluxo de onboarding de uma app de bem-estar. Preciso de uma para cada passo: criar um perfil, definir objetivos de saúde, ligar um dispositivo vestível e ver o primeiro relatório. ``` ``` Arranja-me um conjunto de ícones preenchidos para o rodapé do meu site de e-commerce: camião de entregas, setas de devolução, cadeado de pagamento seguro e balão de chat de apoio ao cliente. Cinzento escuro, estilo consistente, cerca de 24px. ``` *** ## Geração de vídeo Descreve uma cena, uma revelação de produto ou uma animação curta e o agente produz o vídeo. Os vídeos gerados são guardados diretamente nos teus ficheiros, para que os possas usar em qualquer parte do teu projeto ou incorporar na tua app. Também podes fornecer uma imagem de referência como frame inicial e descrever o que deve acontecer a seguir. **Como usar** Descreve o vídeo: motivo, movimento, ambiente, ângulo de câmara e estilo. Menciona a duração (5 ou 10 segundos) e a orientação, se for relevante. Para animar a partir de uma imagem existente, partilha-a e explica o que deve acontecer. **Exemplos de prompts:** ``` Gera um vídeo hero de 5 segundos para a landing page do meu SaaS. Um painel em modo escuro com gráficos de dados brilhantes, um afastamento suave de câmara e uma sensação tecnológica futurista. Formato horizontal. ``` ``` Cria um vídeo de fundo em ciclo para a minha app de meditação. Um deslize aéreo lento sobre uma floresta montanhosa enevoada ao nascer do sol. Azuis e verdes suaves. Orientação vertical para ecrãs de telemóvel. ``` ``` Anima esta foto de produto do nosso frasco de perfume, transformando-a num vídeo curto. Deve rodar lentamente enquanto uma luz dourada percorre o vidro. Fundo branco limpo, 5 segundos, horizontal. ``` This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.