Codex x Figma dựng cả landing page theo keyword

Nói trước cho rõ để khỏi hiểu lầm: Landing page template gốc trong bài là của team Product Design và Marketing. Mình chỉ dùng Codex x Figma dựng một bản variation nháp DỰA TRÊN template có sẵn để giảm tải khâu nhân bản, và bản này phải được team duyệt trước khi dùng. Mình không nhận công thiết kế hay nội dung về mình.

Ở bài trước, mình dùng Codex x Figma để tạo vài mockup variation cho giao diện điện thoại. Lần này nó làm thứ lớn hơn hẳn: bê nguyên một landing page template trong Figma rồi dựng hẳn một bản mới cho keyword khác, từ headline, hình ảnh, quy trình cho tới FAQ và nút kêu gọi hành động.

Key Takeaways:

Codex x Figma không chỉ sửa frame lẻ, nó dựng được cả một trang landing dài theo keyword mới.
Mình chỉ đưa một câu yêu cầu ngắn, agent tự viết lại nội dung và thay toàn bộ ảnh cho đúng chủ đề.
Một bản landing hoàn chỉnh mất khoảng 7 phút, kết quả nằm ngay trong Figma để team duyệt.
Gửi thêm ảnh của mình thì agent tự phân bổ vào đúng ô, không cần kéo thả từng tấm.
Đây là bản nháp để giảm tải, không thay được copywriter và designer; nội dung AI viết phải kiểm lại.

Codex x Figma dựng được cả landing page, không chỉ mockup lẻ

Điểm khác với bài mockup là quy mô. Thay vì một frame giao diện, lần này agent xử lý cả một trang landing dài nhiều khối: hero, phần "cách hoạt động", bảng so sánh, thư viện ảnh, FAQ và CTA cuối trang.

Cách làm này hợp với kiểu nhân bản landing cho nhiều keyword (thường gọi là programmatic SEO): bạn có một template tốt, rồi cần nhiều biến thể cùng bố cục nhưng khác chủ đề và nội dung.

Trang gốc và yêu cầu mình đưa

Mình mở file Figma có sẵn template landing "AI Product Image Generator", chọn trang đó rồi gõ cho Codex một câu ngắn: tạo một bản variation cho keyword "perfume product image generator".

Template landing gốc trong Figma và ô chat Codex với yêu cầu tạo variation theo keyword nước hoa

Agent báo nó sẽ đọc trang đang chọn, tìm ảnh nước hoa có sẵn trong file để dùng cho phần showcase, rồi viết lại headline, quy trình, CTA và FAQ theo keyword. Lần chạy này mất khoảng 7 phút.

Template "AI Product Image Generator" này là sản phẩm của team, mình không đụng vào thiết kế gốc, chỉ dùng nó làm điểm xuất phát.

Codex x Figma đã đổi những gì?

Bản variation không phải chỉ thay mỗi cái tiêu đề. Agent chỉnh gần như toàn bộ nội dung cho khớp chủ đề nước hoa:

Headline: đổi thành "AI Perfume Product Image Generator".
Ảnh: thay toàn bộ ảnh sản phẩm chung bằng ảnh chai nước hoa.
Quy trình: viết lại thành "From perfume bottle to campaign-ready image in 4 simple steps".
Các cách dùng: đổi thành "4 ways to create perfume product images from one bottle photo".
Khối cảm hứng: "Find Your Fragrance Visual Direction" với các chủ đề ảnh nước hoa.
Bảng so sánh, FAQ và CTA cuối: viết lại toàn bộ theo ngữ cảnh nước hoa.

Bản landing page variation hoàn chỉnh cho keyword nước hoa, đổi headline, ảnh, quy trình, bảng so sánh và FAQ

Nhìn tổng thể, đây là một trang landing hoàn chỉnh chứ không phải bản chắp vá, dù vẫn là nháp cần người rà lại.

So sánh trước và sau

Đặt bản gốc của team cạnh bản Codex x Figma dựng sẽ thấy rõ cách nó làm việc: giữ nguyên bố cục, chỉ thay nội dung và hình ảnh. Phần hero, từ tiêu đề tới lưới ảnh minh hoạ:

So sánh phần hero: bản gốc AI Product Image Generator của team và bản Codex x Figma dựng cho chủ đề nước hoa

Khối gợi ý chủ đề hình ảnh cũng đổi hẳn, từ các ngành hàng chung sang riêng chủ đề nước hoa:

