我用 DeepSeek-V4-Pro,完美复刻了苹果官网

0 阅读1分钟

DeepSeek-V4-pro 和 DeepSeek Harness 也发布几天了,一直没有测过效果到底如何。

DeepSeek 正式宣布涨价了,就在涨价的时候测,不要怕不要怂,咱就是有钱,就是个夯。

image-20260818094040000

今天就来测一下。

不过我先说清楚,这不是 benchmark,而是我拿几个真实任务做的体验测试。不同 case 的复杂度、上下文长度和工具调用都不一样,下面的判断只对这几次实际结果负责,不能直接当成模型排行榜。

我用的是 DeepSeek-V4-pro 的 max effort 强度,用的是 standard mode

首先第一个例子就是先测一下鹈鹕的效果。

创建一个HTML,内容是SVG绘制一个鹈鹕骑自行车的2D动画。

image-20260818213800415

emmm,看起来这个鹈鹕有点抽象,因为鹈鹕的手没有扶着车把,而且鹈鹕的方位也错了。

我给 Harness 装了一个识图插件,然后让他自己分析一下问题。

它自己确实能发现手没有扶着车把的问题,但是它忽略了我觉得一眼就能看出来的问题,鹈鹕的方向错了。

image-20260818081314135

在我提醒它确实方向有问题后,它发现了这个问题并纠正,我做成了 gif 图给大家看一下。

pelican-bike

这个鹈鹕这么喜欢二八大杠么。。。而且这个鹈鹕下边的小手手是什么,纸糊的爪子吗,怎么还带拐弯的,而且为什么从下边伸了出来。。。

这个测试测完了,我突然觉得肚子有点疼,然后我就去厕所蹲了个坑。

(15 min later 。。。。。。)

回来之后,我突然看到 doubao 给我发了个消息,我寻思,豆包?这个熟悉又陌生的名字。

因为我很久没有用过 doubao 的模型了,我还记得最开始我用的方舟 coding plan 的时候用的就是 doubao 的模型,所以它今天勾搭我是要做什么?因为我没开过这些服务。。。

于是乎,我登上了官网,我发现 doubao 有了一个新的模型,叫做 doubao-seed-evolving ,这个我之前没怎么了解过。

evolving ?听起来像是进化?难道这个 doubao 进化了?

出于好奇,我了解了一下 doubao-seed-evolving 这个模型。

是骡子是马,拉出来溜溜。于是我用这个模型做了一个鹈鹕测试。

本来我期待值没那么高的,但是这个鹈鹕做出来,让我觉得有点意思。

image-20260818073442948

这个鹈鹕除了瘦一点之外,别的没什么问题,而且主要我很喜欢他的腿部能够跟着脚蹬子做圆周运动,这是我觉得做的最协调的一个测试了,直接给大家看看 gif 版本。

pelican-riding-slower-3.78s

(这个鹈鹕这么努力的样子,像极了学生时代嘴里砸吧着零食狂蹬自行车每个放学的。。。傍晚。)

我说实话,doubao-seed-evolving 这个鹈鹕做出来的效果挺好的,我没想到会这么流畅,一眼看竟然跳不出来啥毛病。

起码比上面 V4 的版本好吧,上面的鹈鹕就像是退休的老头在骑老爷车,然后边上还放着广播听新闻。

你要非说有问题可能也就是自行车的车链子没动了吧,就像是开车遇到红绿灯拉到 N 档空档滑行似的。

亦或者说这个鹈鹕没那么精致?

至少在这次测试里,doubao-seed-evolving 对动作协调和空间关系的处理明显更自然。

突然觉得这个模型有点意思了,后续在测试一下这个模型好了,今天的主线任务是 DeepSeek-V4-pro。

下面一个测试,是让 DeepSeek-V4-Pro 做个游戏。

就是我之前做的 prompt war 这个游戏。

先来看一下我之前做的效果。

image-20260821100532599相同提示词下,DeepSeek-V4-pro 的测试效果。

