ClaudeやChatGPTで共有可能なHTMLを作成する

ClaudeやChatGPTでは、プレゼンテーション、提案書、マイクロサイト、インタラクティブなドキュメントをHTMLとして作成できます。HummingDeckは、会話やプレビュー用URLを直接変換するものではありません。最終的な静的出力を、1つのHTMLファイル、ZIPバンドル、またはAPIアップロードとして用意してください。

プロンプトを書く前に出力形式を決める

すべてのCSS、JavaScript、画像、フォントを埋め込める小規模なプロジェクトなら、1つのHTMLファイルを依頼します。複数のアセットやページがある場合は、静的ウェブサイトのZIPを依頼します。

静的ウェブサーバー上で1つのファイルとして実行できる、本番公開用のレスポンシブHTMLドキュメントを作成してください。すべてのCSSとJavaScriptをHTML内に埋め込んでください。重要な画像は埋め込むか、軽量なインラインSVGに置き換えてください。npm、ビルド手順、ローカルサーバー、環境変数、認証、非公開APIキーを必要としない構成にしてください。タッチ画面でもナビゲーションと操作を使えるようにしてください。最終的な.htmlファイルだけを返してください。

このプロジェクトをHummingDeck向けの本番公開用静的ウェブサイトZIPとして書き出してください。ルート階層に1つのindex.htmlを置き、コンパイル済みの依存ファイルをすべて含めてください。アセットには相対パスを使用してください。必要な画像、フォント、スタイルシート、スクリプト、メディアファイルをすべて含めてください。npmなどのビルド手順が必要なソース専用ファイルは含めないでください。すべてのページとリンクを維持してください。展開したフォルダが基本的な静的ウェブサーバーで動作することを確認してください。ZIPは100MB未満にしてください。ZIPだけを返してください。

HummingDeckへの受け渡し要件を追加する

結果の信頼性を高めるため、元のデザイン用プロンプトに次の要件を追加します。

• 画面幅320pxのスマートフォンからデスクトップまで、レイアウトが正しく機能すること。
• ボタンとリンクに分かりやすいラベルと、操作しやすいタップ領域があること。
• ナビゲーションがホバー操作だけに依存しないこと。
• ブラウザのズームを使わなくてもテキストを読めること。
• 重要なコンテンツが、外部サービスの継続稼働に依存しないこと。
• ページを切り替えたとき、表示状態が予測どおりに更新されること。
• シークレット、トークン、非公開エンドポイントをブラウザ上のコードに含めないこと。

無効な書き出しを修正する

アップロードに失敗する、またはプレビューが空白になる場合は、展開後のファイル構成とブラウザコンソールのエラーをAIツールに渡してください。認証情報や顧客の非公開情報は含めないでください。

HummingDeck向けに、この静的HTMLの書き出しを監査してください。パッケージには明確なルートエントリを1つだけ用意し、相対パスを使用して、必要なアセットをすべて含めてください。npm、ビルド手順、環境変数、バックエンドなしで動作する必要があります。不足しているファイルと壊れた参照を特定してください。修正済みの100MB未満の静的ZIPを返してください。必須かつ一般公開されているものを除き、外部依存関係を追加しないでください。

製品画面またはAPIからアップロードする

手動でアップロードする場合は、資料ライブラリを使用します。社内ワークフローで多数の資料を生成し、自動で公開する場合はAPIアップロードが便利です。REST APIアクセスは、Businessプランで申請すると利用でき、最初にワークスペースで有効化する必要があります。

受信者に最終リンクを送る前に、HTMLとZIPのアップロード要件を確認してください。