太牛了!直接用 AI 工具抓取一个网页，并生成代码!

最近发现一个 AI 平台，可以抓取根据你输入的网址，去抓取这个网页的样式，并帮你生成这个网页的页面代码

这个平台就是 Same.dev

比如我想要实现一个B站的首页，我会把 https://www.bilibili.com/ 输入进去，他就会自动去抓取

并且分析这个网页上有什么东西

比如他分析出来网页的要素有：

• 顶部区域（页眉与首屏大图区）
• 背景：横跨页面的艺术风格动漫横幅
• Logo：左侧白色"bilibili"品牌标识
• 主导航：圆角分类按钮（橙色"动画"、红色"热门"、灰色各类视频分区按钮）
• 二级导航：主导航下方更小尺寸的浅色子分类按钮
• 搜索与用户快捷操作
• 搜索框：居中的醒目搜索栏
• 快捷操作图标：带文字提示的圆形功能图标（包含App下载、大会员、投稿、消息、用户头像等）
• 投稿按钮：右侧醒目的粉色悬浮按钮
• 核心内容区
• 轮播广告位：带有导航箭头的大型视频/内容推荐轮播图
• 标签导航：轮播图下方的水平内容筛选标签（综合/动画/番剧等）
• 横向滚动卡片：轮播图下方带标签、标题与数据指标的缩略图卡片
• 视频流/内容网格
• 视频卡片矩阵
• 无限滚动加载
• 占位符效果：带渐隐效果的预加载卡片
• 配色、字体与风格
• 主色系
• 字体
• 组件效果

接着他会给出他的代码编写计划：

• 项目初始化
• React + Vite + shadcn/ui
• 默认采用全屏布局模式
• UI架构实现
• 全局导航系统
• 交互控制层
• 内容展示区
• 数据模拟层
• 样式与资源规范
• 设计系统集成
• 资源管理策略
• 响应式实现方案

接着他会问你说，你只是想要首页，还是想要同时跳转到其他页面，我选择了前者

并且开始帮你生成项目结构结构和代码

页面中也会提供预览的效果