url-to-code

URL からコードへ

ユーザーがこのスキルを明示的に呼び出した場合は、続行してください。

ユーザーが現在のサイトを複製または再現するよう求めた場合に限り、続行してください。

ユーザーが「like」「better」「redesign」「improve」と言った場合は、$index に戻ってください。

<target-url> を、実際に操作できるフロントエンドのみのローカルアプリまたはウェブサイトとして複製してください。複製したものは、元のサイトと見た目も操作感も同じにしてください。

重要な上書きルール

• 作業を進める前に、プラグインルーター $index を参照してください。
• $critical-overrides に従ってください。

ユーザーのコンテキスト

作業を始める前に、$user-context を読み込み、ローカルのシェルにアクセスできる場合は、そのプリフライトスクリプトを実行してください。

関連する場合は、保存済みの商品 URL、Figma ファイル、スクリーンショット、参照画像、コードベースのパス、Storybook、トークン、デザインシステム、ブランドアセット、コンポーネントの参照資料、ブラウザーの設定、共有先を、根拠資料として使用してください。

保存済みの参照資料をすべて確認する必要はありません。現在のタスクに必要なものだけを確認してください。

ワークフロー

1. 重要な手順：続行する前に、対象のウェブサイトの利用規約に従う必要があることをユーザーに伝えてください。このワークフローは、ユーザーが所有するアプリやウェブサイト、または再現する許可を得ているもののみを対象とします。

2. $index のブラウザー選択ルールに従い、ブラウザーでソース URL を開いてください。

3. ページが正しいことを確認してください。

• 間違ったページ、アクセスがブロックされたページ、ログインページ、プロモーションページ、読み込み画面、エラーページ、アプリのインストールページ、または無関係なページへのリダイレクトが表示された場合は、続行しないでください。
• ページが間違っている場合は、別の利用可能なブラウザーでもう一度試してください。
• すべてのブラウザーで間違ったページが表示される場合は、作業を中止し、表示されている内容をユーザーに伝えてください。

4. ソースページを注意深くキャプチャしてください。

• ページの先頭から始めてください。
• 少しずつ下へスクロールしてください。
• 各段階で、表示されている内容をキャプチャしてください。
• 新しいセクション、コントロール、固定表示要素、アニメーション、遅延読み込みアセットがあれば記録してください。
• ページ全体を確認できるまで続けてください。
• ページの先頭に戻り、何か変化したか確認してください。
• モバイルでも 390 x 844 で同じ手順を繰り返してください。

5. ブラウザーの DOM ツールを使って、ソースを再現するために必要な情報をすべて収集してください。

• 要素
• コンポーネント
• テキスト
• リンク
• ボタンとコントロール
• 状態
• 画像
• アイコン
• フォント
• 動画
• SVG
• スタイルシート
• 色
• 余白
• レイアウトのサイズ
• レスポンシブ動作

6. ページ内の操作を見つけてテストしてください。

• スクリーンショットとブラウザーの DOM ツールを使って、表示されているコントロールを見つけてください。
• ナビゲーション、ボタン、リンク、入力欄、メニュー、ドロワー、モーダル、タブ、カルーセル、ホバー状態、固定表示要素など、ユーザーが操作できるものをすべて含めてください。
• コントロールは一度に 1 つずつテストしてください。
• 次のコントロールをテストする前に、開始時の状態に戻してください。
• ページの表示が明らかに変わった場合、またはブラウザーツールが状態の変化を示した場合は、その結果を保存してください。

7. ソースページから実際のアセットをコピーしてください。

• ページでアセットが読み込まれている場合、ブラウザーからアクセスまたは保存できない場合を除き、利用可能なものとして扱ってください。
• ページで使用されている画像アセット、ロゴ、アイコン、フォント、動画、SVG、スプライト、マスク、カーソル、背景画像をローカルにコピーしてください。
• 画像アセットをコピーできない場合は、元画像のスクリーンショットを使って ImageGen で代替画像を生成してください。
• フォントファイルをコピーできない場合は、最も近いオープンソースのフォントを使用してください。
• アイコンまたはグリフをコピーできない場合は、最も近いオープンソースのアイコンセットを使用してください。最も近いものではない場合、Lucide を安易に選ばないでください。
• 置き換えたアセット、フォント、アイコンがあれば、その理由とともに簡潔に記載してください。

8. local-prototype-preflight を使ってローカルアプリを作成してください。

9. キャプチャ、コピー、またはソースから収集した情報のみを使って作成してください。

