fal-redesign

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

fal-redesign

Runtime: Self-contained Node runtime under
runtime/
(
runtime/bin/fal-site.mjs
). Does things genmedia CLI cannot (puppeteer screenshotting, multi-vision pipeline, file orchestration). First-time setup:
cd runtime && npm install
. Override the runtime path with
FAL_SITE_RUNTIME=/abs/path
.

fal-redesign

turns "I coded a site, make it look amazing" into a concrete, implementable design pass.

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

The agent reads

after.png

changes.md

tokens.json

, applies the spec to the real HTML, refreshes, optionally runs

iterate

for a residual pixel-fix pass.

Runtime: 独立的Node运行时位于
runtime/
目录下（
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

Agent会读取

after.png

changes.md

tokens.json

，将规范应用到真实HTML中，刷新页面，还可选择运行

iterate

模式进行残留像素修复。

When to invoke

调用时机

User has a local
```
index.html
```
or a running dev server and asks to improve the design, make it world-class, redesign, polish, or run a design review.
User describes a brand/product in freeform text and asks for a fresh site (greenfield mode →
```
generate
```
).

Do NOT invoke for:

Copy-only edits (the skill is visual-design focused).
Backend, build config, or infra tasks.

用户拥有本地
```
index.html
```
或正在运行的开发服务器，并要求改进设计、达到世界级水准、重新设计、优化或进行设计评审时。
用户用自由文本描述品牌/产品，并要求创建全新网站时（全新模式→
```
generate
```
）。

请勿在以下场景调用：

仅需文案编辑的需求（该工具聚焦于视觉设计）。
后端、构建配置或基础设施相关任务。

Commands

命令

All four modes are subcommands of the Node runtime. Invoke directly:

四种模式均为Node运行时的子命令，可直接调用：

upgrade

: redesign a coded site

upgrade

: 重新设计已编码的网站

bash

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

Pass

--variants N

(2-8) to fan out into N distinct design directions in parallel. You get

after-01-<slug>.png

after-02-<slug>.png

, plus a

gallery.html

to compare them side-by-side. Pick one, then run

describe

on the chosen PNG to produce its build-spec.

Outputs in

<out>/

```
before.png
```
: current-site screenshot.
```
after.png
```
: redesigned reference image.
```
edit-prompt.txt
```
: transformation prompt fed to gpt-image-2.
```
changes.md
```
: Markdown build-spec with a leading "Hard constraints" section (also echoed to stdout).
```
tokens.json
```
: design tokens (colors, typography clamps, grid, buttons).

bash

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

。选择其中一种设计后，对选中的PNG运行

describe

命令以生成对应的构建规范。

<out>/

目录下的输出内容：

```
before.png
```
: 当前网站的截图。
```
after.png
```
: 重新设计的参考图。
```
edit-prompt.txt
```
: 传入gpt-image-2的转换提示词。
```
changes.md
```
: 包含开头「硬约束」章节的Markdown构建规范（同时会输出到标准输出）。
```
tokens.json
```
: 设计令牌（颜色、排版约束、网格、按钮样式）。

describe

: re-run the build-spec on an existing

after.png

describe

: 基于已有的

after.png

重新生成构建规范

Useful if the first spec was noisy or if you want to iterate on the spec without regenerating the image.

bash

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

如果首次生成的规范存在冗余，或你想在不重新生成图片的前提下迭代规范，该命令非常实用。

bash

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

iterate

: residual pixel-fix pass

iterate

: 残留像素修复

After the agent has implemented the spec, screenshot the live site and emit a delta-spec vs the reference.

bash

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

Outputs

current.png

delta.md

Agent完成规范实现后，对实时网站截图并生成与参考图对比的增量规范。

bash

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

输出内容为

current.png

delta.md

。

generate

: greenfield (brief → site)

generate

: 全新生成（需求简述→网站）

bash

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

bash

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

Required environment

必要环境配置

bash

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

Models used:

anthropic/claude-opus-4.7

: via

openrouter/router

and

openrouter/router/vision

