Cách Vibe Coding Landing Page Bằng Ezyplatform: Hướng Dẫn Từng Bước Kèm Prompt Mẫu

Vibe coding landing page là cách bạn mô tả trang mình muốn bằng tiếng Việt tự nhiên rồi để AI viết code, thay vì tự gõ từng dòng HTML/CSS. Vấn đề quen thuộc: bạn dựng xong trên máy, xem đẹp, nhưng không biết cách đưa nó lên internet cho khách hàng thật truy cập. Bài này hướng dẫn từng bước tạo landing page bằng EzyPlatform kèm prompt mẫu để thử, và chỉ rõ nơi deploy để trang chạy thật cùng InterData.

Vibe coding landing page là gì và khác cách làm cũ ra sao?

Vibe coding landing page là quy trình bạn ra lệnh cho một AI Assistant bằng mô tả tự nhiên để nó sinh ra code trang đích hoàn chỉnh, rồi bạn xem trước, chỉnh bằng lời và xuất bản. Bạn điều khiển kết quả bằng ý tưởng, còn AI lo phần cú pháp. Cách tiếp cận này phù hợp với người không biết lập trình nhưng vẫn muốn kiểm soát bố cục và nội dung.

Nếu bạn còn mơ hồ về khái niệm gốc, hãy đọc bài vibe coding là gì trước khi bắt tay. Điểm cốt lõi cần nắm: đây không phải nút bấm tự động, mà là một vòng lặp có bạn tham gia liên tục.

Landing page là trang đơn tập trung vào một mục tiêu chuyển đổi duy nhất: đăng ký, để lại số điện thoại, mua hàng. Nó khác một website nhiều trang ở chỗ mọi thành phần đều phục vụ một hành động. Muốn hiểu sâu về mục tiêu chuyển đổi, xem bài landing page là gì. Còn khi cần phân biệt trang đơn với hệ thống nhiều trang phức tạp, bài website là gì giải thích rõ ranh giới đó.

Cách làm cũ có hai nhánh. Nhánh tự code đòi hỏi bạn biết HTML, CSS, JavaScript. Nhánh builder kéo thả (Wix, Elementor) dễ hơn nhưng khóa bạn trong khuôn mẫu của họ và tính phí hằng tháng. Vibe coding nằm giữa: bạn không cần biết code, nhưng vẫn sở hữu toàn bộ mã nguồn và sửa được đến từng chi tiết.

• Vòng lặp cốt lõi: Mô tả → AI tạo → Preview → Tinh chỉnh → Publish. Bạn lặp cho đến khi trang đúng ý.
• Bạn giữ mã nguồn: mọi file HTML AI tạo ra nằm trong dự án của bạn, không bị khóa trong nền tảng bên thứ ba.
• Sửa bằng lời: muốn đổi màu nút, dời khối, thêm form, bạn mô tả và AI chỉnh đúng chỗ.

Nỗi đau xuất hiện ngay sau khi bạn dựng xong. Trang chạy đẹp trên localhost, nhưng đó chỉ là máy của bạn. Không ai khác vào được. Muốn khách hàng thật truy cập, bạn cần một nơi chạy thật: máy chủ, tên miền, chứng chỉ SSL. Đây là chỗ đa số người mới bị tắc, và cũng là lý do phần deploy phía dưới quan trọng ngang phần dựng trang.

Chuẩn bị công cụ trước khi vibe coding landing page

Trước khi mô tả trang cho AI, bạn cần dựng đủ bộ công cụ. Thiếu một mảnh, vòng lặp sẽ đứt ở đâu đó. Danh sách dưới bám theo tài liệu chính thức của EzyPlatform tại Chương 3 — Chuẩn bị môi trường.

Nền tảng EzyPlatform và 4 plugin tối thiểu

EzyPlatform là nơi landing page của bạn chạy thật, kèm tên miền và SSL. Bạn cài trên localhost để thử, hoặc trên VPS Ubuntu để chạy thật cho người dùng. Trên nền đó, bốn plugin sau là mức tối thiểu:

• EzyArticle: quản lý trang, bài viết và danh mục. Đây là nơi landing page của bạn được lưu và xuất bản.
• EzySupport: hệ thống ticket và hỗ trợ đa ngôn ngữ (i18n).
• GraphQL: truy vấn dữ liệu và cấp MCP Server để AI thao tác dữ liệu thật.
• Freestyle: theme trắng, không áp bố cục sẵn, để bạn tự do dựng giao diện landing page.

Tài khoản AI và AI Assistant trong VS Code

Bạn cần một tài khoản AI trả phí và trình soạn thảo VS Code. Hai lựa chọn phổ biến: ChatGPT kèm Codex, hoặc Claude kèm Claude Code. Cả hai đều cắm vào VS Code dưới dạng AI Assistant và cùng chạy được vòng lặp vibe coding. Muốn xem toàn cảnh các lựa chọn, tham khảo bài công cụ AI viết code phổ biến.

