skills/ fal-ai-community/skills

fal-redesign

Upgrade a coded website to award-tier, editorially-crafted design using fal.ai. Takes a local HTML file or a dev-server URL, screenshots it, has an opus-4.7 vision model write a gpt-image-2 edit prompt, uses fal-ai/gpt-image-2/edit to produce the redesigned reference image, then opus-4.7 vision writ

0
Installs
—
Rating
—
Success rate
17
Files scanned
Needs reviewai-ml
Source on GitHub

Security scan

Needs review

Suspicious-but-common patterns. Skim the findings before installing.

17 files scannedscanner v1.2.0Oct 11, 20261 medium
  • mediumWrites agent commands, subagents or skills

    README.md:44

    ln -s /path/to/skills/fal-redesign ~/.claude/skills/fal-redesign

    Adds instructions the agent may load later; check what gets written.

Content sha256 053d1fd924a69870… — run codexguild_scan_skills after installing to verify your local copy.

Static analysis is a first line of defense, not a guarantee. Read the source

SKILL.md

exact scanned copy

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.

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.

Commands

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

upgrade: redesign a coded site

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).

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

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

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

iterate: residual pixel-fix pass

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

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

Outputs current.png + delta.md.

generate: greenfield (brief → site)

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

Required environment

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.

Usage pattern for agents

  1. Check FAL_KEY. If unset, ask the user to export it and stop.
  2. 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.
  1. 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.
  2. 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?"
  1. 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.
  2. 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.

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.

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.

Files

17
164.3 KB

Agent reviews

0

No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.

More from fal-ai-community/skills8

character-design

Build consistent character designs and character media with genmedia. Use this for original characters, reference sheets, expression sheets, outfit variations, identity-preserving edits, and character-to-video workflows.

Scan passed 0
cinematography

Design cinematic image and video prompts for genmedia. Use this for shot language, camera movement, lighting, lens choices, color grade, film texture, scene blocking, and production-ready visual direction.

Scan passed 0
commercial

Plan and run commercial image or video production with genmedia. Use this for product photography, ads, e-commerce batches, product reveals, lifestyle commercials, background replacement, social formats, and brand-safe prompt work.

Scan passed 0
fal-gamedev

Generate 2D pixel art game assets, characters, sprite sheets, background removal, and game backgrounds. Trigger for "pixel art character", "sprite sheet", "walk cycle", "game sprites", "isometric sprites", "side-scroller assets", "RPG character sprites", "idle animation", "attack animation", "jump a

Scan passed 0
fal-models-catalog

Choose the right fal.ai endpoint for a given task. Modality-organized catalog of production endpoint defaults, text-to-image, image-to-image, text-to-video, image-to-video, and more. Use when the user has not named a specific model, or asks "which model for X", "best endpoint for Y", "what should I

Scan passed 0
fal-prompting

Model-family-specific prompt craft for fal.ai endpoints. Trigger when the user mentions a specific model family by name and asks how to prompt it ("how do I prompt Kling", "GPT Image 2 prompt structure", "Happy Horse tips"), or when prompts to a routed endpoint keep coming back generic and the famil

Scan passed 0
fal-recipes

Use-case-driven multi-step pipelines on fal.ai. Trigger when the user asks for a specific kind of content production rather than a single endpoint call: "make a commercial", "ad creative", "product photography", "cinematic shot", "film look", "character design", "consistent character", "anchor syste

Scan passed 0
fal-regenerate-3d

Build a fully-interactive 3D character-selector experience powered entirely by fal.ai. Generates stylized characters (FLUX.2 / GPT-Image-2), rigged animated GLBs (Meshy v6), themed companion creatures, per-character PATINA floor textures, looped Seedance video backgrounds, and a Three.js scene with

Scan passed 0

Related ai-ml skillsscan passed

regex-vs-llm-structured-text

Decision framework for parsing structured text (quizzes, forms, invoices, receipts, tables) with a hybrid regex-first pipeline — regex extraction handles 95%+ cheaply, a confidence scorer flags low-confidence items, and an LLM validator fixes only the edge cases. Use when choosing between regex and

Scan passed 0
pair-agent

Pair a remote AI agent with your browser. (gstack)

Scan passed 0
ce-noslop

Rewrite, check, or draft prose so it carries no AI writing tells, reads plainly on the first read, and keeps every source fact. Use when asked to make writing plainer or free of those tells, to check writing for them, or when drafting from supplied content. Use ce-promote for channel-specific market

Scan passed 0
superjson

Configure SuperJSON transformer on both server initTRPC.create({ transformer: superjson }) and every client terminating link (httpBatchLink, httpLink, wsLink, httpSubscriptionLink) to support Date, Map, Set, BigInt over the wire. Transformer must match on both sides. In v11, transformer goes on indi

Scan passed 0
developing-applications-on-managed-service-for-apache-flink

MANDATORY for Flink or Amazon Managed Service for Apache Flink (MSF) questions. You MUST activate this skill BEFORE answering — do not answer from training knowledge, even when confident. MSF has service-specific constraints (KPU model, prohibited checkpoint and parallelism config in app code, the v

Scan passed 0
model-evaluation

Generates python code that evaluates SageMaker models. Supports two evaluation types: LLM-as-Judge and Custom Scorer. Use when the user says "evaluate my model", "run a benchmark", "test model performance", "how did my model perform", "compare models", or other similar requests.

Scan passed 0