@VincentLogic: 截图丢进去，AI 直接吐出 HTML 代码。手绘草图也能识别 香港中文大学开源的 ScreenCoder，GitHub 2.7k Star 视频里演示了三个案例： -YouTube 首页截图 → 还原出完整网页布局 -Google 搜索页…
摘要
香港中文大学开源了 ScreenCoder，一款能够将截图或手绘草图直接转换为可编辑 HTML 代码的 AI 工具，GitHub 上已获得 2.7k Star。
查看缓存全文
缓存时间: 2026/06/18 12:14
截图丢进去，AI 直接吐出 HTML 代码。手绘草图也能识别
香港中文大学开源的 ScreenCoder，GitHub 2.7k Star
视频里演示了三个案例： -YouTube 首页截图 → 还原出完整网页布局 -Google 搜索页手绘草图 → 识别手画的框框和文字，生成对应代码 I-nstagram 个人主页截图 → 布局、卡片、图片位置全还原
技术路线是多模块 Agent 架构：先视觉识别看懂截图结构，再做布局规划，最后生成代码。全链路自动
生成的代码是完整可编辑的 HTML，不是图片不是截屏，是真正能改能用的代码
对前端开发者来说，设计稿转代码这个最枯燥的活终于可以扔给 AI 了。对产品经理来说，画个草图就能出原型，不用再求开发排期
关键是开源免费。GitHub 搜 ScreenCoder
相似文章
@axichuhai: 香港大学刚开源了一个宝藏项目—— CLI-Anything，star 数直接飙到 3 w 它可以扫描任意软件的源代码，自动生成 AI agent 可以直接调用的 CLI 接口。 像GIMP、Blender、Audacity 这类没有 AP…
香港大学开源了 CLI-Anything，可以扫描任意软件源代码并自动生成 AI agent 可调用的 CLI 接口，使无 API 的桌面软件（如 GIMP、Blender）能被 Agent 操控。
@GitHub_Daily: 最近看到一个开源项目 Flipbook Canvas，挺有意思，能把每张 AI 生成的图变成一棵可以无限点击探索的知识树。 长按图片任意位置，系统会自动识别你点的内容，联网搜索相关资料，然后生成一张全新的详细图解，层层递进。 GitHub…
Flipbook Canvas 是一个开源项目，能将 AI 生成的图像转换为可无限点击探索的知识树，支持联网搜索、实时生成和离线导出。
@LTChives: 网络爬虫已死。 视频里这个 PixelRAG，完全跳过 HTML 解析。 它把网页直接截图，然后让视觉模型从像素里读答案。 以前 AI 读网页，是先拆代码、提文字、切段落。 现在它直接看页面。 100% 开源，还带 Claude Code…
PixelRAG 是一种新型开源工具，它绕过传统 HTML 解析，直接通过对网页截图并使用视觉模型从像素中提取答案，并支持 Claude Code 插件，让 Claude 具备视觉能力。
@VincentLogic: 分享一个能把任何网站“一键克隆”成代码的神器！ ai-website-cloner-template 简单说：给一个网址，AI 帮你逆向工程，直接生成干净的 Next.js 代码库。 它强在哪？ 还原度极高：不只是抄个皮，AI 会自动截图…
介绍了一个名为 ai-website-cloner-template 的工具，它利用 AI 将任意网站逆向工程为高质量的 Next.js 代码库，支持主流 AI 编程助手。
@veyhon: 把代码、文档、论文、图片和视频统一抽成知识图谱，让 AI 编程助手先查关系图，再决定该读哪段上下文 https://github.com/safishamsi/graphify… Graphify 的管线是 detect → extrac…
Graphify 是一个开源工具，将代码、文档、论文、图片和视频统一抽取为知识图谱，供 AI 编程助手优先查询关系图以确定上下文，从而提升代码理解和生成的准确性。