# Web en código desde imagen (/image-to-code-skill)

/image-to-code-skill es una skill de Claude Code de la sección Web y Diseño. La mantiene Leonxlnx y se publica con licencia MIT. Para webs donde el aspecto importa, genera primero imágenes de diseño por sección, las analiza y programa la web para que coincida con ellas.

- Versión web: https://skills.sgomez.dev/es/s/image-to-code-skill
- Sección: [Web y Diseño](https://skills.sgomez.dev/es/web.md)
- Autor: Leonxlnx
- Licencia: MIT
- Código: https://github.com/Leonxlnx/taste-skill/tree/ce26fc25c0e5e8cab638f883de62d9a86ee5e45b/skills/image-to-code-skill
- Actualizada el 26 sept 2026

## Cómo pedírselo

- `Genera el diseño de esta landing page y luego impleméntala en código`
- `Necesito que el hero de mi web quede limpio y legible en pantallas pequeñas`
- `Crea imágenes de referencia por sección antes de programar este sitio`

## Instalar

macOS · Linux:

```
curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash
```

Windows:

```
irm https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.ps1 | iex
```


## Descripción del autor (traducida)

Habilidad de imagen a código de élite para sitios web, pensada para Codex. Para tareas web visualmente importantes, primero debe generar ella misma la(s) imagen(es) de diseño, analizarlas en profundidad, y luego implementar el sitio para que coincida con ellas lo más fielmente posible. En Codex, debe preferir imágenes grandes y legibles específicas de cada sección en lugar de tableros diminutos y comprimidos, generar imágenes nuevas e independientes para secciones o vistas de detalle en lugar de recortar imágenes antiguas, evitar la infra-generación perezosa, evitar interfaces de tarjetas-dentro-de-tarjetas-dentro-de-tarjetas, y mantener el hero limpio, espacioso, legible y visible en un portátil pequeño.

- [Cómo revisamos esto](https://skills.sgomez.dev/es/methodology.md)