Sketch2Code

Sketch2Code 是微软 AI 实验室于 2018 年 8 月推出的基于 Web 的 AI 工具，利用计算机视觉和 Azure Cognitive Services 将手绘 UI 草图（来自白板、纸张或数字图像）转换为有效的 HTML 标记代码。该工具旨在通过将手写界面设计在几秒钟内转换为可工作的 HTML 线框图，加速设计师、开发者和客户之间的原型验证流程。Sketch2Code 由 Microsoft Garage 项目开发，Tara Jana（Azure Dev 网站项目经理）介绍推出。

Sketch2Code 的核心功能包括草图图像上传、自定义视觉模型识别、文本识别（OCR）、HTML 代码生成、Bootstrap 框架支持等。用户上传草图图像（PNG、JPG 格式）后，Custom Vision 模型预测 HTML 元素及其位置，Text Recognition 提取手写文本，系统生成带有 Bootstrap/CSS 样式的有效 HTML 标记。该工具可识别按钮、文本框、图像、复选框、组合框、标题等基本 UI 元素，输出带有嵌入 CSS 的干净 HTML 标记，支持响应式布局。

核心功能

Sketch2Code 是纯浏览器工具，无需安装，支持上传 PNG、JPG 等常见图像格式。输出标准 HTML/CSS 代码，语言无关，文本提取通过 Azure OCR 支持多种语言。典型应用场景包括：快速原型设计（在设计会议中快速验证 UI 概念）、教育用途（学习 HTML 结构和布局）、初始线框图（将白板头脑风暴会议转换为工作原型）、设计师 - 开发者协作（弥合团队之间的沟通鸿沟）等。需要注意的是，Sketch2Code 作为独立工具已停止维护，其功能已被 Microsoft Power Apps Express Design 取代（2022 年 5 月发布），后者支持草图、PDF、PowerPoint、Figma 设计和截图转换为完整的 Power Apps 应用。