fal-redesign

fal-redesign

ランタイム： runtime/ 内の自己完結型 Node ランタイム（runtime/bin/fal-site.mjs）。genmedia CLI ではできない処理（puppeteer によるスクリーンショット撮影、複数のビジョン処理パイプライン、ファイルのオーケストレーション）を実行します。初回セットアップ：cd runtime && npm install。FAL_SITE_RUNTIME=/abs/path でランタイムのパスを上書きできます。

fal-redesign は、「サイトを作ったので、見栄えを最高にして」という依頼を、具体的で実装可能なデザイン調整に変換します。

your index.html → screenshot (1920×1200)
screenshot + brand → opus-4.7 writes a redesign prompt
screenshot + prompt → fal-ai/gpt-image-2/edit → after.png
after.png → opus-4.7 writes Markdown build-spec + tokens.json
 → returned to Claude Code / Codex

エージェントは after.png、changes.md、tokens.json を読み込み、仕様を実際の HTML に適用して更新します。必要に応じて、残りのピクセルを修正するために iterate を実行します。

呼び出すタイミング

• ユーザーがローカルの index.html または実行中の開発サーバーを使っていて、デザインの改善、世界最高水準のデザインへの仕上げ、再デザイン、ブラッシュアップ、デザインレビューを依頼した場合。
• ユーザーがブランドや製品について自由形式のテキストで説明し、新しいサイトを依頼した場合（グリーンフィールドモード → generate）。

次の場合は呼び出さないでください：

• コピーのみの編集（このスキルはビジュアルデザインに特化しています）。
• バックエンド、ビルド設定、インフラ関連のタスク。

コマンド

4 つのモードはすべて、Node ランタイムのサブコマンドです。直接呼び出してください。

upgrade：コード化されたサイトを再デザインする

node runtime/bin/fal-site.mjs upgrade --target <path-or-url> [--context "..."] [--variants N] [--out <dir>]

--variants N（2～8）を渡すと、異なるデザイン案を N 個並行して生成します。after-01-<slug>.png、after-02-<slug>.png と、案を並べて比較できる gallery.html が生成されます。案を 1 つ選び、その PNG に対して describe を実行し、ビルド仕様を生成します。

<out>/ に出力されるファイル：

• before.png：現在のサイトのスクリーンショット。
• after.png：再デザインの参考画像。
• edit-prompt.txt：gpt-image-2 に渡す変換プロンプト。
• changes.md：「Hard constraints」セクションを先頭に含む Markdown 形式のビルド仕様（標準出力にも表示されます）。
• tokens.json：デザイントークン（色、タイポグラフィのクランプ、グリッド、ボタン）。

describe：既存の after.png からビルド仕様を再生成する

最初の仕様にノイズが多い場合や、画像を再生成せずに仕様を調整したい場合に便利です。

node runtime/bin/fal-site.mjs describe --after <path/to/after.png> [--out <dir>]

iterate：残りのピクセルを修正する

エージェントが仕様を実装した後、稼働中のサイトをスクリーンショットに撮り、参考画像との差分仕様を出力します。

node runtime/bin/fal-site.mjs iterate --target <path-or-url> --reference <path/to/after.png> [--out <dir>]

current.png と delta.md を出力します。

generate：グリーンフィールド（概要 → サイト）

node runtime/bin/fal-site.mjs generate --context "<freeform context>" [--variants 4] [--out <dir>]

必須の環境設定

export FAL_KEY=... # https://fal.ai/dashboard/keys

使用するモデル：

• anthropic/claude-opus-4.7：openrouter/router と openrouter/router/vision 経由で使用します（FAL_SITE_MODEL で変更可能）。
• fal-ai/gpt-image-2：グリーンフィールドのヒーロー画像とモックアップの生成に使用します。
• fal-ai/gpt-image-2/edit：スクリーンショットから再デザインへの変換に使用します。

エージェント向けの使用手順

1. FAL_KEY を確認します。 設定されていない場合は、ユーザーにエクスポートを依頼して終了します。
2. モードを選びます。

• ユーザーが既存のファイルパスまたは URL（http://localhost:...）を指定している場合 → node runtime/bin/fal-site.mjs upgrade。
• それ以外の場合 → node runtime/bin/fal-site.mjs generate。

3. スクリプトを実行します。 upgrade の各実行には 60～180 秒かかります（スクリーンショット 1 回、ビジョン呼び出し 2 回、画像編集 1 回）。実行前に、ユーザーへ簡単な進捗状況を伝えます。
4. 結果を提示します。

• after.png を開き（Read ツール）、新しいデザインをユーザーに見せます。
• changes.md（または要点）をチャットに貼り付けます。
• 「これらの変更を今すぐ <file> に実装しますか？」と尋ねます。

5. 実装する場合は、変更を適用します。 現在のファイルを読み込みます。Hard constraints をそのまま守り、tokens.json から正確な値を取得しながら、セクションごとに仕様を適用します。結果のグリッドに使う画像については、after.png を直接確認し、一致するアスペクト比の <img> プレースホルダーを使うか、雰囲気に合うストック画像を用意します。
6. 必要に応じて iterate を実行します。 実装後、残りの差分仕様を生成するために node runtime/bin/fal-site.mjs iterate --target <file> --reference <after.png> を提案します。差分を適用して更新します。

モデルに関する注意事項

• Opus 4.7 は複数の画像を扱う推論に優れ、正確なデザイン仕様を生成します。このタスクでほぼ同等の品質を保ちながら実行コストを 3 分の 1 にするには、FAL_SITE_MODEL=anthropic/claude-sonnet-4.6 を設定します。
• gpt-image-2/edit は、画像内のテキストの読みやすさを保ちながら既存のスクリーンショットを編集するため、適切なプリミティブです。ここでは、ほかの画像モデルで代用しないでください。

ランタイムの詳細

このスキルには、runtime/ に小規模な Node 18+ ランタイム（puppeteer、@fal-ai/client、sharp）が含まれています。初回セットアップでは、cd runtime && npm install を実行します。FAL_SITE_RUNTIME=/abs/path を設定すると、ランタイムのパスを変更できます。