用Claude Artifacts做网页交互

如题 先看几个例子: 1. 鲁比克魔方模拟器

2. 追踪小鼠标的眼睛动态效果 3. 按比例分配的树状图

4. 柱状图

5. 算法演示图表

6. 调查问卷Quiz

7. 在线小工具(Generator) 8.私人/行业助手小工具 9. To-do List工具 10. 模拟计算器

11. 数据对比视图

12. 风险投资清算优先权模拟器(工具) 等等 上面这些呢,都是可以通过恰当的提示词,使用Claude中的Artifacts工具来实现的, 除了生成静态的图片(数据视图), 还可以实现可以交互, 互动的动态效果, 比如上面的的一些计算器, 小工具等, 可以实现输入数据(鼠标动作), 生成对应结果的效果.

而且, 可以要求artifacts以HTML的形式输出, 我们拿过来嵌入到网站网页上去.

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

谷歌现在很重视用户交互，互动数据/用户停留是很重要的排名因素, 甚至可以说是排名前几的因素之一了.

很多元素, 以前不懂代码可能做不出来, 现在有了artifacts这样强大的工具, 难度已经大大降低了.

而这样一些提示词, 不知道怎么写, 怎么实现呢?

第一, 可以截图, 要求Claude生成类似的效果, 让它一步步提示你写一个合适的提示词, 再在artifacts中验证, 修改.

第二, 网络搜索, artiacts生成的效果, 是可以分享到网络中的, 网上能找到一些不错的(Preview)分享, 你改一改(Remix)其中的数据, 就能定制成自己的.

第三, 找有相关经验的人联系, 如果有需要, 可以找我聊聊. That’s it.

现在主要用Claude

不会代码？用GPT打造高流量工具站