Tips Tricks for AI Coder
1.0.0
Bem-vindo às dicas e truques para iniciantes de codificadores de IA , um recurso abrangente projetado para ajudar os não-codificadores a usar efetivamente as ferramentas de IA para desenvolver sites, aplicativos e outros projetos. Este guia é baseado na experiência do mundo real e nos conselhos práticos adaptados para iniciantes absolutos.
Este guia também serve como uma prova de minha jornada como desenvolvedor iniciante, aprendendo a aproveitar o poder da IA. Todo capítulo é inspirado em lições que aprendi enquanto navega no mundo do desenvolvimento orientado à IA. Meu objetivo é compartilhar essas idéias com você para evitar armadilhas comuns e maximizar o potencial dessas ferramentas.
Deixe -me compartilhar com você uma das maiores lições que aprendi desde o início. Aqui está: a maneira como você frase o que pede que a IA faça é tudo. A diferença entre conseguir algo brilhante e algo inútil geralmente se resume a como você pediu. Parece simples, mas essa dica por si só pode economizar muita frustração.
Então, vamos falar sobre como pedir ajuda ao seu “Assistente de Codificador” da IA de uma maneira que realmente obtém resultados - porque confie em mim, a maneira como você fala com a IA faz toda a diferença.
Aqui está o negócio: as ferramentas de IA são inteligentes, mas não são leitores mentes. Eles são brilhantes nas seguintes direções, mas precisam dessas direções para serem claras e específicas. Se você é vago ou deixa espaço para adivinhar, as coisas podem ir de lado rapidamente.
Pense desta maneira: imagine que você está contratando um contratado para construir uma casa para você. Se você disser: "Construa-me algo de bom", você pode acabar com uma casa na árvore quando o que você realmente queria era um rancho de três quartos com uma piscina. Mas se você lhes entregar as plantas e disser: "Eu quero essa casa exata com esses recursos exatos", eles saberão exatamente o que fazer.
AI funciona da mesma maneira. Se suas instruções forem específicas, a saída será melhor. Em vez de dizer: “Corrija este código”, tente algo como, “Corrija o problema com o botão Enviar não funcionando quando um usuário clicar nele”. Em vez de "Make My App Pretty", diz, "modernize a interface do usuário do aplicativo com fontes profissionais e elegantes e ícones de alta qualidade". Veja a diferença? A IA agora sabe exatamente o que você deseja e tem um caminho claro a seguir.
Um truque que aprendi é começar com a frase certa específica da tarefa-pense nela como o molho secreto que coloca a IA no modo certo. Aqui estão exemplos de frases que você pode usar para diferentes situações. Sinta -se à vontade para copiar, ajustar e usá -los o quanto quiser.
Quando algo está quebrado:
Isso diz à IA para se concentrar em corrigir um problema específico. Em vez de tentar refazer todo o seu código, ele abriga a resolução desse problema.
Dica profissional: se você souber o que quebrou as coisas (como uma determinada linha de código), inclua esse detalhe. E se você não tem certeza? Não se preocupe - apenas se concentre em descrever os sintomas do problema o mais claramente possível.
Ao adicionar novos recursos:
Essa frase vale o seu peso em ouro porque diz à IA duas coisas críticas: (1) o que você deseja adicionar e (2) o que não tocar. Confie em mim, você não quer que a IA quebre acidentalmente algo enquanto adiciona seu novo recurso brilhante. É por isso que a parte "sem remover nenhum outro recurso" é tão importante - mantém tudo o mais intacto.
Quando você precisa corrigir erros do navegador:
Ok, essa pode ser a dica profissional mais amigável de iniciantes de todos os tempos. Se você está construindo um aplicativo da web e as coisas não estão funcionando, seu console de navegador é como um detetive que já descobriu a cena do crime para você. Para encontrá-lo, clique com o botão direito do mouse na sua página da web, clique em "Inspecionar" e acesse a guia "Console". Você verá mensagens de erro lá - apenas copie -as e coloque -as em sua ferramenta de IA.
Por que isso funciona tão bem? Como essas mensagens de erro geralmente contêm as informações exatas, a IA precisa descobrir o que deu errado. É como dar um roteiro para consertar seu aplicativo. Sério, esse truque é um salva -vidas.
Quando você deseja melhorar a aparência do seu aplicativo:
Vamos ser reais - o design é subjetivo. O que parece ótimo para uma pessoa pode não ser a xícara de chá de outra pessoa. É por isso que é especialmente importante orientar sua IA com palavras como "moderno", "profissional" e "alta qualidade". Esses tipos de adjetivos ajudam a IA a entender a vibração geral que você está buscando.
Dica profissional: se você possui um aplicativo ou site específico que você ama, mencione -o! Por exemplo: "Faça com que isso se pareça mais com o design do Spotify". A IA tentará imitar esse estilo e aplicá -lo ao seu projeto.
Ao remover os recursos:
A remoção de recursos pode ser complicada, porque você não deseja retirar acidentalmente algo importante. Essa frase permite que a IA saiba remover o recurso de maneira limpa, mas deixe todo o resto funcionando exatamente como deveria.
Quando você acidentalmente exclui algo:
É importante que a IA saiba qual arquivo você perdeu e dar algum contexto (por exemplo, "esse arquivo lidou com todo o estilo da minha página inicial"). Embora a IA possa não restaurar o arquivo perfeitamente, ele geralmente fornece o suficiente para recuperar as coisas.
Se há uma coisa que você tira deste capítulo, seja isso: a especificidade é tudo. Quanto mais detalhes e clareza você fornecer em seus avisos, melhor a IA será executada. Aqui está o que aprendi:
Esse processo pode parecer desajeitado no começo, mas prometo, quanto mais você pratica, melhor você conseguirá.
Trabalhar com a IA para criar aplicativos e sites nem sempre é fácil de navegar. Haverá momentos em que você sentir que está em um rolo, apenas para bater em uma parede onde nada parece funcionar. Você forneceu as instruções claras da IA (ou assim você pensou), reformulou suas solicitações e, no entanto ... seu projeto não está avançando.
Este capítulo tem tudo a ver com solução de problemas dessas situações frustrantes e se soltar.
Às vezes, a IA apenas ... se esquece. Se você repetir um comando repetidamente e nada está mudando, o problema pode não estar com suas instruções - pode ser o histórico de bate -papo.
Os modelos de idiomas da IA funcionam acompanhando as instruções e respostas anteriores na conversa atual. Com o tempo, essa história pode ficar confusa com o contexto conflitante . Por exemplo:
A correção: inicie uma nova conversa com a IA.
Se o Iniciar Fresh não resolver o problema, há uma chance de o problema estar no próprio código. O código contraditório acontece quando duas peças de código dizem ao seu aplicativo para fazer coisas opostas. Isso geralmente pode ocorrer quando:
Por exemplo:
A correção: peça à IA para identificar e resolver contradições. Usando o recurso de bate -papo do seu assistente de IA, você pode fornecer um rápido como: "Revise meu código e identificar todas as partes que possam estar se contradizem". Em seguida, cole as seções relevantes no bate -papo.
Outra correção: Debug manualmente. Se a IA não estiver pegando o problema (ou você deseja apenas mais controle), comece a testar as peças do seu aplicativo uma de cada vez. Desative ou comente partes do código e veja como o aplicativo se comporta quando essas seções não estão em execução. Esse processo pode ajudá -lo a localizar as linhas específicas que causam o conflito.
Aqui está uma mudança de jogo: a IA nem sempre precisa escrever código para você. Você também pode usá -lo como um parceiro de depuração confiável para responder às suas perguntas e guiá -lo através de problemas sem realmente alterar seu projeto. Essa abordagem oferece mais controle e pode ajudá -lo a entender melhor como tudo está conectado.
Por exemplo, você pode perguntar:
Este volante não sobre entregar o controle à IA-trata-se de usá-lo como treinador de codificação. Ao tratar a IA como professora e não como executor de tarefas, você pode desbloquear insights que ajudam a solucionar problemas mais rápido e melhor.
Se um modelo de IA não estiver dando respostas com as quais você pode trabalhar, tente misturar as coisas. Modelos diferentes têm forças diferentes:
Veja como fazer:
Mesmo se você trabalha exclusivamente com uma ferramenta, a mudança para outra pode fornecer novas perspectivas valiosas (e soluções).
Changelogs são salva -vidas. Eles deixaram você:
Muitas ferramentas e IDEs permitem ativar o Changelogs ou o histórico da versão. Caso contrário, você pode usar o GIT para controle de versão para obter o mesmo efeito.
Às vezes, o problema não é você ou a IA - é o idioma que você escolheu. Se o seu aplicativo não estiver funcionando bem ou se sentir excessivamente complexo, pergunte à IA: "O [idioma atual] é a melhor escolha para este projeto?"
Esta mudança pode ser um divisor de águas.
Este capítulo se concentra em alavancar as capturas de tela de maneiras criativas e eficazes, juntamente com estratégias para fazer a faixa da IA e lembrar as mudanças, para que seu fluxo de trabalho permaneça produtivo e livre de frustração.
Uma captura de tela pode dizer mais do que palavras, especialmente quando algo na sua interface do usuário não parece ou se comporta como esperado. No entanto, sem o contexto adequado, a IA pode interpretar mal a captura de tela e assumir que representa a solução que você deseja, e não o problema que você está destacando. Para resolver isso, é fundamental emparelhar sua captura de tela com avisos precisos que guiam o foco da IA.
Forneça uma descrição clara ao lado da captura de tela:
Uma captura de tela sem contexto pode levar a mal -entendidos. Por exemplo, se você estiver destacando um bug visual, inclua uma explicação como:
Destaque as principais áreas da captura de tela:
Use ferramentas básicas de edição de imagem para circular, sublinhar ou anotar as partes da captura de tela que são relevantes para o problema. Isso ajuda a ai a saber onde se concentrar.
Esclareça que a captura de tela representa um problema:
Para garantir que a IA não interprete mal a imagem como sua saída desejada, use este prompt:
Por que isso funciona: esse fraseado diz explicitamente à IA para tratar a captura de tela como evidência da questão, garantindo que analise o problema em vez de assumir o resultado.
Outra questão comum é quando a IA gera alterações de código que não aparecem na interface do usuário do aplicativo ou no site. Isso pode acontecer por vários motivos - problemas de implantação, alterações não salvas ou até bugs ocultos na estrutura do seu projeto. As capturas de tela são especialmente úteis aqui, porque podem capturar visualmente os estados "antes" e "depois", ajudando a IA a identificar o que deu errado.
Tire duas capturas de tela:
Inclua as duas capturas de tela em seu prompt com uma explicação como:
Use instruções direcionadas para serem mais profundas:
Por que isso funciona: a combinação de capturas de tela com os avisos fornece à IA o contexto visual e escrito, facilitando a identificação de problemas subjacentes.
As capturas de tela não são apenas para identificar problemas na interface do usuário. Aqui estão algumas maneiras adicionais de usar capturas de tela para melhorar a comunicação com seu assistente de IA:
Mostrar mensagens de erro ou logs:
Se o seu console de navegador ou log de aplicativos mostrar um erro, tire uma captura de tela e inclua um prompt como:
Capturar comportamento inesperado em ambientes vivos:
Ao depurar projetos implantados, tire capturas de tela de qualquer comportamento inesperado e descreva o que deveria ter acontecido:
Destaque os elementos ausentes na interface do usuário:
Se algo está faltando na sua interface do usuário (por exemplo, uma imagem, botão ou texto), use uma captura de tela para mostrar sua ausência:
Comparando designs:
Use capturas de tela de projetos de aplicativos ou projetos semelhantes como inspiração e peça à IA que replique elementos desses designs:
Outro desafio frequente com o desenvolvimento assistido pela AI é quando a IA esquece as edições anteriores ou perde o controle das mudanças que fez. Para combater isso, você pode pedir à IA para criar um sistema de rastreamento de mudança personalizado em seu projeto. Este sistema documentará as alterações que faz, agindo como uma "memória" para referência sempre que algo der errado.
Isso pode incluir:
Um arquivo de log centralizado:
A IA pode criar um arquivo (por exemplo, changelog.txt ), onde anexa automaticamente uma descrição de cada alteração que faz:
Timestamp: 2025-01-06 11:30PM
File Edited: main.js
Description: Fixed the submit button functionality to redirect to the confirmation page.
Comentários do código embutido:
Peça à IA para anotar suas alterações diretamente no código:
// Added event listener to fix the submit button issue (2025-01-06)
submitButton.addEventListener('click', handleSubmit);
Números de versão ou tags:
Peça aos números ou tags da versão incorporada da IA dentro do código para que você possa reverter para pontos específicos, se necessário:
https://github.com/techcow2/cursor-agent-tracking
Ao trabalhar em um projeto, você deve encontrar questões - seja acidente, comportamento inesperado ou erros persistentes. Esses momentos podem ser frustrantes, mas há uma maneira simples e eficaz de orientar a IA para lidar com esses desafios cuidadosamente, evitando armadilhas conhecidas. Esta seção mostrará como criar instruções atenciosas que ajudam a IA a enfrentar problemas de maneira eficaz sem apresentar novos.
Às vezes, ao tentar corrigir um problema ou adicionar um novo recurso, você pode achar que a IA repete inadvertidamente o mesmo erro ou apresenta novos problemas. Isso pode acontecer porque a IA não está ciente dos erros passados ou não recebe contexto suficiente para evitá -los. Sem orientação clara, pode ignorar detalhes críticos ou criar efeitos colaterais não intencionais.
Para evitar esses problemas, você pode criar instruções que combinam a descrição da tarefa com instruções explícitas sobre o que evitar. Isso garante que a IA aborda a tarefa com cautela e se concentra em resolver o problema sem causar mais complicações.
Reverter para um estado estável (se necessário):
Identifique e documente o problema:
Crie seu aviso:
Implement [task/feature] carefully while avoiding [specific problem/error]. Ensure all existing functionality remains intact.
Forneça contexto (se aplicável):
The error might be caused by how the product list is being rendered. Please ensure any changes to this part of the code do not introduce new bugs.
Revise e teste de saída:
Ao criar ou aprimorar um site ou um aplicativo baseado na Web, a eficiência e o desempenho são dois fatores críticos. Uma maneira eficaz de atingir esses objetivos é o uso de bibliotecas de rede de entrega de conteúdo (CDN) . Este capítulo o guiará através do que é uma biblioteca da CDN, como beneficia seu projeto e apresentará algumas das bibliotecas mais populares, como CSS de Tailwind, Bootstrap, UI material e muito mais. Ele também fornecerá exemplos úteis sobre como solicitar ao seu assistente de IA a integrar e usar essas bibliotecas - especialmente útil se você é novo em codificar e confiar na IA para simplificar as tarefas de desenvolvimento.
Uma rede de entrega de conteúdo (CDN) é uma rede geograficamente distribuída de servidores que fornece conteúdo da Web - como bibliotecas JavaScript, estruturas CSS ou fontes - rapidamente para os usuários com base em sua localização. Uma biblioteca CDN refere -se a uma versão de uma estrutura ou ferramenta popular (como bootstrap ou jQuery) hospedada nessas redes. Em vez de baixar os arquivos em seu próprio servidor ou máquina de desenvolvimento, você os referencia diretamente no CDN.
Tempos de carregamento mais rápido
O CDNS serve arquivos de servidores localizados mais próximos de seus usuários, reduzindo o tempo necessário para o seu site carregar.
Largura de banda reduzida para o seu servidor
Descarregar a hospedagem da biblioteca para um CDN significa que seu próprio servidor não precisa lidar com esses downloads de arquivos.
Facilidade de implementação
Você pode adicionar bibliotecas poderosas rapidamente - geralmente com apenas uma ou duas linhas de código.
Atualizações automáticas
Os CDNs geralmente hospedam as versões mais recentes das bibliotecas, para que você possa se manter atualizado facilmente.
Vantagens de cache
Se um usuário já carregou a mesma biblioteca ou estrutura de uma CDN em outro site, seu navegador poderá usar a versão em cache, acelerando mais os tempos de carregamento.
Se você é novidade em codificação e confia na IA para configurar seu projeto, aqui estão exemplos rápidos que você pode usar para que a IA lida com a integração da biblioteca:
Integração de uma estrutura CSS
Exemplo de prompt:
“Use o CDN do bootstrap no meu arquivo HTML existente. Certifique -se de que a barra naval cai no celular. Coloque um rodapé no fundo com um simples aviso de direitos autorais. ”
Migrando de uma estrutura para outra
Exemplo de prompt:
“Substitua o CSS do Tailwind por Bootstrap via CDN no meu projeto. Converta cuidadosamente as classes existentes para os equivalentes de bootstrap para manter o mesmo design geral. ”
Adicionando um utilitário JavaScript
Exemplo de prompt:
“Inclua Lodash de um CDN no meu index.html. Então, no meu arquivo main.js, demonstre como usar a função Debounce de Lodash para uma entrada de texto. ”
Esses avisos fornecem a clareza da IA sobre qual biblioteca usar, como usá -la (por meio de um CDN) e quaisquer tarefas ou recursos específicos que desejar implementar.
Abaixo, você encontrará bibliotecas populares que poderá adicionar facilmente ao seu projeto por meio de uma CDN. Cada entrada inclui uma descrição, notas de uso, um snippet de amostra e um exemplo imediato para sua IA.
Descrição:
Uma estrutura CSS da Utility-primeiro que ajuda a criar designs personalizados rapidamente usando classes predefinidas no seu HTML.
Melhor para:
Desenvolvedores que desejam controle granular sobre o design sem escrever muitos CSs personalizados.
Implementação de amostra:
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
>
Exemplo rápido da IA:
“Adicione CSS do Tailwind ao meu projeto por meio de um CDN. Crie uma página inicial com um cabeçalho, uma seção simples de herói e um rodapé. Use aulas de Tailwind para garantir um design limpo e moderno. ”
Descrição:
Uma das estruturas CSS mais amplamente utilizadas para criar sites responsivos e de primeira linha. Ele vem com componentes pré-projetados como barbas, formas, modais e muito mais.
Melhor para:
Iniciantes que desejam um design rápido e consistente com a configuração mínima.
Implementação de amostra:
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
Exemplo rápido da IA:
“Adicione os links mais recentes de Bootstrap CDN ao meu site. Crie uma barra de navegação responsiva com um suspensão para 'serviços' e uma barra de pesquisa à direita. Certifique -se de ficar bem em dispositivos móveis. ”
Descrição:
Uma biblioteca baseada em React que implementa o sistema de design de materiais do Google, oferecendo componentes prontos para uso, como botões, cartões e diálogos.
Melhor para:
REACTIROS REAÇÕES que exigem uma estética de design elegante, moderno e profissional.
Implementação de amostra:
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
>
npm install @mui/material @emotion/react @emotion/styled
(Enquanto a interface do usuário do material recomenda principalmente o NPM, você ainda pode fazer referência às fontes de ícone via CDN.)
Exemplo rápido da IA:
“Integre os ícones de materiais de um CDN e use -os no meu aplicativo React. Crie um componente de cartão simples para exibir produtos com um botão 'Adicionar ao carrinho' de estilo material ".
Descrição:
Uma biblioteca de ícones abrangente que oferece ícones de vetores escaláveis que podem ser facilmente estilizados com o CSS.
Melhor para:
Adicionando rapidamente ícones de mídia social, ícones NAV ou qualquer outra iconografia sem criar SVGs personalizados.
Implementação de amostra:
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
>
Exemplo rápido da IA:
“Adicione a fonte impressionante ao meu HTML via CDN. Substitua todos os ícones de espaço reservado na minha barra de marinho por ícones impressionantes da fonte para 'Home', 'perfil' e 'carrinho'. Certifique -se de escalar corretamente no celular. ”
Descrição:
Uma biblioteca JavaScript clássica conhecida por simplificar a manipulação do DOM, o manuseio de eventos e as operações de Ajax.
Melhor para:
Projetos herdados ou iniciantes que desejam fazer interações complexas na interface do usuário sem escrever JavaScript de baunilha extenso.
Implementação de amostra:
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
></script>
Exemplo rápido da IA:
“Adicione jQuery via CDN ao meu index.html. Mostre -me como ocultar uma div quando um usuário clicar em um botão e registre uma mensagem de sucesso no console. ”
Descrição:
Uma biblioteca de utilitários JavaScript que fornece uma ampla gama de funções para manipulação de dados, incluindo clonagem profunda, debouning e muito mais.
Melhor para:
Simplificando operações complexas em matrizes, objetos e strings.
Implementação de amostra:
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
></script>
Exemplo rápido da IA:
“Adicione o Lodash de um CDN. Converta meus métodos existentes em loops em Lodash e demonstre como debuçar um campo de pesquisa. ”
Descrição:
Uma biblioteca CSS que oferece animações pré-fabricadas (desbotamento, salto, slide etc.) que você pode aplicar a elementos adicionando classes específicas.
Melhor para:
Adicionando rapidamente animações aos elementos sem escrever animações CSS personalizadas.
Implementação de amostra:
<link
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
rel="stylesheet"
>
Exemplo rápido da IA:
“Inclua o Animate.css via CDN e aplique uma animação de desbaste na minha seção de heróis na página da página. Aplique também um efeito de rejeição ao botão 'Inscreva -se agora'. "
Descrição:
Uma biblioteca JavaScript versátil para criar gráficos e gráficos interativos.
Melhor para:
Iniciantes que desejam uma maneira direta de visualizar dados sem mergulhar em bibliotecas mais complexas.
Implementação de amostra:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: ['red', 'blue', 'yellow']
}]
}
});
Exemplo rápido da IA:
“Adicione o Chart.js por meio de um CDN e crie um gráfico de barras mostrando dados mensais de vendas. Rotule o eixo y como 'vendas' e o eixo x com os meses do ano. ”
Identifique suas necessidades
Decida se você precisa de ajuda principalmente com estilo (CSS) ou com funcionalidade JavaScript. Algumas bibliotecas (como Bootstrap ou Tailwind) se concentram no design, enquanto outras (como JQuery ou Lodash) se concentram em ajudar nas tarefas JavaScript.
Verifique a compatibilidade
Verifique se a biblioteca que você escolher funciona bem com as ferramentas ou estruturas que você já possui.
Procure por comunidade e documentação ativa
As bibliotecas bem apoiadas normalmente têm melhores tutoriais, comunidades maiores para solução de problemas e atualizações frequentes.
Pergunte à sua AI
Se você ainda não tiver certeza de qual biblioteca usar, solicite sua IA para conselhos:
“Qual biblioteca é melhor para uma interface de usuário altamente personalizável para iniciantes e altamente personalizável: Tailwind, Bootstrap ou UI material?”
A IA pode explicar os prós e contras para cada escolha no contexto do seu projeto.
