← 返回 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-yanyu

功能描述

Converts UI screenshots into semantic HTML/CSS or React+Tailwind code with responsive layouts and contextual placeholder content.

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

安全使用建议

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.

能力评估

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

如何使用

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

版本历史

v1.0.0

Initial release

元数据

Slug ai-image-to-code-yanyu

版本 1.0.0

许可证 MIT-0

累计安装 0

当前安装数 0

历史版本数 1

常见问题

Ai Image To Code 是什么？

Converts UI screenshots into semantic HTML/CSS or React+Tailwind code with responsive layouts and contextual placeholder content. 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 44 次。

如何安装 Ai Image To Code？

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

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。