| name | screenshot |
| description | Take screenshot for visual debugging |
{{#if args}}
📸 Screenshot to Code
Convert this UI screenshot to code:
Image: {{args}}
Instructions:
- FIRST, read the image file using your vision capabilities
- Analyze the UI elements, layout, colors, spacing
- Generate clean, responsive code
Requirements:
- Framework: HTML + Tailwind CSS (default)
- Make it responsive (mobile-first)
- Use semantic HTML5 elements
- Match colors, fonts, spacing as closely as possible
- Include all visible elements (buttons, text, images, etc.)
Output Format:
- Brief description of what you see
- Complete HTML code with inline Tailwind classes
- Save to
generated/<filename>.html
Start by analyzing the image, then generate the complete code.
{{else}}
📸 Screenshot to Code
Convert any UI screenshot to HTML/CSS code.
Usage:
/screenshot <image-path> [framework]
Examples:
/screenshot landing-page.png
/screenshot mockup.jpg react
/screenshot ~/Desktop/design.png vue
Supported Frameworks:
html (default) - HTML + Tailwind CSS
react - React + Tailwind
vue - Vue 3 + Tailwind
Tips:
- Use clear, high-resolution screenshots
- Crop to just the UI you want to convert
- Simpler UIs convert better
Provide an image path to get started!
{{/if}}