← 返回 Skills 市场

Ai Image To Code

Name: Ai Image To Code
Author: wangjipeng977

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

cross-platform ✓ 安全检测通过

总下载

当前安装

版本数

在 OpenClaw 中安装

/install ai-image-to-code-jipeng

功能描述

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

使用说明 (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

安全使用建议

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.

能力评估

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

如何使用

确保已安装 OpenClaw（本地或 Docker 部署）
在对话框中输入安装命令：/install ai-image-to-code-jipeng
安装完成后，直接呼叫该 Skill 的名称或使用 /ai-image-to-code-jipeng 触发
根据 Skill 的参数说明提供必要输入，即可获得结构化输出

版本历史

v1.0.0

Initial release

元数据

Slug ai-image-to-code-jipeng

版本 1.0.0

许可证 MIT-0

累计安装 0

当前安装数 0

历史版本数 1

常见问题

Ai Image To Code 是什么？

Converts UI screenshots into semantic HTML/CSS or React + Tailwind components with responsive, context-aware design and accurate layout extraction. 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 50 次。

如何安装 Ai Image To Code？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install ai-image-to-code-jipeng」即可一键安装，无需额外配置。

Ai Image To Code 是免费的吗？

是的，Ai Image To Code 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。

Ai Image To Code 支持哪些平台？

Ai Image To Code 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 Ai Image To Code？

由王继鹏（@wangjipeng977）开发并维护，当前版本 v1.0.0。