Same.new logo
AI 代码生成器

Same.new

只要布局简单,即可快速将现有网站的 UI 克隆为可编辑的 React 代码

我们的评测报告

完整等级列表 →
C

只精通一项绝活 —— 将网站 UI 从 URL 克隆为可编辑的 React —— 且做得很好。作为应用构建器,它处于 C 级,因为它本质上并不是一个应用构建器。

视觉 UI 克隆 前端脚手架搭建 设计参考构建

什么是 Same.new?

Same.new 是一款将现有网站的视觉层转化为代码的 Web 工具。你粘贴一个公开 URL,它会分析页面并生成一个可编辑的 React 前端(采用 Tailwind 样式),力求在布局、颜色、排版和间距上与原站一致。

Same.new homepage Same.new 首页快照

该工具的核心理念是:前端布局的还原应该是自动化的,而不是靠截图或记忆手动重建。这一点至关重要,因为 Same.new 并不是想成为一个完整的应用构建器:它的价值在于快速产出初稿,而真正的局限在于你仍然需要另一套工作流来处理后端逻辑、稳定性以及长期开发。

你可以用 Same.new 构建什么?

最理想的使用场景是静态或近乎静态的前端,这类项目对视觉结构的关注度高于应用逻辑。

  • 落地页 (Landing pages):从参考网站克隆,然后修改为自己的文案和品牌视觉
  • 营销网站模块:如 Hero 区域、价格表、客户见证带和页脚布局
  • 仪表盘原型 (Dashboard mockups):展示卡片、图表、侧边栏和导航,无需底层的深度应用行为
  • 表单和注册布局:在接入实际的校验和数据处理之前,需要先搭建演示外壳
  • 设计参考原型:作为本地 React 开发的起点

这些场景之所以适用,是因为 Same.new 最擅长读取可见的页面结构并将其转化为可用的 React 和 Tailwind 搭建框架。如果你的目标是快速将灵感转化为可编辑的 UI,它可以省去大量重复的初始化工作。

它的能力边界在于任何依赖持久化应用逻辑的功能。它不适合处理生产环境的身份验证流、基于数据库的产品、复杂的有状态交互,或者计划通过多次 AI 编辑来演进的大型代码库。请将其用于首次视觉搭建,然后将项目迁移到更稳定的开发环境中。

用户评价

社区反馈非常一致:人们热爱其初始视觉克隆的速度,但在长期的编辑周期中对其信任度较低。

  • 能出人意料地精准捕捉纯净公开 URL 的样式、间距和页面结构
  • 首次生成的 React 和 Tailwind 输出通常是非常实用的初始框架
  • 针对文本、颜色或模块替换的简单提示词编辑快速且方便
  • 将代码导出到本地工作流被认为是最高效、最安全的使用方式

抱怨主要集中在用户在产品内部持续迭代时的可靠性上。最严重的案例涉及破坏性的重写,有报告称简单的布局更改竟抹去了 1500 行以上的可用代码。用户还对 Same.dev 到 Same.new 的过渡表示不满,称部分付费工作区或访问路径在切换期间变得不稳定。此外还出现了关于定价的抱怨,主要是因为当大规模生成失败或需要多次尝试时,token 的消耗速度让人难以接受。

这种平台故障——一次简单的板块重新排序就摧毁了 1500 多行可用代码——是完全不可接受的…

我们的观点是:赞誉与抱怨共存。Same.new 最适合作为快速的视觉导入工具,而不是一个让你信赖、能支撑产品在多次 AI 编辑中稳步增长的开发环境。

实际成本分析

计划价格包含内容适用场景
Free$0有限的 token 和基于 URL 的视觉克隆测试输出质量
Pro$10/mo200 万 token,超出部分 $10/200 万常规克隆和 UI 迭代

在实践中,重要的不仅是标价,而是 token 的使用方式。当你重新生成大块内容、重试失败的编辑,或不断要求助手重写复杂组件时,成本会迅速攀升。这使得 Same.new 在快速克隆时显得很便宜,但在长时间会话中则变得难以预测。

如果你使用它,建议预算倾向于“重导出”的工作流,而不是长期的应用内开发周期。那些最满意的用户将付费计划视为获取高质量初稿的手段,然后在重复编辑消耗过多 token 之前迁移到本地开发。

  1. 只要初始克隆效果足够好,立即导出。
  2. 避免在大型布局上进行重复的全板块重写。
  3. 在主版本上花费更多 token 之前,先在副本上测试高风险更改。

Same.new 有哪些常见的替代方案?

最佳替代方案取决于你更在意视觉克隆、完整应用逻辑,还是更安全的编码工作流。