Nếu bạn thích một trình soạn thảo tích hợp AI ngay từ đầu thay vì cài extension, Cursor AI là một hướng đáng cân nhắc. Còn khi phân vân chọn tài khoản AI nào để trả phí, bài so sánh ChatGPT, Gemini và Claude giúp bạn quyết định dựa trên nhu cầu thật.

Checklist công cụ tối thiểu

• EzyPlatform: cài trên localhost để thử hoặc VPS Ubuntu để chạy thật.
• 4 plugin: EzyArticle, EzySupport, GraphQL, Freestyle.
• Tài khoản AI trả phí: ChatGPT (Codex) hoặc Claude (Claude Code).
• VS Code: kèm extension EzyArticle (đồng bộ nội dung máy ↔ EzyPlatform) và extension AI Assistant.
• Git (nên có): để commit và quay lui khi AI sửa hỏng.
• MCP Server (nâng cao): cho AI thao tác trực tiếp dữ liệu thật qua GraphQL.

Git là tùy chọn nhưng tôi khuyên bật ngay từ đầu. Vibe coding là quá trình thử sai; có Git, mỗi khi AI sửa hỏng bạn quay về phiên bản trước trong vài giây thay vì hoảng loạn. Đây là lá chắn cho nỗi sợ “AI viết code lỗi không sửa được”.

Cấu hình EzyPlatform và theme Freestyle cho vibe coding

Có công cụ rồi, bạn cần cấu hình đúng ba thứ để AI có “khung trắng” mà vẽ. Bỏ qua bước này, trang sinh ra sẽ dính bố cục mặc định và bạn mất thời gian gỡ. Các đường dẫn dưới đây theo Chương 3 của tài liệu EzyPlatform.

File environment.json và access token

File environment.json là cầu nối giữa VS Code và EzyPlatform. Nó chứa admin_url và admin_access_token. Bạn lấy token tại đường dẫn /admins/me trong trang quản trị. Giữ ít nhất một môi trường đặt "default": true để extension biết dùng môi trường nào khi đồng bộ.

Cho phép loại file upload cần thiết

Landing page thường cần file svg, css, javascript. Mặc định EzyPlatform có thể chặn các định dạng này. Vào {admin}/settings/regular và bật cho phép các loại file bạn cần, nếu không AI publish lên sẽ báo lỗi upload.

Đặt theme Freestyle về bố cục rỗng

Đây là bước quyết định để có khung trắng. Vào {admin}/freestyle/settings, đặt Layout Style = Empty và tắt các menu mặc định (đặt về none). Sau bước này, trang của bạn là một canvas trắng, AI toàn quyền dựng giao diện mà không bị header/footer có sẵn chen vào.

Phần dùng chung như header, footer nằm ở {admin}/ezyarticle/pages/fragments, tìm bằng từ khóa “common”. Bạn để dành phần này cho lúc muốn thống nhất giao diện nhiều trang, còn với một landing page đơn thì chưa cần đụng.

Các bước vibe coding một landing page bằng EzyPlatform

Đây là phần cầm tay chỉ việc. Quy trình chín bước dưới đây bám theo Chương 6 — Tạo website đầu tiên của EzyPlatform. Đọc hết một lượt trước, rồi làm theo.

Bước 1: Khởi tạo dự án. Trong VS Code, chuột phải vào khung Explorer, chọn Create EzyArticle Project. Extension dựng sẵn cấu trúc thư mục cho bạn.

Bước 2: Cài môi trường. Mở environment.json, điền admin_url và admin_access_token. Giữ ít nhất một môi trường "default": true.

Bước 3: Xác định trang cần gì. Viết ra giấy các khối: banner, khối lợi ích, bằng chứng, form liên hệ. Càng rõ, prompt càng chính xác. Bước 4: Mô tả yêu cầu cho AI. Dùng prompt mẫu bên dưới, thay nội dung theo sản phẩm của bạn.

Bước 5: AI tạo 4 file. Trong pages/<slug>, AI sinh ra content.html, head.html, foot.html và meta.json.

Bước 6: Preview. Chuột phải thư mục trang, chọn Preview Page.

Đường dẫn có dạng <admin_url>/pages/<slug>/preview và chỉ mình bạn xem được.

Nếu bạn gặp lỗi không xem trước (preview) được trang. Nguyên nhân là do bạn chưa cấu hình cấu hình các tên miền được phép chia sẻ access token. Xem chi tiết cách khắc phục ngay →.

