- Fal Redesign là skill Claude Code mới do fal-ai community phát hành, dùng Claude Opus 4.7 + GPT Image 2 (và FLUX.2) để screenshot trang bạn vừa vibe-code, sinh mockup thiết kế lại, rồi viết ra build-spec có design tokens để áp thẳng vào HTML.
- Fully working nhưng super early — cài 1 dòng curl, gọi bằng câu `redesign index.html`.
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:
- Screenshot site hiện tại ở 1920×1200 (Puppeteer + Sharp, có sẵn trong runtime).
- Claude Opus 4.7 (qua OpenRouter) đọc ảnh, viết redesign prompt.
fal-ai/gpt-image-2/editbiến screenshot thành reference đã redesign, giữ nguyên copy brand.- Opus 4.7 lần hai viết build-spec Markdown: hard constraints, design tokens, typography, màu, layout.
- 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ẵnscripts/iterate.sh --target <url> --reference <PNG>— delta refinementscripts/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.shvớ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 | bashRồi mở Claude Code, trỏ vào một file vibe-coded và gõ: redesign index.html.
Nguồn: tweet OdinLovis, fal-ai-community/skills, GPT Image 2 trên fal, FLUX.2 trên fal.
