Conteúdo

Você tem um layout e quer um site parecido de verdade. Mesmas cores, letras no lugar certo, imagens com o tamanho que você escolheu. A IA ajuda, mas às vezes resolve “dar seu toque”. E lá se foi metade do seu design.

O Kodety AIDoff ajuda a conduzir esse trabalho. Ele acrescenta instruções para a IA prestar mais atenção à referência, transformar o desenho em uma página que funciona e conferir o resultado. É isso que chamamos de skill: uma orientação extra para aquela tarefa.

Da referência à tela funcionando

Como isso fica na prática? Estes são três exemplos publicados no repositório do Kodety AIDoff. Clique nas imagens para abrir em tamanho original e conferir os detalhes.

A partir de um print

Este dashboard financeiro foi recriado a partir de uma única imagem, sem o arquivo do Figma. Na comparação, a referência está à esquerda e o resultado à direita. Repare na organização dos cards, nas cores e na tipografia.

Comparação de um dashboard financeiro: referência à esquerda e implementação com Kodety AIDoff à direita, criada a partir de um print
Dashboard financeiro · Print → código

Com o arquivo do Figma

Com acesso ao Figma, a skill também pode consultar medidas e recuperar os elementos originais do design. Os dois exemplos abaixo mostram as páginas implementadas e abertas no navegador.

Dashboard de trading implementado com Kodety AIDoff a partir do Figma, com navegação lateral, indicadores e gráfico de desempenho
Dashboard de trading · Figma → código
Visão geral de um workspace implementada com Kodety AIDoff a partir do Figma, com indicadores, áreas de trabalho e painel lateral
Visão geral de um workspace · Figma → código

A fidelidade varia conforme a qualidade da referência e o acesso às fontes e aos arquivos do projeto. Imagens de Kodety / Matusael Horch, disponíveis no repositório do Kodety AIDoff sob CC BY-SA 4.0.

Preciso ter o arquivo no Figma?

Não. Você pode começar de dois jeitos:

  • Com Figma: compartilhe o link da tela que quer transformar em site. A IA precisa conseguir abrir o arquivo; confira as permissões e a conexão com o Figma.
  • Com print: anexe uma imagem nítida da página. Se tiver uma versão para computador e outra para celular, mande as duas.

O Figma pode revelar detalhes que uma imagem não mostra. O print já dá uma boa direção visual. Nos dois casos, envie também seu logo, suas imagens e a fonte, se tiver esses arquivos. Quanto menos a IA precisar adivinhar, melhor.

Bora fazer a primeira tela

Depois de instalar a skill, abra o trabalho em que quer criar o site, anexe sua referência ou cole o link do Figma. Comece com uma página e explique o que ela precisa fazer:

Use Kodety AIDoff para transformar esta referência em um site. Preserve as cores, a tipografia e a organização. Quero que funcione no celular e que o menu abra de verdade. Mostre o resultado para eu conferir.

Se o botão precisa levar a um formulário, diga isso. Se você ainda não tem o formulário, diga também. Uma imagem mostra a aparência; ela não conta toda a história do que acontece depois do clique.

Ficou próximo? Agora ajuste o que importa.

Abra a página, teste o menu e veja como ela fica no celular. Compare com a referência. O título ocupa o mesmo espaço? As imagens aparecem inteiras? Dá para ler e clicar sem esforço?

Quando algo estiver diferente, peça uma correção específica:

O título ficou grande demais e quebrou uma linha antes. Reduza até ficar como na referência. No celular, deixe mais espaço entre o texto e o botão.

Isso ajuda muito mais que “deixa bonito”. A skill organiza o trabalho, mas não promete acertar tudo sozinha. Sua direção continua fazendo diferença. E um site funcionando no seu computador ainda precisa ser publicado para outras pessoas acessarem.

Como começar no programa que você usa

Escolha sua opção abaixo. A instalação é feita uma vez; depois, você chama a skill quando precisar.

Já uso Codex

Abra o Terminal, a janela em que você digita comandos no computador, e cole as duas linhas abaixo. Elas usam Git e funcionam em macOS, Linux ou Git Bash no Windows.

mkdir -p "$HOME/.agents/skills"
git clone https://github.com/onunbeai/kodety-aidoff.git "$HOME/.agents/skills/kodety-aidoff"

Depois, comece seu pedido com $kodety-aidoff e anexe a referência. Se não aparecer, reinicie o Codex. Se já tiver uma instalação nessa pasta, preserve-a.

Já uso Claude Code

No Terminal, a janela de comandos do computador, cole estas linhas. Elas usam Git e funcionam em macOS, Linux ou Git Bash no Windows.

mkdir -p "$HOME/.claude/skills"
git clone https://github.com/onunbeai/kodety-aidoff.git "$HOME/.claude/skills/kodety-aidoff"

Chame com /kodety-aidoff, seguido do pedido e da referência. Reinicie o Claude Code se necessário. Preserve uma instalação que já exista nessa pasta.

Uso Claude no navegador ou app
  1. Baixe kodety-aidoff.zip e não descompacte.
  2. Ative Code execution and file creation.
  3. Abra Customize → Skills → + → Create skill → Upload a skill.
  4. Envie o ZIP, habilite a skill e peça para usar Kodety AIDoff com sua referência.

Essas opções podem depender das configurações da sua organização. Instalar a skill não conecta automaticamente seus arquivos ou o Figma.

Quer as instruções completas? Elas estão na página do Kodety AIDoff no GitHub.