Screenshot to Code

Convert UI designs to HTML, Tailwind, Bootstrap, or React instantly

原始信息汇总

Screenshot to Code API 数据集概述

基本信息

• 数据集名称：Screenshot to Code
• 提供平台：RapidAPI
• API 创建者：ClankerHQ
• 所属类别：Visual Recognition
• 订阅者数量：1

定价方案

• BASIC：$0.00 / 月
• PRO：$9.99 / 月
• ULTRA：$29.99 / 月
• MEGA：$99.99 / 月

核心功能

• 截图转代码：将任何 UI 截图转换为可用于生产的代码。
• 设计识别：转换 Figma 导出文件、线框图和模型。
• 精准捕捉：捕获精确的布局、颜色和排版。
• 组件生成：生成像素级完美的响应式组件。

支持的输出框架

• HTML + CSS：简洁、语义化的标记与原生 CSS。
• Tailwind CSS：实用优先的类，开箱即用。
• Bootstrap：基于 Bootstrap 5 类的组件。
• React：带有内联或模块样式的 JSX 组件。

智能设计识别能力

• 检测按钮、表单、卡片和导航元素。
• 识别配色方案和间距模式。
• 识别图标并替换为字体图标。
• 保持视觉层次结构和对齐方式。

主要应用场景

• 将设计快速原型化为可运行代码。
• 将遗留 UI 截图转换为现代框架。
• 加速前端开发工作流程。
• 将白板草图转换为起始代码。
• 从设计模型构建落地页。
• 从现有 UI 创建组件库。

支持输入格式

• 图像：JPEG, PNG, WebP, GIF
• 文档：PDF

API 响应内容

• code：完整、可直接使用的源代码。
• framework：选定的输出框架。
• components[ ]：识别出的 UI 组件列表。
• assets[ ]：引用的图像/图标下载链接。
• responsive：包含移动端友好的断点。
• confidence_score：转换准确度评分（0.0-1.0）。

API 端点

• 版本：v1 (current)
• MCP Playground：POST
• Convert from Base64：POST
• Convert from URL：POST
• Health Check：GET