设计师和前端开发者每天都在逆向工程界面：从截图中测量间距，猜测字体比例，重建组件以观察其行为。重现设计将这一过程简化为一步——上传截图或URL，即可获取设计标记、组件分解和可运行的前端代码。
此工具正在Rekreate开发中。以下是它将生成的内容，以及我们现有工具今天能为您提供的功能。
- 输入：截图、Figma框架或URL。输出：标记、组件、代码。
- 提取颜色调色板、字体比例、间距节奏、圆角和阴影为变量。
- 组件级输出——卡片、导航栏、价格表等，而不是一个平面块标记。
- 开发中。
/make中的图像工具现已上线。
设计重现工具——开发中
输入界面，获取背后的系统：带命名标记的调色板、字体比例、间距节奏、圆角和高度，然后每个组件以HTML和CSS重建，具有合理的类名和响应式行为。
重点不是克隆某人的产品，而是回答每个设计师对截图的疑问——这实际上是如何构建的？——用秒代替整个下午。
此工具尚未上线。创建一个免费账户，我们将在工具开放时通过应用通知你。
重现设计的输出内容
| 层级 | 计划输出 |
|---|---|
| 颜色 | 调色板角色——表面、文字、弱化、强调、语义——以CSS变量形式，支持浅色和深色主题 |
| 字体 | 字体家族、使用的比例、字重、行高和字间距 |
| 间距 | 基础节奏（如4/8pt）以及容器宽度和间距 |
| 组件 | 按钮、卡片、导航栏、表单、表格——每个都以独立的HTML和CSS形式输出 |
| 状态 | 悬停、聚焦、禁用和错误状态（可推断的情况下） |
| 可访问性备注 | 对比警告和缺失的聚焦状态会被标记，而不是默默复制 |
如何使用
上传参考
您欣赏的产品截图、Figma框架或实时URL。
选择范围
整个屏幕，或您需要理解的某个组件——如价格卡片、侧边栏、空状态。
审查系统
先看标记：调色板是否正确，字体比例是否匹配，间距是否在网格上？修正模型猜错的部分。
获取代码
将组件复制到您的项目中，或将其作为参考实现，供团队构建真实版本。
灵感，而非复制
界面模式是共享的工艺。没有人拥有一个带标题、正文和按钮的卡片；行业选择这些模式是因为它们有效。
真正属于某个产品的是：它的视觉识别——标志、插图风格、定制字体、图像和文案——以及任何专有代码。重现的设计应该教您机械原理，然后以您的品牌进行装饰。
如果您的屏幕看起来像竞争对手的屏幕，只是换了标志，那您复制的是他们的识别，而不是从他们的结构中学习。将标记作为起点，并将其转化为您自己的系统。
为什么Rekreate要开发它
常见问题
AI能否从截图重现UI设计？
可以——视觉模型可以从图像中提取调色板、字体比例和布局，并以代码形式重建组件。Rekreate的设计重现工具正在开发中；目前我们的在线工具涵盖图像、标志和视频。
它会生成Figma文件吗？
计划输出是设计标记和前端代码。标记可以干净地导入大多数设计工具，但该工具旨在直接生成可运行代码。
重现别人的UI是否合法？
布局和交互模式不像品牌资产那样受保护。不要重复使用他们的标志、插图、定制字体、文案或专有代码——获取结构，用自己的识别。
它支持深色模式吗？
是的，这是计划的一部分：标记按主题提取，因此重现的组件可以同时支持浅色和深色模式，而不是硬编码为单一模式。
什么时候上线？
尚无公开日期。创建免费账户，新/make工具上线时会在应用中显示。
用 Rekreate 制作你的下一个爆款视频
找到一个经过验证的短视频，使用你的脚本、虚拟人像和声音复刻它，并在一个工作空间内用 Seedance、Kling 和 Veo 生成场景。
开始免费试用 →