image-to-code — Codex skill: what it does, how to install
Translates screenshots, mockups, and AI images into responsive frontend code. Helpful for turning visual concepts into functional web prototypes.
npx skills add openai/plugins --skill image-to-code -a codexWhat image-to-code does
The skill requires a visual target. A written prompt is not enough. It measures layout spacing, matches typography with open fonts, and selects an icon library fitting the design. Drawing graphics with CSS or hand-crafted SVG shapes is strictly forbidden.
Missing textures and hero graphics get cataloged up front. The workflow delegates asset creation to up to three parallel subagents while the main agent handles components. Transparent backgrounds require post-processing because the built-in generator outputs opaque files.
Verification in ChatGPT Work Mode relies on an npm dev script exposed on host 0.0.0.0 and port 4173 with Vite configured for terminal.local. It is worth installing when you need high-fidelity prototypes without manually cropping and organizing images.
What it helps with
- Recreate interactive frontends directly from mockups or screenshots
- Generate missing background imagery and textures using parallel subagents
- Match target visual typography and icon sets using free alternatives
- Scaffold mobile viewports inside preconfigured device shell templates
Example prompts for the agent
- Implement this landing page mockup as a responsive web app
- Turn this mobile app screenshot into code using the mobile-app template
- Build an interactive frontend matching the latest generated design concept
How to install image-to-code
1Skills CLI (Vercel)
npx skills add openai/plugins --skill image-to-code -a codex2Manually: put the files in place
.agents/skills/image-to-code/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add openai/plugins --skill image-to-code -a claude-code2Manually: put the files in place
~/.claude/skills/image-to-code/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/image-to-code/
Manually: put the files in place
.cursor/skills/image-to-code/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install openai/plugins image-to-code2Manually: put the files in place
.github/skills/image-to-code/SKILL.mdPlatform CLI
gemini skills install https://github.com/openai/plugins --path plugins/product-design/skills/image-to-codeManually: put the files in place
.devin/skills/image-to-code/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set201
The whole set →Similar
Questions about image-to-code
How do I install image-to-code in Codex?
Run npx skills add openai/plugins --skill image-to-code in your terminal.
What does image-to-code do?
It translates screenshots, mockups, and AI-generated concepts into working frontend code with matched fonts, icons, and generated raster assets.
Can it build a frontend from a text prompt alone?
No, the checklist strictly requires an attached visual reference, mockup, or image generation output before starting implementation.