Bước 7: Tinh chỉnh. Mô tả cụ thể điều cần sửa. Luôn nhấn Save (Ctrl/Cmd+S) trước khi Preview lại, nếu không bạn xem lại đúng bản cũ.

Bước 8: Publish. Chuột phải, chọn Publish Content To Server.

Kiểm tra trạng thái Publish trên EzyPlatform Dashboard

Truy cập đường dẫn <web_url>/<slug> hoặc bấm “Web Link” tại <admin_url>/ezyarticle/pages/để xem Landing page.

Bước 9: Khởi tạo Git. Nhờ AI chạy git init, git add ., git commit và push lên GitHub nếu cần.

Prompt mẫu tạo landing page (copy thử ngay)

Đây là prompt bạn dán vào AI Assistant ở bước 4. Thay các chỗ trong ngoặc nhọn bằng thông tin sản phẩm của bạn.

Lưu ý: Sau đây chỉ là mẫu Prompt minh họa. Đối với triển khai thật, Prompt càng cụ thể thì AI càng thiết kế đúng với ý muốn hơn.

Tạo một trang độc lập (landing page) cho dịch vụ VPS Vibe Coding
(slug là vps-vibe-coding-demo) gồm:

1. Banner đầu trang: tiêu đề nêu giá trị chính "Dùng AI dựng và
   deploy sản phẩm số trên hạ tầng có sẵn", một slogan phụ ngắn,
   và nút CTA "Trải nghiệm ngay".
2. Khối lợi ích: 4 điểm mạnh, mỗi điểm có icon, tiêu đề ngắn và
   mô tả 1-2 câu (EzyPlatform tích hợp sẵn, API và MCP Server,
   1-click deploy, lưu trữ NVMe U.2 Gen4).
3. Khối bằng chứng: 3 testimonial ngắn dạng thẻ, kèm tên và vai trò.
4. Khối CTA cuối: form đăng ký gồm Họ tên, Email, Số điện thoại và
   nút "Đăng ký tư vấn".

