Screenshot to Code
When to use: Recreating an existing design from a screenshot: convert marketing pages, dashboards, or app screens into clean React/Tailwind code with a fidelity check.
npx skills add screenshot-to-codegit clone https://github.com/skillhub-community/screenshot-to-code.gitDescription
A workflow tool that turns a design screenshot into working UI code. Flow: (1) upload or paste a screenshot; (2) the ReferenceOverlay renders the image as a semi-transparent layer behind a live code preview so you can eyeball alignment; (3) generate the component code (React + Tailwind by default, or plain CSS), with an option to have an LLM describe layout/tokens first for better output; (4) run the FidelityAudit — a side-by-side checker that flags spacing, color, and typography drift between the screenshot and the generated code.
Includes the supporting utilities: color extraction (dominant palette from the image), font-size detection heuristics, and a section-splitter that identifies card boundaries in the screenshot. Output is a runnable React component with Tailwind classes, exported as a snippet or full page. Works with any vision model as the code generator (OpenAI, Gemini, local) via an adapter. The ReferenceOverlay supports drag-to-align and opacity control for fine-tuning during development.
AI Hub
Need a model endpoint?
AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.
Open AI Hub