design2code

截图秒变网页代码,告别手写前端

design2code 是一个将网页设计截图自动转换为干净 HTML/CSS 代码的开源工具。它解决了前端开发中从设计稿到代码的重复劳动问题,帮助设计师和开发者快速将视觉稿转化为可用的网页结构。核心能力包括:识别截图中的布局、元素、样式,并生成语义化的 HTML 和 CSS 代码;支持多种设计风格;提供命令行和 API 接口,方便集成到工作流中。项目基于 TypeScript 开发,目前处于早期阶段,但已具备基本功能,适合作为设计交付和前端开发的辅助工具。

开源 free 编程开发
访问官网 ↗ GitHub ↗ 文档 ↗
GitHub 星标 ★ 682
维护状态 维护中
是否开源 是
定价模式 free

项目数据

分类编程开发
开发团队mostafasadeghi97
所属国家
定价模式free
价格说明开源项目,MIT许可证,完全免费,需自行部署使用。
访问状态
是否开源是
开源协议MIT
主要语言TypeScript
技术栈/模型ai,code-generation,coding-assistant,design-to-code,gpt4,openai,vision
GitHub 星标★ 682
30天Star增速
HF 下载量
上线时间2023-11-21 00:00:00
最近更新2026-09-09 00:00:00
维护状态维护中
中文支持
访问方式
移动端支持
综合评分
收录时间2026-08-09
浏览次数4

使用教程

核心亮点

  • 直接输入截图即可输出 HTML/CSS,自动化程度高
  • 生成的代码语义化清晰,便于二次修改
  • 支持命令行和 API,易于集成到现有开发流程

不足之处

  • 项目处于早期,功能覆盖有限,复杂布局可能出错
  • 文档和社区生态待观察

适用场景

  • 设计师快速将高保真原型转为前端代码
  • 开发者从设计稿中提取静态页面骨架
  • 自动化测试或代码生成工具的前端模块

替代项目

screenshot-to-code、htmlcsx、Sketch2Code

项目介绍

design2code 是编程开发领域的开源项目,由 mostafasadeghi97 开发,2023 年首次发布。

它收录于编程开发分类,该分类目前共有 503 个项目,GitHub 星标数为 682。

项目仍在小幅维护中,最近一次代码更新于 2026-09-09。MIT许可证,完全免费,需自行部署使用。

它主要面向的使用场景是:设计师快速将高保真原型转为前端代码。同类可对比的替代方案包括 screenshot-to-code、htmlcsx、Sketch2Code。

上一篇:forge

下一篇:tabby

同类项目推荐

bolt.new 开源

想到啥说啥,网页应用当场生成直接能用

Prompt, run, edit, and deploy full-stack web applications. -- bolt.new -- Help Cente···

★ 16557 2026-08-09
fuzz4all 开源

用大模型自动生成测试输入,发现各种软件漏洞

️Fuzz4All: Universal Fuzzing with Large Language Models

★ 338 2026-08-09
superpowers-zh 开源

全套 AI 编程神技汉化好了,照着用就行。

AI 编程超能力 · 中文增强版 — superpowers(250k+ ⭐)完整汉化 + 4 个中国原创 skills···

★ 8188 2026-08-09
crystal 开源

多个 AI 同时写不同功能,互不干扰齐头并进。

(Crystal is now Nimbalyst) Run multiple Codex and Claude Code AI sessions in paralle···

★ 3121 2026-08-09