Agent skill · software engineering · onewave-ai
screenshot-to-code
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
Why this skill is useful
Generates complete, production-ready code from UI screenshots, including responsive layouts and design patterns not typically known by AI.
What it needs
About 2k tokens when loaded. Last updated 2026-07-15. 242 stars on the source repository.
What this skill does
Screenshot to Code Convert UI screenshots into production-ready code with accurate styling and structure. How This Works Given a screenshot of a UI design: 1. Analyze the visual design thoroughly 2. Generate clean, modern code that recreates it 3. Provide complete, runnable implementation Instructions 1. Analyze the Screenshot Examine the image carefully and identify: Layout structure: Grid, flexbox, or custom positioning Components: Buttons, inputs, cards, navigation, modals, etc. Visual details: Colors, fonts, spacing, borders, shadows, borders-radius Responsive considerations: Mobile vs. desktop layout cues 2. Determine the Framework Ask which framework is preferred: React (with Tailwind CSS or styled-components) Vue.js Plain HTML/CSS Next.js Default: If not specified, use React with Tailwind CSS for modern designs, or plain HTML/CSS for simple pages. 3. Generate Complete Code Create the implementation: For React/Vue: Build component hierarchy (break into logical components) Use semantic HTML elements Implement modern CSS (flexbox, grid, custom properties) Include prop types and sensible defaults For HTML/CSS: Use semantic HTML5 structure Write clean, organized CSS (consider using BEM naming) Make it responsive by default Critical requirements: Match colors EXACTLY (extract hex codes from screenshot) Match spacing and proportions as closely as possible Use appropriate semantic elements (header, nav, main, section, etc.) Include accessibility attributes (alt text, ARIA labels where needed) 4. Make It Responsive Use responsive units (rem, em, %, vw/vh) rather than fixed pixels Add breakpoints for mobile, tablet, desktop if the design suggests it Use min(), max(), clamp() for fluid typography where appropriate 5. Deliver Complete Implementation Provide: 1. Complete code (all files needed, fully functional) 2. File structure (explain what each file does) 3. Usage instructions (how to run/use the code) 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills onewave-ai/screenshot-to-code