Screenshot To Code
by onewave-aifc5b7851a6c7No license325 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 6 days ago
Turns a screenshot, mockup, Figma export, or photo of a UI into working front-end code - React + Tailwind CSS v4 by default, or Next.js, Vue, or plain HTML/CSS - matching layout, spacing, colors, and typography, then renders the result and compares it against the image to close visual gaps. Use whenever the user shares an image of a website, app screen, dashboard, component, or wireframe and wants it built, cloned, recreated, or "made real", or says "code this up", "build this design", or "match this screenshot".
Only the file list is public. File contents are available once the skill is installed in a workspace.
| Path | Size | Type |
|---|---|---|
| references/stack-setup.md | 3.1 KB | text/markdown |
| references/visual-check.md | 2 KB | text/markdown |
| SKILL.md | 5.8 KB | text/markdown |
Source and attribution
Source:onewave-ai/claude-skillsinscreenshot-to-codeat commitfc5b785
License: No license
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from onewave-ai/claude-skills
Workout Program Designer
onewave-ai
Creates personalized workout programs covering strength, cardio and flexibility goals, with progression, rest days and deload weeks.
Stock Photo Finder
onewave-ai
Searches multiple free stock photo sites at once, filtering results by license type, orientation, and color scheme.
Sports Betting Analyzer
onewave-ai
Analyzes sports betting markets such as spreads, over/unders and prop bets, with disclaimers, for entertainment and education.
Knowledge Base Builder
onewave-ai
Turns support tickets into knowledge base articles, FAQs, tutorials, and deflection metrics.
Quiz Maker
onewave-ai
Generates multiple choice, true/false, fill-in-blank and matching quizzes with distractors, grading and explanations.
Portfolio Analyzer
onewave-ai
Reviews investment portfolios for risk, diversification and fees, with allocation, tax-loss harvesting and rebalancing guidance.
More in Software Development
Playground
anthropics
Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.
M5 Onboard
anthropics
Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.
Cardputer Buddy
anthropics
Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.
Web Design Guidelines
vercel-labs
Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.
Vercel React Native Skills
vercel-labs
React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.
Vercel React Best Practices
vercel-labs
Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.