Trang web đang tải và Trình xem App đang hoạt động bình thường, hãy chờ một chút. Nếu mất hơn 2 phút, hãy nhấp biểu tượng Refresh hoặc kiểm tra bảng Console để tìm lỗi.

Agents có thể gặp sự cố trong quá trình build, điều này đôi khi gây ra lỗi trang web. Nhấp Resolve và các agent sẽ sửa cho bạn; sau khi sửa xong, bản xem trước sẽ trở lại bình thường. Các thông báo màu đỏ là tín hiệu cảnh báo, không phải khủng hoảng.

Việc xóa huy hiệu yêu cầu Gói Pro trở lên. Nhấp vào ảnh đại diện của bạn ở góc trên bên phải, chọn Settings, sau đó vào Plans & Billing và chọn gói Pro hoặc Max. Sau khi nâng cấp, huy hiệu Atoms sẽ tự động được xóa khỏi các trang đã xuất bản của bạn.

1. Mở Design Mode và chọn chính xác phần tử đang bị lệch hoặc có kiểu dáng không đúng.
2. Nêu rõ trang và breakpoint, vấn đề hiện tại, kết quả mong muốn và những gì không được thay đổi.
3. Sử dụng hướng dẫn có thể đo lường được như padding, căn chỉnh, chiều rộng, màu sắc hoặc cách xuống dòng. Đính kèm ảnh tham chiếu khi cần khớp trực quan.
4. Áp dụng một thay đổi, sau đó xác minh bố cục desktop và di động cùng các trạng thái quan trọng như đang tải, trống, hover và lỗi.
5. Nếu kết quả làm hỏng khu vực khác, hãy quay lại Phiên bản hoạt động gần nhất và thử lại với phạm vi hẹp hơn.

1. Xác nhận xem vấn đề chỉ ảnh hưởng đến Trình xem App, URL Preview hay cả trang đã xuất bản.
2. Làm mới một lần, mở Preview trong tab mới và kiểm tra bằng cửa sổ Ẩn danh.
3. Kiểm tra xem tác vụ hoặc bản build hiện tại còn đang chạy không. Hãy chờ hoàn tất trước khi thử lại.
4. Nếu có thông báo rõ ràng cho biết số dư Cloud & AI không đủ hoặc app bị tạm ngưng, hãy mở Settings → Cloud & AI và kiểm tra số dư đó. Đừng nạp thêm chỉ dựa trên một màn hình trắng.
5. Ghi lại mọi lỗi Console hoặc Network mà không chia sẻ cookie, token hoặc giá trị bí mật.

Nếu màn hình vẫn trống, hãy liên hệ Support kèm Chat Link, URL Viewer đầy đủ, thời gian và múi giờ, các môi trường bị ảnh hưởng, ảnh chụp màn hình và chi tiết lỗi đã được làm sạch thông tin nhạy cảm.

1. Kiểm tra xem chỉ Trình xem App, URL Preview hay trang đã xuất bản bị ảnh hưởng.
2. Làm mới một lần, mở Preview trong tab mới và kiểm tra bằng cửa sổ Ẩn danh.
3. Kiểm tra xem tác vụ hoặc bản build hiện tại còn đang chạy không và chờ nó hoàn tất.
4. Kiểm tra Phiên bản hoạt động gần nhất đã biết. Nếu phiên bản đó hoạt động, hãy so sánh thay đổi gần đây đã gây ra màn hình trống.
5. Chỉ mở Settings → Cloud & AI khi sản phẩm hiển thị rõ ràng rằng số dư không đủ hoặc app bị tạm ngưng.

Nếu sự cố vẫn tiếp diễn, hãy liên hệ Support kèm Chat Link, URL Viewer đầy đủ, phiên bản, thời gian và múi giờ, các môi trường bị ảnh hưởng, ảnh chụp màn hình và lỗi Console hoặc Network đã được làm sạch thông tin nhạy cảm.

Preview và trang đã xuất bản là các kênh độc lập. Việc lưu hoặc xem trước không đẩy thay đổi lên production.

