shield_lock
JinDaGe
← Back to skills
extension
Category: OtherAPI key required

Ai Image To Code

Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. (2) user says "turn this into code", "rebuild t...

personAuthor: wangjipeng977hubclawhub
open_in_newRepositorydownloadDownload package

AI Image To Code

Emoji: 🖼️→💻

Trigger: User pastes a UI screenshot/image and wants code (HTML/CSS or React).

What It Does

Converts UI screenshots into working HTML/CSS or React + Tailwind components. Analyzes the layout structure, color palette, typography hierarchy, and spacing to produce faithful code reconstruction.

Features

  • Vision-powered layout extraction (header, sidebar, main content, etc.)
  • Multi-format output: plain HTML/CSS (default) or React + Tailwind CSS
  • Mobile-first responsive (detects mobile screenshots → max-width: 375px)
  • Contextual placeholder content (e.g., "Price: $49.99" not lorem ipsum)

Modes

| Mode | Description | |------|-------------| | /ai-image-to-code | Convert UI image to HTML/CSS | | /ai-image-to-code/react | Output React functional component + Tailwind | | /ai-image-to-code/describe | Text description of layout, no code |

How To Use

/ai-image-to-code

Paste a screenshot, ask to generate HTML/CSS.

/ai-image-to-code/react

Asks for React + Tailwind output instead.

/ai-image-to-code/describe

Just describe the layout, no code generation.

Technical Notes

  • Uses MiniMax vision model to analyze screenshot
  • Detects dark mode and applies appropriate color schemes
  • Generates semantic HTML structure
  • Tailwind classes mapped from visual analysis

Last updated: 2026-05-28