Você já sentiu essa frustração?
Uma ideia nasce cristalina na sua mente. No entanto, o caminho até o Demo é um calvário: desenhar protótipos, revisar telas infinitamente e enfrentar o eterno "vai e vem" com a engenharia. No fim, a solução que vai ao ar mal lembra o conceito original.
Neste artigo, compartilho como um Gerente de Produto B2B, sem formação técnica, utiliza o TRAE para converter visões diretamente em protótipos interativos e soluções tangíveis. Esqueça a espera pelo cronograma dos desenvolvedores ou o desenho repetitivo de telas. Sem precisar dominar o código, é possível acelerar drasticamente a validação de projetos do zero e o alinhamento de lógicas complexas.
Mais do que uma simples apresentação de ferramenta, este é um método prático, testado no dia a dia, que abrange desde a validação de requisitos até o polimento da documentação. Vou mostrar como um PM pode levar a produtividade ao seu estado da arte.
Por que este relato?
Sou responsável por produtos corporativos complexos, repletos de regras de negócio e sistemas de back-office. Antes do TRAE, meu dia a dia seguia um fluxo linear e lento: primeiro desenhava o protótipo, depois escrevia a documentação, em seguida aguardava a janela de desenvolvimento e, por fim, ajustava os erros.
Tudo mudou quando passei a encarar o TRAE não como um "gerador de código", mas como um parceiro estratégico. Meu foco agora se divide em três cenários cruciais:
Design de protótipos para iteração de demandas.
Validação de lógica em projetos "0 a 1".
Redação e alinhamento de documentação técnica.
O conceito central: O TRAE como "Tradutor de Ideias"
Antes de avançarmos, precisamos de um ajuste de mentalidade: a essência do TRAE é ser um tradutor de alta performance.
Ele não adivinha intenções vagas. Contudo, se você descrever a lógica com clareza, ele traduzirá seu pensamento em uma aplicação front-end funcional e de alta fidelidade. Isso significa:
Mãos livres: Você abandona o trabalho braçal de alinhar pixels ou arrastar componentes em ferramentas de design.
Foco no que importa: Sua energia vai para a estruturação da lógica, definição de fluxos e detalhes de interação.
Entrega tangível: Seu protótipo deixa de ser um wireframe estático e ganha vida como uma página HTML interativa.
A regra de ouro: Iteração incremental
Ao colaborar com o TRAE, o princípio fundamental é: avance rápido, mas em pequenos passos. Em vez de tentar "abraçar o mundo" com um único comando complexo, fragmente seu objetivo em etapas claras. Construímos o sistema através de uma evolução constante, seguindo o tripé:
Estrutura (Framework): Defina primeiro o layout e a organização básica da página.
Recheio (Componentes): Adicione elementos de interface como botões, campos de entrada e listas.
Vida (Interação): Por fim, injete dinamismo — cliques, navegação e carregamento de dados.
Lembre-se: cada interação com a IA deve ter um objetivo único e bem definido. Esse método garante precisão e mantém você no controle total do projeto.
Três cenários: Como o TRAE reconstrói o seu fluxo de trabalho
A seguir, demonstrarei como o cotidiano de um Gerente de Produto B2B é impactado através de três cenários típicos. Para cada um, apresento um caso real e técnicas prontas para uso. Dica: salve este guia para sua próxima sprint.
Cenário 1: Iteração de Requisitos e Design de Protótipos
O Choque de Realidade: Antigo vs. Novo
O Modelo Tradicional (Old School)
O "calvário" do design: Horas perdidas no Axure ou Figma arrastando elementos, sofrendo para alinhar um botão. O resultado? Wireframes de baixa fidelidade que pouco lembram o produto final.
O desgaste do alinhamento: Explicar para diretores, designers e desenvolvedores que "este quadrado cinza será um gráfico colorido" ou "este botão abrirá um modal". O ruído de comunicação é enorme e a perda de informação, inevitável.
Custo de tempo: No mínimo, 2 dias de trabalho.
O Fluxo com TRAE (TRAE Flow)
Prototipagem por "comando": Basta um print ou um link do Figma para municiar o TRAE. Em segundos, ele gera uma página HTML de alta fidelidade.
Aprovação imediata: Qualquer ajuste é feito via linguagem natural. Você "pede" a mudança e vê o resultado em tempo real. Decisões que antes levavam dias agora são resolvidas durante a reunião: editou, aplicou, validou.
Custo de tempo: Menos de meio dia. Uma eficiência 4x superior.
O valor real: Mais do que economizar horas, o TRAE liberta o Gerente de Produto do trabalho braçal e repetitivo. O foco volta para onde nunca deveria ter saído: o pensamento criativo e estratégico.
Setup de Performance: Checklist do TRAE
Para replicar este fluxo, utilize a seguinte stack de configuração:
Modelo:
gemini-3-pro-previewAgente:
Builder with MCP-
MCPs Recomendados:
Playwright()eFigma AI Bridge(Opcional).- (Instruções detalhadas de configuração do MCP ao final deste artigo).
Passo 1: Contextualização — Ensinando o produto ao TRAE
Para iterar sobre um produto existente, o TRAE precisa primeiro "enxergá-lo". Existem dois caminhos de alta eficiência:
A. O Método do Print (Screenshot + Playwright MCP)
É o caminho mais curto. Tire um print completo da página e envie ao TRAE com o seguinte comando:
💡 Dica de Ouro: O segredo é definir o objetivo e as restrições. Seja direto.
Prompt: "Com base nesta imagem, crie uma versão HTML fiel (pixel-perfect) do front-end. Este é um Demo para alinhamento de requisitos, sem necessidade de integração com o back-end. Stack técnica: React."
B. O Método Figma (Figma + AI Bridge)
Use o plugin do Builder.io para converter o layout do Figma em código. Depois, forneça a URL do arquivo no Figma e use o Figma AI Bridge MCP.
Passo 2: Auditoria de Fidelidade
Mesmo após a primeira versão, sempre haverá discrepâncias. Aqui entra o Playwright MCP.
Objetivo: Permitir que o TRAE abra a página que ele mesmo acabou de criar para validar se o código condiz com o que ele "vê".
Uso Avançado: Peça para ele abrir a sua URL de referência e comparar os estilos (CSS) entre o original e a cópia.
Exemplo de Prompt de Auditoria:
"Use o Playwright MCP para abrir a versão atual do projeto e este site de referência [URL]. Compare os estilos e identifique o que ainda não está 1:1. Foque em: Hierarquia de fontes, espaçamentos (padding/margin) e paleta de cores."
Passo 3: Refino Fino — Domando uma IA "Obstinada"
Às vezes, a IA insiste que corrigiu um erro quando, na verdade, nada mudou. Se o TRAE entrar em "loop", use estas estratégias:
Precisão via Classname: Abra o Inspetor do Navegador (F12), copie o nome da classe (classname) do elemento problemático e envie ao TRAE com um print do erro.
Direcionamento Técnico: Se você suspeita da causa (ex: um erro de z-index ou flex-box), peça explicitamente para a IA investigar essa hipótese.
Troca de Cérebro: Alterne o modelo (ex: de Gemini para GPT-4o ou vice-versa) para ver se uma nova arquitetura resolve o problema.
Reset de Contexto: Se o chat estiver muito longo, a IA pode ficar "viciada" em erros anteriores. Abra uma nova conversa e cole o código atual.
Passo 4: A Entrega — O Protótipo Ganhando Vida
Com a interface pronta, é hora de implementar a funcionalidade: o painel de chat lateral. Como não há design pronto para isso, você deve descrever a interação sob a ótica do usuário:
Origem: Onde a ação começa? (Ex: ícone de chat no topo).
Gatilho: O que o usuário faz? (Ex: clique).
Resposta Visual: O que acontece na tela? (Ex: o conteúdo principal é empurrado para a esquerda).
Conteúdo: O que aparece no novo painel?
Prompt de Implementação Real:
"Agora, adicione um painel de chat lateral à direita. Ele deve ser ativado pelo ícone 'Chat' na barra de navegação superior. Ao abrir, o conteúdo principal deve se ajustar automaticamente à esquerda. O painel precisa ter: Título, área de mensagens (sem avatares) e campo de input com botão de enviar. Importante: Siga rigorosamente o meu arquivo
FRONTEND_SPEC.mdpara manter a consistência visual."
Dica de Encerramento: Padronize seu Projeto
Antes de dar o trabalho por concluído, peça ao TRAE para fazer duas coisas:
Criar um Script de Inicialização (start.sh): Para que você suba o projeto com um clique, em uma porta fixa, sem conflitos.
Gerar o FRONTEND_SPEC.md: Um documento que resume o sistema de cores, fontes e espaçamentos do seu projeto. Use este arquivo como "âncora" em todos os seus prompts futuros para garantir que o design nunca saia dos trilhos.
Cenário 2: Projetos "0 a 1" e Validação de Lógica
Se a iteração de demandas é a "técnica", a validação de um projeto do zero é a "estratégia". É aqui que o Gerente de Produto transforma uma ideia abstrata em um MVP (Produto Mínimo Viável) funcional.
O Choque de Realidade
O Modelo Tradicional (Old School)
Adivinhação de API: Você olha para a documentação técnica e tenta adivinhar se a lógica do back-end funcionará. O processo é uma "caixa-preta".
Ponto Cego Lógico: Em fluxos complexos (como agentes de IA), você não entende os detalhes da implementação. Na hora de discutir com a engenharia, falta autoridade para prever riscos ou sugerir alternativas.
O Fluxo com TRAE (TRAE Flow)
Controle "Caixa-Branca": Você descreve a lógica e o TRAE a executa. Com os diagramas Mermaid gerados pela IA, você visualiza e compreende cada etapa do fluxo de dados.
Entrega Reversa: Você deixa de apenas pedir requisitos. Agora, você pode construir um protótipo funcional e entregá-lo "de bandeja" para o desenvolvedor: "O caminho lógico é este. Pode integrar ao código principal."
O valor real: Não é apenas velocidade; é um salto de capacidade. O PM agora tem o poder de definir e validar a viabilidade técnica da sua própria visão.
Estudo de Caso: Criando um Agente de E-commerce do Zero
Objetivo: Criar um Agente focado no consumidor final (B2C) capaz de buscar produtos e interagir via chat.
Fase 1: O Esqueleto (Interface Mobile)
Começamos com o básico: um layout React otimizado para iPhone 12.
Dica de PM: Peça para o TRAE padronizar as classnames (evitando nomes genéricos de bibliotecas) e criar um script start.sh para rodar o projeto em uma porta fixa.
Fase 2: O "Cérebro" (Integração com LLM)
Aqui o segredo é: Documentação antes do Código. Peça ao TRAE para atuar como seu Consultor Técnico.
Prompt Estratégico: "Quero implementar um chat de IA real usando o modelo [Modelo X]. Antes de alterar qualquer arquivo, escreva um documento
.mddetalhando como faremos o gerenciamento de contexto (histórico) e a exibição das mensagens (incluindo o estado de 'pensando' da IA). Só começaremos a codar após minha aprovação."
Fase 3: A Regra de Negócio (Busca e Interação com Produtos)
Agora, elevamos o nível. Precisamos de um banco de dados local (SQLite ou JSON) e uma lógica de busca.
O que pedir ao TRAE:
Base de Dados: Criar uma lista de produtos (ID, imagem, título, preço, descrição).
Reconhecimento de Intenção: O Agente deve identificar se o usuário quer pesquisar algo. Se sim, ele dispara uma ferramenta de busca (MCP).
Interface Dinâmica: O resultado deve ser um card de produto interativo e paginado.
Loop de Pensamento (ReAct): A IA deve primeiro "pensar", decidir qual ferramenta usar, obter o resultado e só então responder ao usuário.
Prompt de Teste Final:
"Use o Playwright MCP para simular um usuário buscando por 'Casacos'. Verifique se o fluxo de 'pensamento' aparece na tela, se os cards de produto carregam as imagens corretamente e se a lógica de acompanhamento (follow-up) funciona ao clicar em um item específico."
Resultado Final
Você termina com um MVP completo (Front + Back). Você não apenas validou que a ideia é possível, mas já resolveu os principais gargalos lógicos antes mesmo da primeira reunião oficial com o time de engenharia.
Cenário 3: Redação e Alinhamento de Documentação
O papel do Gerente de Produto não é apenas criar, mas sincronizar. Seja para alinhar a solução com a engenharia ou reportar o progresso à diretoria, documentos claros e diagramas lógicos são indispensáveis.
O Choque de Realidade
O Modelo Tradicional (Old School)
O Inferno da Estrutura: Coletar informações é fácil; organizá-las é um martírio. Horas desperdiçadas no PowerPoint ou Visio ajustando setas e caixinhas de fluxogramas que, no fim, ninguém entende.
Foco no Formato, não na Lógica: Você gasta 80% do tempo alinhando margens e 20% refinando o raciocínio central.
Custo de tempo: No mínimo, 1 dia inteiro de trabalho.
O Fluxo com TRAE (TRAE Flow)
Brain Dump sem Filtros: Escreva o que vier à cabeça. Cole referências soltas, anotações de reuniões e ideias desestruturadas. O caos inicial não é um problema.
Refino de Alto Impacto: Entregue essa "matéria-prima" ao TRAE. Com uma metodologia clara, ele transforma o rascunho em um documento estruturado e visual em segundos.
Custo de tempo: Meio dia. Produtividade 2x maior.
O valor real: Você deixa de ser um "formatador de slides" para voltar a ser um pensador estratégico.
Estudo de Caso: Documentando o Agente de E-commerce
Após criar o MVP do Agente de E-commerce, você precisa comunicar o valor para os stakeholders e a lógica para os desenvolvedores.
O "Despejo de Ideias" (Rascunho Bruto)
Não se preocupe com a gramática ou a ordem. Exemplo:
"Quero explicar para o time de produto e dev o que esse Agente faz. Ele é para o cliente final comprar pelo chat. Hoje ele busca produtos, mas depois vai ter checkout e pós-venda. Ele precisa conectar com a API de estoque e de suporte. A IA identifica o que o usuário quer e chama a ferramenta certa. Blá blá blá..."
O Comando de Estruturação
Peça ao TRAE para dar ordem ao caos, exigindo elementos visuais para os desenvolvedores.
Prompt Estratégico:
*"Com base no meu rascunho e no código atual do projeto, escreva um documento
README.mdprofissional para alinhamento interno.
Use uma estrutura 'Top-Down' : comece com um resumo executivo para leigos e depois aprofunde nos módulos.
Para a engenharia, gere um Diagrama de Sequência em Mermaid mostrando o fluxo: Usuário $\rightarrow$ IA $\rightarrow$ Ferramenta (MCP) $\rightarrow$ Resposta.
Liste as capacidades atuais e o roadmap técnico (ex: conexão com APIs de pós-venda)."*
Resultado: De Notas Confusas a um Roadmap Técnico
O TRAE não apenas escreverá o texto, mas criará a lógica visual (fluxogramas) que antes levaria horas para desenhar. O documento final será:
Acessível: Qualquer stakeholder entende o valor do negócio.
Preciso: Qualquer desenvolvedor entende o fluxo de dados e os endpoints envolvidos.
Conclusão: O Novo Superpoder do PM
Dominar o TRAE não é sobre aprender a programar, mas sobre aprender a traduzir.
Você traduz prints em código (Cenário 1).
Traduz ideias em lógica funcional (Cenário 2).
Traduz caos em documentação estratégica (Cenário 3).
O Gerente de Produto moderno não é mais um gargalo entre o negócio e a tecnologia; ele é o catalisador que faz ambos falarem a mesma língua.
Cenário 4: Análise de Concorrência e Inteligência de Mercado
O método de "rascunho espontâneo" não serve apenas para documentar seus próprios projetos; ele é um divisor de águas na hora de realizar Benchmarking.
Antigamente, fazer pesquisa de mercado era um processo engessado: você se preocupava com a organização antes mesmo de entender os dados. Agora, você pode ser radicalmente mais ágil:
Coleta em Massa (Bulk Paste): Encontrou um dado relevante, um trecho de artigo ou uma tabela de preços? Jogue tudo em um documento sem filtro. Não se preocupe com a bagunça ou com informações duplicadas.
Destilação via IA: Entregue esse "mar de dados" ao TRAE. Peça para ele estruturar os pontos fundamentais, extrair as vantagens competitivas e identificar lacunas de mercado.
-
Output de Autoridade:
- Lógica Visual: Peça um diagrama Mermaid para mapear a arquitetura dos concorrentes. A lógica fica clara num relance.
- Estética Profissional: Peça ao TRAE para gerar um prompt para o Nano Banana. Use a imagem resultante para ilustrar sua análise. O resultado final terá um acabamento visual que transmite autoridade imediata em qualquer apresentação para a diretoria.
O valor real: Esse fluxo garante que 100% da sua energia mental seja investida na curadoria de informações de alto valor. O "trabalho sujo" de organizar, formatar e diagramar é totalmente terceirizado para a IA.
Conclusão: O Fim do PM "Tarefeiro"
O que vimos nestes cenários não é apenas o uso de uma ferramenta nova. É uma mudança na natureza do trabalho do Gerente de Produto.
Ao dominar o TRAE, você deixa de ser o "gargalo" que espera pelo design ou pela engenharia para validar uma hipótese. Você se torna um Arquiteto de Soluções capaz de:
Materializar telas em minutos.
Validar lógicas complexas em horas.
Sincronizar times com documentação impecável.
No novo ecossistema de produtos, a velocidade de aprendizado é a única vantagem competitiva sustentável. E, com o TRAE, essa velocidade acaba de ser multiplicada.
Considerações Finais: As Leis de Sobrevivência do PM na Era da IA
Ao revisitar este guia, fica claro que ferramentas como o TRAE oferecem mais do que ganho de produtividade: elas impõem um novo paradigma de trabalho. Para que você domine esta transição, resumi as estratégias fundamentais em três pilares:
1. O Mindset Estratégico
O PM como "Tradutor": O TRAE é o seu intérprete. Quanto mais nítida for sua lógica, mais fiel será a execução da IA.
A Regra da Iteração Incremental: Estrutura $\rightarrow$ Componentes $\rightarrow$ Detalhes. Avance em pequenos passos; é mais seguro e rápido do que tentar "abraçar o mundo" em um único prompt.
Do "Desenho" para a "Articulação": Sua entrega evoluiu. Você não entrega mais wireframes estáticos; você entrega HTML interativo de alta fidelidade.
2. O Toolkit de Execução
Dualidade de Criação: Use Prints + Playwright MCP para agilidade bruta ou Figma + AI Bridge para fidelidade técnica.
O Poder do Playwright MCP: Use-o para auditar o código, comparar com referências de mercado e simular testes de usuário reais.
O Quarteto de Refino: Quando a IA travar, use nomes de classes (classnames) específicos, detalhe requisitos técnicos, alterne modelos (ex: Gemini/GPT) ou reinicie o contexto.
3. Padrões e Protocolos
Automação de Setup: Crie scripts start.sh para garantir portas fixas e inicialização limpa.
Documentação Viva: Mantenha um FRONTEND_SPEC.md para que cada nova iteração respeite a identidade visual do projeto.
A Lógica do Usuário: Descreva interações seguindo o fluxo: Origem $\rightarrow$ Gatilho $\rightarrow$ Resposta Visual $\rightarrow$ Localização $\rightarrow$ Conteúdo.
Prompting: A Arte de se Comunicar com a Máquina
Não se prenda a fórmulas rígidas. O segredo do sucesso com o TRAE reside em:
Clareza de Intenção: O que você quer resolver?
Contexto Abundante: Forneça o estado atual, a expectativa e referências.
Multimodalidade: Combine texto, prints e links. É essa mistura que garante a precisão.
O Futuro é Autônomo
O TRAE nos devolve o poder de materializar ideias. Ele nos permite resgatar o tempo que antes perdíamos em tarefas braçais e reinvesti-lo no que realmente define um grande produto: lógica de negócio e experiência do usuário.
Espero que este guia acelere sua curva de aprendizado e transforme seu dia a dia. E você? Já descobriu algum "atalho" ou técnica própria no TRAE? Vamos continuar essa conversa nos comentários!
Apêndice 1: Guia de Configuração do TRAE & MCP
Para facilitar seu início rápido, organizei todas as configurações necessárias aqui. Basta copiar e colar.
1. Configuração do Playwright
Links relacionados:
Repositório no GitHub: microsoft/playwright-mcp
Download da extensão do Chrome: página de Releases
Passo 1: Configurar o MCP
{
"mcpServers": {
"Playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--extension"
]
}
}
}
Passo 2: Instalar a extensão do navegador
Baixe o arquivo compactado da versão mais recente da extensão na página de Releases acima.
Abra a página de gerenciamento de extensões do Chrome (
chrome://extensions/).Arraste o arquivo compactado baixado diretamente para a página; a instalação será feita automaticamente.
Lembre-se de fixar a extensão na barra de ferramentas para facilitar a visualização do status da conexão.
Como usar?
Durante a conversa, basta indicar explicitamente que a IA deve usar o playwrightmcp para ativar.
Exemplo: “Por favor, use o playwrightmcp para abrir o endereço do meu projeto ou site...”
1. Configuração do Figma AI Bridge
Essa etapa é um pouco mais complexa, pois é necessário inserir seu Figma Token.
{
"mcpServers": {
"Figma AI Bridge": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "替换为你的 key"
},
"disabled": true
}
}
}
Como obter o Figma Key
Faça login na versão web do Figma.
Clique no seu avatar → Settings → Personal access tokens → Generate new token.
Como usar? Durante a conversa, basta indicar explicitamente que a IA deve usar o figma ai bridge mcp para ativar.
Exemplo: “Por favor, use o figma ai bridge mcp para visualizar meu design {{insira aqui a URL do seu design}}... e faça um 1:1 de conversão para uma página HTML front-end.”
Como obter a URL do design?
Selecione o container que deseja converter (para uma página inteira, selecione o container mais externo; para um componente, selecione o container do componente).
Clique com o botão direito → Copy link → Copy link to selection.
Ferramenta complementar: Plugin Builder.io (Web → Design)
No Figma, abra Actions (Cmd/Ctrl + P) e pesquise por
Builder.ioe execute.Com o plugin aberto, no menu Import, selecione Paste from Chrome.
Cole o JSON do código front-end copiado pelo plugin Chrome correspondente; assim você obterá o design equivalente dentro do Figma.
Passo 3 Outras recomendações de configuração
Para uma experiência mais fluida, recomenda-se verificar as seguintes configurações:
Configurações do fluxo de conversa:
Executar MCP automaticamente: Ativado (evita ter que confirmar a cada vez)
Modo de execução: Sandbox (prioridade para segurança)
Escopo de whitelist pessoal (referência):
-
python,cd,npm,chmod(ajustar conforme a necessidade do projeto)
Apêndice 2: Recursos Comuns de Placeholder — De Onde o AI Obtém
Este apêndice é voltado para participantes de AI Coding e explica de onde obter recursos comuns de placeholder (ícones, imagens) e como especificar claramente nos prompts, evitando imagens quebradas ou placeholders incorretos.
1. Placeholder de Ícones (Icon)
Recomendação: No prompt, especifique diretamente qual biblioteca de ícones usar, permitindo que o AI utilize componentes prontos em vez de desenhar ou gerar texto como placeholder.
-
Fontes sugeridas (escolha uma, apenas mencione no prompt):
- Comum no ecossistema React:
react-icons(ex.:react-icons/fa,react-icons/hietc.) - Bibliotecas de componentes: se o projeto já usa Ant Design, Material-UI (MUI), Chakra UI etc., pode indicar “usar o componente Icon do Ant Design” ou “usar os Icons do MUI”.
- Comum no ecossistema React:
-
Exemplos de prompts:
- “Por favor, use ícones do
react-iconsna página, escolhendo os apropriados dentro da biblioteca.” - “Nosso projeto usa Ant Design, então todos os ícones devem vir do componente Icon do Ant Design.”
- “Por favor, use ícones do
Dica: Ao especificar claramente “use a biblioteca de ícones xx”, o AI selecionará os ícones da biblioteca correta, evitando placeholders vazios ou caracteres inválidos.
2. Placeholder de Imagens (Image)
Recomendação: Para imagens placeholder, utilize o Unsplash para obter imagens públicas, gratuitas e comerciais; sempre verifique se cada URL está acessível antes de usar, evitando imagens quebradas em produção.
Fonte: Unsplash — oferece imagens gratuitas adequadas para protótipos e placeholders.
-
Sugestão de prompt:
- “Use imagens de placeholder do Unsplash relacionadas ao [tema/palavra-chave].”
- “Use imagens do Unsplash como placeholder e verifique cada URL antes de inserir no código ou na lista de recursos; se algum link não estiver acessível, substitua ou ignore, evitando imagens quebradas.”
Importante: Certifique-se de que o AI verifique individualmente se cada link do Unsplash está acessível (por exemplo, usando requisições HEAD/GET ou simples testes de carregamento) antes de incluir na página ou na lista de recursos.
Resumo:
Para ícones: especifique a biblioteca de ícones.
Para imagens: use Unsplash + verificação de acessibilidade.
Seguindo essas recomendações, você garante que os placeholders usados no fluxo de AI Coding sejam estáveis e confiáveis.
Top comments (0)