1. Nhấp Update trong bảng Publish — Mở bảng Publish và nhấp Update. Chờ đến khi trạng thái hiển thị Up to date.
2. Làm mới mạnh trang live — Nhấn Cmd+Shift+R (Mac) hoặc Ctrl+F5 (Windows), hoặc mở URL trong cửa sổ Ẩn danh để loại trừ bộ nhớ đệm trình duyệt.
3. Kiểm tra số phiên bản đã xuất bản — Trong bảng Publish, xác nhận phiên bản khớp với những gì bạn thấy trong Preview. Nếu khác nhau, hãy xuất bản lại.
4. Kiểm tra subdomain Prod của nền tảng — Nếu bạn dùng miền tùy chỉnh, hãy mở riêng URL Prod mặc định. Nếu subdomain Prod đã được cập nhật nhưng miền tùy chỉnh thì chưa, vấn đề nằm ở bộ nhớ đệm DNS hoặc CDN.

Nếu sự cố vẫn tiếp diễn, hãy cung cấp URL Preview, URL Prod, ảnh chụp so sánh song song và thời điểm bạn đã nhấp Publish hoặc Update.

Khi agent sửa bố cục hoặc kiểu dáng, nó có thể vô tình làm hỏng hành vi đáp ứng trên màn hình nhỏ hơn.

1. Xem trước ở độ rộng di động trước — Dùng chuyển đổi thiết bị trong thanh công cụ Trình xem App để chuyển sang chế độ xem di động và kiểm tra kết quả trước khi xuất bản.
2. Dùng Design Mode trong chế độ xem di động — Chuyển sang Design Mode khi chuyển đổi thiết bị đang đặt ở di động. Nhấp vào phần tử bị lỗi để agent chỉ nhắm vào thành phần đó ở kích thước màn hình đó.
3. Cung cấp ràng buộc đáp ứng rõ ràng — Hãy nói chính xác với agent bố cục di động nên trông như thế nào. Ví dụ: "Trên màn hình hẹp hơn 768px, xếp các thẻ thành một cột và đặt padding là 16px."
4. Yêu cầu agent giữ nguyên media query hiện có — Khi yêu cầu thay đổi cho desktop, hãy thêm: "Không sửa bất kỳ kiểu responsive hoặc mobile hiện có nào."

Nếu sự cố vẫn tiếp diễn, hãy cung cấp Chat Link, ảnh chụp bố cục di động bị lỗi và ảnh tham chiếu của bố cục mong muốn.

Nếu hình ảnh hiển thị bị lỗi, hiện biểu tượng giữ chỗ hoặc không tải được:

1. Kiểm tra đường dẫn tệp hình ảnh — Mở phần Files và xác minh rằng các tệp hình ảnh tồn tại ở đúng đường dẫn được tham chiếu trong mã của bạn. Agent có thể đã di chuyển hoặc đổi tên tệp trong quá trình chỉnh sửa.
2. Xác minh kích thước và định dạng tệp — Hình ảnh quá lớn hoặc định dạng không được hỗ trợ có thể không tải được. Hãy nén hình ảnh hoặc chuyển sang PNG, JPG hoặc WebP.
3. Kiểm tra lưu trữ Cloud — Vào Settings > Cloud & AI để xác nhận bạn còn dung lượng lưu trữ khả dụng.
4. Làm mới mạnh — Nhấn Cmd+Shift+R (Mac) hoặc Ctrl+F5 (Windows) để xóa các tham chiếu hình ảnh đã lưu trong bộ nhớ đệm.

Nếu sự cố vẫn tiếp diễn, hãy cung cấp Chat Link, URL của hình ảnh bị thiếu và ảnh chụp trạng thái bị lỗi.

Khi agent sửa các phần tử không liên quan hoặc gây ra lỗi hồi quy ở các phần khác của trang:

1. Quay lại — Vào History và Remix từ Phiên bản ổn định gần nhất. Việc này đặt lại ngữ cảnh chat trong khi vẫn giữ nguyên mã của bạn.
2. Dùng Design Mode để cô lập — Chuyển sang Design Mode và nhấp trực tiếp vào phần tử cụ thể. Việc này neo phạm vi chỉnh sửa của agent vào đúng thành phần đó.
3. Thêm ràng buộc rõ ràng — Nêu rõ những gì KHÔNG được thay đổi. Ví dụ: "Chỉ đổi màu nền phần đầu trang thành #1A365D. Không sửa thanh điều hướng, chân trang hoặc bất kỳ thành phần nào khác."
4. Mỗi câu lệnh một thay đổi — Thực hiện một thay đổi, xác minh kết quả, rồi mới tiếp tục thay đổi tiếp theo.

Nếu agent liên tục gây hồi quy cho các phần tử khác, hãy Remix từ một Phiên bản ổn định và tiếp cận lại bằng một chỉ dẫn có phạm vi rất chặt chẽ.

