Chỉnh sửa trực quan và xem trước

Chỉnh sửa trực quan hoạt động trực tiếp trong Trình xem App. Sử dụng thanh công cụ bên dưới phần xem trước để chọn phần tử, chỉnh sửa văn bản, thay thế hình ảnh, áp dụng chủ đề và xem trước các thay đổi của bạn trước khi xuất bản.

Sử dụng Select element cho các thay đổi có AI hỗ trợ, Edit Text cho các thay đổi văn bản trực tiếp và Theme cho các kiểu toàn cục như màu sắc, phông chữ và hiệu ứng.

Cách chỉnh sửa trực quan hoạt động

Khi các agent AI hoàn thành một tác vụ, Trình xem App sẽ xuất hiện ở đầu dự án. Thanh công cụ chỉnh sửa trực quan nằm bên dưới phần xem trước.

• Select element cho phép bạn chọn một hoặc nhiều phần tử và yêu cầu các agent chỉnh sửa chúng.
• Edit Text cho phép bạn chỉnh sửa văn bản trực tiếp trong phần xem trước.
• Theme mở các điều khiển chủ đề cho kiểu toàn cục.

Thanh công cụ có thể được thu gọn khi bạn không cần dùng đến.

Trước khi bắt đầu

Trước khi bắt đầu chỉnh sửa, hãy đảm bảo rằng:

• Dự án của bạn đã có một bản build hoàn tất. Các công cụ chỉnh sửa trực quan khả dụng từ Trình xem App sau khi các agent hoàn thành một tác vụ.
• Bạn biết rằng các thay đổi chưa hiển thị công khai cho đến khi bạn xuất bản. URL công khai của bạn sẽ không bị ảnh hưởng cho đến khi bạn xuất bản phiên bản đã cập nhật.
• Bạn biết rằng chủ đề chỉ tác động đến các kiểu dùng chung. Các phần tử được tạo bằng giá trị cố định sẽ giữ nguyên giao diện cũ sau khi thay đổi chủ đề. Xem Nếu chủ đề trông không đúng bên dưới.

Đặt kiểu toàn cục bằng Theme

Chủ đề là hệ thống thiết kế của dự án bạn. Nó xác định các biến toàn cục — bảng màu, kiểu chữ và khoảng cách — được áp dụng trên toàn bộ app của bạn, thay vì các cài đặt trên một phần tử riêng lẻ.

Theme được dùng tốt nhất trong giai đoạn chuẩn bị, trước khi bạn bắt đầu xây dựng. Áp dụng sớm một chủ đề có nghĩa là mọi thứ các agent tạo ra sẽ tuân theo nó ngay từ đầu.

Chọn một chủ đề

Chọn Theme từ thanh công cụ bên dưới Trình xem App. Bảng Theme bao gồm một trường Search Themes và nhóm các chủ đề thành các phần:

• Current Theme — chủ đề mà dự án của bạn đang dùng hiện tại. Trước khi bạn áp dụng bất kỳ thứ gì, mục này sẽ hiển thị No theme applied yet, và nút + bên cạnh nó sẽ tạo một chủ đề mới.
• Featured Theme — 15 mẫu cài sẵn do nhà thiết kế tuyển chọn. Mỗi mẫu được hiển thị dưới dạng bản xem trước của một trang được tạo bằng chủ đề đó, cùng với tên của nó và một hàng mẫu màu thể hiện bảng màu. Các mục này không thể bị xóa.
• Your Theme — các chủ đề bạn đã tạo hoặc tùy chỉnh. Các mục này có thể được đổi tên và xóa.

Mỗi chủ đề xuất hiện dưới dạng bản xem trước của một trang được tạo bằng nó, cùng với tên của nó và một hàng mẫu màu thể hiện bảng màu, để bạn có thể đánh giá định hướng trước khi áp dụng.

Tab Theme, với một chủ đề đã được áp dụng ở trên cùng và các chủ đề đã lưu của bạn bên dưới.

Để áp dụng một chủ đề:

1. Chọn chủ đề bạn muốn.
2. Atoms hỏi "Do you want to apply theme name?"
3. Chọn Apply để xác nhận hoặc Cancel để quay lại.
4. Kiểm tra phần xem trước.

Kết quả mong đợi: phần xem trước cập nhật sang chủ đề bạn đã chọn và giờ đây nó xuất hiện dưới Current Theme.

Lưu ý: Nếu bạn có các thay đổi văn bản hoặc hình ảnh chưa lưu, Atoms sẽ yêu cầu bạn lưu hoặc loại bỏ chúng trước khi áp dụng một chủ đề mới.

Cập nhật một chủ đề đã áp dụng

