Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
Passed 19 of 23 test cases with the skill, and 18 of 23 without it.
and 1 more in the full report
2 fixed17 passed either way3 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Here is a screenshot of a SaaS pricing page with three tier cards and a feature comparison list. Can you generate production-ready web markup and styles that mirror this exact design? Please deliver the full code files, explain how the files are organized, provide quick steps on how to execute the project, and document any design interpretations you had to make.
| Checked | Without skill | With skill |
|---|---|---|
| The output provides a complete, non-truncated implementation of all code files without cutting off mid-style or mid-script. | Missed | Passed |
| The response includes clear usage instructions detailing how to execute or run the project. | Missed | Passed |
| The response includes notes explaining design decisions or interpretations made during implementation. | Missed | Passed |
The instructions your model reads when the skill loads.
Recreate the UI in the image as clean, responsive, accessible code, then check the render against the image.
Pick the target stack. If the user is inside a project, match it: read package.json for React/Next/Vue and the Tailwind version, and reuse existing components, tokens, and icon libraries. Do not ask when the repo already answers it. With no project:
index.html (Tailwind via the browser build, see references/stack-setup.md).Write a short spec before coding. Looking at the image, note:
Estimate sizes from the image resolution. If the screenshot is 2x (a Retina capture 2880px wide is a 1440px layout), halve the pixel measurements.
Build. Use semantic elements (header, nav, main, section, button, a), extract repeated pieces into components, and put tokens in one place (Tailwind v4 @theme or CSS custom properties) rather than scattering hex codes. Use real text from the image, not lorem ipsum. For images and logos you cannot extract, use sized placeholders with descriptive alt text. Use an icon library the project already has (default: lucide-react), not hand-drawn SVGs or emoji.
Make it responsive. Build for the screenshot's viewport first, then define how it collapses: multi-column grids stack, navs become a menu button, and type scales down with clamp() or responsive utilities. If the screenshot is mobile, go the other direction.
Render and compare. If you can run a browser (Playwright, a headless browser, or a browser tool), screenshot the result at the source image's viewport width and compare side by side. See references/visual-check.md. Fix the largest differences first: layout and alignment, then spacing, then type size and weight, then color. Two or three passes is usually enough; stop when remaining differences are at the level of font rendering.
Deliver. Provide the files, how to run them, and a short list of assumptions (fonts guessed, states invented, content inferred). Name anything that needs real assets.
propTypes checks were removed from React 19; do not add them. forwardRef is not needed for passing ref to function components.@import "tailwindcss"; and @theme { --color-brand: #...; }, not a tailwind.config.js and not the v3 @tailwind base/components/utilities directives. Custom tokens become utilities automatically (bg-brand).app/, components are Server Components by default. Add "use client" only to components that use state, effects, or event handlers.Setup commands for each stack are in references/stack-setup.md.
Input: a 1440px-wide screenshot of a pricing section - centered heading, three plan cards with the middle one highlighted, feature checklists, and a button per card.
test cases passed, vs 18 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.