前端AI产品Same.new体验
最近，我发现了一个非常美观的颜色网站——中国传统色。这个网站不仅色彩丰富、搭配和谐，而且背后蕴含着深厚的文化底蕴，非常适合设计师和开发者们寻找灵感。
此外，在过去的30天里，一款名为 Same.new 的AI产品引起了广泛关注。这款工具以“Copy any UI”（复制任何用户界面）为理念，旨在开启UI开发的新时代。它的工作方式极其简单却强大：用户只需提供想要模仿的网页URL，Same.new就能自动生成一个几乎完全一致的像素级复制品。这一过程极大地简化了前端开发流程，让原本需要大量手工编码才能完成的任务变得轻松快捷。可以说，Same.new就像是给UI开发者们配备了一把神奇的“复制粘贴”钥匙，开启了前所未有的高效开发模式。
对于那些对如何使用Same.new感兴趣的朋友来说，这里有一个具体的例子可以参考：通过访问此链接，你可以看到将上述提到的传统颜色网站克隆到本地的过程。在这个过程中，系统会为你生成一个基于Next.js框架的项目文件。接下来，你只需要按照以下步骤操作即可：
- 导入项目：首先，你需要将下载好的项目文件导入到你的开发环境中。
- 安装依赖：打开终端并导航至项目目录下，然后运行
bun install命令来安装所有必要的依赖包。这里特别提到了使用Bun作为包管理器，因为它比传统的npm或yarn更快更高效。 - 启动项目：最后一步是启动应用程序。在终端中输入
bun run dev命令，这将会启动开发服务器，并允许你在浏览器中预览最终效果。
bun i
bun dev
效果图：
可以发现，新版本的网站在外观上与原网站存在较大的差异，但其核心功能保持了一致。这种变化可能是为了提升用户体验或是适应新的设计趋势。此外，另一个显著的变化是颜色使用的减少，这可能旨在简化视觉效果，让页面看起来更加清爽简洁。
针对颜色使用较少的问题，可以通过以下步骤来解决：
- 下载颜色配置文件：首先需要从GitHub上的指定仓库中下载
zhColors.json文件。该文件包含了更丰富的色彩定义，可以帮助恢复或增加网站的颜色多样性。请访问这里进行下载，并将此文件放置于你的项目中的src/data目录下。 - 利用Cursor的Panel功能：接下来，推荐使用开发工具Cursor中的Panel功能来管理和预览这些颜色。Cursor是一款强大的前端开发辅助工具，它允许开发者轻松地查看和调整网页元素的样式。通过它的Panel功能，你可以直接加载刚才添加到项目的
zhColors.json文件，这样就可以方便地选取并应用其中定义的各种颜色了。确保已经正确安装并配置好了Cursor工具后，在面板中找到相应的选项导入JSON文件即可开始使用。
@zhColors.json 这个是源数据， 期望将里面的数据迁移到 @zh-colors.ts 里面， 按照zh-colors.ts 的格式来迁移， 我怕json文件太大了， 如果tokens过大的话， 写个bun脚本在 @data 文件夹下， 命名script.ts 就好
