Claude3.5 Sonnetの Artifacts 機能がスゴイ

Artifactsとは
プロンプトで指示したものを即座にレンダリング・プレビューできる機能です

まずは何ができるのかみてみましょう。
左側がプロンプト、右側が実行結果です。

アプリのUIスクショ載っけて
「ReactとTailwindでよろ。コンポーネント分割しといて」の精度めっちゃ高い pic.twitter.com/PeRyBYzBvI

— 🏳だいや🏳 (@flowphantom) June 20, 2024

Claude3.5 SonnetでThree.js によるアニメーションももちろんいけた。
最初に出してきたアニメーションは動きが無かったから「派手なのにして」とリテイク。
いい感じのやつ出してきた。

これがClaude上で完結してるのすごい。 pic.twitter.com/b23SWt3CrX

— 🏳だいや🏳 (@flowphantom) June 20, 2024

Artifacts で作れる事例集

• コード

• ドキュメント

• SVG

• mermaid

• ウェブデザイン

• グラフ

• スライド

• 簡単なゲーム

• Reactコンポーネント 等

基本的にWebでレンダリングできるものなら何でも表示してくれそうです。
画像やアイコンを生成したければSVGを経由すると良い感じです。
アニメーションが必要ならThree.jsを経由する など
Webでレンダリングできるものを経由するとなんでもできそうです。

Artifactsって？

ユーザーがClaudeにコンテンツ生成を依頼すると

• コードスニペット

• テキスト文書

• ウェブサイトデザイン

等を生成してくれます。
生成されたArtifactsが会話画面の横に専用ウィンドウで表示されます。

これにより、

• Claudeの作成物をリアルタイムで確認

• 作成物を編集

• 作成物を発展
  といったことが可能になります。

これってCreate.xyz の機能と似ていますよね。また食いつぶしにきた感があります。

Anthropicの展望

このプレビュー機能は、Claudeが対話型AIから協調的な作業環境へと進化したことを示しています。

これはClaude.aiのより広範なビジョンの始まりに過ぎず、近い将来にはチームコラボレーションのサポートへと拡大していく予定です。

近い将来、チーム、そして最終的には組織全体が、知識、文書、進行中の作業を1つの共有スペースに安全に集中させることができるようになり、Claudeはオンデマンドのチームメイトとして機能することになります。

Claudeの上で仕事が完結していた なんてこともありえますね。

参考