image-to-codepor Leonxlnx

Image to Code Skill.

Uma skill para Claude Code e Codex voltada a design de UI: gera e analisa primeiro uma imagem de design, depois implementa a página correspondente.

Web & UI
Código de UI

Baixar OpenDesign Ver guia de uso

Leonxlnx/taste-skill · skills/image-to-code-skill/SKILL.mdSKILL.md

--- name: image-to-code description: Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. MANDATORY IMAGE-FIRST RULE ## 3. GENERATE ENOUGH IMAGES RULE ## 4. CODEX-SPECIFIC SECTION IMAGE RULE ## 5. DO NOT CROP OLD IMAGES RULE ## 6. FRESH RE-GENERATION RULE

Cabeçalhos de metadados e seção lidos do arquivo upstream em 2026-09-14 · 36.361 caracteres no total

01 O que faz

O que o skill image-to-code faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Este skill impõe um workflow obrigatório com prioridade em imagem para tarefas web visualmente importantes. O agente deve gerar as imagens de design ele mesmo antes de escrever qualquer código, e depois analisar essas imagens em profundidade para extrair tipografia, espaçamento, botões, cores e lógica de layout. No Codex, o padrão é gerar uma imagem grande e legível por seção, em vez de painéis comprimidos com múltiplas seções, e criar imagens novas e independentes para seções ou visualizações de detalhe em vez de recortar.

Ele evita ativamente layouts com caixas aninhadas, rótulos de UI falsos, pills minúsculos e heros apertados. O hero deve permanecer limpo, com no máximo 1 a 3 linhas de título. O skill impõe espaçamento generoso, reduz a poluição visual e implementa o frontend de forma fiel às referências geradas, sem derivar para layouts codificados genéricos.

Serviço de geração de imagensCódigo de UI

Veja o exemplo de prompt ↗

Como funciona

01
Criar imagens de seção separadas no Codex
Dentro do Codex, o skill gera uma imagem grande e legível por seção em vez de comprimir várias seções em um único painel.
02
Gerar imagens novas, nunca recortar
Quando uma seção precisa de uma visualização dedicada, o skill gera uma imagem nova preservando a mesma linguagem de design, em vez de recortar uma imagem maior gerada anteriormente.
03
Analisar profundamente todas as imagens geradas
O skill extrai o texto visível exato, as relações de tipografia, a lógica de espaçamento, os detalhes dos botões, a paleta de cores, a estrutura de layout e o estilo dos componentes de cada imagem antes de implementar.
04
Implementar o frontend de acordo com as referências
O código traduz o design analisado com fidelidade, preservando a lógica de layout, o ritmo de espaçamento, a ordem das seções, o clima da tipografia e o estilo dos componentes, sem derivar para padrões genéricos.

02 Encontre o ideal para você

Quando Usar a Skill image-to-code

Use a skill image-to-code no Claude Code ou Codex quando o trabalho for design de UI desse tipo. Adequação e limites abaixo são extraídos do próprio arquivo da skill.

Boa Combinação

Seções hero, landing pages, sites de marketing, sites de startups e páginas editoriais de marca onde a qualidade visual importa
Sites premium com múltiplas seções e redesigns onde o bom gosto visual e a fidelidade de implementação são centrais

Conheça os Limites

Tarefas puramente técnicas, correções de bugs, ou pedidos que já fornecem um design system preciso, onde a geração visual é desnecessária
Tarefas estruturais que são principalmente técnicas em vez de visuais por natureza

O Que Fornecer

Número de seções ou tipo de siteO skill infere o número de seções necessárias ou o tipo de site (apenas hero, landing page de 4 seções, site de 8 seções, etc.) para determinar quantas imagens gerar.
Direção visual ou preferências de estiloPedidos do usuário como 'clean', 'crazy creative', 'premium SaaS' ou 'editorial' orientam a interpretação do skill dos parâmetros de configuração base DESIGN_VARIANCE, ART_DIRECTION e outros.

03 Dentro da skill

Regras que o skill image-to-code dá ao Claude Code e ao Codex

6 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

A geração de imagem é obrigatória primeiro
Para pedidos de design de site em que a qualidade visual importa, o skill deve gerar imagens de design antes de escrever qualquer código.
Títulos de hero permanecem com no máximo 1 a 3 linhas
O título do hero deve, idealmente, permanecer dentro de 1 a 3 linhas. Se o título ficar muito longo, o skill deve reduzir o número de palavras em vez de forçar mais linhas.
Sem cards dentro de cards dentro de cards
A skill não deve usar por padrão layouts de caixas aninhadas com grandes contêineres de seção arredondados envolvendo cards dentro de cards maiores dentro de cards externos.
Reduza Agressivamente a Poluição de Micro-UI
A skill não deve poluir os designs com pílulas desnecessárias, marcadores pseudo-sistêmicos, rótulos de controle falsos, tags decorativas do tipo código, ou metadados pequenos sem sentido que não melhoram a clareza.
Gere Imagens Suficientes para Garantir Qualidade
A skill deve gerar quantas imagens forem necessárias para tornar o design legível e extraível. É melhor gerar imagens em excesso e claras do que poucas e comprimidas.
A Primeira Tela Deve Ser Limpa em Laptops Pequenos
A área do hero e da primeira visualização deve parecer usável e limpa em um laptop pequeno.

04 Coloque em prática

Instalar image-to-code no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione image-to-code ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill image-to-code

