← Back to Skills Marketplace
wangjipeng977

Ai Image To Code

by 王继鹏 · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ Security Clean
44
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install ai-image-to-code-yanyu
Description
Converts UI screenshots into semantic HTML/CSS or React+Tailwind code with responsive layouts and contextual placeholder content.
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
VirusTotal was clean, and the supplied scanner concerns were not supported by the artifacts I could inspect. Because the artifact set appears mismatched or incomplete, users should still review the actual published skill files before installing, especially any instructions that ask them to submit screenshots or sensitive local content.
Capability Assessment
✓ Purpose & Capability
The available artifacts describe ClawHub registry/development functionality and repo-local agent skills; I did not find the referenced image-to-code skill behavior or purpose-mismatched capability in the inspected files.
ℹ Instruction Scope
No pre-scan injection signals were supplied, and the available skill files are scoped to development, moderation, UI proof, or Convex workflows rather than hidden runtime control.
ℹ Install Mechanism
The workspace did not contain a standalone target skill package or the referenced tests/test_skill.py file, so no suspicious install hook or automatic execution path was verified from the cited scanner evidence.
✓ Credentials
No artifact-backed evidence showed unexpected credential/session use, broad private indexing, destructive actions, or exfiltration for the target skill version.
✓ Persistence & Privilege
No unbounded persistence, privilege escalation, background worker, or hidden long-running behavior was identified in the available target evidence.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install ai-image-to-code-yanyu
  3. After installation, invoke the skill by name or use /ai-image-to-code-yanyu
  4. 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-yanyu
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 code with responsive layouts and contextual placeholder content. It is an AI Agent Skill for Claude Code / OpenClaw, with 44 downloads so far.

How do I install Ai Image To Code?

Run "/install ai-image-to-code-yanyu" 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
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463556 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259610 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200551 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191226 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190235 · by oswalpalash

💬 Comments