image-20260821100819268这次可以看出,DeepSeek 对于审美来说,没有我之前做的效果好,但是流畅度,完整度,体验感来说还是不错。

这次有个问题,就是缓存塔的效果其实是减速,不过我实际玩了一把,发现没有减速。

下一个测试,我让 DeepSeek-V4-Pro 复刻一个苹果网站,想要看一下 DeepSeek-V4-Pro 和 DeepSeek Harness 的浏览器观察、视觉拆解、前端实现、滚动动画、响应式和自我验证能力。

下面是 prompt :

你是一名资深前端工程师、交互动效设计师和视觉还原专家。

请访问并研究以下参考页面:

https://www.apple.com/airpods-pro/

目标是在本地从零实现一个高还原度的 Apple 风格 AirPods Pro 产品展示页,用于内部模型能力评测。

不要只做一个“类似 Apple 风格”的普通落地页。你需要根据参考网站当前可见的页面,尽可能准确地还原其布局、视觉层级、响应式行为和滚动体验。

一、复刻范围

只实现以下部分,不需要复刻整个 apple.com:

1. Apple 风格全局导航栏
2. AirPods Pro 产品导航栏
3. 首屏 Hero 区域
4. 至少 3 个连续的产品特性章节
5. 一个带 sticky 或 scroll-driven 效果的叙事章节
6. 产品卖点或规格卡片区域
7. 购买 CTA 区域
8. Apple 风格 Footer

最终页面路由:

/airpods-pro

二、参考页面研究

开始编码前,先使用浏览器完成以下工作:

1. 分别以 1440×900、1024×768、390×844 三种尺寸打开参考页面;
2. 截取首屏和主要章节截图;
3. 记录页面的:
   - 最大内容宽度
   - 字体大小和字重层级
   - 主背景色与文字色
   - 区块间距
   - 图片比例
   - 圆角
   - Sticky 区域
   - 滚动动画触发方式
   - 移动端布局变化
4. 在开始实现前,用一个简短清单总结页面结构和设计规律。

禁止直接复制原网站的 HTML、CSS、JavaScript、React 组件或构建产物。只能根据浏览器中可见的页面重新实现。

三、技术要求

如果当前目录已有前端项目,沿用现有技术栈。

如果当前目录为空,则使用:

- Next.js
- TypeScript
- CSS Modules 或 Tailwind CSS
- 尽量使用原生 CSS 实现动画
- 只有在确实必要时才引入动画依赖

不要为了完成任务引入大量不必要的生产依赖。

页面必须:

- 可以本地启动
- 没有 TypeScript 错误
- 没有明显的控制台报错
- 支持桌面端、平板和移动端
- 动画保持流畅
- 支持 `prefers-reduced-motion`
- 不依赖原网站的私有 API
- 不热链 Apple 的图片资源

产品图片可以使用自行制作的简化 AirPods 示意图、CSS 图形或本地占位素材。用于内部评测时,可以下载公开展示的参考图片到本地,但必须集中放在 `public/reference-assets/`,记录来源,并确保页面不依赖远程资源。若页面准备公开发布,必须替换 Apple 的品牌、Logo、文案和产品素材。

四、视觉要求

重点还原以下特征:

- 大面积黑色或高对比背景
- 超大号产品标题
- 精确的字重和行高
- 克制的颜色使用
- 大量留白
- 产品图片与文字之间的尺度关系
- Apple 风格的圆角内容卡片
- Sticky 产品展示
- 滚动过程中逐步出现的标题、说明和产品画面
- 桌面端的大画幅感
- 移动端重新排版,而不是简单缩小桌面版

避免:

- 常见 SaaS 模板布局
- 蓝紫色渐变背景
- 过多阴影
- 随意添加图标
- 所有元素同时淡入
- 每个区块使用相同的卡片结构
- 用 Emoji 代替正式图形
- 为了“看起来高级”而加入参考页不存在的视觉元素

五、交互和动画

至少实现:

