Imagem antes do código
Gera a imagem de design, analisa a fundo, e só então implementa para bater com ela.
image-to-code- Peso
- massivo
- 1.229 linhas · 600+ linhas
- Gatilho
- o agente chama
- O agente dispara sozinho quando a descrição bate com a tarefa.
- Encaixe
- livre
- Combina com 1 outra.
O que ela faz
Inverte a ordem usual. Em vez de descrever em texto e torcer, o agente produz a referência visual, estuda a própria referência e implementa contra ela. Traz regras específicas contra os vícios do Codex: boards minúsculos, cards dentro de cards dentro de cards, hero entulhado.
Quando não usar
Massiva — 1228 linhas. Só vale para trabalho visualmente crítico.
Combina com
Aparece em
Ficha técnica
- Descrição original
- 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 under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
- Caminho no repo
skills/image-to-code-skill/SKILL.md- SKILL.md
- 1.229 linhas
- Seções
- 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 · 7. OPTIONAL DETAIL / EXTRACTION IMAGE RULE · 8. CLEAN ANALYSIS STANDARD · 9. DEEP IMAGE ANALYSIS REQUIREMENT · 10. IMAGE-FIRST CODEX WEBSITE WORKFLOW · 11. WHEN TO TRIGGER IMAGE GENERATION FIRST · 12. THE COMBINATORIAL VARIATION ENGINE · 13. WEBSITE REFERENCE RULE · 14. HERO MINIMALISM RULES
Instalar — vem com o pacote inteiro (13 skills)
CLI skills
No terminal, de qualquer diretório.
npx skills add Leonxlnx/taste-skill
Quatro das treze declaram registros estéticos que se contradizem. Instale o pacote, escolha uma.
→O que essa instalação faz na sua máquinaFechar
Como o método funciona
O gerenciador da Vercel Labs. Usa o GitHub como registro, copia para ~/.agents/skills e cria symlink para cada agente instalado na máquina.
Precisa ter
- Node 18+
- Geração de imagem para as skills de imagegen
Onde cai no disco
~/.agents/skills/ + symlink em ~/.claude/skills/
Sair
npx skills remove Leonxlnx/taste-skillDo mesmo pacote