(overridable with

FAL_SITE_MODEL

```
fal-ai/gpt-image-2
```
: greenfield hero + mockup renders.
```
fal-ai/gpt-image-2/edit
```
: screenshot-to-redesign transformation.

bash

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
```
: 截图转重新设计的转换。

Usage pattern for agents

Agent使用流程

Check
FAL_KEY
. If unset, ask the user to export it and stop.
Pick the mode.

If the user references a file path that exists or a URL (
```
http://localhost:...
```
) →
```
node runtime/bin/fal-site.mjs upgrade
```
.
Otherwise →
```
node runtime/bin/fal-site.mjs generate
```
.

Run the script. Each
```
upgrade
```
pass takes 60–180s (1 screenshot + 2 vision calls + 1 image-edit). Emit a brief status to the user before calling.
Surface the result.

Open
```
after.png
```
(Read tool) so the user sees the new design.
Paste
```
changes.md
```
in the chat (or the highlights).
Ask: "Want me to implement these changes in
```
<file>
```
now?"

If yes, implement. Read the current file. Apply the spec section by section, obeying the
```
Hard constraints
```
verbatim and pulling exact values from
```
tokens.json
```
. For imagery in the result grid, look at
```
after.png
```
directly and either use
```
<img>
```
placeholders at the matching aspect ratio or source stock that matches the mood.
Optional iterate. After implementation, offer
```
node runtime/bin/fal-site.mjs iterate --target <file> --reference <after.png>
```
for a residual delta-spec. Apply deltas, refresh.

检查
FAL_KEY
。若未设置，请求用户导出该密钥并停止后续操作。
选择模式。

如果用户提及存在的文件路径或URL（
```
http://localhost:...
```
）→ 执行
```
node runtime/bin/fal-site.mjs upgrade
```
。
其他情况→ 执行
```
node runtime/bin/fal-site.mjs generate
```
。

运行脚本。每次
```
upgrade
```
流程耗时60–180秒（1次截图 + 2次视觉模型调用 + 1次图片编辑）。调用前向用户发送简短状态提示。
展示结果。

打开
```
after.png
```
（通过Read工具）让用户查看新设计。
在聊天中粘贴
```
changes.md
```
（或其重点内容）。
询问用户：「需要我现在在
```
<file>
```
中实现这些修改吗？」

若用户同意则实现。读取当前文件，逐部分应用规范，严格遵循「硬约束」内容，并从
```
tokens.json
```
中提取精确值。对于结果网格中的图像，直接参考
```
after.png
```
，要么使用匹配宽高比的
```
<img>
```
占位符，要么选择符合风格的素材图。
可选迭代。实现完成后，提供
```
node runtime/bin/fal-site.mjs iterate --target <file> --reference <after.png>
```
命令以生成残留增量规范。应用增量修改并刷新页面。

Model notes

模型说明

Opus 4.7 handles multi-image reasoning and produces precise design specs. For 3× cheaper runs with near-parity on this task, set
```
FAL_SITE_MODEL=anthropic/claude-sonnet-4.6
```
.
```
gpt-image-2/edit
```
is the right primitive because it edits an existing screenshot while preserving legible in-image text, avoid substituting other image models here.

Opus 4.7可处理多图像推理并生成精准的设计规范。若想以三分之一的成本获得近乎一致的效果，可设置
```
FAL_SITE_MODEL=anthropic/claude-sonnet-4.6
```
。
```
gpt-image-2/edit
```
是合适的基础模型，因为它能编辑现有截图同时保留图像内清晰的文本，请勿替换为其他图像模型。

Runtime details

运行时细节

The skill ships a small Node 18+ runtime under

runtime/

(

puppeteer

@fal-ai/client

sharp

). First-time setup:

cd runtime && npm install

. Override the runtime path with

FAL_SITE_RUNTIME=/abs/path

该工具附带一个小型Node 18+运行时，位于

runtime/

目录下（依赖

puppeteer

、

@fal-ai/client

、

sharp

）。首次设置：

cd runtime && npm install

。可通过

FAL_SITE_RUNTIME=/abs/path

覆盖运行时路径。

fal-redesign

Original

Translation

fal-redesign

fal-redesign

When to invoke

调用时机

Commands

命令

`upgrade`
: redesign a coded site

`upgrade`
: 重新设计已编码的网站

`describe`
: re-run the build-spec on an existing
`after.png`

`describe`
: 基于已有的
`after.png`
重新生成构建规范

`iterate`
: residual pixel-fix pass

`iterate`
: 残留像素修复

`generate`
: greenfield (brief → site)

`generate`
: 全新生成（需求简述→网站）

Required environment

必要环境配置

Usage pattern for agents

Agent使用流程

Model notes

模型说明

Runtime details

运行时细节

fal-redesign

Original

Translation

fal-redesign

fal-redesign

When to invoke

调用时机

Commands

命令

upgrade: redesign a coded site

upgrade: 重新设计已编码的网站

describe: re-run the build-spec on an existing after.png

describe: 基于已有的after.png重新生成构建规范

iterate: residual pixel-fix pass

iterate: 残留像素修复

generate: greenfield (brief → site)

generate: 全新生成（需求简述→网站）

Required environment

必要环境配置

Usage pattern for agents

Agent使用流程

Model notes

模型说明

Runtime details

运行时细节

`upgrade`
: redesign a coded site

`upgrade`
: 重新设计已编码的网站

`describe`
: re-run the build-spec on an existing
`after.png`

`describe`
: 基于已有的
`after.png`
重新生成构建规范

`iterate`
: residual pixel-fix pass

`iterate`
: 残留像素修复

`generate`
: greenfield (brief → site)

`generate`
: 全新生成（需求简述→网站）