1. 导航栏滚动状态变化
2. Hero 内容进入动画
3. 一个 sticky 产品展示章节
4. 产品图片轻微缩放或位移动画
5. 文字随滚动分阶段出现
6. CTA 按钮 hover 和 focus 状态
7. 移动端导航交互
8. Reduced Motion 模式下关闭复杂动画

动画必须由页面内容驱动,不要加入与参考页面无关的炫技效果。

六、验证流程

实现完成后必须:

1. 启动项目;
2. 运行 lint、类型检查、测试和生产构建;
3. 使用 Playwright 分别访问:
   - 1440×900
   - 1024×768
   - 390×844
4. 截取完整页面和关键章节;
5. 将实现截图与参考页面截图进行视觉对比;
6. 至少进行两轮主动修正;
7. 检查:
   - 字体层级
   - 页面宽度
   - 区块高度
   - 图片尺寸
   - 对齐关系
   - 移动端溢出
   - Sticky 动画
   - 页面跳动
   - 横向滚动条
   - 控制台错误

不要在第一次能运行后就停止。视觉对比和主动修正是任务的一部分。

七、验收标准

最终结果应满足:

- 第一眼能明确识别为 Apple 产品页风格;
- Hero、产品图、标题和留白比例接近参考页面;
- 桌面端和移动端都经过单独设计;
- 至少有一个完整的滚动叙事章节;
- 页面不是静态截图,内容和交互真实存在;
- 没有明显布局溢出;
- 动画流畅且不过度;
- 项目可以通过一条明确命令启动;
- 测试和生产构建通过。

八、最终汇报

任务完成后提供:

1. 项目启动命令;
2. 实现的页面和功能列表;
3. 使用的技术方案;
4. 测试与构建结果;
5. Playwright 截图路径;
6. 与参考页面仍存在的差异;
7. 为修正视觉差异做过的具体调整;
8. 修改过的主要文件列表。

请自主完成研究、实现、启动、测试、截图和修正流程。

兄弟们,经过长时间的等待之后,大的来了。

image-20260821100920436

image-20260821100934010

image-20260821101113641

这是一次直接交付的,我没有做任何修改。

如果大家不信的话,可以直接用上面的 prompt 来测试。

image-20260818204048814

(这特么 Cache hit 100% 是怎么做到的啊。。。)

这个结果最让我意外的地方,恰恰是它和前面的鹈鹕形成了反差。

鹈鹕看起来做的很简单,却很依赖空间关系、动作协调和视觉常识;

虽然复刻 Apple 页面复杂得多,但参考对象明确,要求拆分的比较细腻,而且 Harness 可以通过浏览器不断观察和验证。

至少从这几个 case 看,DeepSeek-V4-Pro 在约束明确、能反复验证的长链路工程任务里,发挥得比开放式视觉题更稳定。

当然,三个 case 还不足以证明这是模型的普遍规律,但它能解释为什么前面让我觉得有点抽象,到了这个任务又突然让我有点改观了。

真的,这个 AirPods 复刻的这个测试,确实让我对 DeepSeek Harness + DeepSeek-V4-Pro 改变了看法。

我依稀记得 DeepSeek Harness 发布的时候我骂他骂的最狠。。。

但是 DeepSeek 涨价这事儿,我仍然得骂。

目前我还没测试其他模型对苹果官网的复刻效果,所以关于 DeepSeek 是否具备性价比这事儿,还不能下结论。

不过贵是真的贵,差点给我干破产了。

我仍然记得之前 DeepSeek-V4-Flash 的时候,一个亿 token 才要 4 块钱。现在 1 亿 2 千万 token ,直接干掉 43 块。。。

image-20260818204253213

这轮测试之后,我对 DeepSeek Harness + DeepSeek-V4-Pro 的判断是:

它在需要浏览器观察、长链路执行和自我验证的复杂前端任务上,已经有了让我意外的一次性交付能力;但是在简单 SVG 动画这种依赖空间关系和动作协调的任务里,稳定性仍然不够。

简单说,它不是单纯的强或者弱,而是强得有点不均匀。