Một dấu chấm trên tab Theme có nghĩa là có phiên bản mới hơn của chủ đề bạn đang áp dụng.

Để dùng phiên bản đó, hãy chọn Update trên chủ đề hiện tại của bạn và xác nhận Do you want to re-apply theme name? Sau đó, dự án của bạn sẽ sử dụng phiên bản mới hơn.

Bạn không bắt buộc phải cập nhật. Nếu bạn để nguyên, dự án của bạn sẽ tiếp tục chạy phiên bản mà bạn đã áp dụng.

Lưu ý: Lưu ý: Nếu app của bạn trông không giống chủ đề bạn đã chọn, các phần tử riêng lẻ có thể có các kiểu ghi đè lên chủ đề. Các ghi đè đó nhắm đến nội dung cụ thể và vẫn tồn tại sau khi thay đổi chủ đề.

Tạo hoặc chỉnh sửa một chủ đề trong Theme Manager

Chọn + bên cạnh Current Theme để tạo một chủ đề từ đầu hoặc mở một chủ đề hiện có để thay đổi nó. Cả hai cách đều mở Theme Manager, nơi bạn tinh chỉnh một chủ đề dựa trên bản xem trước trực tiếp.

Các cài đặt của nó nằm trên ba tab:

• Color — các vai trò màu mà app của bạn sử dụng, được nhóm theo mục đích: Base Colors, Card, Popover, Primary, Secondary và nhiều mục khác. Mỗi vai trò có giá trị riêng, vì vậy thay đổi Primary sẽ tác động đến mọi phần tử sử dụng nó.
• Fonts — các kiểu chữ Serif, Sans-serif và Mono của bạn.
• Effects — Radius của góc và Shadow mà bạn điều khiển bằng màu sắc, độ mờ, độ nhòe, độ lan và độ lệch.

Bản xem trước bên cạnh chúng được tạo từ các thành phần thực — biểu mẫu đăng nhập, nút, ô nhập liệu, văn bản nội dung và văn bản monospace — để bạn có thể đánh giá thay đổi ngay lập tức thay vì phải đoán. Sử dụng nút chuyển sáng và tối bên dưới để kiểm tra cả hai, vì một bảng màu hoạt động tốt trên nền sáng có thể bị giảm độ tương phản trên nền tối.

Bên dưới phần xem trước, bạn cũng có Undo và Redo để lần lượt duyệt qua các thay đổi của mình, cùng với Reset để đưa chủ đề trở về trạng thái ban đầu.

Theme Manager. Bản xem trước cập nhật khi bạn thay đổi một giá trị và các điều khiển bên dưới bao gồm hoàn tác, làm lại, xuất, nhập và đặt lại.

Lưu một chủ đề

1. Chọn Save.
2. Đặt Theme Name hoặc giữ tên được đề xuất.
3. Chọn Save để xác nhận.

Kết quả mong đợi: chủ đề của bạn xuất hiện dưới My Theme trên tab Theme, với bảng màu của nó được hiển thị dưới dạng các mẫu màu. Hãy áp dụng nó theo cùng cách như bất kỳ chủ đề nào khác.

Lưu ý: Các chỉnh sửa sẽ không được giữ lại cho đến khi bạn lưu chúng. Atoms sẽ chặn bạn và đề nghị lưu hoặc loại bỏ nếu bạn cố áp dụng một chủ đề khác khi vẫn còn các thay đổi chưa lưu.

Tái sử dụng một chủ đề trên nhiều dự án

Theme Manager có Export và Import bên dưới phần xem trước. Xuất một chủ đề ra tệp, sau đó nhập nó vào một dự án khác để tái sử dụng cùng định hướng thiết kế hoặc gửi cho đồng đội để dự án của họ khớp với dự án của bạn.

Nếu một chủ đề trông không đúng

Việc áp dụng một chủ đề không phải là kiểm tra khả năng tương thích, vì vậy thông thường nó sẽ không thất bại. Một chủ đề thay thế các giá trị kiểu dùng chung mà app của bạn được xây dựng dựa trên đó, điều này có nghĩa là bất kỳ chủ đề nào trong bộ chọn thường đều có thể được áp dụng cho bất kỳ dự án nào.

Thay vào đó, điều bạn có thể thấy là một chủ đề được áp dụng thành công nhưng không tác động đến mọi thứ. Không có thông báo lỗi cho trường hợp này — nó chỉ đơn giản là trông không đúng.

Một phần app của bạn vẫn giữ giao diện cũ. Đây là vấn đề phổ biến nhất. Một phần tử được gán giá trị cố định, một màu hoặc phông chữ cụ thể được đặt trực tiếp trên chính nó thay vì một trong các kiểu dùng chung của app — sẽ không thể bị tác động bởi việc thay đổi chủ đề, vì vậy nó giữ nguyên giao diện trước đó và có thể xung đột với mọi thứ xung quanh. Chọn phần tử bị ảnh hưởng và mô tả thay đổi trong chat dự án.