Nếu bảng Preview hiển thị lỗi build, banner lỗi màu đỏ hoặc thông báo về gói bị thiếu:

1. Dùng nút Resolve — Nếu thông báo Báo cáo sự cố xuất hiện trong Trình xem App, hãy nhấp Resolve và AI sẽ phân tích, tự động sửa tất cả lỗi đã xác định. Nếu không có nút Resolve, hãy sao chép chính xác thông báo lỗi từ bảng Console và dán cho agent kèm: "Sửa lỗi build này: [error message]."
2. Kiểm tra thay đổi gần đây — Nếu lỗi xuất hiện sau một chỉnh sửa cụ thể, hãy vào History và so sánh với Phiên bản hoạt động gần nhất để xác định thay đổi nào đã gây ra lỗi.
3. Remix từ Phiên bản hoạt động gần nhất — Nếu lỗi khó giải quyết, hãy Remix từ điểm kiểm tra thành công gần nhất của bạn và áp dụng lại các thay đổi theo từng bước nhỏ.
4. Kiểm tra khả năng tương thích của gói — Nếu lỗi nhắc đến một gói cụ thể, hãy hỏi agent: "Kiểm tra xem [package name] có tương thích với thiết lập dự án hiện tại không và sửa mọi xung đột phiên bản."

Lưu ý: Nếu thông báo lỗi nhắc đến các thành phần nền tảng (Trình xem App, startup script, Publish, deploy record) hoặc các tệp nội bộ của gói bên thứ ba (ví dụ: @vue/compiler-core, vite), đây có thể là vấn đề của nền tảng chứ không phải của agent. Hãy liên hệ Support kèm thông báo lỗi đầy đủ.

Nếu sự cố vẫn tiếp diễn, hãy cung cấp thông báo lỗi đầy đủ, Chat Link và ảnh chụp màn hình lỗi.

Nếu agent xác nhận thay đổi đã hoàn tất nhưng kết quả trực quan vẫn không thay đổi:

1. Làm mới mạnh — Nhấn Cmd+Shift+R (Mac) hoặc Ctrl+F5 (Windows). Các thay đổi CSS thường bị trình duyệt lưu trong bộ nhớ đệm.
2. Kiểm tra xung đột độ ưu tiên CSS — Agent có thể đã thêm kiểu nhưng bị các quy tắc hiện có ghi đè. Hãy hỏi agent: "Kiểm tra xem kiểu tôi yêu cầu có đang bị một quy tắc CSS khác ghi đè không, và sửa độ ưu tiên nếu cần."
3. Dùng Design Mode để kiểm tra — Chuyển sang Design Mode và nhấp vào phần tử. Trình sửa trực quan ở bên trái hiển thị các thuộc tính màu sắc, khoảng cách, kiểu chữ và bố cục hiện đang được áp dụng, để bạn có thể xem liệu thay đổi bạn yêu cầu đã được áp dụng chưa.
4. Xác minh đúng tệp — Với các dự án có cả stylesheet toàn cục và kiểu ở cấp thành phần, agent có thể đã sửa nhầm tệp. Hãy hỏi: "Bạn đã áp dụng thay đổi ở đâu? Hãy cho tôi đường dẫn tệp và dòng."

Nếu sự cố vẫn tiếp diễn, hãy cung cấp Chat Link, ảnh chụp phần tử không thay đổi và chính xác các giá trị kiểu mà bạn đã yêu cầu.

Design Mode sử dụng bố cục trực quan để xác định thành phần bạn đang nhắm tới. Các phần tử lồng nhau hoặc chồng lấp có thể khiến việc chọn bị sai.

1. Phóng to — Phóng to khu vực trước khi nhấp. Điều này giúp phân biệt các thành phần lồng nhau sát nhau.
2. Dùng mô tả văn bản làm phương án dự phòng — Nếu nhấp nhiều lần vẫn chọn sai phần tử, hãy mô tả nó trong chat thay thế. Ví dụ: "Chọn nút thứ hai bên trong thẻ giá ở cột bên phải."
3. Tham chiếu theo đường dẫn tệp — Nếu bạn biết tệp nào chứa thành phần đó, hãy nói trực tiếp với agent: "Chỉnh sửa phần tử trong src/components/PricingCard.tsx, dòng 42."

Nếu vấn đề chọn vẫn tiếp diễn, hãy cung cấp ảnh chụp màn hình làm nổi bật phần tử bạn muốn và Chat Link.