用Claude Artifacts做网页交互

铲子铺按语

Claude 的 Artifacts 能直接做出可交互的网页元素：计算器、小工具、数据视图、问卷，还能以 HTML 形式输出嵌进自己网站。谷歌现在很看重用户交互和停留时间，这些互动元素对 SEO 是实打实的加分项。不会写代码的，截图让它仿、网上找 Preview 改一改，两条路都能上手。

Artifacts 能做出什么

先看几个例子：

1. 鲁比克魔方模拟器
2. 追踪小鼠标的眼睛动态效果
3. 按比例分配的树状图
4. 柱状图
5. 算法演示图表
6. 调查问卷 Quiz
7. 在线小工具（Generator）
8. 私人/行业助手小工具
9. To-do List 工具
10. 模拟计算器
11. 数据对比视图
12. 风险投资清算优先权模拟器（工具）

等等。上面这些都可以通过恰当的提示词，使用 Claude 中的 Artifacts 工具来实现。

• 除了生成静态的图片（数据视图），还可以实现可以交互、互动的动态效果。
• 比如上面的一些计算器、小工具等，可以实现输入数据（鼠标动作）、生成对应结果的效果。
• 而且，可以要求 Artifacts 以 HTML 的形式输出，我们拿过来嵌入到网站网页上去。

交互元素对网站和 SEO 的价值

有了这些网页元素，网站不仅视觉上上了一个台阶，而且能带来很好的 SEO 效果。

• 谷歌现在很重视用户交互，互动数据/用户停留是很重要的排名因素，甚至可以说是排名前几的因素之一了。
• 很多元素，以前不懂代码可能做不出来，现在有了 Artifacts 这样强大的工具，难度已经大大降低了。

提示词怎么来

不知道怎么写、怎么实现这些提示词？有三条路：

• 第一，截图：要求 Claude 生成类似的效果，让它一步步提示你写一个合适的提示词，再在 Artifacts 中验证、修改。
• 第二，网络搜索：Artifacts 生成的效果是可以分享到网络中的，网上能找到一些不错的 Preview 分享，你改一改（Remix）其中的数据，就能定制成自己的。
• 第三，找有相关经验的人联系：如果有需要，可以找人聊聊。

站长

Ray Chan

外贸独立站操盘手

做过外贸谈单、建过站、跑过 SEO、也拍 YouTube。常年服务国内工厂出海，坑踩过，路跑通，货都在这铺子里。

进圈子，一起玩 →看看资源包