Văn bản trở nên khó đọc. Một chủ đề tối được áp dụng cho bố cục được thiết kế cho nền sáng có thể khiến văn bản có độ tương phản quá thấp. Hãy điều chỉnh các phần tử bị ảnh hưởng trong Trình sửa trực quan hoặc chọn một chủ đề gần hơn với thiết kế hiện có của bạn.

Atoms cho bạn biết không thể áp dụng chủ đề. Trường hợp này hiếm gặp và có nghĩa là giao diện dự án của bạn không được xây dựng trên hệ thống chủ đề của Atoms. Hãy dùng Trình sửa trực quan thay thế — mọi thứ vẫn có thể thực hiện được theo từng phần tử.

Quan trọng: Hãy chọn một chủ đề sớm nếu có thể. Khi các agent xây dựng với một chủ đề đã được áp dụng sẵn, họ sử dụng các kiểu dùng chung của chủ đề đó ngay từ đầu, vì vậy sẽ có ít phần tử hơn kết thúc với các giá trị cố định mà một thay đổi chủ đề về sau không thể tác động tới.

Chỉnh sửa phần tử bằng Trình sửa trực quan

1. Di chuột qua thanh công cụ chỉnh sửa trực quan và chọn Select element.
2. Thanh công cụ hiển thị Click to select, Ctrl/Cmd + Click for multiple.
3. Chọn một phần tử trong phần xem trước. Để chọn nhiều phần tử, giữ Ctrl trên Windows hoặc Cmd trên Mac trong khi chọn.
4. Các lựa chọn của bạn được đính kèm vào chat dự án. Thanh công cụ hiển thị số lượng đã chọn, chẳng hạn như Edit 1 selection in chat window.
5. Mô tả thay đổi bạn muốn trong chat dự án và gửi tin nhắn của bạn.
6. Chọn lại Select element để thoát chế độ chọn.

Sử dụng chat dự án cho các thay đổi như bố cục, màu sắc, khoảng cách, kiểu dáng hoặc các thay đổi ảnh hưởng đến nhiều phần tử đã chọn.

Chỉnh sửa văn bản trực tiếp

1. Chọn Edit Text từ thanh công cụ bên dưới Trình xem App.
2. Khi Click text content to edit xuất hiện, hãy chọn văn bản bạn muốn thay đổi.
3. Chỉnh sửa văn bản trực tiếp trong phần xem trước.
4. Bạn có thể chỉnh sửa nhiều phần tử văn bản trước khi lưu. Thanh công cụ hiển thị số lượng chỉnh sửa đang chờ, chẳng hạn như 1 text change hoặc 2 text changes.
5. Chọn Save để giữ tất cả các thay đổi văn bản đang chờ hoặc Discard để xóa chúng.

Bạn cũng có thể nhấp đúp vào văn bản khi đang dùng Select element để bắt đầu chỉnh sửa trực tiếp.

Lưu hoặc loại bỏ các thay đổi của bạn

Các thay đổi văn bản và hình ảnh trực tiếp sẽ không được áp dụng cho đến khi bạn lưu chúng. Khi có thay đổi đang chờ, thanh công cụ hiển thị số lượng thay đổi cùng với Discard và Save.

• Save áp dụng tất cả các chỉnh sửa trực tiếp đang chờ.
• Discard xóa các chỉnh sửa đang chờ và đưa các phần tử bị ảnh hưởng trở về trạng thái trước đó.

Nếu bạn cố rời khỏi chế độ chỉnh sửa khi vẫn còn các thay đổi đang chờ, Atoms sẽ hiển thị:

Các thay đổi chưa lưu

Bạn có các thay đổi chưa lưu. Vui lòng lưu hoặc loại bỏ các thay đổi trước khi rời khỏi chế độ chỉnh sửa.

Chọn Cancel để tiếp tục chỉnh sửa hoặc Discard để rời đi mà không giữ lại các thay đổi.

Việc lưu sẽ cập nhật dự án đang làm việc. Nó không cập nhật trang web đang hoạt động cho đến khi bạn xuất bản.

Thay thế một hình ảnh

1. Vào chế độ Select element.
2. Chọn hình ảnh bạn muốn thay thế.
3. Chọn một hình ảnh từ thư viện hình ảnh hoặc sử dụng điều khiển tải lên trên hình ảnh đã chọn.
4. Kiểm tra hình ảnh thay thế trong phần xem trước.
5. Chọn Save để áp dụng thay đổi hình ảnh hoặc Discard để xóa nó.

