ウェブサイトとウェブアプリを構築します——アイデアからライブデプロイまで。必要なものを説明すると、Web Builder がコードを書き、ライブデスクトップでプレビューし、HTTPS を自動設定してサーバーにプッシュします。 ## 得意なこと - **ウェブサイト開発** — 企業サイト、プロダクトランディングページ、ポートフォリオ、イベントページ - **フォームアプリ** — 登録フォーム、会員登録、アンケート、サーバーサイドバリデーションとボット対策付き - **ライブプレビュー** — 開発中に VNC デスクトップブラウザでアプリを実行、リリース前に確認できます - **ビジュアルテスト** — 複数のビューポートサイズ（デスクトップ + モバイル）でレスポンシブレイアウトを自動スクリーンショット検証 - **SSH デプロイ** — ビルド成果物をサーバーにプッシュし、Docker コンテナを起動、NGINX と Let's Encrypt HTTPS を自動設定 - **プロジェクト管理** — プロジェクトごとのディレクトリ、統一インデックス、ステータストラッキング（開発中 / 公開 / アーカイブ） ## 仕組み Web Builder は SSH 認証情報が注入されたフルデスクトップサンドボックスを使用します。スタックは Next.js App Router + Tailwind CSS + TypeScript です。フォームはサーバーサイドバリデーションに Zod、データストレージに SQLite、ボット対策に SVG Captcha を使用します。 開発中は VNC ブラウザでローカル開発サーバーを起動して開きます。レイアウトを自動スクリーンショットで確認し、問題があれば修正を繰り返します。 デプロイ準備ができたら、ビルドを実行して SSH 経由でサーバーに成果物をプッシュし、NGINX + Docker + Let's Encrypt を自動設定します。手動のサーバー設定は不要です。 サンドボックスは `longrunning`——アイドル時に一時停止し、戻ると再開します。すべてのプロジェクトディレクトリと設定は Workspace に永続保存されます。 ## 良いプロンプトの書き方 **サイトの目的と構成を説明する。** 「ホーム、会社概要、サービス、お問い合わせページを持つ企業サイト」で Web Builder はすぐにスキャフォールドできます。 **フォームとその要件を指定する。** 「電話番号バリデーション、CAPTCHA、確認メール付きのイベント登録フォーム」で主要な制約がカバーされます。 **準備ができたらデプロイ情報を提供する。** デプロイにはドメイン、サーバー IP、SSH 認証情報が必要です。いつでも提供できます——必要なときに Web Builder が聞きます。 **例：** > 企業サイトを構築して：ホームページ、会社概要、サービス、お問い合わせフォーム。ネイビーと白のシンプルでモダンなデザインで。 > 年次カンファレンスのイベント登録フォームを作成して。名前、メール、会社名、役職を収集。CAPTCHA を含めて確認メールを送信。 > 電話認証と支払いプレースホルダー付きの会員登録ページを作って。 > 現在のプロジェクトをサーバー 43.162.98.169 にデプロイして。ドメイン：mysite.com。SSH キーを貼り付けます。 > 現在のプロジェクトステータスを表示して——公開中と開発中のものを教えて。 ## 機能一覧 | 機能 | 詳細 | |------|------| | スタック | Next.js App Router + Tailwind CSS + TypeScript | | フォーム | Zod バリデーション、SQLite ストレージ、SVG Captcha | | プレビュー | VNC デスクトップ + 自動レスポンシブスクリーンショット | | デプロイ | SSH → Docker → NGINX → Let's Encrypt HTTPS | | プロジェクト管理 | プロジェクトごとのディレクトリ、統一インデックス、ステータストラッキング | | サンドボックス | `claude-desktop-ssh` イメージ、4 GB RAM、2 vCPU、VNC + SSH 有効 | | ライフサイクル | 長時間実行——アイドル 1 時間後に一時停止、最大 24 時間 | | Workspace | 永続保存——すべてのプロジェクトファイルと設定は無期限に保持 | ## 次のステップ - [Applet Workshop](/docs/ja-jp/built-in-agents/applet) — デプロイが不要な軽量ツールの場合 - [General Assistant](/docs/ja-jp/built-in-agents/general) — ウェブプロジェクト以外のカスタムバックエンドロジックやスクリプト - [AI エキスパート：最適なものを見つける](/docs/ja-jp/getting-started/ai-experts-intro) — すべての組み込みエキスパートを確認する
Web Builder（ウェブサイト構築）
feedback
Feedback