今天，Claude3.5 Sonnet 发布，并上新 Artifacts 功能，自动生成代码并直接在浏览器上运行。

很快，DeepSeek 官网的代码助手也上线了同样的功能：生成代码，一键运行！

仅需三步，就能体验全新交互！

访问 coder.deepseek.com →  选择“代码助手 V2” → 输入提示词 → 点击 “运行HTML”。

网页设计

参考提示词：

用HTML、CSS和JavaScript实现一个美观的、销售海鲜的、电子商务网页，元素尽可能丰富，并设置一些交互动效，全权由你来设计和创建。title要别致一点，颜色、元素要和海鲜、海洋相结合。主页上是一个大屏图，写上商城介绍，还有一些美观的设计，不要使用图片，配色合理，加上合适的动画。

商品列表：

深海龙虾：300美元

北极贝：200美元

鳕鱼：100美元等

经典游戏：五子棋

参考提示词：

用 HTML、CSS 和 JavaScript 实现一个五子棋游戏的所有逻辑，棋盘背景使用浅木色。

经典游戏：飞行射击

参考提示词：

请使用 HTML 和 JavaScript 创建一个满足以下规格的 8 位风格自动射击飞行游戏：

标准设置：

画布尺寸：256x240 像素（以 2 倍缩放显示）

8 位元风格的图形

使用限定色彩调色板

玩家飞机：

使用箭头键可向左右展开

流畅且顺畅的移动也是可能的

自动发射子弹（约每 10 帧一次）

敌：

随机出现，向下

随着等级的提升，力量也会增强

老板：

每 100 点出现一次

拥有 HP 条

横向移动并生成敌人

游戏玩法：

显示分数、级别和玩家生命值

击败敌人和 Boss 会使分数增加

玩家的生命值降至 0 时，游戏结束

图形：

用简单的图形表示玩家、敌人、Boss 和子弹

显示闪耀的星星

性能：

使用 requestAnimationFrame

利用 Delta Time 实现与帧率无关的动态效果

其他功能：

游戏结束画面

重新启动

此游戏应以单一 HTML 文件形式实现，请勿使用外部库。同时，请在代码中添加适当的注释，并确保结构清晰易读。

经典游戏：扫雷

参考提示词：

用html实现复杂一点的扫雷游戏，数字颜色分明，有计时，有重启按钮

经典游戏：2048

参考提示词：

用 HTML、CSS 和 JavaScript 实现 2048 游戏的所有逻辑，满足以下条件： 

背景：https://s2.loli.net/2024/06/21/1lxYdNIpwuegH8m.jpg

数字：深色 

格子：透明 

计分：开启 

重启：开启

计算器

参考提示词：

用html写一个简单且美观的计算器

音乐播放器

参考提示词：

用 HTML、CSS 和 JavaScript 实现一个好看的音乐播放器的所有逻辑，允许用户上传音频文件，正常输出，样式美观，显示当前音乐名，并通过 canvas 实现音乐频谱可视化。

数据可视化

参考提示词：

"MBPP

Plus"        "Human

Eval"        "LiveCode

Bench"        Aider        MATH        GSM8K

GPT-4o-0513        73.5        91.0        43.5        72.9        76.6        95.8

DeepSeek-Coder-V2        76.2        90.2        43.4        73.7        75.7        94.9

GPT-4-Turbo-0409        72.2        88.2        45.7        63.9        73.4        93.7

Claude-3-Opus        72.0        84.8        34.6        68.4        60.1        95.0

Gemini-1.5-Pro        74.6        83.5        34.1        57.1        67.7        90.8

GPT-4-1106-preview        72.8        82.2        40.1        65.4        64.1        91.4

Yi-Large（零一万物）        58.7        82.3        31.0        49.6        62.4        92.6

Qwen2-72B（阿里）        63.1        86.0        28.3        52.6        59.7        91.1

DeepSeek-V2        67.7        81.1        32.5        60.2        53.9        92.2

Llama3-70B        69.0        81.7        28.7        49.2        50.4        93.0

ERNIE-4.0（百度）        64.6        72.0        -        -        52.2        91.3

MiniMax-abab-6.5        63.2        78.0        24.7        34.6        51.4        91.7

Step-1-32k（阶跃星辰）        62.2        79.9        28.3        35.3        56.6        91.6

GLM-4（智谱清言）        59.3        72.0        34.5        42.9        47.9        87.6

Baichuan4（百川）        58.5        74.4        21.2        36.8        47.0        90.5

hunyuan-pro（腾讯）        60.3        78.1        21.7        37.6        54.6        91.4

Doubao-pro-32k（字节）        60.8        73.8        23.0        39.1        46.2        88.9

Moonshot-v1（月之暗面）        60.3        82.9        23.9        33.8        44.2        89.5

Codestral        68.2        81.1        31.0        51.1        31.6        75.8

Visualize all the above data using bar charts, with bars in the same column having the same color (in macaron color schemes). Implement it in HTML.

对如上所有数据进行可视化，柱状图，同一列的柱状用一个颜色（马卡龙色系）。用html实现

轮到你啦~

访问 coder.deepseek.com 输入你的提示词，一键运行代码，展现你的创意吧！