【結論】解決策 / 実行コマンド
Claude Codeのデモは、空のフォルダへアプリ全体を丸投げするより、事前に用意した小さな失敗テストを計画・修正・検証させる方が再現性があります。
利用枠やAPI料金を誇張せず、変更前後の差分とテスト結果を観客へ示します。
# ターミナルで実行:Viteの公式テンプレートを作成
npm create vite@latest claude-demo -- --template react-ts
cd claude-demo && npm install
# ターミナルで実行:Git基準点を作成
git init && git add . && git commit -m "chore: initialize demo"
# ターミナルで実行:Claude Codeを計画モードで起動
claude --permission-mode plan
具体的な手順・設定方法
5〜10分で終わる一つのバグまたは機能を用意します。
Claude Codeへ計画を出させ、観客と対象ファイルを確認します。
修正後にテストとGit差分を表示し、うまくいかなかった点も説明します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
カウンターが0未満にならない仕様を追加してください。
最初に変更計画とテストケースを提示してください。
承認後に最小差分で実装し、npm testとnpm run buildを実行してください。
失敗が3回続いたら停止して原因を報告してください。
注意点・よくあるエラーと対処法
「成功するまで無限に修正」はデモの予測可能性と安全性を下げます。
本番リポジトリ、実顧客データ、秘密情報をデモに使用しないでください。
公式デモと称する場合は実際のAnthropic公開資料と一致するか確認し、独自デモはそのように明記してください。