code
发布厂商：Sketch2code
Sketch2Code
微软AI Lab推出的将手绘草图转换成HTML代码工具
5
⭐⭐⭐⭐
0 条评测
价格机制
免费+付费
开发者架构组
Sketch2code
收录发布日期
工具简介与核心定位
Sketch2Code是微软AI Lab推出的开源AI工具，能够将白板或纸张上的手绘UI草图照片自动转换为可用的HTML标记代码。它利用Azure自定义视觉模型检测HTML元素（按钮、文本框、图片等）、OCR手写识别提取文字，再通过布局算法生成网格结构并输出最终HTML代码，展示了AI加速设计原型到可用代码的早期探索。
核心特色与功能亮点 (Key Features)
手绘草图元素检测：基于Azure自定义视觉模型，识别草图中的按钮、文本框、图片、标签等常见HTML元素及位置
手写文字OCR识别：利用Azure计算机视觉服务识别设计元素中的手写文字内容，自动填入生成的HTML组件
智能布局算法：根据所有检测元素的边界框空间信息，自动生成网格结构来容纳和组织所有组件
端到端HTML代码生成：综合视觉检测、文字识别和布局推导结果，自动输出完整可用的HTML标记代码
完整Azure云服务架构：使用Azure Functions协调各服务、Azure Blob Storage存储中间产物、Web App提供用户界面
典型应用场景与适用行业
软件开发
核心能力
手绘草图元素检测：基于Azure自定义视觉模型，识别草图中的按钮、文本框、图片、标签等常见HTML元素及位置
手写文字OCR识别：利用Azure计算机视觉服务识别设计元素中的手写文字内容，自动填入生成的HTML组件
智能布局算法：根据所有检测元素的边界框空间信息，自动生成网格结构来容纳和组织所有组件
端到端HTML代码生成：综合视觉检测、文字识别和布局推导结果，自动输出完整可用的HTML标记代码
完整Azure云服务架构：使用Azure Functions协调各服务、Azure Blob Storage存储中间产物、Web App提供用户界面
代码辅助
官方新手上手实操教程指南
1-STEP TUTORIAL
1
在白板或白纸上手绘UI界面草图（包含按钮、文本框、图片等常见元素及其文字标注）；使用手机或相机拍摄清晰的手绘草图照片；访问Sketch2Code网站上传草图图片；系统自动经由对象检测→文字识别→布局算法→代码生成四步流程处理；数秒后获得生成的HTML代码，可在浏览器中直接预览效果。项目已开源在GitHub（microsoft/ailab），开发者可自行部署。
在白板或白纸上手绘UI界面草图（包含按钮、文本框、图片等常见元素及其文字标注）；使用手机或相机拍摄清晰的手绘草图照片；访问Sketch2Code网站上传草图图片；系统自动经由对象检测→文字识别→布局算法→代码生成四步流程处理；数秒后获得生成的HTML代码，可在浏览器中直接预览效果。项目已开源在GitHub（microsoft/ailab），开发者可自行部署。
同类其它推荐 AI 工具
CU
Cursor AI
基于 VS Code 构建的全流程 AI 智能代码编辑器，集成 Composer 多文件协同与 Agent 模式。
GI
GitHub Copilot
GitHub Copilot是一款AI编程工具，致力于通过AI技术提升编程效率，为用户带来更优质的编程体验。
TE
TensorFlow
TensorFlow 是谷歌推出的开源机器学习框架，广泛应用在深度学习领域。框架支持多种编程语言，如 Python 和 C++，能高效处理大规模数据、构建复杂的模型。TensorFlow 提供丰富的 API 和工具，方便开发者从零开始构建模型，或用预训练模型进行迁移学习。TensorFlow 支持多种应用场景，包括计算机视觉、自然语言处理和语音识别等。TensorFlow 灵活的架构和强大的社区支持，成为全球开发者进行人工智能开发的重要工具之一。
CO
Codex
Codex 是 OpenAI 推出的AI 编程智能体，搭载GPT-5.5编程特化模型，对标Claude Code。Codex 通过可视化图形界面与开发者交互，采用「文件夹工作区 + Thread 对话线程」的双层架构管理项目，避免上下文污染。Codex 支持代码编写、复杂重构、自动化运维及定时任务执行，让非专业用户能快速进入「Vibe Coding」心流，实现从需求到代码的端到端交付。
关于 Sketch2Code 的常见问题
Q: Sketch2Code支持哪些类型的UI元素识别？
主要支持常见HTML表单元素的识别，包括按钮（Button）、文本框（Text Input）、图片（Image）、标签（Label）等。复杂或非标准元素可能无法准确识别。
Q: Sketch2Code还在维护吗？
Sketch2Code是微软AI Lab在2018年发布的实验性项目，展示了AI辅助前端开发的早期愿景。源码仍在GitHub开源可用，但项目本身可能已不再积极更新维护。
Q: Sketch2Code和京东Deco有什么区别？
Sketch2Code处理的是手绘草图并生成基础HTML代码，属于实验性Demo；Deco处理的是高保真Sketch设计稿并生成React/Vue等现代框架代码，更加成熟和实用化。两者代表了D2C（Design to Code）方向的不同发展阶段。
