ImageToCode
ChatGPT pluginTurn visual refs into UI
- Featured
- No
not on the featured shelf
Movement
From our daily snapshots over the last 30 days.
Rank by placement
Rank in Creativity
In its category
How this plugin compares with others in the same category. Positions are counted within the category, not across the whole directory.
Creativity244th of 319 by placement
| # | Plugin | Position | 7d |
|---|---|---|---|
| 241 | #4897 | — | |
| 242 | #4901 | — | |
| 243 | #4927 | — | |
| 244 | #4941 | — | |
| 245 | #4945 | — | |
| 246 | #4951 | — | |
| 247 | #4954 | — |
Start from a supplied or generated visual reference, analyze it carefully, and implement frontend code that matches it as closely as practical.
Example prompts
- “Implement this screenshot as a frontend”
- “Turn this design reference into production UI”
- “Recreate this visual faithfully in code”
Skills
design-taste-frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
entry-image-to-code
Use whenever the ImageToCode plugin is selected. Route the request to the intended bundled workflow while keeping all dependencies internal to this plugin.
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
full-output-enforcement
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
image-to-code
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.
- Categories
- Made by
- Saul Martí
- Sign-in
- On Install
- Capabilities
- Turn visual refs into UI
- Availability
- Available
- Version
- 2.0.0
- Keywords
- engineering-suite, image-to-code, skills
- Created
- September 10, 2026