← Back to Skills Marketplace

Ai Image To Code

Name: Ai Image To Code
Author: wangjipeng977

by 王继鹏 · GitHub ↗ · v1.0.0 · MIT-0

cross-platform ✓ Security Clean

Downloads

Stars

Active Installs

Versions

Install in OpenClaw

/install ai-image-to-code-jipeng

Description

Converts UI screenshots into semantic HTML/CSS or React + Tailwind components with responsive, context-aware design and accurate layout extraction.

README (SKILL.md)

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

Usage Guidance

Reasonable to install from a security perspective. Be aware that screenshots may be sent to a vision model for analysis, so avoid using it on confidential UI, credentials, private customer data, or unreleased designs unless that data handling is acceptable.

Capability Assessment

✓ Purpose & Capability

The artifacts consistently describe screenshot-to-HTML/CSS or React/Tailwind conversion, plus a describe-only mode; the stated MiniMax vision-model use is coherent with image analysis.

✓ Instruction Scope

Runtime instructions are narrow and user-triggered around pasted UI screenshots; no prompt overrides, hidden commands, credential collection, destructive actions, or unrelated data access were found.

✓ Install Mechanism

Installation is ordinary ClawHub/manual skill copy behavior, with no declared dependencies, install scripts, or package execution hooks.

ℹ Credentials

Users should expect submitted screenshots to be processed by a vision model if the skill is used; this is purpose-aligned and disclosed, but sensitive screenshots should be avoided.

✓ Persistence & Privilege

No persistence beyond normal skill installation was identified, and there is no background worker, daemon, privilege escalation, or local profile/session access.

How to Use

Make sure OpenClaw is installed (local or Docker)
Run the install command in chat: /install ai-image-to-code-jipeng
After installation, invoke the skill by name or use /ai-image-to-code-jipeng
Provide required inputs per the skill's parameter spec and get structured output

Version History

v1.0.0

Initial release

Metadata

Slug ai-image-to-code-jipeng

Version 1.0.0

License MIT-0

All-time Installs 0

Active Installs 0

Total Versions 1

Frequently Asked Questions

What is Ai Image To Code?

Converts UI screenshots into semantic HTML/CSS or React + Tailwind components with responsive, context-aware design and accurate layout extraction. It is an AI Agent Skill for Claude Code / OpenClaw, with 50 downloads so far.

How do I install Ai Image To Code?

Run "/install ai-image-to-code-jipeng" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Ai Image To Code free?

Yes, Ai Image To Code is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Ai Image To Code support?

Ai Image To Code is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Ai Image To Code?

It is built and maintained by 王继鹏 (@wangjipeng977); the current version is v1.0.0.

More Skills