Cursor plugin — Turn an image (screenshot or mockup) into pixel-accurate HTML and CSS. The agent analyzes the image, infers layout and styles, and generates vanilla HTML and CSS only (no Tailwind, Bootstrap, or React/Vue unless you ask). Then it guides you to open the result in the browser and iterate until the layout matches.
This repo is a Cursor plugin. To use it:
- From this repo: In Cursor, add a plugin from a Git URL:
https://github.com/raksbisht/image-to-html, or clone the repo and add the plugin from the repo root (this repository is the plugin). - From the marketplace: Install from the Cursor Marketplace when published.
- Provide an image — Attach or paste a screenshot, design mockup, or wireframe. This is required.
- Run the
/image-to-htmlcommand or ask the agent to convert the image to HTML. - The agent analyzes the image, extracts structure and styles, and generates plain HTML and CSS only — no frameworks or libraries unless you ask (viewport and colors are inferred).
- Open the output in your browser (or use your project’s preview).
- Tell the agent what to adjust; it will update the code and repeat until you’re satisfied.
| Type | Purpose |
|---|---|
| Rule | When the user attaches an image and asks for HTML or to “convert” / “build this,” run the image-to-html skill. |
| Skill | image-to-html: analyze image → generate HTML/CSS → instruct open in browser → iterate on feedback until layout looks good. |
| Command | /image-to-html — Run the full workflow (generate, open in browser, iterate). |
Rakesh Bisht — GitHub. For bugs or feature requests, open an issue.
MIT