AI Website Cloner Template: Clone website bằng một lệnh duy nhất

• Thông tin tổng quan
• ai-website-cloner-template là gì?
• Tính năng chính
• Yêu cầu phần cứng & hệ thống
• Cách cài đặt và sử dụng
• Phù hợp với ai?
• Ứng dụng thực tế
• Đánh giá của danhbaai.com
• Câu hỏi thường gặp

Bạn từng gặp một website có thiết kế đẹp, muốn lấy cảm hứng hoặc cần tái dựng lại trên stack hiện đại nhưng không muốn ngồi gõ lại từng dòng HTML, CSS? Trước đây, công việc đó ngốn hàng tuần chỉ để dò pixel, đo màu, copy asset. Giờ đây, với sự bùng nổ của các AI coding agent như Claude Code, Codex hay Cursor, ranh giới giữa “xem” và “xây lại” một website đang mờ đi nhanh chóng.

AI Website Cloner Template của JCodesMore là một trong những dự án đi đầu trong xu hướng đó. Chỉ với một lệnh /clone-website <url>, agent sẽ tự chụp ảnh, trích xuất design token, viết spec cho từng component và build song song để dựng lại toàn bộ trang thành Next.js + Tailwind + shadcn/ui. Repo đã có hơn 31.000 sao và 4.500 fork chỉ sau vài tháng ra mắt — một con số cho thấy cộng đồng dev đang quan tâm đến workflow này đến mức nào.

Thông tin tổng quan

ai-website-cloner-template là gì?

Nói đơn giản, AI Website Cloner Template là một boilerplate (bộ khung dự án sẵn) cho Next.js, được thiết kế đặc biệt để hoạt động với các AI coding agent. Bạn không cần phải tự viết prompt phức tạp hay dán HTML vào chat — repo này đã đóng gói sẵn toàn bộ hướng dẫn cho agent trong file AGENTS.md, kèm một “skill” tên /clone-website mà agent sẽ tự đọc và thực thi.

Bối cảnh ra đời của nó khá rõ: khi Claude Code và các agent tương tự trở nên phổ biến đầu năm 2026, nhiều dev nhận ra rằng việc “ép” agent dựng lại một trang web thường cho kết quả chắp vá, thiếu nhất quán về design token và responsive. JCodesMore — một dev có tiếng trong cộng đồng AI tooling — đã tạo template này như một giải pháp “plug-and-play”: bạn tạo repo từ template, cài dependency, mở agent, gõ URL, và đợi. Toàn bộ pipeline trinh sát → trích xuất → viết spec → build song song → QA đã được tác giả tinh chỉnh và đóng gói lại.

Tính năng chính

• Pipeline đa pha tự động — agent tự chụp screenshot, quét tương tác (scroll, click, hover, responsive), trích xuất design token (màu oklch, font, spacing) rồi viết component spec chi tiết với giá trị getComputedStyle() chính xác.
• Build song song bằng git worktree — mỗi section/component được một builder agent độc lập dựng trong worktree riêng, sau đó merge lại, giảm thời gian dựng từ hàng giờ xuống còn vài chục phút.
• Visual diff tự động — bước Assembly & QA so sánh ảnh chụp bản dựng với bản gốc để phát hiện lệch pixel, đảm bảo kết quả sát với thiết kế ban đầu.
• Hỗ trợ 13+ AI agent — Claude Code (khuyến nghị Opus 5), Codex CLI, OpenCode, GitHub Copilot, Cursor, Windsurf, Gemini CLI, Cline, Roo Code, Continue, Amazon Q, Augment Code, Aider.
• Stack hiện đại mặc định — Next.js 16 (App Router), React 19, TypeScript strict, Tailwind CSS v4 với oklch tokens, shadcn/ui trên nền Radix primitives, Lucide React cho icon (sẽ được thay bằng SVG trích từ site gốc).
• Single source of truth cho agent — file AGENTS.md là nguồn chính, các file CLAUDE.md, GEMINI.md chỉ import lại; có script sync tự động khi bạn muốn thêm platform mới.
• Tài sản tải về tự động — ảnh, video, favicon, OG image được tải về thư mục public/ và thay thế URL gốc trong code.
• Docker Compose sẵn — chạy dev hoặc production qua docker compose up, phù hợp môi trường CI/CD hoặc team không muốn cài Node trực tiếp.

