New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Fal Redesign

by fal-ai-community in fal-ai-community/skills

Upgrade a coded website to award-tier, editorially-crafted design using fal.ai.

MITAuto-check passedFrontend & Design

Install Fal Redesign

skills CLI
$ npx skills add fal-ai-community/skills --skill fal-redesign -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install fal-ai-community/skills fal-redesign --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/fal-ai-community/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/fal-redesign .claude/skills/fal-redesign && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
fal-redesign
GitHub stars
251
Token cost
~1.4k tokens
SKILL.md length
543 words
Files
20
Skills in repo
16
Repo updated
First seen
Licence
MIT

At a glance

Upgrade a coded website to award-tier, editorially-crafted design using fal.ai.

  • Works in 6 steps: Check FAL_KEY. If unset, ask the user to… → Pick the mode. → Run the script. Each upgrade pass takes… → …
  • Says improve the design
  • SKILL.md covers When to invoke, Commands, Required environment and Usage pattern for agents, plus 2 more sections
  • Runs JavaScript scripts from its folder; calls node and npm; reaches fal.ai; needs FAL_KEY

What it does

Fal Redesign is an agent skill from fal-ai-community/skills. 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 writes a Markdown build-spec with a "Hard constraints" section + a tokens.json. Also supports iterate (screenshot implemented site → delta-spec vs reference) and greenfield generate (brief → mockup → single-file HTML)…

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 22 other files (for example `DEMO.md`, `README.md` and `runtime/README.md`).

It sits in Frontend & Design, covering Image generation, Landing pages and HTML artifacts. It works with fal. The licence is MIT.

When your agent uses it

  • Says improve the design
  • Make it world-class
  • Redesign this landing page
  • Upgrade this site

Example prompts

  • “Hard constraints”
  • “improve the design”
  • “make it world-class”
  • “/fal-redesign”

Requirements

  • Node.js
  • A credential in FAL_KEY

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Check FAL_KEY. If unset, ask the user to export it and stop.
  2. Pick the mode.
  3. 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…
  4. Surface the result.
  5. If yes, implement. Read the current file. Apply the spec section by section, obeying the Hard constraints verbatim and pulling exact…
  6. Optional iterate. After implementation, offer node runtime/bin/fal-site.mjs iterate --target --reference for a residual delta-spec. Apply…

What it can do on your machine

Read from SKILL.md and the folder at commit 9ca8504. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript, from the files we listed), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • fal.ai

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • FAL_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Fal Redesign loads about 1.4k tokens when it runs. Until then it costs about 181 tokens; SKILL.md has 543 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~181
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from fal-ai-community/skills at commit 9ca8504, republished under its MIT licence (© fal-ai-community). 543 words, ~1,438 tokens.

Download SKILL.mdSave it as .claude/skills/fal-redesign/SKILL.md (or your agent's skills folder). This skill also uses 19 other files; get the full folder from GitHub.
name
fal-redesign
description
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 writes a Markdown build-spec with a "Hard constraints" section + a tokens.json. Also supports iterate (screenshot implemented site → delta-spec vs reference) and greenfield generate (brief → mockup → single-file HTML). Invoke when the user says "improve the design", "make it world-class", "redesign this landing page", "upgrade this site", "design pass", or points at a local HTML / dev server for a visual review.
metadata.author
fal-ai-community
metadata.version
0.1.0

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

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

bash
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)
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.
Show full SKILL.md (243 more words)Show less

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.

© fal-ai-community, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 19 other files in skills/fal-redesign of fal-ai-community/skills.

  • SKILL.md
  • .gitignore
  • DEMO.md
  • LICENSE
  • README.md
  • runtime/.gitignore
  • runtime/README.md
  • runtime/bin/fal-site.mjs
  • runtime/package-lock.json
  • runtime/package.json
  • runtime/src/brief.mjs
  • runtime/src/directions.mjs
  • runtime/src/fal.mjs
  • runtime/src/hero.mjs
  • runtime/src/implement.mjs
  • runtime/src/mockup.mjs
  • runtime/src/review.mjs
  • runtime/src/upgrade.mjs
  • … and 2 more

Open the folder on GitHubat commit 9ca8504

Compare with similar skills

Fal Redesign next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Fal Redesign compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Fal Redesign this skillfal-ai-community/skills251—~1.4kAutomated safety check: PassMIT
Imagegen Frontend Webcaorushizi/oss-client11314 repos~9.2kAutomated safety check: PassNone
HTMLplannotator/effective-html3.6k—~1.6kAutomated safety check: PassMIT
Paper2htmlQuZhan51496/paper2anything450—~3.3kAutomated safety check: NotesApache-2.0
Ky Design To HTMLKyrieCheungYep/ky-design-to-html-skill163—~2.8kAutomated safety check: PassNone
Web Designdrewnekota/cetus146—~2.1kAutomated safety check: PassMIT

