TL;DR

Fal Redesign là một skill Claude Code vừa được OdinLovis (fal-ai community) công bố: trỏ nó vào một file HTML local hoặc dev-server URL, nó sẽ chụp màn hình, dùng Claude Opus 4.7 phân tích vision, dùng GPT Image 2 edit để render mockup mới, rồi sinh ra một build-spec Markdown với design tokens để bạn áp thẳng vào code. Cài đặt bằng một lệnh curl | bash, gọi trong Claude Code bằng > redesign index.html. Trạng thái: fully working, just super early — chính tác giả nói vậy.

What's new

Với dev vibe-code bằng Claude Code, bug lớn nhất không phải logic — mà là cái giao diện trông AI-generated: purple gradient, Arial, spacing chỗ chật chỗ rộng. Fal Redesign chọn cách tấn công trực diện: thay vì chỉ ra prompt design, nó thật sự render ra ảnh mockup bằng mô hình image và dùng mockup đó làm ground truth để viết spec.

Pipeline 5 bước trong script upgrade.sh:

  1. Screenshot site hiện tại ở 1920×1200 (Puppeteer + Sharp, có sẵn trong runtime).

  2. Claude Opus 4.7 (qua OpenRouter) đọc ảnh, viết redesign prompt.

  3. fal-ai/gpt-image-2/edit biến screenshot thành reference đã redesign, giữ nguyên copy brand.

  4. Opus 4.7 lần hai viết build-spec Markdown: hard constraints, design tokens, typography, màu, layout.

  5. Agent áp spec vào HTML thực tế, có thể lặp refine bằng iterate.sh.

Why it matters

Anthropic vừa ra frontend-design skill chính chủ, nhưng skill đó cải thiện output từ nguyên tắc thiết kế. Fal Redesign đi ngược lại: sinh visual trước, reverse-engineer spec sau. Với indie hacker / solo builder vibe-code cả ngày không có designer, đây là khoảng cách giữa "trang trông vẫn AI" và "trang có thể show cho khách hàng trả tiền".

Điểm đáng chú ý: skill này là orchestration của 3 model khác hãng — Opus 4.7 của Anthropic, GPT Image 2 của OpenAI, và FLUX.2 của Black Forest Labs — tất cả đi qua fal làm compute plane thống nhất. Đây là dấu hiệu rõ ràng của xu hướng multi-model routing trong dev tools 2026.

Technical facts

Thành phần

Model

Vai trò

Brief extraction

Claude Opus 4.7 (OpenRouter)

Đọc screenshot, sinh redesign prompt

Image transform

fal-ai/gpt-image-2 (edit)

Render mockup mới, giữ typography rõ

Build-spec

Claude Opus 4.7 vision

Viết Markdown spec + design tokens

Greenfield (optional)

FLUX.2

Sinh mockup từ brief text (generate.sh)

Budget mode

Claude Sonnet 4.6

~3× rẻ hơn, near-parity — set qua FAL_SITE_MODEL

Bốn lệnh entry-point:

  • scripts/upgrade.sh --target <path-or-url> — redesign site đang có

  • scripts/describe.sh --after <PNG> — viết lại spec từ ảnh có sẵn

  • scripts/iterate.sh --target <url> --reference <PNG> — delta refinement

  • scripts/generate.sh --context "<brief>" — mockup greenfield từ mô tả

Runtime đóng gói sẵn Node 18+, Puppeteer và Sharp — không cần setup thêm ngoài FAL_KEY lấy từ fal.ai/dashboard/keys.

Comparison

Skill

Cách tiếp cận

Output

Anthropic frontend-design

Cải thiện từ nguyên tắc (typography, animation, theme)

HTML polished, không có ảnh reference

Playground skill (Anthropic)

Sinh HTML self-contained có sliders/presets

Interactive design explorer

Fal Redesign

Render mockup bằng image model, reverse-engineer spec

Ảnh reference + Markdown build-spec + HTML đã apply

Khác biệt cốt lõi: Fal Redesign có visual ground truth — bạn nhìn thấy trang mới trước khi agent viết code, giảm rủi ro "AI tự do sáng tạo" lệch brief.

Use cases

  • Vibe-coded prototype sắp demo cho khách — đập một vòng upgrade trước buổi họp.

  • Landing page marketing cần polish nhanh, không đủ budget designer.

  • Dashboard / admin UI AI build xong trông thô, cần hierarchy typography.

  • Greenfield mockup — feed brief vào generate.sh, có ảnh + spec để brief lại team.

  • Iteration loop — sau khi áp spec, dùng iterate.sh với ảnh reference để refine delta.

Limitations & pricing

Early-stage. Tác giả nói thẳng "super early, want to see how people use it" — kỳ vọng bug, edge case chưa cover.

Chi phí tích luỹ mỗi lần chạy:

  • 2× gọi Claude Opus 4.7 với vision context — phần đắt nhất.

  • 1× GPT Image 2 edit: $0.01–$0.41/ảnh tuỳ quality (low→high) và resolution tới 4K.

  • Nếu dùng greenfield qua FLUX.2: $0.012/megapixel.

Một lần upgrade đầy đủ có thể tốn vài đô. Dev tiết kiệm đặt FAL_SITE_MODEL=anthropic/claude-sonnet-4.6 để giảm ~3× cost của phần Anthropic với chất lượng gần như tương đương.

Skip skill khi: chỉ sửa copy, backend work, infra — không phải visual redesign.

What's next

Fal Redesign nằm trong cụm fal-ai-community/skills đang nở rộ — cùng nhà còn có fal-generate, fal-image-edit, fal-upscale, fal-video-edit, fal-3d, fal-train, fal-workflow. Hướng rõ ràng: biến Claude Code thành hub điều phối multi-model, với fal làm compute layer.

Cài nhanh để thử:

curl -fsSL https://raw.githubusercontent.com/fal-ai-community/skills/main/skills/claude.ai/fal-redesign/install.sh | bash

Rồi mở Claude Code, trỏ vào một file vibe-coded và gõ: redesign index.html.

Via: OdinLovis, fal-ai-community/skills, GPT Image 2, FLUX.2.