SkillsCategoriasSobre

Prompt Engineering para geração de UI por IA: a arte de conversar com a máquina

por Fabricio Telles··design.app.br

Instalação

◇ npm install @copilotkit/react-core
→ Repositório

Prompt Engineering para UI — a arte de conversar com a IA

O prompt é a interface entre você e a IA

Sabe por que o Impeccable funciona tão bem? Não é magia — é prompt engineering embutido. Cada comando (/polish, /typeset, /bolder) é um prompt extremamente bem escrito disfarçado de funcionalidade.

Quando você escreve “crie uma landing page” e recebe algo genérico, o problema não é a IA. É que “crie uma landing page” não diz nada. É como pedir pra um designer “faz algo bonito” — o resultado vai ser a interpretação mediana do que “bonito” significa.

O que funciona na prática

Especificidade mata genérico. Em vez de “página de login”, tente: “Página de login pra app de produtividade. Campos e-mail e senha, botão primário ‘Entrar’, link ‘Esqueceu a senha?’, login social Google e Apple. Estilo minimalista, sem serifa, layout mobile-first.” Parece óbvio, mas a diferença no output é brutal.

Linguagem declarativa > imperativa. Descreva o estado final que você quer, não os passos pra chegar lá. “O card deve ter sombra sutil que aumenta no hover” é melhor que “adicione um box-shadow e depois mude no hover state”.

Contexto e restrições mudam tudo. “Segue o design system X. Contraste WCAG AA. Mobile-first. Sem dependências externas.” — cada restrição elimina centenas de decisões genéricas que a IA tomaria mal.

Exemplos valem mais que mil palavras. Quando eu digo “como o Linear faz” ou “no estilo da Vercel”, a IA entende mais do que qualquer descrição abstrata. Few-shot prompting é pra UI o que referência visual é pra designer.

Divida tarefas complexas. Um prompt de “crie um dashboard com 6 widgets, sidebar, tabela e gráficos” vai gerar algo ruim. Gere a sidebar primeiro. Depois cada widget. Depois componha. Mesma lógica de componentização que usamos no código.

O que o Impeccable ensina sobre prompts

O /teach-impeccable é basicamente um gerador de contexto pra prompts futuros. Ele pergunta sobre público, marca, casos de uso — e salva. Depois, todo prompt que a IA processa tem esse contexto. É prompt engineering automatizado.

Isso é a lição: o melhor prompt é o que você não precisa escrever de novo toda vez. Skills são prompts persistentes.

O anti-padrão mais comum

Prompt vago → resultado genérico → “a IA não presta” → desiste. O ciclo se repete. A IA presta. O prompt não prestava.

Fontes: CopilotKit — Generative UI | Firecrawl — Agent Frameworks

Skills relacionadas