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

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

这个平台就是 Same.dev

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

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

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

• 顶部区域（页眉与首屏大图区）

• 背景：横跨页面的艺术风格动漫横幅

• Logo：左侧白色"bilibili"品牌标识

• 主导航：圆角分类按钮（橙色"动画"、红色"热门"、灰色各类视频分区按钮）

• 二级导航：主导航下方更小尺寸的浅色子分类按钮

• 搜索与用户快捷操作

• 搜索框：居中的醒目搜索栏

• 快捷操作图标：带文字提示的圆形功能图标（包含App下载、大会员、投稿、消息、用户头像等）

• 投稿按钮：右侧醒目的粉色悬浮按钮

• 核心内容区

• 轮播广告位：带有导航箭头的大型视频/内容推荐轮播图

• 标签导航：轮播图下方的水平内容筛选标签（综合/动画/番剧等）

• 横向滚动卡片：轮播图下方带标签、标题与数据指标的缩略图卡片

• 视频流/内容网格

• 视频卡片矩阵

• 无限滚动加载

• 占位符效果：带渐隐效果的预加载卡片

• 配色、字体与风格

• 主色系

• 字体

• 组件效果

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

• 项目初始化

• React + Vite + shadcn/ui

• 默认采用全屏布局模式

• UI架构实现

• 全局导航系统

• 交互控制层

• 内容展示区

• 数据模拟层

• 样式与资源规范

• 设计系统集成

• 资源管理策略

• 响应式实现方案

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

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

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