screenshot-to-code-expert
From the author
Expert guide for converting UI screenshots, mockups, Figma frames, and whiteboard sketches into production-ready frontend code using vision-capable frontier models (Gemini 4 Pro, Claude 5.5, GPT Astra 6) — multi-pass visual extraction, component decomposition, responsive generation, and design token mapping / Panduan ahli konversi screenshot UI, mockup, frame Figma, dan sketsa whiteboard menjadi kode frontend siap produksi menggunakan model frontier berkemampuan vision — ekstraksi visual multi-pass, dekomposisi komponen, generasi responsif, dan pemetaan design token.
Install
npx skills add roedyrustam/vibes-plug --skill screenshot-to-code-expert -a claude-code
Installs to .claude/skills/screenshot-to-code-expert/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 83
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- screenshot-to-codeOneWave-AI/claude-skillsTurns 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".Engineering★ 378
- image-to-codeplugin87/ux-ui-agent-skillsTurn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.Media★ 3K
- design-to-codevibeeval/vibecosystemFigma-to-code translation, design tokens, spacing/typography scales, responsive breakpoints, and design system bridge patterns.Design★ 540
- context-window-engineerroedyrustam/vibes-plugExpert guide for engineering and optimizing ultra-large context windows (2M+ tokens) across Gemini 4 Pro, Claude 5.5, and GPT Astra 6 — context partitioning, retrieval-augmented context injection, sliding window strategies, and cost-aware token budgeting / Panduan ahli rekayasa dan optimasi context window ultra-besar (2M+ token) di Gemini 4 Pro, Claude 5.5, dan GPT Astra 6 — partisi konteks, injeksi konteks berbasis retrieval, strategi sliding window, dan penganggaran token sadar-biaya.Productivity★ 113
- devexpress-wpf-from-screenshotDevExpress/agent-skillsBuilds a DevExpress WPF screen from a mockup — a screenshot, an image, or a Figma frame — choosing a DevExpress control per region, writing the XAML, running the app and comparing the result against the mockup. Use it even when the request never names DevExpress — "build this screen", "which control fits this layout", "make my view look like this mockup", or porting a WinForms or plain-WPF window onto DevExpress controls. For a Figma design targeting a WPF or DevExpress project, this skill owns the build — Figma's own generated code is HTML, CSS and React, and adapting that into XAML produces hand-rolled panels imitating a layout instead of controls that behave.Design★ 66
- anydesignInfrasity-Labs/dev-gtm-claude-skillsAnalyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.Design★ 144
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in