Yêu cầu: responsive trên mobile và desktop, tông màu chủ đạo xanh
dương (#2563EB) trên nền trắng, code gọn để tải nhanh, có thẻ meta
title và meta description chuẩn SEO trong file head.html.

Prompt mẫu khởi tạo Git (copy được)

Khởi tạo Git cho dự án landing page này. Chạy lần lượt:
git init
git add .
git commit -m "Bản đầu tiên landing page vps-vibe-coding-demo"

Sau đó tạo file .gitignore bỏ qua environment.json (vì chứa access
token nhạy cảm) và các file tạm. Giải thích ngắn từng lệnh đã chạy.

Lưu ý quan trọng: đưa environment.json vào .gitignore. File này chứa access token; nếu vô tình push lên GitHub công khai, người khác có thể chiếm quyền quản trị. Đây là lỗi thật nhiều người mới mắc phải.

Đưa landing page lên chạy thật: deploy ở đâu?

Landing page tạo bằng vibe coding xong deploy ở đâu? Bạn cần một máy chủ chạy 24/7, một tên miền trỏ về máy chủ đó, và chứng chỉ SSL để trang có https. Localhost chỉ chạy khi máy bạn bật; để khách hàng thật truy cập bất cứ lúc nào, bạn phải đưa trang lên VPS hoặc hosting.

Đây chính là bước mà nhiều người tắc. Bạn dựng được trang, nhưng “Publish” trong VS Code cần một EzyPlatform đang chạy thật ở đâu đó. Nếu EzyPlatform của bạn chỉ nằm trên localhost, trang publish ra vẫn không ai ngoài truy cập được.

Vì sao cần VPS thay vì để trên máy cá nhân

VPS là máy chủ ảo chạy liên tục, có IP riêng và tài nguyên riêng, độc lập với máy tính của bạn. Muốn hiểu bản chất, đọc bài VPS là gì. Trang đặt trên VPS truy cập được mọi lúc, chịu được nhiều người vào cùng lúc, và bạn toàn quyền cài EzyPlatform cùng các plugin cần thiết.

Nếu bạn còn muốn dùng chính VPS đó làm nơi cho AI Assistant chạy nền và deploy tự động, bài thiết lập VPS Linux cho AI chạy 24/7 đi sâu vào cách dựng môi trường Linux phục vụ AI và deploy.

Rút ngắn khâu dựng môi trường

Cài EzyPlatform thủ công trên Ubuntu đòi hỏi cài database, web server, cấu hình domain và SSL. Với người không rành kỹ thuật, đây là rào cản lớn. Cách rút ngắn: chọn một VPS có sẵn template cài đặt EzyPlatform, khi khởi tạo hệ thống tự dựng môi trường và cấp subdomain, bạn vào thẳng phần dựng landing page.

Vibe coding EzyPlatform so với builder kéo thả truyền thống

Nhiều người phân vân giữa vibe coding và builder kéo thả như Wix hay Elementor. Không có lựa chọn đúng tuyệt đối; nó phụ thuộc bạn cần kiểm soát đến mức nào và có sẵn sàng học vòng lặp mô tả AI hay không. Bảng dưới so ba tiêu chí người dùng quan tâm nhất.

Tiêu chí	Vibe coding + EzyPlatform	Builder kéo thả (Wix, Elementor)
Khả năng kiểm soát	Sở hữu toàn bộ mã nguồn, sửa đến từng dòng qua mô tả AI	Giới hạn trong khối và tùy chọn nền tảng cho phép
Yêu cầu biết code	Không cần, nhưng phải học cách mô tả và chạy vòng lặp	Không cần, thao tác kéo thả trực quan
Quyền sở hữu dữ liệu	Nằm trên VPS của bạn, chủ động sao lưu và di dời	Nằm trên hạ tầng nhà cung cấp, phụ thuộc chính sách của họ
Mở rộng thành sản phẩm lớn	Có sẵn CMS, E-commerce, quản lý user, API để lớn dần	Mở rộng theo gói và tiện ích nền tảng bán thêm

Quan điểm của tôi: nếu bạn chỉ cần một trang tĩnh dựng trong mười phút rồi bỏ, builder kéo thả nhanh hơn. Nếu bạn muốn landing page là bước khởi đầu cho một sản phẩm số lớn dần, giữ quyền kiểm soát mã nguồn và dữ liệu, vibe coding trên EzyPlatform đáng để bỏ công học vòng lặp.

Chi phí vibe coding landing page hết bao nhiêu?

Vibe coding cần công cụ AI nào và tốn bao nhiêu tiền? Có hai khoản chính. Một là tài khoản AI trả phí (ChatGPT kèm Codex hoặc Claude kèm Claude Code), tính theo tháng. Hai là nơi deploy: một VPS để EzyPlatform và landing page chạy thật. VS Code, Git và các extension đều miễn phí.

Khoản AI là bắt buộc vì bản trả phí mới có Codex hoặc Claude Code chạy trong VS Code. Khoản VPS thì tùy cấu hình bạn chọn; landing page đơn không cần cấu hình cao. Nếu muốn khởi đầu tiết kiệm, canh các đợt khuyến mãi để giảm chi phí thử nghiệm.

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

Vibe coding có cần biết code không?

Không bắt buộc. Bạn mô tả trang bằng tiếng Việt tự nhiên và AI viết code. Nhưng bạn cần học cách mô tả rõ ràng và chạy vòng lặp Mô tả → Preview → Tinh chỉnh. Biết một chút HTML giúp bạn kiểm soát tốt hơn khi AI hiểu sai, dù không phải điều kiện tiên quyết.

Vibe coding một landing page mất bao lâu?

Với người đã cài xong công cụ và quen vòng lặp, một landing page cơ bản có thể dựng và tinh chỉnh trong khoảng một buổi làm việc. Thời gian phụ thuộc độ phức tạp giao diện, số lần chỉnh sửa, và bạn mô tả yêu cầu rõ đến đâu ngay từ đầu.

Làm landing page bằng AI xong deploy ở đâu?

Bạn cần một VPS hoặc hosting chạy EzyPlatform 24/7, kèm tên miền và SSL. Từ VS Code, bạn chọn Publish Content To Server để đưa trang lên. Localhost chỉ chạy khi máy bạn bật, nên không dùng cho khách hàng thật truy cập được.

EzyPlatform khác gì các nền tảng no-code/low-code khác?

EzyPlatform cho bạn giữ toàn bộ mã nguồn và dữ liệu trên hạ tầng của mình, cùng API, MCP Server, CMS và E-commerce để lớn dần thành sản phẩm thật. Nền tảng no-code/low-code thường khóa bạn trong khuôn mẫu và hạ tầng của họ, khó di dời khi cần mở rộng.

Landing page tạo bằng vibe coding có chuẩn SEO và responsive không?

Có, nếu bạn yêu cầu rõ trong prompt. Hãy nêu cụ thể “responsive trên mobile và desktop” và “có thẻ meta title, meta description chuẩn SEO trong head.html”. AI sẽ sinh code theo đó. Bạn nên Preview trên nhiều kích thước màn hình và kiểm tra thẻ meta trước khi Publish.

Nội dung mang tính tham khảo. Các thao tác, đường dẫn cấu hình và tên menu trong EzyPlatform, VS Code hay extension có thể thay đổi theo phiên bản, hệ điều hành và môi trường bạn dùng. Hãy sao lưu bằng Git và Preview kỹ trước khi Publish lên môi trường chạy thật, đồng thời không đưa access token trong environment.json lên kho mã công khai.