Made by Mechanical Means

私がClaudeや他の生産性ツールで作業する上で注目すべき違いは、機能リクエストが驚くほど主要な議論トピックではないことです。代わりに、人々は私がClaudeをどのように使っているか、彼らはClaudeをどのように使うべきか、そして共有できるクールな魔法の呪文があるかどうかを知りたがっています。この投稿では、コードに触れたり実行したりすることなく、あるいは従来のClaudeコードを使わずに、私のホームページを再設計するプロセスを説明したいと思います。プルリクエストは作成されず、GitHubも開きませんでした。もし完全な最終結果を見ていないなら、まずそちらをチェックしてみてください。 90秒での再設計 約60のスレッドが、Blenderでのヴェルナー・ヘルツォークのドキュメンタリーのCGIパロディの作成や、サウンドトラックのゼロからの合成など、私のますます大胆なリクエストに、しばしば並行して取り組みました。複雑さにもかかわらず、そのオーケストレーションのかなりの部分は、コンピューターではなく私の携帯電話で行われました。実際、ローカルでコードを実行する必要はありませんでした。Claudeは完全にクラウドで動作していました。 私はこれを2026年9月下旬に書いていますが、6ヶ月後には私のワークフローは非常に異なっているだろうと推測しています。今年の初めと比較しても、私は顕著な違いに気づいています。私の仕事は今、より創造的になり、私が習得した技術によって制約されることが少なくなり、はるかに視覚的で感情的になりました。私はすべての作業にOpus 5.5を使用しました。 新しいClaudeプロジェクトを作成することから始めました。プロジェクトは、チャット、共同作業、コードをまたぐレイヤーになりつつあります。それらはドメイン固有の概念の上に位置すると考えることができます。あなたは、追加セッションをスピンオフしたり、それらの間でファイルを共有したり、メモリを共有したり、目標を達成するためにClaudeの艦隊全体を監督したりする能力を持つ1つのClaudeと話します。 今年の初めには、たくさんのClaudeに仕事をさせることで多くのことを成し遂げると冗談を言っていたでしょう。今では、各プロジェクトに1人のClaudeを配置し、そのClaudeはタスク、調査、スレッドを管理する方法を知っています。私たちは、それを達成する方法よりも、目標についてより多く話しています。 私の小さなプロジェクト設定。 各スレッドはクラウド上に独自のコンピューターを持ち、そこで必要なもの（Blender、FFmpeg、Playwright）をすべてインストールし、ヘッドレスブラウザからのスクリーンショットで作業を確認し、私がクリックするためのプライベートプレビューページを公開します。すべてのスレッドは、1つのファイルフォルダと1つのメモリを共有します。Claudeは、私が下した決定をメモリに書き留めるのに十分賢く、新しく開始されたスレッドが私が繰り返し言う必要なしにそれらに従うことを保証します。 新しい方向性のブレインストーミング デザインチームと始めるのと同じように始めました。たくさんのインスピレーションをテーブルに並べました。それらには、90年代のレイブポスター、私が気に入った映画、私に響いた広告、繰り返し見返す写真、さらには好きなコンセプトさえ含まれていました。 10のスレッドが、ほとんどガイダンスなしで並行してそれらの方向性を探りました。1つは、国立公園でのキャンプが大好きだという誰かのためのポートフォリオの方向性を思いつきました。もう1つは、80年代のゴースト・イン・ザ・シェル風のウェブサイトがどのようになるかを想像しました。どちらも、私には少しやりすぎだと感じられました。私は、単に既存のものをクローンするのではなく、新しいものを作りたいと思っていました。 方向性が気に入ったときはいつでも、Claudeにさらに深く掘り下げ、創造的になり、同じ方向性のバリエーションを5つ追加するように依頼しました。25のブレインストーミングサイトのうち20。 左上：部屋になったVHSの方向性。 ほとんどの方向性がHTML、Three.js、その他のライブラリを使用して私の希望や夢を実現していましたが、私はすぐにClaudeにBlenderを使うように促しました。ClaudeはBlenderのインターフェースを操作するのではなく、コードを書き、BlenderをPythonモジュールとして使用します。私が一時的にウェブサイトを居心地の良いキャンプ場に変えることを検討したとき、Claudeはすぐにそれをモデル化しました。 私が気に入ったビンテージテクノロジー（ゲームボーイ、レコードプレーヤー、ウォークマンなど）の方向性と、創造的なポートフォリオギャラリーを作成するというタスクを組み合わせると、Claudeは最終的にVHSテープを提案しました。 ポートフォリオのClaudeのプロトタイプ。各ギャラリーアイテムはVHSテープです。 私たちは一緒に、Claudeのアイデア（VHSテープ）と、90年代のドイツ映画がジャーナリストに与えるような部屋のインタラクティブバージョンを含む私のウェブサイトのビジョンを組み合わせました。 VHS方向性の第2バージョン。 部屋の設定に関する私の指示と、Blenderを創造的に使用することへの奨励を含んだClaudeの第2ドラフトは、驚くほど優れていました。私が公開したバージョンは約60回のイテレーションを要しましたが、最初の指示から39分後に到着した第2ドラフトは、今日あなたが見ている部屋としてすでに認識可能でした。 早い段階で、Claudeはコードがモジュール式であるべきだと判断し、スレッドが部屋の要素を並行して作業できるようにしました。例として、各テープは2Dキャンバスに描画される独自のファイルです。 ```javascript export default { id: "notion", title: "Notion", years: "2023–2025", mount({ canvas, ctx, width, height, audio }) { return { frame(t, dt) { /* draw one frame */ }, input(event) { /* play, stop, next, prev, click */ }, stop() { /* clean up */ }, }; }, }; ``` 各イテレーションステップの後、Claudeは成果物の新しいバージョンを公開しました。これはプライベートウェブページで、コンピューターと携帯電話の両方で現在のバージョンを確認できました。私は常にいくつかのオプションを求め、それらをクリックし、フィードバックを送り、そして自分のことを続けました。携帯電話からこれを行うのは特に強力だと感じました。自転車に乗っていて、乗っている間にアイデアが浮かび、Claudeに素早くアイデアを送り、次のコーヒー休憩で結果を確認しました。 部屋の構築 部屋について話しましょう。これはおそらく、私がClaudeに最も野心的になるように求めた部分です。LLMツールの最も美しい部分の1つは、以前はできなかったことを可能にしてくれることです。私はBlenderの使い方を知りません。私は欲しいものを説明し、Claudeはコードとしてジオメトリを書き、静止画をレンダリングし、私はフィードバックを与えます。 部屋は現在約3,000行のPythonコードで、Blenderをライブラリとして制御しています。これらのスクリプトの一部は次のとおりです。 tape_model.py (332行): 1つのVHSカセット、187 x 103 x 25 mm、リール、テープリボン、ガイド、ヒンジ付きダストドアを備えた中空シェルとして。 gear90s.py (659行): 90年代のジャーナリストのデスク。電話帳の上に置かれたマイクロカセット留守番電話付きの電話、名刺ホルダー、フロッピーディスク、ページャー、ソーラー電卓、ディスクマン、ウォークマン、デスクの後ろから壁のコンセントに伸びるコード。 retro_pc.py (431行): ブランド名が架空の80年代後半のベージュのPCクローン、5.25インチドライブ2基、キーロック、赤いパドルスイッチ、チルト＆スウィベルフット付き14インチグリーンCRT、XTスタイルのキーボード。 room_back.py (290行): カメラの後ろにある部屋の半分。反射とフリークックでのみ見えます。鍵付きの4パネルドア、その下に光、バケライトのライトスイッチ、スタッコのコーニス、タイル張りのストーブ。 Claudeは、いつ自由にライセンスされたモデルをインターネットで検索するか、いつ小道具をゼロからモデル化するかを自分で決定しました。一部の家具はPoly Haven（CC0ライセンス）から提供されましたが、ほとんどのアイテムは「Claude製」です。デスク、テレビ＆ビデオデッキ、ディスクマン、ウォークマン、古いPC全体、または部屋のジオメトリ全体などです。表面のテクスチャもコードです。Claudeの木材、プラスター、プラスチック、金属は写真ではなく、プロシージャルノイズです。 Blenderでのホームビュー。 私はフォトリアルな外観を追求し続け、すぐにライトマップについて話すようになりました。ブラウザでのリアルタイムライティングでは、私が望む柔らかいバウンスライトができませんでした。そのため、ClaudeはBlenderのパストレーサーであるCyclesを使用し、ライトをテクスチャにベイクすることを決定しました。これは驚くほど複雑なプロセスです。すべての静止表面は、アトラスにパックされた2番目のUVセットを取得し、各アトラスは最大4つのマップを取得します。ライトのない色、部屋自身のランプからのライト（デスクランプ、都市の輝き、月）、テレビからのライトのみ、プレーンホワイトで光る、そしてデスクランプがオフの部屋です。シェーダーは、テレビのライトをテープが表示している色で着色するため、青いテープは部屋を青くします。 ```glsl vec3 lamps = pow(texture2D(irrA, uv).rgb, vec3(3.0)) * sA; // desk lamp, city, moon vec3 tv = pow(texture2D(irrB, uv).rgb, vec ```