コードライブラリ

見るだけで終わらない、動く Claude Artifacts の実例

以下のカードはすべて、Claude や DeepSeek が自然文のプロンプトから生成した動作する React アプリです。開くとサンドボックスが即実行し、生成元のプロンプトと編集できるソースが並びます。スクリーンショットではなく挙動そのものを確かめられます。

artifact 例によくある質問

ここにある Claude Artifacts の例とは？

artifact とは、モデルが 1 つのプロンプトから書き上げた自己完結のアプリです（ダッシュボード、ゲーム、段階的なフォームなど）。本ページの例は Claude と DeepSeek のコーディングモデルで生成し、正常に描画されるものだけを掲載しているので、コードの羅列ではなく動くデモです。

この例は無料で動かしたり再利用したりできますか？

はい。全てログイン不要・課金なしでブラウザで動きます。サンドボックスのコードを編集すればプレビューが再構築され、無料の AI アプリビルダーで自分のプロンプトから作り直すことも、完成した artifact を Claude Artifact ダウンローダーで単体の HTML に書き出すこともできます。

artifact と一般的なコードスニペットの違いは？

スニペットはコピーして動くことを祈るもの、artifact は動きます。これらの例はスタイル付き React コンポーネントとしてサンドボックスのプレビューにマウントされるので、読むだけでなくスマホで実際に使えます。

• プロンプトから自分の版を作る
• Artifactビューアー
• Claude Artifact ダウンローダー
• Claude Artifacts の使い方（画像付き手順）