Yêu cầu phần cứng & hệ thống

Cách cài đặt và sử dụng

Cách cài đặt nhanh theo README:

1. Tạo repo riêng từ template — trên GitHub, nhấn nút Use this template → Create a new repository. Tác giả nhấn mạnh không clone trực tiếp repo template này về máy để làm project của bạn.
2. Clone repo vừa tạo về máy:
   git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
cd YOUR-NEW-REPOSITORY
3. Cài dependencies:
   npm install
4. Khởi động AI agent — tác giả khuyến nghị Claude Code:
   claude --chrome
   Nếu dùng agent khác, mở AGENTS.md để xem hướng dẫn.
5. Chạy skill clone:
   /clone-website https://example.com
   Có thể truyền nhiều URL cùng lúc.
6. Tùy chỉnh sau khi clone xong — chỉnh sửa component, đổi nội dung, branding trên codebase Next.js thu được.

Nếu muốn chạy bằng Docker thay vì cài Node:

docker compose up dev --build (dev mode, cổng 3001)
docker compose up app --build (production build)

Phù hợp với ai?

Ứng dụng thực tế

• Di chuyển nền tảng — khách hàng có site WordPress cũ 5 năm, bạn clone sang Next.js + Tailwind để tận dụng ISR, edge runtime, dễ tích hợp CMS headless.
• Khôi phục source code — site đang chạy trên hosting nhưng repo bị mất, dev cũ nghỉ việc, stack đã lỗi thời; clone để lấy lại codebase hiện đại thay vì maintain code cũ.
• Học thiết kế ngược — bạn thấy một landing page có animation hay, muốn xem họ code như thế nào; clone rồi đọc từng component.
• Prototype nhanh — startup cần mockup trung thành với site đối thủ để pitch ý tưởng cải tiến cho investor.
• Rebrand hàng loạt — agency có 20 site con cần đồng bộ design system mới; clone từng site rồi áp token mới.

Đánh giá của danhbaai.com

Điểm mạnh lớn nhất của AI Website Cloner Template là nó đóng gói một workflow mà thông thường phải tự拼凑 từ nhiều prompt rời rạc. Thay vì mỗi lần clone phải nghĩ cách ép agent chụp ảnh, trích token, viết spec, bạn đã có sẵn một pipeline đã được tác giả tinh chỉnh qua nhiều iteration. Việc dùng git worktree để build song parallel cũng là ý tưởng hay — tiết kiệm thời gian đáng kể so với cách làm tuần tự. Stack mặc định (Next.js 16, Tailwind v4, shadcn/ui) cũng là lựa chọn hợp lý cho đa số dự án web hiện đại.

Tuy nhiên, dự án vẫn có hạn chế đáng lưu ý. Thứ nhất, README khá “thân thiện với dev” nhưng thiếu hướng dẫn sâu về cách debug khi clone thất bại — nếu site gốc dùng framework SPA phức tạp (React/Vue render phía client, có auth), kết quả có thể rất tệ. Thứ hai, chi phí inference không hề nhỏ: clone một site vài chục section có thể tốn hàng chục USD token với Opus 5, và template không có cơ chế ước lượng trước. Thứ ba, mặc dù hỗ trợ 13 agent, chất lượng thực tế chỉ được kiểm chứng kỹ với Claude Code — các agent khác hoạt động ở mức “có thể chạy” chứ chưa tối ưu.

So với các lựa chọn thay thế như html-to-nextjs cũ hay các dịch vụ SaaS nhả Sitebulb, Screaming Frog, template này có lợi thế là miễn phí, mã nguồn mở, tận dụng sức mạnh AI agent mới nhất. Nhưng nếu bạn cần clone hàng trăm site tự động trong pipeline, các công cụ enterprise như Browse.ai hay Apify vẫn ổn định hơn. Tổng kết: đáng thử cho dev cá nhân và team nhỏ muốn tăng tốc workflow Next.js, nhưng đừng kỳ vọng đây là giải pháp “một nút bấm” cho mọi tình huống.

Câu hỏi thường gặp

Nguồn: github.com/JCodesMore/ai-website-cloner-template — Bài phân tích bởi danhbaai.com.