🤖
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...
安全通过
技能说明
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
如何使用「Ai Image To Code」？
- 打开小龙虾AI（Web 或 iOS App）
- 点击上方「立即使用」按钮，或在对话框中输入任务描述
- 小龙虾AI 会自动匹配并调用「Ai Image To Code」技能完成任务
- 结果即时呈现，支持继续对话优化