Formato genérico do CLI skills para skills/image-to-code-skill/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Design me an 8-section landing page for [AI startup name]. Keep the hero clean and readable, use separate images for each section so I can extract typography and spacing properly, and make sure the first screen feels premium on a small laptop. Avoid nested cards and fake system labels.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Verifique se as imagens de design foram geradas primeiro, antes de qualquer implementação de código, para tarefas visualmente importantes
Confirme que o texto permanece legível e, caso contrário, verifique se imagens de detalhe adicionais ou novas regenerações foram criadas em vez de recortes
Verifique se foram geradas imagens suficientes e se a quantidade de imagens não foi reduzida por conveniência
Verifique se o hero permanece limpo, com no máximo 1 a 3 linhas de título, e se não parece sobrecarregado em um laptop pequeno
Confirme que caixas aninhadas desnecessárias, pílulas inúteis, rótulos e micro-elementos técnicos falsos foram removidos
Verifique se o código implementado corresponde fielmente às referências geradas, sem se desviar para layouts genéricos codificados

No OpenDesign importe o image-to-code a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Arquivo da skill: skills/image-to-code-skill/SKILL.md Checksum do conteúdo registrado na verificação; commit ccbc156
License: MIT De LICENSE.
Estrelas do repositório: 86.946 Snapshot do GitHub tirado em 2026-09-14 para todo o repositório Leonxlnx/taste-skill, que contém 11 skills neste catálogo. Não é uma avaliação ou contagem de uso para image-to-code.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

DIRETRIZ PRINCIPAL: DESIGN DE SITE BASEADO EM IMAGEM PARA CÓDIGODefine a função da skill como gerar referências premium de sites fáceis de implementar e, em seguida, transformá-las em frontend real
CONFIGURAÇÃO BASE ATIVADefine padrões numéricos para variação de design, densidade visual, direção de arte, clareza de implementação e outros parâmetros de controle
REGRA OBRIGATÓRIA IMAGEM-PRIMEIROExige a geração de imagens antes de tarefas visuais de site; o código é a camada de tradução após a análise da imagem
REGRA DE GERAR IMAGENS SUFICIENTESInstrui a gerar quantas imagens forem necessárias para legibilidade e extração; nunca reduzir a quantidade de imagens por conveniência
REGRA DE IMAGEM DE SEÇÃO ESPECÍFICA DO CODEXNo Codex, prefira uma imagem grande por seção em vez de comprimir várias seções em um quadro ilegível
REGRA DE NÃO RECORTAR IMAGENS ANTIGASGere novas imagens específicas de seção em vez de recortar ou fatiar imagens maiores geradas anteriormente
REGRA DE NOVA REGENERAÇÃOSe uma seção não estiver clara, gere-a novamente como uma nova imagem independente, preservando a mesma linguagem visual
REGRA OPCIONAL DE IMAGEM DE DETALHE/EXTRAÇÃOCrie imagens de detalhe adicionais mais próximas para seções quando a qualidade de extração exigir texto maior ou espaçamento mais claro
REQUISITO DE ANÁLISE PROFUNDA DE IMAGEMTrate as imagens geradas como especificações de design; extraia texto, tipografia, espaçamento, botões, cores e layout antes de implementar
WORKFLOW DE SITE CODEX BASEADO EM IMAGENSDefine a ordem de execução: gerar imagens das seções, analisar profundamente, extrair o design system, implementar o frontend para corresponder
O MOTOR DE VARIAÇÃO COMBINATÓRIAFornece opções de direção visual para tema, fundo, tipografia, arquitetura do hero, sistema de seções e componentes de assinatura
REGRAS DE MINIMALISMO DO HEROImpõe heroes cinematográficos e limpos com no máximo 1 a 3 linhas de título, sem poluição visual, legíveis em laptops pequenos

A Descrição da Própria Skill

"Skill elite de image-to-code para websites no Codex. Para tarefas web visualmente importantes, ela deve primeiro gerar as imagens de design ela mesma, analisá-las profundamente e então implementar o website para corresponder o mais próximo possível. No Codex, deve preferir imagens grandes, legíveis e específicas de seção em vez de boards minúsculos comprimidos, gerar imagens standalone novas para seções ou visualizações de detalhe em vez de recortar antigas, evitar subgeração preguiçosa, evitar UI de cards-dentro-de-cards-dentro-de-cards e manter o hero limpo, espaçoso, legível e visível em um laptop pequeno."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 36.361 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill image-to-code

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Com qual agente de código devo usar essa skill?

A skill foi projetada para o Codex e faz referência explícita a comportamentos específicos do Codex. Ela determina que, dentro do Codex, deve-se preferir imagens grandes e legíveis específicas de cada seção em vez de painéis compactados, e o padrão é gerar uma imagem por seção. Fora do Codex, pode-se permitir uma composição multi-seção mais compacta.

O que acontece se a imagem de design gerada não estiver clara ou o texto estiver muito pequeno?

A skill deve gerar imagens adicionais de detalhe ou extração para essa seção, ou regenerar a seção como uma nova imagem independente.

Nunca deve recortar de uma imagem maior gerada anteriormente. Se mais imagens melhorarem a legibilidade ou a qualidade de extração, ela gera mais imagens em vez de ser econômica com a quantidade de imagens.

Image to Code

Execute image-to-code em uma tarefa real de design de UI.

Baixe o OpenDesign, importe image-to-code pelo link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills