Same

一款 AI 驱动的前端开发工具，专注于以像素级精度复刻网站UI，并生成对应的前端代码。

帮助开发者、设计师或团队快速将设计稿、网页截图或现有界面转化为可用的代码，从而加速开发流程，减少手动编码的工作量。

该工具宣称能够通过输入简单的素材（如网页 URL、截图或设计文件，例如 Figma 文件），生成视觉效果与原始界面高度一致的前端代码。

核心功能：

1、像素级 UI 复刻

Same Dev 的核心能力就是它的“像素级精度”复刻能力。它通过分析输入的界面素材，提取布局、样式和交互元素，生成与原始设计几乎一模一样的代码。

支持的输入类型包括：

• 网页 URL：直接输入一个网站的链接，Same Dev 会抓取其前端结构和样式。
• 截图：上传 UI 的静态图片，工具会尝试识别布局和元素。
• 设计文件：支持导入 Figma 等设计工具的文件，解析其设计层级和样式。
• 输出结果通常是 HTML、CSS 和 JavaScript 代码，可能还包括主流框架（如 React、Vue）的组件代码。

2、动生成结构化的前端代码

它可以根据输入素材，Same Dev 自动生成结构化的前端代码，涵盖：

• HTML：页面结构。
• CSS/SCSS：样式表，确保颜色、大小、间距等与原设计一致。
• JavaScript：基本的交互逻辑（视输入素材的复杂性而定）。
• 生成的代码据称是干净、可读且符合现代开发标准的，适合直接用于项目或进一步调整。

大家可以看看复刻网页的结构，整个项目的代码结构和文件非常完整，可以一键部署

3、支持多平台代码，Same Dev支持多种前端框架或无框架的原生代码生成，常见选项包括 React、Vue.js、Angular 或 Vanilla JS。

技术实现原理：

根据分析，Same Dev 的背后可能主要依赖以下技术：

• 计算机视觉：用于分析截图或设计文件，识别布局、颜色、字体等元素。
• 机器学习模型：训练模型将视觉元素映射到代码结构，可能基于大量 UI 设计和代码样本。
• 网页爬取技术：通过 URL 输入时，工具可能使用类似 headless browser（如 Puppeteer）的技术提取 DOM 结构和 CSS 样式。
• 代码生成引擎：将分析结果转化为标准化的前端代码，可能结合模板或规则引擎。

这种技术组合使其能够处理从静态图片到动态网页的多种输入类型。

如果你是开发者，想要将设计稿快速转为可交互的网页原型，或者如果你是设计师，想将设计稿转为代码，检查实际效果是否与预期一致，直接提供可用的代码给开发团队，减少沟通成本。