Skip to content

README.md

Latest commit

 

History

History
42 lines (26 loc) · 2.11 KB

README.md

File metadata and controls

42 lines (26 loc) · 2.11 KB

Image to HTML

Image to HTML

Cursor Plugin

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.

Install in Cursor

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.

How it works

  1. Provide an image — Attach or paste a screenshot, design mockup, or wireframe. This is required.
  2. Run the /image-to-html command or ask the agent to convert the image to HTML.
  3. 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).
  4. Open the output in your browser (or use your project’s preview).
  5. Tell the agent what to adjust; it will update the code and repeat until you’re satisfied.

Components

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).

Author & support

Rakesh Bisht — GitHub. For bugs or feature requests, open an issue.

License

MIT