多案例、实测（三） | 分享 Claude3.5 Sonnet Artifacts 如何快速开发 10+ 小应用

引言

继前两天分享了Claude3.5 Sonnet 实测内容后，今天是第三波分享。这次我尝试了一些有趣的应用。

往期内容：

环保知识小测试

提示词：

用 Claude3.5 Sonnet Artifacts 做一个环保知识小测试的程序，界面要美观华丽，多些环保的元素，题目共5题，简单些，答成功后，就放烟花，并是青蛙SVG嘴巴已一开一张动画，意味着呱呱棒

遗憾的是超过了Claude生成的token数限制，烟花效果未能成功添加。

不过简单两次尝试就能生成视频里的效果，我很满意。感觉随着Claude3.5 Sonnet的发布，很多小应用可以在短期内上线。

购物任务看板

提示词：

我要做一个购物任务看板的程序，分不同平台（京东、淘宝、唯品会）想要购买的物品：随机生成20个，分不着急购买、着急购买、一般需求

里面的商品不能重复，要可以移动商品，要有交互性，商品旁边要有价格和数量和总价

任务便利贴

提示词：

帮我做一个电子便利贴，我可以移动管理、添加我的任务，界面华丽些

我希望一行放3-5个便利贴，可以置顶，可以调整顺序，可以倒计时

生成SVG图片并做幻灯片

提示词：

上传头像发给Claude，用SVG生成小白兔的图片，画面唯美

沟通了几次，生成结果如下，Claude说它尽力了。

我请Claude将我和它沟通的过程，做成幻灯片，幻灯片配色参考我头像的配色，最终结果如下：

ComfyUI交互教程

提示词：

我要Claude3.5 Sonnet Artifacts做一个交互式的模型，让用户了解comfyui的使用方法，交互要丰富有趣，内容多样性，UI界面要华丽美观

量子电路互动模型

提示词：

用Claude3.5 Sonnet Artifacts构建和运行简单的量子电路互动模型，观察量子状态的演化和测量结果

各种因素如何影响市场交互模拟

提示词：

Create interactive model simulations to demonstrate how various factors affect the market

be  more complicate

页面中的参数都是可以调整的。

随机单词记忆卡片

提示词：

我想让你帮我生成一个英文单词随机卡片的程序，当我选择不同难度，就随机出现不同单词，并给我该单词的短语、音标、使用简介，请用Claude3.5 Sonnet Artifacts

要随机生成6个，分三行显示，每行2个单词卡片，界面要醒目华丽些

制作仪表盘

提示词：

---把以上内容，用Claude3.5 Sonnet Artifacts做成仪表板，内容形式丰富，要有图表，用react来做

注：文字内容参考的财新的的文章：电商618“卷”价格长达一月 各公司增长目标达成了么？

图1红框内需要都调大些，图2加上坐标轴，图3因字体颜色白色未显示出来，请调整配色

修改它，让图标变大，对应的左侧数据也要放大，优化整个页面UI设计，并用Claude3.5 Sonnet Artifacts展示出来

生成效果：

我个人感觉，像企业一般长图类海报都可以交给Claude3.5 Sonnet Artifacts来做了。

我再提示：

把上面的仪表盘转换成用reveal js写的幻灯片

改下，用鲜艳大胆醒目的颜色，字体也要大

令我惊艳的是，它生成了很土很醒目的幻灯片，效果感人。

音乐播放器

提示词:

我要做一个**音乐播放器 (Music Player)，主要包括下面内容，请帮我用**Claude3.5 Sonnet Artifacts写出程序


graph TD

    A[初始化项目] --> B[创建组件]

    B --> C[App组件]

    B --> D[Player组件]

    B --> E[Playlist组件]

    B --> F[Song组件]

    C --> G[状态管理]

    G --> H[当前播放歌曲]

    G --> I[播放状态]

    G --> J[播放列表]

    D --> K[音频处理]

    K --> L[播放控制]

    K --> M[暂停控制]

    K --> N[跳转控制]

    C --> O[UI设计]

    O --> P[响应式设计]

    P --> Q[CSS/styled-components]

make it better

ui 界面要科幻些，make it better

上面，我使用GPT生成了Mermaid图，并将其放入提示词中，希望Claude了解我想要的功能。

最后，再演示一个复杂的例子。

番茄钟

番茄钟是一个很多开发刚写独立APP，就会选择的程序类型，这个赛道竞争很激烈。

我一开始让Claude做出兔子造型的番茄钟，它做的效果如下：

提示词：

Please code a pomodoro timer program with a body that is a bunny，use Artifacts

再调整，效果如下：

提示词：

Optimize this countdown program, it should be beautiful, use react, have more functions, and the color matching is suitable for children

Research, and then try to make a better one

Make further efforts to optimize the interface and increase task management

LLM很容易做出这种效果，那我想做个复杂的，怎么做？

由于Claude使用次数有限，这里我和GPT4o交流，让它给到我信息。这里采用的是我之前文章——推荐一个自动生成复杂提示词的模板：思考链（CoT）如何通过分步推理提升AI任务准确性 | 示例详解里的方法。

Claude3.5 Sonnet很强，很快就给我生成多个文件。

我又询问了如何运行，Claude很快就提供了运行指南。Artifacts太棒了，只需多点击几次，就可以直接下载多个文件，之后就可以在本地进行调整和运行。

不过我的JavaScript项目经验太少，运行后出现一些问题，后续再处理。

接着，我提示将其改为简单的程序，以便Claude3.5 Sonnet Artifacts可以在线展示。

Claude3.5 Sonnet Artifacts生成如下效果。

我觉得还是有之前的对话在，Claude保留了记忆，我让它改简单程序，它还是有照顾到之前我发给它的复杂需求。

结语

使用Claude3.5 Sonnet Artifacts越多，感觉它越神奇。很多小应用值得去探索。

Claude3.5 Sonnet Artifacts影响的不仅是AI PPT，还有长图生成，小应用平台。

我觉得最获益的是产品经理，有太多想法就相对容易实现。

欢迎在评论区留言，让我们一起交流进步。

精选历史文章，请看这里：