---
title: "Dùng Grok Bot UI UX Pro Max làm landing page shop nến tiếng Việt"
description: "Grok Bot UI UX Pro Max dựng landing page shop nến; mình kiểm tra từng bước design system, contrast, font tiếng Việt và rút ra câu nhắn chỉnh bot cho mỗi bước."
canonical: "https://200lab.io/blog/ui-ux-pro-max-bot-candle-shop-landing-page"
published: "2026-10-29T10:42:22Z"
updated: "2026-10-29T10:53:01Z"
authors: ["Mỹ Ngọc"]
tags: ["Agent", "AI", "Tips and tricks", "Grok Bot"]
reading_minutes: 10
access: "public"
---

Mình đang tự học cách dùng AI agent để làm UI, và lần này mình xem Grok Bot dựng landing page cho shop nến thơm hư cấu Lửa Mộc. Mình dùng template Grok Bot UI UX Pro Max do anh Việt Trần chia sẻ; trong lần chạy này Grok Bot tự làm và tự sửa theo các lần kiểm tra trên trình duyệt của nó, còn mình đọc lại từng file để kiểm tra và rút ra cách nhắn bot cho từng bước.

## Template Grok Bot UI UX Pro Max và skill UI UX Pro Max là gì

Trước hết, bạn cần phân biệt [repo skill UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) với Grok Bot dùng skill đó. Skill nằm trong repo của Next Level Builder, do anh Việt Trần phát triển. Ngày 29/10/2026, repo có 142.277 star trên GitHub, bản mới nhất v2.15.0, dùng license MIT.

