# Image To Code

> Skill that converts a reference image into an interface

- Category: Agent skills (`skills`)
- Official: no confirmed official link
- Wunderlust: https://wunderlust.xyz/r/image-to-code
- Image: https://wunderlust.xyz/media/image-to-code-poster.jpg
- Video preview: https://wunderlust.xyz/media/image-to-code.webm
- Added: 2026-11-05

## What it is

Agent workflow that turns a visual reference into an interface.

## What it’s for

To go from a screenshot or mockup to a first version in code.

## Benefits

- Converts a visual reference into an interface

## Caveats

- Official address not confirmed

## Similar on Wunderlust

- [Extract Design System](https://wunderlust.xyz/r/extract-design-system.md): Skill that extracts colors, typography and spacing from a design
- [Apple Design Skill](https://wunderlust.xyz/r/apple-design-skill.md): Agent skill with Apple-style interface design guidelines
- [Brandkit](https://wunderlust.xyz/r/brandkit.md): Agent skill that creates a visual brand proposal
- [Frontend Design](https://wunderlust.xyz/r/frontend-design.md): Anthropic skill that improves the visual direction of interfaces generated by Claude Code
- [Frontend Slides](https://wunderlust.xyz/r/frontend-slides.md): Skill that creates presentations as HTML pages and converts PowerPoint
- [Interface Skills](https://wunderlust.xyz/r/interface-skills.md): Jakub Krehel's set of 14 skills for building and reviewing interfaces