• ASSETS
  • VARIETY
  • CONTEXT
  • HUMAN

Como inserir imagens em layouts de UI com sua IA

Conecte o Unsplash ao seu cliente de IA para trazer imagens reais para seus protótipos. Esqueça os blocos cinzas ou links quebrados.

Pergunte à IA sobre esta página

Resposta rápida

Como posso usar minha IA para adicionar imagens de placeholder na UI?

Sua IA usa o Unsplash para encontrar fotos de alta resolução, sejam elas específicas ou aleatórias, e fornece os links diretos para o seu código. Você recebe assets prontos para uso em vez de placeholders genéricos. Este guia mostra como automatizar a coleta de suas imagens.

Os resultados.

Onde seus assets aparecem.

O que acontece quando você executa esses comandos.

ASSETS

Links diretos de imagem

A IA encontra fotos específicas e retorna as URLs. Você pode inseri-las diretamente em suas tags img ou no CSS.

VARIETY

Placeholders aleatórios

Se você precisar apenas de preenchimento genérico, a IA busca fotos de alta qualidade. Isso mantém seus mockups realistas.

CONTEXT

Correspondência temática

A IA busca imagens que realmente combinam com a descrição da sua UI. Você obtém visuais que seguem o estilo do seu app.

HUMAN

Seleção manual

A IA fornece os links, mas você decide quais imagens específicas melhor se adaptam ao seu design. O controle criativo final é seu.

O fluxo

O que sua IA faz quando recebe o pedido.

A IA cuida da busca e da recuperação para que você não precise navegar em sites.

  1. Analisar requisitos

    Sua IA analisa a descrição da sua UI para entender se você precisa de um tema específico ou apenas um preenchimento geral.

    search_photos

  2. Encontrar visuais específicos

    A IA busca imagens que correspondam às suas palavras-chave, como 'arquitetura minimalista' ou 'interior de cafeteria'.

    search_photos

  3. Pegar preenchimento genérico

    Se nenhum tema específico for solicitado, a IA busca uma imagem de alta qualidade para preencher o espaço.

    get_random_photo

  4. Entregar URLs

    A IA fornece os links diretos das imagens para você usar imediatamente nos arquivos do seu projeto.

    search_photosget_random_photo

Teste

Copie estes comandos para começar.

Use estes prompts para acionar as ferramentas do Unsplash.

Pontos de partida

Estes são apenas exemplos. Substitua o texto entre colchetes pelas necessidades reais do seu design.

Unsplash Connector

Tudo pronto. Escolha seu cliente MCP e siga as instruções de configuração.

Link do conectorhttps://edge.vinkius.com/vk_preview_tVCspzUWSyNRd0SNraQ4VaQPmfAvyOIBUjZ8zjsu/mcp

Claude Desktop

Siga os passos abaixo para conectar em segundos.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Unsplash capabilities are ready to use.
Configuração · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "unsplash-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_tVCspzUWSyNRd0SNraQ4VaQPmfAvyOIBUjZ8zjsu/mcp"
    }
  }
}
Copie no chat04

  • Encontre uma foto de alta resolução de um espaço de trabalho moderno para o mockup do meu dashboard.

  • Pegue uma foto aleatória para usar como fundo na minha landing page.

  • Busque imagens de 'paisagens de montanha' para preencher a UI do meu app de viagens.

  • Preciso de uma imagem de placeholder para um avatar de perfil de usuário; pegue uma aleatória.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Comece aqui

Conecte o Unsplash uma vez e pronto.

Uma única conexão vincula o Unsplash ao seu cliente de IA. Suas credenciais ficam criptografadas e seguras conosco.

Conectar Unsplash à sua IA

FAQ

Como esta tarefa funciona.

  • 01

    A IA pode baixar as imagens diretamente no meu computador?

    Não. A IA fornece as URLs das imagens. Você deve copiar esses links para o seu código ou salvar os arquivos manualmente.

  • 02

    A IA vai alterar a resolução da imagem?

    Não. A IA recupera os assets de alta resolução disponíveis através das ferramentas do Unsplash.

  • 03

    A IA pode editar ou cortar as fotos?

    Não. A IA apenas encontra e fornece links para fotos existentes. Ela não realiza manipulação de imagem.

  • 04

    A IA sabe quais imagens eu já usei?

    Não. A IA trata cada pedido como uma nova busca, a menos que você forneça o contexto do seu trabalho anterior.

  • 05

    Posso usar essas imagens em um projeto comercial?

    A IA fornece os links, mas você é o responsável por seguir os termos de licença do Unsplash para o seu caso de uso específico.

  • Mais dúvidas sobre o Unsplash? Veja tudo o que o Unsplash Connector pode fazer

Conecte Unsplash ao Claude, Cursor, ChatGPT e outros