如果你想要…尝试原因
一个内置身份验证和数据的无代码商业应用Softr更适合构建具有结构化数据和权限的真实内部工具和门户
为现代前端提供更强大的 AI 生成 UI 代码v0在组件生成和迭代前端开发方面更成熟
更完整的基于浏览器的“构建-发布”闭环Bolt更适合构建超越静态 UI 层的功能
直接在真实代码库中获得 AI 帮助Cursor在本地开发中提供 Agent 风格的编辑,而非脆弱的托管克隆工作区

在评估 Same.new 的替代方案时,你的选择很大程度上取决于你对代码“生产就绪”程度的需求。如果你希望在不写代码的情况下构建一个功能完备的商业应用或内部门户,Softr 是一条更稳健的路径。它开箱即用地提供了内置身份验证、用户权限和结构化数据连接,而 Same.new 更专注于生成视觉界面。对于追求高保真前端组件和迭代设计控制的用户,v0 是一个非常成熟的替代方案,擅长产出干净、现代的 UI 代码。如果你的目标是超越静态界面,实现完整的基于浏览器的构建和发布周期,Bolt 提供了更全面的环境,允许你直接在浏览器中驱动全栈应用逻辑。

更倾向于在现有开发环境中工作的开发者会发现 Cursor 是一个远为优秀的选项。Cursor 不再让你在脆弱的 Web 工作区中挣扎,而是将 Agent 风格的 AI 工具直接嵌入到你的本地代码库中。这让你在保持对文件和版本历史完全控制的同时,利用 AI 辅助进行编辑、重构和发布代码。选择正确的工具最终取决于你需要的是一个快速的视觉原型,还是一个可靠的真实软件开发环境。

请仔细权衡你的开发需求,选择最适合你工作流的平台。

Same.new 适合谁(以及不适合谁)

我们谨慎但肯定地推荐 Same.new 给那些想要抓取实时网站视觉结构、快速转化为 React、然后在其他地方继续开发的构建者。如果你在参考我们的 best-vibe-coding-tools-for-websites 排名,它更像是一款用于前端灵感、搭建和参考 UI 草图的专业工具,而非完整的产品技术栈。

如果你需要稳定的长会话编辑、后端逻辑,或是一个运行实际商业应用的场所,请跳过它。如果你的项目需要用户管理、权限控制和结构化数据,Softr 是更稳妥的选择。理性的读者应该将 Same.new 视为一种视觉捷径,而非完整的构建之所。

评分卡

简明总结

亮点

  • 它能从公开 URL 中提取布局、排版、颜色和样式,从而加快在代码中还原参考设计地速度。
  • 它输出可编辑的 React 和 Tailwind 代码,因此开发者可以快速将初稿迁移到正常的本地工作流中。
  • 基于提示词(Prompt)的编辑允许用户调整区块、间距和颜色,而无需从头开始手动重写每个组件。
  • 通过分叉(Forking)和复制,用户可以轻松地从同一个克隆起点测试不同的视觉方向。

不足

  • 用户反映存在破坏性编辑的情况,细微的提示词更改可能会抹掉 1,500 行以上此前可正常运行的代码。
  • 它在处理复杂的嵌套布局和交互状态时较为吃力,这通常需要人类开发者进行大量的清理工作。
  • 据报道,从 Same.dev 迁移到 Same.new 的过程干扰了正在进行的项目,并暂时影响了账户或项目的访问。
  • Token 使用量难以预测,尤其是在重新生成较大组件或多次尝试失败的编辑时。

成本分析

价格方案

基于我们追踪的公开定价数据列出。当额度、限制和包含的使用量属于方案详情的一部分时,会予以显示。

Free

$0
  • 基础 UI 测试的 Token 数量有限
  • 从实时网站 URL 克隆布局和样式
  • 适合在付费前评估抓取质量
最受欢迎

Pro

$10/mo
  • 包含 200 万个生成 Token
  • 额外 Token 每 200 万个需支付 $10
  • 专为重复克隆和对话式编辑而设计

常见问题解答

您能用 Same.new 构建一个真正的应用吗?

你可以使用它来构建应用的前端外壳,但 Same.new 主要用于视觉克隆和 UI 搭建。它不提供完整生产级应用所需的后端、身份验证或数据层。

Same.new 是如何克隆网站的?

你只需粘贴一个公开的实时 URL,Same.new 就会分析页面的可见结构和样式,随后生成可编辑的 React 和 Tailwind 代码,旨在还原该设计。

Same.new 可以免费使用吗?

可以。Same.new 提供 $0 的免费计划用于有限测试,以及每月 $10 的专业计划(包含 200 万个 token)。额外的 token 价格为每 200 万个 $10。

Same.new 最大的缺点是什么?

主要的风险在于迭代编辑时的不稳定。社区反馈称,微小的提示词修改可能会导致大块可用代码损坏或被删除,因此许多用户选择尽早导出代码并在本地继续开发。