So sánh khối thư viện chủ đề: ngành hàng chung của bản gốc so với các chủ đề hình ảnh nước hoa

Khung sườn, vị trí các khối và kiểu chữ gần như giữ nguyên, nên bản mới vẫn đúng hệ thống thiết kế của team, mình không đụng vào phần khung đó.

Kết quả nằm ngay trong Figma

Toàn bộ bản mới được dựng thành một trang riêng trong chính file Figma đó, kèm liên kết để mở xem. Mỗi nút còn giữ cả trạng thái hover như template gốc.

Bản variation mở trong Figma, có bảng trạng thái nút và liên kết xem variation

Vì kết quả nằm trong Figma nên team có thể mở ra, chỉnh tiếp hoặc xuất ra như một thiết kế bình thường, thay vì phải dựng lại từ đầu.

Đưa ảnh của bạn vào, agent tự phân bổ

Ảnh trong bản đầu dùng tạm từ thư viện có sẵn nên hơi đơn điệu. Mình gửi thêm vài ảnh của mình vào hộp chat, dặn agent giữ nguyên bố cục và tạm bỏ qua phần hero để xử lý sau.

Điều mình thấy hay là không phải kéo thả từng ảnh vào từng khung. Agent đọc từng tấm rồi tự phân bổ theo đúng vai trò: ảnh chai nền trắng đưa vào ô sản phẩm đầu vào, các ảnh còn lại dùng cho ví dụ đầu ra, thư viện cảm hứng và CTA cuối trang. Lần này nó xử lý 7 ảnh trong khoảng 5 phút rưỡi.

Gửi 7 ảnh vào ô chat Codex, agent tự đọc và phân bổ ảnh vào các khối trong trang landing

Mình chỉ cần đưa ảnh và mô tả ý muốn, agent tự đặt vào chỗ hợp lý. Dù vậy vẫn nên rà lại xem ảnh nào vào ô nào đã đúng chưa trước khi chốt.

Luồng này hợp và không hợp với việc gì?

Hợp với mấy việc này:

Nhân bản landing theo nhiều keyword: giữ nguyên bố cục template, chỉ đổi chủ đề và nội dung.
Dựng nháp nhanh để team chọn hướng: có bản để xem trước thay vì bắt đầu từ trang trắng.
Giảm việc lặp lại: đỡ khâu copy từng khối rồi thay chữ, thay ảnh thủ công.

Không hợp với mấy việc này:

Thay copywriter và designer: câu chữ marketing, hướng thương hiệu và quyết định cuối vẫn là của người.
Đăng thẳng không rà: nội dung AI viết có thể sai claim, số liệu hoặc giọng thương hiệu, phải kiểm lại trước khi dùng.

Vài lưu ý thực tế từ lần thử này:

Font có thể bị thay: agent báo một số font trong template không có trong phiên Figma nên nó dùng tạm font Inter, vì vậy cần soát lại chữ có bị tràn hay lệch kiểu không.
Thời gian: khoảng 7 phút cho một trang dài, nên nếu làm nhiều keyword thì tính theo lô cho đỡ sốt ruột.
Tài khoản và khu vực: plugin, skill và khả năng dùng còn tùy tài khoản, thiết bị, khu vực và cài đặt workspace.

Câu hỏi thường gặp về Codex x Figma và landing page

Codex x Figma có tự đăng trang lên web không?

Không. Nó dựng bản thiết kế trong Figma, còn việc xuất ra code hoặc đăng trang là bước riêng cần người làm và rà lại. ?

Một lần chạy làm được mấy keyword?

Trong lần thử này mình xin một bản variation cho một keyword. Muốn nhiều keyword thì lặp lại yêu cầu cho từng cái, mỗi lần ra một trang mới trong file.

Dùng cái này có thay được team Product Design không?

Không. Nó làm nhanh phần nhân bản và dựng nháp dựa trên template có sẵn. Ý tưởng, nội dung chuẩn và bản cuối vẫn thuộc về team.

Đọc tiếp

Kết nối Codex với Figma để tạo variation mockup - phần đầu của loạt bài, bắt đầu từ frame giao diện lẻ.
3 mẹo SEO ai cũng làm được trong 10 phút - hợp khi bạn tính nhân bản landing cho nhiều keyword.
Xem thêm mẹo dùng công cụ AI trên Học lỏm.

Tài liệu tham khảo

OpenAI Developers: Codex - Figma designs to code, https://developers.openai.com/codex/use-cases/figma-designs-to-code, truy cập ngày 9/10/2026.