Similar skills

  • Imagegen Frontend Web

    caorushizi/oss-client

    Elite frontend image-direction skill for generating premium, conversion-aware website design references.

    113 GitHub starsUsed in 14 repos~9.2k tokens
    Frontend & DesignAuto-check passed

  • HTML

    plannotator/effective-html

    Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject.

    3.6k GitHub stars~1.6k tokensUpdated 26 days ago
    Frontend & DesignAuto-check passed

  • Paper2html

    QuZhan51496/paper2anything

    Convert an academic paper PDF into a publish-ready, self-contained single-page project homepage (a self-contained index.html) — the kind of paper landing page researchers host on GitHub Pages.

    450 GitHub stars~3.3k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check: notes

  • Ky Design To HTML

    KyrieCheungYep/ky-design-to-html-skill

    Convert visible UI references such as screenshots, exported mockups, Figma frame images, SaaS empty states, dashboards, and landing page screenshots into high-quality HTML/CSS by decomposing layout…

    163 GitHub stars~2.8k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

  • Web Design

    drewnekota/cetus

    A skill your agent uses when building any web page, HTML artifact, landing page, dashboard, slide deck, report, email, or UI component the user will look at.

    146 GitHub stars~2.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Felo Landingpage

    Felo-Inc/felo-skills

    Generate landing pages/webpages with the Felo Landing Page Task API in Claude Code.

    249 GitHub stars~1.4k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

More from fal-ai-community/skills

All 16 skills in this repo

  • Character Design with genmedia

    fal-ai-community/skills

    Builds consistent characters, reference and expression sheets, outfit variations and character-to-video shots with the genmedia CLI while keeping identity stable.

    251 GitHub stars~1.3k tokensUpdated 12 days ago
    Auto-check passed

  • Cinematography Prompts for Genmedia

    fal-ai-community/skills

    Writes concrete cinematic prompts for image and video generation through the genmedia CLI, covering framing, camera moves, lens, lighting and color.

    251 GitHub stars~1.2k tokensUpdated 12 days ago
    Auto-check passed

  • Commercial Media Production

    fal-ai-community/skills

    Plans and runs commercial image and video production with the genmedia CLI: product shots, ads, e-commerce batches, product reveals and background replacement.

    251 GitHub stars~1.5k tokensUpdated 12 days ago
    Auto-check passed

  • fal.ai Models Catalog

    fal-ai-community/skills

    Routes image, video, 3D, audio and text-extraction tasks to a suitable fal.ai endpoint using per-modality reference lists instead of blind model searches.

    251 GitHub stars~717 tokensUpdated 12 days ago
    Auto-check passed

  • Sports Fan-Cam Video

    fal-ai-community/skills

    Produces a personalized, broadcast-style fan-cam video from one photo of a person, using the genmedia CLI to generate a stadium frame and then animate it.

    251 GitHub stars~3.2k tokensUpdated 12 days ago
    Auto-check passed

  • Genmedia Media Workflows

    fal-ai-community/skills

    Plans and runs multi-step media pipelines with the genmedia CLI, chaining generation, editing, audio and subtitle steps with checks and delivery manifests.

    251 GitHub stars~1.3k tokensUpdated 12 days ago
    Auto-check passed

Works with

Categories

Questions about Fal Redesign

What does Fal Redesign do?

Upgrade a coded website to award-tier, editorially-crafted design using fal.ai. Fal Redesign is an agent skill from fal-ai-community/skills.ai.

When should I use Fal Redesign?

Fal Redesign fits situations like: says improve the design; make it world-class; redesign this landing page; upgrade this site.

How do I install Fal Redesign in Claude Code?

Run `npx skills add fal-ai-community/skills --skill fal-redesign -a claude-code`. Or copy the skill folder (skills/fal-redesign in fal-ai-community/skills) into .claude/skills/fal-redesign in your project. Claude Code loads it when a task matches its description.

How do I install Fal Redesign in Codex?

Run `npx skills add fal-ai-community/skills --skill fal-redesign -a codex`. Or copy the skill folder (skills/fal-redesign in fal-ai-community/skills) into .agents/skills/fal-redesign in your project. Codex loads it when a task matches its description.

Can I use Fal Redesign in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add fal-ai-community/skills --skill fal-redesign -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fal-redesign, .gemini/skills/fal-redesign, .github/skills/fal-redesign and .opencode/skills/fal-redesign in your project.

What does Fal Redesign need to run?

Going by SKILL.md and its folder, Fal Redesign needs JavaScript for the scripts in its folder, the command-line tools its instructions call (node and npm) and credentials named FAL_KEY. Our summary lists: Node.js; A credential in FAL_KEY.

Does Fal Redesign access the network?

SKILL.md names 1 domain. In commands or code: fal.ai; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Fal Redesign safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Fal Redesign use?

Fal Redesign is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Fal Redesign use?

About 1.4k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Fal Redesign?

Skills that share tags, products or a category with Fal Redesign: Imagegen Frontend Web (caorushizi/oss-client, 113 stars), HTML (plannotator/effective-html, 3.6k stars), Paper2html (QuZhan51496/paper2anything, 450 stars) and Ky Design To HTML (KyrieCheungYep/ky-design-to-html-skill, 163 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Fal Redesign?

fal-ai-community (a GitHub organization) maintains it in fal-ai-community/skills, which has 251 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on September 29, 2026.

Source: fal-ai-community/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.