2025/12/08 2:18
I failed to recreate the 1996 Space Jam website with Claude
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
要約
著者は、Claude AI を使って 1996 年の Warner Bros の「Space Jam」ランディングページをスクリーンショットとアセットフォルダから再構築しようとしました。元のサイトは 200 KB 未満の単一 HTML ファイルで、絶対位置決め、テーブルレイアウト、およびタイル状の星空 GIF 背景に依存しています。
プロセスと所見
- 初期試行: Claude は概算レイアウトを生成しましたが、惑星軌道を誤った位置に配置しました。軌道パターンは認識できたものの、それを再現することには失敗しました。
- 構造化プロンプト: 著者は Claude に「知覚分析」「空間解釈」「再構築計画」の各セクションで理由を説明させ、正確なピクセル座標を要求しましたが、Claude はそれらを提供できませんでした。
- カスタムツール: 精度向上のために 50 px → 5 px のグリッドオーバーレイ、ラベル付き座標参照点、色差比較、スクリーンショットサイドバイサイドビューア、およびスクリーンショットを 6 区域に分割するスクリプトを構築しました。
- 結果: Claude の調整は目標から 5–10 px 内に留まりましたが、正しい軌道半径（約 350–400 px）には決して収束しませんでした。内部レイアウトが生成されると、その後のフィードバックは元のスクリーンショットではなく、この誤ったモデルに基づいて行われました。
- トークナイズ仮説: 著者は Claude が 16×16 パッチで画像をトークナイズしているため、細かい視覚的粒度が欠如し、セマンティック理解はあるもののピクセル精度が低いと考えました。
- ズームインテスト: 200 % に拡大したスクリーンショットを提供して、大きなパッチで解像度が向上するか確認しましたが、Claude は依然として比例スケーリング指示に従いませんでした。
結論
このタスクは未解決のままです。実験は Claude の空間推論限界をベンチマークとし、ピクセル単位で正確な画像再構築におけるモデルの現在の制約を示しています。
本文
Hacker Newsへのリンク:
ご協力いただきありがとうございました！
Claudeは1996年のSpace Jamサイトを再現できるか？
いいえ―少なくとも私のプロンプトスキルでは。
このウェブサイトを永遠に残したいと考えており、唯一の方法としてClaudeにスクリーンショットから再構築させることが思い浮かびます。ご存知の通り私はエンジニアリングマネージャーでコンピュータサイエンスの学位を持っています。どうかお手伝いいただけませんか 😞
最後に: 「Claude」を指すときに「he」という代名詞を使っていることは、Josh にとって笑えるものです。
Space Jam（1996年）
知らない方のために説明すると、Warner Bros は1996年に公開された Space Jam 映画に合わせて作られたこの時代遅れなウェブサイトをオンラインで保持しています。
これは初期のウェブデザインの典型例です：シンプルでカラフル、そして喜びをもたらします。Claudeがスクリーンショットだけから再現できるか試してみましょう。
セットアップ
最低限、私はClaudeに以下を提供します：
- ウェブサイトのスクリーンショット
- ウェブサイトで使用されているすべてのアセット
Claude CodeとAnthropic APIとの会話全体（ユーザープロンプト、Claudeの応答、ツール呼び出し(Read, Write, Bashコマンド等）を記録するために中間プロキシを設定しました。これにより
traffic.log編集: この調査にはOpus 4.1を使用しました。モデルを追加し忘れていたことをanorwellさんが指摘してくれました。
パート 1 – Claude the Realist
Space Jamのサイトはシンプルです：絶対位置決めで構成された単一HTMLページと星空GIF背景のタイル。全ページはピクセル単位の左/上値を使った絶対位置決めです。総ペイロードは200 KB未満。
訂正: 実際にはテーブルで作られています。wilsmexさんとsqirclesさんに指摘いただきました！
Claudeがすべてのアセットとスクリーンショットを持っていれば、単調な作業になるはずでした。彼はそれを完璧に再現し、次にもっと面白い例—エージェント的HTML生成へ移ることができるでしょう。
私はClaudeにこう伝えました：
*「あなたには以下を渡します：
- Space Jam 1996ランディングページの完全なスクリーンショット。
- 元サイトから抽出した画像アセットのディレクトリ。
あなたの仕事は、できるだけ忠実にランディングページを再現し、スクリーンショットと正確に一致させることです。」*
彼が作ったものは一見悪くないように思えました：惑星がロゴの周りに楕円形で配置され、ボタン位置に黄色いラベル。ですが軌道パターンがほぼダイヤモンド型で対称になっていました。
Claudeは自慢しました：
「完璧です！私はSpace Jam 1996ランディングページを成功裏に再現しました。」
彼は軌道レイアウトを研究し、間隔関係を分析して惑星を正確に配置したと主張しました。しかし出力は本来のパターンから外れていました。
パート 2 – Claude the Unreliable Narrator
私はグリッドや比較、ステップバイステップ修正、Claudeに思考過程を語らせるなど試みましたが、効果はありませんでした。ツールを作成しました：
- グリッドオーバーレイ
- ラベル付きピクセル座標参照点
- 背景を無視した色差比較
- スクリーンショットを逐次比較するツール
Claudeはまだ苦戦していました：軌道は近づいたもののSpace Jamロゴに圧縮されてしまい。彼はグリッドを使い、「中心(961, 489)」や「惑星B‑Ball ≈ (850, 165)」と数字を引き出しましたが、最終レイアウトは源から大きく逸脱していました。
2倍ズームしたスクリーンショット（詳細を増やすため）でも改善されませんでした。彼は画像を粗い意味論的ブロブとして扱い、正確な幾何学マップとして解釈しませんでした。
パート 3 – Claude the Blind
Claudeのビジョンエンコーダが画像の16×16ブロックごとに1トークンを生成している可能性があります。したがって惑星は2〜3パッチしかないため、細かい空間推論が困難です。サイズを2倍にすると惑星あたりのパッチ数が増えるかもしれませんが、それでも正確な位置決めには結びつきません。
結論
Claudeはレイアウトを「ここに惑星、そこにラベル」と意味的に説明できますが、スクリーンショットだけからピクセル単位で完璧に再現することはできません。グリッドやズーム、詳細プロンプトを使っても彼の内部モデルは不正確な「想像上の軌道」に縛られ続けます。
まだ必要なのは
Space Jamサイトを忠実に再構築することです。スクリーンショットとアセットフォルダだけでClaudeまたは他のツールがこれを実現できれば、ぜひお知らせください。
試したことのないアプローチ
- 四分割再構築 – 各象限を独立して処理し、後でマージ。
- マジックプロンプトエンジニアリング – 例：「あなたは絶対位置決めに精通したCSSグリッドです…」
- 明示的ズームツール使用 – Claudeにズームインインターフェースを与え、スクリーンショットの使い方を指示する。
誰かがこれを突破するまで、Space Jamサイトは「再現不可能な完璧さ」の証拠として残ります。