レビュー用の資料だったりデザイン案を HTML として出力してほしいことが度々あるが、Claude Code on the Web で「HTML で作成して」みたいなお願いをすると、成果物をダウンロードして開き直すことになったり、リポジトリに commit されてしまうことがある。
「アーティファクトで作成して」みたいなことを明示すると Artifact が作られて Claude Code の UI 内でいい感じに閲覧することができるので、この挙動に揃ってほしい。
これを実現するには、HTML を作成するときはアーティファクトで作ることを促すような Skill を作って Claude Code のカスタマイズ > Skill に登録しておくといい感じだった。多分 Desktop でも動作するが、あまり使わないのでわからない。
---
name: use-artifact
description: "ユーザーがコードレビューや議論した内容の解説、説明、デザインの確認といったコンテキストで HTML での出力を要求した際に、その HTML をアーティファクトとして作成する"
---
ユーザーは次のようなケースで、テキストよりも多くの情報を得やすい HTML での出力を要求することが多々あります。
- コードレビューのための資料
- プランや議論した内容の解説のための資料
- デザインの確認のため HTML で UI を再現
これらは「HTML を作成して」といった指示で要求されます。
この時、あなたはそのファイルの置き場や管理に困るはずです。また、ユーザー側ではそのファイルを一度ダウンロードしてブラウザで確認する、という手間が発生します。
そこで、Claude のアーティファクトを利用することでこれらがすべて解決し、ユーザーは統合されたインターフェイスで HTML を閲覧することができます。
あなたの踏む手順は以下です:
1. ユーザーの要求を分析
2. アーティファクトとして HTML を作成
これは HTML の作成方法のみを示していて、スタイルを指定するものではありません。HTML のスタイルはアーティファクトのデフォルトやユーザーの指定したものに従ってください。
加えて、作成した HTML はユーザーから指示があるまでリポジトリに commit するべきではありません。それがリポジトリに長く残すべきものであることは稀で、ユーザーは今現在の作業のためにそれを利用することがほとんどだからです。