Nếu bạn dựa vào các công cụ, bạn có thể nhanh chóng có được thứ trông có vẻ "ổn." Tuy nhiên, kết quả thường mang một diện mạo chung chung mà bạn đã thấy ở đâu đó trước đây. Đây chính là bản chất của "vẻ ngoài AI", và đây là nơi tạo ra sự khác biệt lớn nhất hiện nay.
Dựa trên kinh nghiệm tạo ba trang web khác nhau với cá tính riêng biệt từ cùng một nền tảng, sử dụng dây chuyền sản xuất được xây dựng trên Claude Code (dự án makeLP), tôi sẽ tóm tắt ngắn gọn một phương pháp có thể tái tạo.
Một Nhà Máy, Không Phải Trò Ảo Thuật Một Lần
Ngay cả khi bạn tạo ra thứ gì đó tốt một lần, nó sẽ không trở thành tài sản nếu không thể tái tạo. Đó là lý do tại sao chúng tôi chạy nó qua bốn giai đoạn.
Sản xuất → Chất lượng → Xác minh → Cải tiến.
Có bốn loại thành phần hỗ trợ:
・Kỹ năng: Các mẫu phương pháp luận (motion-lp-builder để tạo, frontend-design cho các nguyên tắc chống AI, bulk-categorize để phân loại hàng loạt)
・Tác nhân phụ: Các vai trò chuyên biệt (lp-visual-verifier để vẽ và phê bình, design-reference-analyst để biến tài liệu tham khảo thành thông số kỹ thuật, bulk-classifier để phân loại)
・Thư viện tham khảo: Một kệ gồm 4,074 mục SANKOU được phân loại theo "loại trang web × ngành"
・Quy tắc phát triển: CLAUDE.md (luồng/kỷ luật tiêu chuẩn) + Bộ nhớ (biến các lời phê bình thành vĩnh viễn)
Chuẩn Bị và Điều Kiện Tiên Quyết
Nền tảng được cố định với Vite + React + GSAP (ScrollTrigger) + Lenis. Chìa khóa là "liên kết trực tiếp tiến trình cuộn với quá trình sản xuất." Lượng cuộn trở thành đầu vào cho biểu thức (quét khung hình video nền, ghim, hiệu ứng thị sai, tiết lộ khi vào).
Có hai loại tài sản, được chọn dựa trên chủ thể:
・Tạo AI (Higgsfield): Khi cần hình ảnh chân thực như khu nghỉ dưỡng
・Vẽ bằng mã (SVG/Canvas/CSS): Điều này cảm thấy "đúng đắn" hơn cho B2B và công nghệ. Không yêu cầu tín dụng
Nếu nghi ngờ, hãy quyết định dựa trên "nó nên là ảnh hay sơ đồ?"
BƯỚC 1: Sản Xuất
Thứ tự rất quan trọng. Đừng bắt đầu viết ngay lập tức; trước tiên, hãy củng cố một bản tóm tắt thương hiệu (bạn đang hứa điều gì với ai, màu sắc, kiểu chữ, cường độ chuyển động) vào một trang. Ngay cả với cùng một nền tảng, chính bản tóm tắt, chứ không phải mã, mới tạo ra sự khác biệt cho đầu ra.
Nếu bạn chọn tạo AI, hãy tuân thủ kỷ luật tín dụng:
- Kiểm tra số dư
- Nhận ước tính sơ bộ với get_cost
- Tạo một hình ảnh chính trước
- Tạo các hình ảnh khác bằng cách sử dụng hình ảnh đó làm tham chiếu để thống nhất kết cấu 5. Chờ hoàn tất và tải xuống.
Đối với việc triển khai, hãy liên kết sản xuất trực tiếp với cuộn (quét khung hình/ghim/thị sai/tiết lộ). Và luôn làm cho nó mạnh mẽ: dự phòng tĩnh với prefers-reduced-motion, đảm bảo npm run dev hoạt động ngay cả khi thiếu tài sản, và xem xét tiết kiệm năng lượng cho cảm ứng và canvas.
BƯỚC 2: Chất Lượng - Thoát Khỏi Thiết Kế Sản Xuất Hàng Loạt
Phân tích và loại bỏ "vẻ ngoài AI" thành sáu phần:
- Sử dụng quá nhiều gradient (đặc biệt là gradient văn bản và tím) → Thu hẹp xuống một màu duy nhất + một điểm nhấn
- Chỉ sắp xếp các phần tiêu chuẩn theo thứ tự tiêu chuẩn → Tạo với một khái niệm độc đáo cho chính cấu trúc (ví dụ: toàn bộ trang như một canvas quy trình làm việc)
- Các con số "thổi phồng" được làm tròn → Hãy cụ thể (ví dụ: "600 hóa đơn/tháng → 0" trước/sau)
- Biểu tượng cảm xúc → Đừng sử dụng chúng. Vẽ SVG nếu cần
- Thanh màu chỉ ở cạnh trái của các khối → Đừng sử dụng chúng. Sử dụng màu sắc trên bề mặt, lề và kiểu chữ
- Mọi thứ đều đối xứng, đồng nhất, bo tròn và có bóng mềm → Giới thiệu sự bất đối xứng và các biến thể về độ mạnh của lề
Nguyên tắc là: bảng màu là một màu duy nhất + một điểm nhấn, kiểu chữ được đẩy với một kiểu chữ đặc trưng, sức mạnh ở lề, và chuyển động vì mục đích "tập trung."
BƯỚC 3: Xác Minh - Build Pass Không Có Nghĩa Là Tốt
Ngay cả khi mã vượt qua, các chức năng ghim, quét và tiết lộ có thể bị hỏng trên màn hình thực tế. Do đó, lp-visual-verifier khởi động một máy chủ dev, vận hành Chrome/Edge hiện có qua puppeteer-core, kết xuất và chụp từng phần, sau đó "phê bình bằng mắt thường."
Ba điểm chính:
・Trình xác minh không sửa mã (để cô lập nguyên nhân)
・Chụp với prefers-reduced-motion cho phép trực quan hóa tĩnh các khu vực được ghim và các phần thấp hơn đang chờ tiết lộ
・Luôn chụp ở độ rộng di động
Chỉ một vòng phê bình → sửa chữa nâng cao chất lượng đáng kể. Đừng hài lòng với một bản build thành công.
BƯỚC 4: Cải Tiến + Thư Viện Tham Khảo
Design-reference-analyst đọc các trang web tham khảo và dịch chúng thành "các mẫu phổ biến" và "các thông số kỹ thuật cải tiến (ở đâu và như thế nào)" thay vì chỉ là ấn tượng. Thư viện tham khảo sankou có 4,074 mục được phân loại trên hai trục, cho phép bạn kéo ngay lập tức "chỉ các ví dụ về du lịch × LP đặc biệt" (nội dung rõ ràng từ các ghi chú trong mỗi hàng).
Bản thân việc phân loại hàng loạt cũng được tạo mẫu (bulk-categorize: phân chia → song song hóa tác nhân phụ → tổng hợp → sửa chữa).
Các Quy Tắc Phát Triển
Đây là khám phá lớn nhất. Đừng để những lời phê bình của khách hàng kết thúc bằng một sửa chữa một lần; hãy nâng chúng lên thành các quy tắc vĩnh viễn.
Ví dụ:
"Biểu tượng cảm xúc trông giống AI" "Thanh màu bên trái trông giống AI" → Biến những điều này thành các quy tắc bị cấm trong bộ nhớ và CLAUDE.md → Tự động tránh chúng trong mọi trang web kể từ đó.
Nói cách khác, bạn càng sử dụng nó nhiều, "vẻ ngoài AI" càng biến mất. Có các kỹ năng và tác nhân phụ cũng cho phép mở rộng theo chiều ngang dễ dàng.
Tạo Ba Trang Web Khác Biệt
・AZURE BAY (Summer pool LP / B2C): Xanh ngọc + Vàng. Được tạo bởi Higgsfield. Quét khung hình video hồ bơi khi cuộn.
・FLOWGEAR (Hỗ trợ triển khai n8n / B2B): Màu san hô đơn + phẳng, không tạo hình ảnh. Toàn bộ trang là một canvas quy trình làm việc n8n. Trước/sau cụ thể thay vì các con số thổi phồng.
・STATIK (Phòng thí nghiệm thử nghiệm cho một studio giả định): Gần đen + đơn sắc + một màu axit. Lưới chữ động học Canvas + con trỏ tùy chỉnh. Một trải nghiệm nhập vai hơn là chỉ một LP.
Điểm chung là "một màu duy nhất + một điểm nhấn", "nói bằng sự cụ thể" và "đột phá thông qua một khái niệm duy nhất." Chọn phương tiện dựa trên chủ thể là bước đầu tiên để thoát khỏi sự trung bình.
Cấu Hình Tối Thiểu Để Tự Xây Dựng
- Tạo mẫu nền tảng liên kết cuộn (không viết từ đầu mỗi lần)
- Đặt các nguyên tắc chống sản xuất hàng loạt vào một bảng quy tắc duy nhất (không gradient/biểu tượng cảm xúc/thanh trái...)
- Luôn chụp và nhìn vào màn hình thực tế sau khi tạo
- Nâng các lời phê bình lên thành quy tắc mỗi lần
Các cạm bẫy và biện pháp khắc phục phổ biến: Lãng phí tín dụng (hình ảnh chính trước + ước tính sơ bộ), thiếu sót xác minh (chụp màn hình thực tế), khả năng tiếp cận chuyển động (giảm chuyển động) và hỏng trên di động (luôn chụp ở các độ rộng khác nhau).
Tóm Tắt
AI là một "bàn tay nhanh", không phải là một "con mắt."
Khoảnh khắc bạn kết hợp con mắt (xác minh) và các quy tắc (học hỏi) vào hệ thống, các trang web do AI tạo ra sẽ thoát khỏi vẻ ngoài AI.
