design2code

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

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署 编程开发 🍴 复刻 100 🐛 待处理 3 👀 关注 17
访问官网 ↗ GitHub ↗
GitHub 星标 ★ 684
维护状态 低维护
是否开源 开源
定价模式 🏷️完全免费 开源项目，MIT许可证，完全免费，需自行部署使用。

项目预览

design2code 项目界面预览图
图片来源：GitHub 官方仓库名片

项目数据

分类编程开发
开发团队mostafasadeghi97
官网地址https://design2code.dev
GitHubhttps://github.com/mostafasadeghi97/design2code
定价模式🏷️完全免费
价格说明开源项目，MIT许可证，完全免费，需自行部署使用。
访问状态🔧 仅开源项目，无在线服务，需自行部署
是否开源是
开源协议MIT
主要语言TypeScript
技术栈/模型ai,code-generation,coding-assistant,design-to-code,gpt4,openai,vision
GitHub 星标★ 684
上线时间2023-11-21 00:00:00
代码更新2026-07-01
仓库体积460 KB
本站数据更新2026-11-09
维护状态低维护
收录时间2026-08-09
浏览次数5

项目介绍

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

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 684

使用教程

ℹ 本教程由 AI 依据该项目 README 整理，个别步骤可能需要按你的环境微调。

难度：进阶 约 40 分钟 部署方式：本地安装 4 步

环境要求

  • Python 或 Node 环境（视仓库）
  • 设计稿图片

安装与启动步骤

  1. 1确认功能

    把网页设计稿转成 HTML/CSS/JS 代码，核心是布局还原。

  2. 2克隆并装依赖

    项目以演示形式提供，依赖装完再起服务。

    git clone https://github.com/mostafasadeghi97/design2code

  3. 3上传设计图

    支持截图输入，界面整齐的稿子还原度更高。

  4. 4对比还原度

    生成后用浏览器打开，逐块对比位置与间距。

如何确认成功

能生成可直接打开的 HTML 文件

注意事项

  • 复杂交互与动效基本还原不了，别期待一步到位。
  • 设计稿分辨率越高，生成质量通常越好。

核心亮点

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

不足之处

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

适用场景

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

替代项目

screenshot-to-code、htmlcsx、Sketch2Code

上一篇：forge

下一篇：tabby

同类项目推荐

docs-governance 开源

给 AI 编程代理加文档护栏，防文档腐烂、留决策证据

Claude Code、Codex 与 ChatGPT 的文档驱动开发治理插件：防文档腐烂、维护上下文与决策、···

★ 325 2026-10-30
no-no-debug 开源

让 AI 记住犯过的错，调试时间减半

No-No Debug — Self-evolution system for AI coding assistants. 10 minutes writing co···

★ 151 2026-08-09
agentty 开源

终端里毫秒启动的 AI 结对编程，任意模型都能用

AI pair programming in your terminal — one static binary, sub-ms startup, any model

★ 614 2026-08-09
chatgpt-copilot 开源

在 VS Code 里一个插件用遍 ChatGPT、Claude、Gemini，写代码不切屏

ChatGPT Copilot Extension for Visual Studio Code

★ 163 2026-08-09
remote_compilation_helper 开源

让 AI 代理的编译任务远程跑，本地秒收产物

Intercepts cargo/gcc builds from AI coding agents via hooks and transparently routes···

★ 68 2026-08-09
Nexus-skills 开源

给 AI 装上代码地图，让它改代码不迷路

AI-native codebase intelligence skills — generate persistent .nexus-map/ knowledge ···

★ 167 2026-08-09
dish-ai-commit 开源

一键让 AI 帮你写规范 Git/SVN 提交信息，告别敷衍提交

Vibe Coding!!! AI-Powered VSCode extension for generating standardized Git/SVN comm···

★ 163 2026-08-09
kubb 开源

一份 OpenAPI，自动生成类型安全的 TS 请求代码

Turn your API spec into type-safe code. Generate TypeScript types, API clients, hook···

★ 1841 2026-09-14