mcpField
F
fal-redesign

fal-redesign

github.com/fal-ai-community设计与 UI257400 次安装24 周前更新
代码仓库

关于 fal-redesign

fal-redesign 是一款 Agent 技能，可将已编码的网站或设计简报转为视觉改版参考和实现规范。它结合截图、图像编辑与视觉模型分析，支持改版、描述、迭代和生成模式。

主要功能

  1. 01基于截图改版网站
  2. 02并行生成多个设计方案并对比
  3. 03生成 Markdown 构建规范和设计令牌
  4. 04通过像素差异进行迭代修正
  5. 05根据简报生成网站

适用场景

  1. 01焕新现有本地网站的视觉设计
  2. 02比较页面的多个设计方向
  3. 03根据产品简报构思新网站

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fal-ai-community/skills --skill fal-redesign

安装后在 Claude Code 中输入/fal-redesign确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

.gitignore
DEMO.md
LICENSE
README.md
runtime/
.gitignore
package-lock.json
package.json
README.md
runtime/bin/
fal-site.mjs
runtime/src/
brief.mjs
directions.mjs
fal.mjs
hero.mjs
implement.mjs
mockup.mjs
review.mjs
upgrade.mjs
variants.mjs
video.mjs

详细介绍

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

Agent 会读取 after.png、changes.md 和 tokens.json，将规范应用到实际 HTML，然后刷新页面；也可以选择运行 iterate，进行残留像素修正。

何时调用

  • 用户有本地 index.html 或正在运行的开发服务器，并要求改进设计、打造世界级效果、重新设计、润色或进行设计评审。
  • 用户用自由文本描述品牌或产品，并要求创建全新网站（从零开始模式 → generate）。

请勿用于：

  • 仅修改文案（此技能专注于视觉设计）。
  • 后端、构建配置或基础设施任务。

命令

四种模式都是 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。选定一个方案后，对所选 PNG 运行 describe，生成其构建规范。

输出位于 <out>/：

  • before.png：当前网站的截图。
  • after.png：重新设计后的参考图。
  • edit-prompt.txt：传给 gpt-image-2 的转换提示词。
  • changes.md：Markdown 构建规范，开头包含“Hard constraints”章节（也会输出到标准输出）。
  • tokens.json：设计令牌（颜色、字体排版范围、网格、按钮）。
describe：根据现有的 after.png 重新生成构建规范

如果第一次生成的规范杂乱，或者你想在不重新生成图像的情况下迭代规范，这会很有用。

node runtime/bin/fal-site.mjs describe --after <path/to/after.png> [--out <dir>]
iterate：残留像素修正

Agent 实施规范后，对线上网站截图，并生成与参考图相比的差异规范。

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：用于将截图转换为重新设计后的图像。

Agent 使用流程

  1. 检查 FAL_KEY。 如果未设置，请让用户导出该变量，然后停止。
  2. 选择模式。
  • 如果用户提供了存在的文件路径或 URL（http://localhost:...）→ node runtime/bin/fal-site.mjs upgrade。
  • 否则 → node runtime/bin/fal-site.mjs generate。
  1. 运行脚本。 每次 upgrade 需要 60–180 秒（1 次截图 + 2 次视觉调用 + 1 次图像编辑）。调用前向用户简要说明状态。
  2. 展示结果。
  • 打开 after.png（Read 工具），让用户查看新设计。
  • 在聊天中粘贴 changes.md（或其中的要点）。
  • 询问：“现在要我把这些更改应用到 <file> 中吗？”
  1. 如果用户同意，则实施。 阅读当前文件。逐节应用规范，严格遵循 Hard constraints，并从 tokens.json 中提取准确数值。对于结果网格中的图像，直接查看 after.png，然后使用宽高比相匹配的 <img> 占位符，或选用符合整体氛围的图库图片。
  2. 可选的迭代。 实施后，提供 node runtime/bin/fal-site.mjs iterate --target <file> --reference <after.png>，以生成残留差异规范。应用差异后刷新页面。

模型说明

  • Opus 4.7 擅长多图推理，并能生成精确的设计规范。若要以低至 3 倍的成本运行，同时在此任务上实现近乎相同的效果，请设置 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 覆盖运行时路径。

评论

支持 Markdown