• 新しい視覚的なアイデアを加えないでください。
• ソースのアセットをホットリンクしないでください。
• ソースを示す根拠がある場合、推測で補わないでください。

10. ローカルアプリを起動してください。

ChatGPT Work Mode でのプロトタイプのプレビュー

sites-preview の起動は検証ではありません。検証するには、クラウドブラウザーで http://terminal.local:4173/ を開き、レンダリングされたページを調べ、主要な操作をテストし、ブラウザーコンソールのエラーを確認して、デザイン QA に合格する必要があります。

HTTP のヘルスチェック、ビルドの成功、プレビューサービスの状態、デプロイの成功を、ブラウザーでの検証の代わりにしないでください。クラウドブラウザーを使用できない場合は、検証がブロックされたことを報告してください。

ChatGPT Work Mode でローカルのプロトタイプを検証するには：

1. 必要に応じて依存関係をインストールします。プロジェクトには npm の dev スクリプトが必要です。

2. sites-preview は npm run dev -- --host 0.0.0.0 --port 4173 --strictPort を実行します。dev スクリプトはこれらのフラグを受け付ける必要があります。

3. Vite または Vinext プロジェクトでは、"dev": "vite" を使用します。vinext dev は使用しないでください。Vite の server.host: "0.0.0.0" と server.allowedHosts: ["terminal.local"] を設定します。

4. サイトのルートから sites-preview start "$PWD" を実行します。

5. クラウドブラウザーで http://terminal.local:4173/ を開きます。localhost、127.0.0.1、0.0.0.0、HTTPS、または別のポートは使用しないでください。

6. 完了を報告する前に、レンダリングされたサイトと主要な操作を検証します。

7. terminal.local に言及したり、その URL をユーザーに出力したりしないでください。@Sites でチェックポイントをデプロイし、デプロイ済みのチェックポイント URL のみをユーザーに伝えてください。

8. ローカルアプリを元のものと比較します。

• デスクトップを確認します。
• モバイルを確認します。
• キャプチャしたすべての操作を確認します。
• 最終 QA を実行する前に、明らかな不一致を修正します。

12. ブロッキングビルドゲートとして design-qa を実行します。

• QA レポートをプロジェクトルートの design-qa.md に保存します。
• P0／P1／P2 の問題を修正し、アプリを再度キャプチャして、QA レポートに final result: passed と記載されるまで繰り返します。
• P3 の細部の調整を続けないでください。残っている P3 は、次回のイテレーションに向けたメモとして記載します。
• ソースのキャプチャ、プロトタイプのキャプチャ、または視覚的な比較がブロックされた場合は、作業を停止します。design-qa.md には final result: blocked と記載する必要があります。
• design-qa.md が存在し、final result: passed と記載されていない限り、引き継がないでください。

13. アプリまたはウェブサイトを引き継ぎます

• design-qa に合格した後にのみ引き継ぎます。
• プロトタイプはローカルで実行したままにします。
• Codex Desktop では、クリック可能なローカル URL を提示します。ChatGPT Work Mode では、@Sites でチェックポイントをデプロイし、デプロイ済みの URL のみを提示します。terminal.local は絶対に出力しないでください。
• プロトタイプのリンクに続けて、critical-overrides.md に記載されている共通のビルド引き継ぎを使用します。別の完了メッセージを追加しないでください。
• critical-overrides のビルド後のイテレーションと共有を促す文言を含めてください。

厳守事項

• まずソースの証拠をキャプチャします。デスクトップ、モバイル、主要な状態、および必要なアセット、アイコン、コントロールのマーク、フォントのすべてをキャプチャするか、代替するまでは、スキャフォールドの作成、アプリコードの記述、サーバーの起動、ローカルプロトタイプの作成を行わないでください。
• 対象からすべての操作と状態をキャプチャするまでは、引き継がないでください。
• 記憶、スクリーンショットだけ、推測した CSS、汎用アセット、または過去のチャットをもとに作成しないでください。
• 保存状態のソーススクリーンショットと、その状態で利用できる DOM／スタイル／レイアウトの証拠がない状態では、保存状態を実装しないでください。
• 最終アプリで、ソースのアセットをホットリンクしてはいけません。
• アセットの解決を「待つ」間、一時的な CSS アイコン、テキストグリフ、絵文字のマーク、プレースホルダーブロック、手作りの SVG を作成しないでください。アセットを先に解決してから、作成を始めてください。
• 承認済みのブラウザーで有効なソースとプロトタイプの証拠をキャプチャできない場合は、作業を停止し、design-qa のブロッカーを報告してください。