@VincentLogic: Drop a screenshot in, AI directly outputs HTML code. Hand-drawn sketches are also recognized. ScreenCoder open-sourced by Chinese University of Hong Kong, 2.7k Stars on GitHub. The video shows three examples: - YouTube homepage screenshot → reproduces full webpage layout - Google search page…
Summary
Chinese University of Hong Kong open-sourced ScreenCoder, an AI tool that can directly convert screenshots or hand-drawn sketches into editable HTML code, which has garnered 2.7k Stars on GitHub.
View Cached Full Text
Cached at: 06/18/26, 12:14 PM
Drop a screenshot in, AI directly outputs HTML code. Even hand-drawn sketches can be recognized.
ScreenCoder, open-sourced by Chinese University of Hong Kong, 2.7k stars on GitHub
The video demonstrates three cases:
- YouTube homepage screenshot → restores the full webpage layout
- Google search page hand-drawn sketch → recognizes hand-drawn boxes and text, generates corresponding code
- Instagram profile page screenshot → layout, cards, image positions fully restored
The technical approach is a multi-module agent architecture: first visual recognition to understand the screenshot structure, then layout planning, and finally code generation. Fully automated end-to-end.
The generated code is complete, editable HTML — not images or screenshots, but real code that can be modified and used.
For front-end developers, the most tedious task of turning design drafts into code can finally be handed over to AI. For product managers, a rough sketch can produce a prototype without waiting for developer scheduling.
Crucially, it’s open source and free. Search “ScreenCoder” on GitHub.
Similar Articles
@axichuhai: The University of Hong Kong just open-sourced a treasure project – CLI-Anything, stars skyrocketed to 3 w. It can scan the source code of any software and automatically generate a CLI interface that AI agents can directly call. For desktop software like GIMP, Blender, Audacity without AP…
The University of Hong Kong open-sourced CLI-Anything, which can scan source code of any software and automatically generate CLI interfaces callable by AI agents, enabling desktop software without APIs (e.g., GIMP, Blender) to be controlled by agents.
@GitHub_Daily: Recently came across an open-source project called Flipbook Canvas, quite interesting — it turns each AI-generated image into a knowledge tree that you can infinitely click and explore. Long-press any part of the image, the system automatically recognizes what you tapped, searches online for relevant information, and then generates a brand new detailed diagram, layer by layer. GitHub…
Flipbook Canvas is an open-source project that converts AI-generated images into infinitely clickable knowledge trees, supporting online search, real-time generation, and offline export.
@LTChives: Web scraping is dead. This PixelRAG in the video completely bypasses HTML parsing. It takes a screenshot of the webpage and then lets the vision model read answers from the pixels. Previously, AI reading a webpage meant first parsing the code, extracting text, and splitting paragraphs. Now it just looks at the page. 100% open source, plus it comes with Claude Code…
PixelRAG is a novel open-source tool that bypasses traditional HTML parsing by directly taking screenshots of webpages and using vision models to extract answers from the pixels. It also supports the Claude Code plugin, giving Claude visual capabilities.
@VincentLogic: Share a powerful tool that can 'one-click clone' any website into code! ai-website-cloner-template Simply put: give it a URL, and AI helps you reverse-engineer it, directly generating a clean Next.js codebase. What makes it powerful? Extremely high fidelity: It doesn’t just copy the surface; the AI automatically takes screenshots...
Introduces a tool named ai-website-cloner-template that uses AI to reverse-engineer any website into a high-quality Next.js codebase, supporting mainstream AI coding assistants.
@veyhon: Unify code, documents, papers, images, and videos into a knowledge graph, let AI coding assistants first query the relationship graph, then decide which context to read. https://github.com/safishamsi/graphify… Graphify's pipeline is detect → extract…
Graphify is an open-source tool that extracts code, documents, papers, images, and videos into a unified knowledge graph, enabling AI coding assistants to query the relationship graph first to determine context, thereby improving the accuracy of code understanding and generation.