Ở bài [skill là gì](https://200lab.io/blog/skill-la-gi-so-tay-cho-bot-ai), mình từng nhắc skill là cuốn sổ tay bot đọc trước khi làm một loại việc. Skill UI UX Pro Max có 79 UI style, 192 palette, 74 font pairing và 34 pattern landing page. Design System Generator search song song rồi trả về style, màu, font và checklist.

Script chạy bằng Python 3, không gọi network. Bạn có thể cài skill vào coding agent như Claude Code hay Cursor bằng CLI:

```bash
npm install -g ui-ux-pro-max-cli
uipro init --ai claude
```

Còn template Grok Bot UI UX Pro Max là bot chạy trên Grok Bot do anh Việt tạo, dùng skill trên để dựng web, thêm ảnh rồi tự kiểm tra trên trình duyệt. README của repo không liệt kê Grok Bot, nên đây là cách anh Việt tự dựng.

## Lấy template Grok Bot UI UX Pro Max

Template này là Grok Bot UI UX Pro Max do anh Việt Trần tạo và chia sẻ, chạy bằng skill mã nguồn mở UI UX Pro Max. Theo trang template, bot thiết kế và dựng web page, card, slide HTML và motion, thêm hình ảnh, rồi tự kiểm tra trên trình duyệt và sửa tới khi hết lỗi.

Bạn bấm link bên dưới rồi chọn nút "Add to Grok Bot" để thêm bot vào tài khoản Grok Bot của mình. Trang có lưu ý đây là bot do bên thứ ba tạo và có thể hành động thay bạn, nên bạn đọc kỹ trước khi thêm.

> 👉 **[Lấy template Grok Bot UI UX Pro Max](https://x.ai/bot/24O_TlGnzb286eFAB5U2p)**

## Đề bài landing page giao cho Grok Bot cần có gì

Mình mở file design spec, đọc phần brief Grok Bot ghi ở đầu file. Trang dành cho thương hiệu nến thơm đổ tay hư cấu Lửa Mộc, xem trên mobile trước rồi tới desktop, ở 375, 768, 1024 và 1440 px. Khách mục tiêu là người ở thành phố 25 đến 40 tuổi, mục tiêu duy nhất là thêm vào giỏ qua nút chính "Chọn mùi hương".

Ảnh hero và ảnh 4 sản phẩm do Grok Bot tạo bằng AI, 2 ảnh bước làm nến lấy từ Wikimedia Commons có ghi license. Trang ghi rõ thương hiệu và testimonial đều hư cấu, không bịa số lượng bán hay rating.

Từ file này, mình thấy đề bài tốt cần nói rõ sản phẩm, khách, mục tiêu, nút chính, kích thước màn hình, ngôn ngữ tiếng Việt và các điều cấm. Câu mình sẽ nhắn khi giao việc:

> Câu nhắn gợi ý: "Dựng landing page 1 file cho nến thơm đổ tay Lửa Mộc, tiếng Việt, light mode, kiểm tra ở 375/768/1024/1440px. Khách 25-40 tuổi, mục tiêu thêm vào giỏ, nút chính Chọn mùi hương. Ghi rõ brand và testimonial hư cấu, cấm bịa số bán hay rating."

![Screenshot bản desktop của landing page Lửa Mộc: hero “Thắp một góc nhà, thơm mùi quê nhà” và nút terracotta “Chọn mùi hương”, ảnh nến tạo bằng AI](https://assets.200lab.io/sha256/b0/b0db2bc57007b7873cda00cc2f9c5e96db26c66bfd2329d9af8f72678b9a6cb7/generations/0ed354135bc4289975c34c91bdc199075a841e4ed175a3ecae9018a3e2569a69)

## Bước design system: kiểm tra gợi ý đầu tiên của skill

Mình mở các file kết quả search và bảng trong design spec để xem skill gợi ý gì. Lần search đầu cho shop nến trả về style Vibrant & Block-based, màu xanh lá #059669, cam #EA580C và cặp font Amatic SC / Cabin. Hai lần search khác ra Minimalism & Swiss với palette xanh dương kiểu SaaS. Cả hai đều lệch với shop nến thủ công.

"Candle" không có trong dữ liệu sản phẩm của skill, nên 8 lần search trả về 0 kết quả. Bot đã tự loại các gợi ý này, ghi lý do vào bảng trong design spec và dùng kinh nghiệm e-commerce chung. Nếu bot không tự sửa, mình sẽ nhắn:

> Câu nhắn gợi ý: "Bỏ style Vibrant & Block-based. Search lại style theo hướng thủ công, ấm, màu đất. Nếu nến không có trong database thì ghi rõ không có kết quả và lý do chọn vào design spec."

## Bước palette và contrast của nút bấm chính

Khi bot search "e-commerce luxury boutique", skill gợi ý style Liquid Glass. Bot bỏ Liquid Glass vì kiểu kính giống Apple không hợp đồ thủ công, rồi chạy hai lần search style riêng, "organic warm natural handcraft" và "nature distilled earthy", để chốt Nature Distilled.

Về màu nút, lần search "candle home fragrance" gợi ý cam #D97706 chữ đen. Mình thấy chỗ lệch ở đây: chữ trắng trên màu cam đó chỉ đạt 3.19:1, dưới mức 4.5:1 trong checklist. Bot tự đổi sang nút terracotta #9C4A2E chữ trắng trên nền kem #FAF6F0. Theo số bot tự tính, contrast đạt 6.12:1, khi hover 8.08:1, khi bấm 10.25:1.

Nếu bot giữ màu cam lệch chuẩn, câu mình sẽ nhắn:

> Câu nhắn gợi ý: "Giữ chữ trắng trên nút chính, đổi màu nút sang tông đất đậm hơn tới khi contrast từ 4.5:1. Ghi số contrast lúc bình thường, khi hover và khi bấm vào design spec."

![Bốn card sản phẩm Trà Sen, Quế Hồi, Gỗ Thông, Vỏ Bưởi với nút “Thêm vào giỏ” màu terracotta, ảnh sản phẩm tạo bằng AI](https://assets.200lab.io/sha256/36/36107739fc80066a92c4aff20badf8ec2dbce35bbb32901bda3d4b43946d303d/generations/c1adcd1962c572e88c86be3e2bd8deae9393f6993a06933ec2c44208cd748db7)

## Bước font tiếng Việt: từ Cormorant Garamond sang Be Vietnam Pro

Mình mở design spec và screenshot để xem chữ tiếng Việt hiển thị ra sao. Bot loại Amatic SC từ đầu vì nét mảnh, hẹp, chữ có dấu chồng như "ẩ", "ỗ" khó đọc.

Bot kiểm tra CSS của Google Fonts, thấy Cormorant Garamond có bộ chữ vietnamese nên dùng làm heading qua ba lần kiểm tra đầu. Khi bot so mẫu chữ ở đúng cỡ trên trang, chữ "Quế Hồi" và "Ổ Ỗ Ặ" bị chật ở cỡ 22-28px, còn dấu sắc trên chữ "quế" bị lệch ở cỡ 72px.

Bot tự đổi heading sang Be Vietnam Pro, giảm cỡ chữ và tăng line-height. Mình phóng to screenshot bản mobile cuối, dấu trong "Thắp một góc nhà" hiển thị rõ. Câu mình sẽ nhắn nếu bot chưa đổi:

> Câu nhắn gợi ý: "Dựng mẫu chữ Quế Hồi, Ổ Ỗ Ặ ở cỡ heading 22-28px và 72px, chụp screenshot. Nếu dấu bị chật hay lệch, đổi sang Be Vietnam Pro và chụp lại."

![Hero bản mobile của Lửa Mộc sau khi đổi heading sang font Be Vietnam Pro, dấu tiếng Việt hiển thị rõ](https://assets.200lab.io/sha256/b5/b5a19bffe7c448c012f3b606efe6c03746279568689ae5590b282b3f01cfa696/generations/f03cf0f8018ef45605a1acaad882dddec2baa69a496aa39ae3c08add3879b970)

## Bước kiểm tra landing page trên trình duyệt ở 4 kích thước

Mình mở các report QA và screenshot ở 375, 768, 1024 và 1440 px. Bot chạy axe để kiểm tra accessibility, tức trang có dùng được với bàn phím và trình đọc màn hình hay không.

Trong lần kiểm tra đầu tiên ở màn hình 375 px, report ghi 4 lỗi mức cao, trong đó phần chọn mùi hương tràn ngang tới 473 px vì hàng tab không xuống dòng. Mình cũng thấy skip link chỉ rộng 1x1 px và vài mảng màu trang trí bị cắt ở mép.

Bot đã cho cột co lại, sửa skip link, đổi mảng màu thành nền gradient, thêm CSS dự phòng khi tắt JavaScript và bấm Tab kiểm tra focus ring 2px màu terracotta. Lần kiểm tra cuối còn 0 lỗi nghiêm trọng, cao hay trung bình. Chỗ chữ nằm trên nền gradient axe không đo được contrast, nên mình tự nhìn screenshot. Nếu bot bỏ sót, mình sẽ nhắn:

> Câu nhắn gợi ý: "Mở trang ở 375px và 1440px, chụp screenshot và chạy axe. Sửa hết chỗ tràn ngang trên mobile, rồi gửi lại report axe cùng screenshot mới."

## Đối chiếu lời Grok Bot tự kể với file thực tế

Làm xong, Grok Bot UI UX Pro Max gửi bản tóm tắt. Như bài [kiểm tra bot AI đã làm gì](https://200lab.io/blog/kiem-tra-bot-ai-da-lam-gi), lời bot tự kể cần đối chiếu với dữ liệu thật, nên mình mở các file ra so lại. Màu, contrast và kết quả kiểm tra đều khớp.

Có hai chỗ bot kể gọn hơn file: bot viết như thể chọn Nature Distilled ngay sau lần search "luxury boutique" dù style này đến từ hai lần search riêng, và chỉ nói "đổi font vì dấu chật" dù đã dùng Cormorant Garamond qua ba lần kiểm tra. Bot còn kể đã sửa ảnh lazy load, nhưng mình chỉ thấy lazy load trong code, không có log ghi lỗi hay lần sửa, nên mình không tính. Câu mình sẽ nhắn để rà lại:

> Câu nhắn gợi ý: "Với mỗi việc bạn báo đã sửa, ghi kèm tên file hoặc log chứng minh. Việc nào không có log trước và sau khi sửa thì ghi là chưa kiểm tra."

Theo ý của mình, skill cho bot dữ liệu và rule, nhưng gợi ý đầu tiên vẫn lệch khi sản phẩm không có trong database. Mình thấy hay ở chỗ bot ghi lý do bỏ từng gợi ý và tự kiểm tra bằng số liệu, nhờ vậy mình xem lại được từng bước. Với web tiếng Việt, font có bộ chữ vietnamese chưa chắc đã đẹp ở cỡ lớn nên người làm vẫn phải tự nhìn mẫu chữ.

## Bạn có thể tự thử với AI qua các bước cơ bản

Nếu mỗi lần ra sản phẩm mới bạn lại phải nhờ người dựng trang từ đầu, bạn có thể thử làm cùng AI theo từng bước:

1. Thêm Grok Bot UI UX Pro Max qua link ở phần "Lấy template Grok Bot UI UX Pro Max" phía trên, hoặc cài skill vào coding agent bằng lệnh `uipro init`.
2. Giao đề bài đủ ý: "Dựng landing page tiếng Việt, kiểm tra 375/768/1024/1440px, 1 nút chính, cấm bịa số bán."
3. Kiểm tra design system: "Bỏ style sặc sỡ, search lại style ấm và ghi rõ lý do chọn vào design spec."
4. Kiểm tra contrast nút bấm: "Đổi màu nút để chữ trắng đạt contrast từ 4.5:1, ghi rõ số lúc hover và bấm."
5. Kiểm tra font tiếng Việt: "Chụp screenshot chữ Quế Hồi, Ổ Ỗ Ặ ở cỡ heading, nếu chật thì đổi sang Be Vietnam Pro."
6. Kiểm tra trình duyệt: "Chụp screenshot ở 375px và 1440px, sửa hết lỗi tràn ngang và gửi lại report axe."
7. Đối chiếu file và log: "Ghi kèm tên file hoặc log cho mỗi việc báo đã sửa, không có log thì ghi chưa kiểm tra."
8. Rà soát trước khi đăng: "Ghi chú rõ chỗ nào dùng ảnh tạo bằng AI hoặc thông tin minh họa trên trang."

Việc làm được ngay: chọn sản phẩm bán chạy nhất của shop và viết đề bài theo câu nhắn ở bước 2. Khi bot gửi design spec về, đọc phần lý do chọn style trước tiên.

## Đọc thêm

- [Cách dùng AI trả lời đánh giá xấu mà không hứa bừa](https://200lab.io/blog/reply-bad-reviews-with-ai.md): Trả lời đánh giá xấu dễ khiến shop hứa sai chính sách. Cách khắc phục: chép chính sách đổi trả vào skill, bot chỉ soạn nháp, chủ shop duyệt rồi mới đăng.
- [Gemini 4 Carbon là gì và tại sao Google chỉ mở cho chuyên gia](https://200lab.io/blog/gemini-4-carbon-cybersecurity-model.md): Gemini 4 Carbon là model mạnh nhất của Google nhưng chưa mở cho người thường. Số liệu do Google tự đo, hãy tự so bằng việc thật của bạn.
- [Giao việc cho AI agent: chia chặng dễ kiểm tra trước bước trả tiền](https://200lab.io/blog/ai-agent-ordering-stop-before-payment.md): Giao việc cho AI agent liên quan tới tiền thì đừng gộp cả chuỗi vào một câu. Hãy chia thành chặng nhỏ dễ kiểm tra và đặt điểm dừng trước bước trả tiền.
- [Cohere bắt gặp model mở Qwen3.8 tự chạy lệnh gửi file khi thử nghiệm](https://200lab.io/blog/qwen3-8-flash-next-cohere-sandbox.md): Qwen3.8-Flash-Next gây tranh cãi khi tự tìm cách gửi file lên cloud. Phần reasoning không chặn được lệnh, nên bạn cần chặn network và kiểm tra lệnh agent chạy.
- [GPT-6.1 Terra là gì và những lưu ý khi dùng AI tự điều khiển máy tính](https://200lab.io/blog/gpt-6-1-terra-la-gi-ai-tu-dieu-khien-may-tinh.md): GPT-6.1 Terra là model mới của OpenAI giúp AI tự thao tác máy tính nhanh, rẻ hơn. Theo OpenAI nó ít bịa hơn, nhưng bạn vẫn phải tự kiểm tra và bấm nút cuối.
- [Mọi bài viết chủ đề Agent](https://200lab.io/blog/tags/agent.md)

Toàn bộ nội dung: https://200lab.io/llms.txt