Nếu bạn cũng nhập một chỉ dẫn trong chat dự án, việc thay thế hình ảnh và chỉ dẫn trong chat có thể được gửi cùng nhau.

Tab Library với các danh mục hình ảnh và Popular Images.

Hình ảnh đến từ đâu

Image là bộ sưu tập tích hợp sẵn. Sử dụng Search assets cho thứ gì đó cụ thể hoặc duyệt theo danh mục — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings và People, với More tags cho phần còn lại. Chọn một danh mục sẽ mở nó; dùng mũi tên quay lại để trở về. Popular Images bên dưới hiển thị một lựa chọn chung. Di chuột qua bất kỳ hình ảnh nào và chọn Use asset để áp dụng nó.

Generate tạo một hình ảnh mới từ mô tả và cần gói Pro hoặc Max. Nhập nội dung bạn muốn vào dưới Describe the image you want to generate và chọn Generate. Kết quả xuất hiện bên dưới trường đó. Chọn một hình thu nhỏ đã hoàn tất để áp dụng nó cho phần tử của bạn.

Upload thêm tệp của riêng bạn bằng kéo và thả, dán hoặc nhấp. Hình ảnh có thể ở định dạng JPEG, PNG, GIF, BMP, TIFF hoặc WEBP, tối đa 4MB. Các hình ảnh đã tải lên xuất hiện bên dưới vùng thả — chọn một hình để áp dụng nó.

Lưu ý: Use asset chỉ xuất hiện trên các hình ảnh tích hợp sẵn. Các hình ảnh bạn tạo hoặc tải lên sẽ được áp dụng bằng cách chọn hình thu nhỏ của chúng.

Mô tả thay đổi trong chat

Sau khi chọn một hoặc nhiều phần tử bằng Select element, hãy mô tả kết quả bạn muốn trong chat dự án.

Ví dụ:

• "Làm cho phần này dịu hơn, với nhiều khoảng trắng hơn và tiêu đề nhỏ hơn."
• "Làm cho các nút này khớp với kiểu dáng trên trang bảng giá."

Hãy cụ thể về kết quả mong muốn. Các chỉ dẫn như "làm cho nó đẹp hơn" có thể tạo ra kết quả khó đoán

Xem trước các thay đổi của bạn

Sử dụng thanh công cụ phía trên phần xem trước:

• Device view — chuyển đổi giữa các kích thước màn hình để kiểm tra khả năng đáp ứng. Các thay đổi về chủ đề và kiểu chữ trông đúng trên desktop thường bị lỗi trên di động, vì vậy hãy luôn kiểm tra trên di động trước khi xuất bản.
• Page selector — di chuyển giữa các trang của app.
• Refresh — tải lại phần xem trước nếu nó trông đã cũ.
• Open in a new tab — xem app ở toàn chiều rộng trong một tab trình duyệt riêng.
• Console — mở bảng nhật ký khi có gì đó trông không đúng.

Kết quả mong đợi: các thay đổi của bạn hiển thị trên mọi trang và ở mọi độ rộng thiết bị mà bạn dự định hỗ trợ.

Khôi phục từ sự cố xem trước

Nếu phần xem trước trông đã cũ, cứ tải mãi hoặc hiển thị lỗi màu đỏ, vấn đề có thể nằm ở Trình xem App chứ không phải ở các chỉnh sửa trực quan của bạn. Xem Khắc phục sự cố build và xem trước để biết các bước khắc phục sự cố — Refresh, bảng Console, Resolve và cách báo cáo một lỗi vẫn còn tiếp diễn.

Nếu các chỉnh sửa văn bản hoặc hình ảnh trực tiếp của bạn có vẻ đã biến mất, hãy kiểm tra xem bạn đã lưu chúng chưa. Các thay đổi chưa lưu có thể bị loại bỏ khi bạn rời khỏi chế độ chỉnh sửa — xem phần Lưu hoặc loại bỏ các thay đổi của bạn.

Xuất bản các thay đổi của bạn

Các chỉnh sửa trực quan sẽ ở trong dự án đang làm việc của bạn cho đến khi bạn xuất bản. Chọn Publish ở góc trên bên phải hoặc Update nếu dự án đã hoạt động công khai.

Lưu ý: Nếu dự án của bạn sử dụng Specify Phiên bản thay vì Always Latest, trang đang hoạt động công khai sẽ bị khóa ở phiên bản bạn đã chọn và các thay đổi thiết kế của bạn sẽ không xuất hiện công khai cho đến khi bạn xuất bản một phiên bản mới.

Đối với các lỗi mà các agent báo cáo trong quá trình build, xem Báo cáo sự cố.