Điều chỉnh giao diện app của bạn, rồi xem trước kết quả trước khi bạn xuất bản.

Design mở bên cạnh bản xem trước trực tiếp của bạn và cho phép bạn thay đổi giao diện dự án mà không cần viết mã.

Hướng dẫn này bao gồm cách thiết lập kiểu toàn cục bằng Theme, chỉnh sửa từng phần tử bằng Trình sửa trực quan, thay thế hình ảnh từ Library, mô tả thay đổi bằng ngôn ngữ thông thường và kiểm tra công việc của bạn trên nhiều thiết bị trước khi nó được đưa lên hoạt động.

Cách Design hoạt động

Khi AI Agents hoàn thành một tác vụ, Trình xem App sẽ xuất hiện ở đầu trang. Chọn Design để mở bảng thiết kế ở bên trái màn hình, với bản xem trước trực tiếp của bạn ở bên cạnh. Bảng này có ba tab:

• Theme đặt các quy tắc toàn cục cho toàn bộ app — màu sắc, phông chữ và hiệu ứng. Tốt nhất nên dùng trước khi bạn xây dựng.
• Trình sửa trực quan điều chỉnh các phần tử bạn đã chọn. Hoạt động trên mọi dự án, vào bất kỳ lúc nào.
• Library thay thế hình ảnh hoặc tạo hình ảnh mới.

Theme đặt ra các quy tắc, còn Trình sửa trực quan hoàn thiện các chi tiết. Chọn Exit để đóng bảng.

Bảng Design mở ở bên trái. Cho đến khi bạn chọn một mục nào đó, Trình sửa trực quan sẽ nhắc bạn chọn một phần tử.

Trước khi bắt đầu

Trước khi bạn mở Design, hãy đảm bảo rằng:

• Dự án của bạn có một bản build đã hoàn tất. Design mở từ Trình xem App, chỉ xuất hiện 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ị trực tiếp cho đến khi bạn xuất bản. URL công khai của bạn 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 theme chỉ áp dụng cho các kiểu dùng chung. Các phần tử được tạo với giá trị cố định sẽ giữ nguyên giao diện cũ sau khi đổi theme. Xem Nếu theme trông không đúng bên dưới.

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

Theme 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 — á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 phù hợp nhất để dùng 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 theme 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 theme

Tab Theme mở ra với trường Search Themes và nhóm các theme thành các phần:

• Current Theme — theme mà dự án của bạn đang dùng. 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 theme mới.
• Default Theme — 14 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 theme đó, cùng với tên và một hàng mẫu màu thể hiện bảng màu của nó. Các mẫu này không thể bị xóa.
• My Theme — các theme bạn đã tạo hoặc tùy chỉnh. Các theme này có thể được đổi tên và xóa.

Mỗi theme đều 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 và một hàng mẫu màu thể hiện bảng màu, để bạn có thể đánh giá hướng thiết kế trước khi áp dụng.

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

Để áp dụng một theme:

1. Chọn theme 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 bản xem trước.

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

Lưu ý: Nếu bạn có thay đổi chưa lưu trong Trình sửa trực quan, Atoms sẽ hiển thị Unsaved Changes và yêu cầu bạn lưu hoặc hủy chúng trước khi áp dụng theme mới.

Cập nhật một theme đã á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 theme bạn đang áp dụng.

Để dùng phiên bản đó, chọn Update trên theme 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ẽ 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 bạn đã áp dụng.

Lưu ý: Nếu app của bạn trông không giống theme bạn đã chọn, có thể các phần tử riêng lẻ đã bị ghi đè trong Trình sửa trực quan. Những ghi đè đó nhắm vào nội dung cụ thể và vẫn được giữ lại sau khi đổi theme.

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

Chọn + bên cạnh Current Theme để tạo một theme từ đầu, hoặc mở một theme hiện có để thay đổi nó. Cả hai cách đều mở Theme Manager, nơi bạn tinh chỉnh một theme 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 thường 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ể mất độ tương phản trên nền tối.

Bên dưới bản xem trước, bạn cũng có Undo và Redo để duyệt qua các thay đổi của mình, và Reset để đưa theme 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 theme

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

Kết quả mong đợi: theme của bạn xuất hiện dưới My Theme trên tab Theme, với bảng màu đượ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ỳ theme 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 hủy nếu bạn cố áp dụng một theme khác khi vẫn còn thay đổi chưa lưu.

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

Theme Manager có Export và Import bên dưới bản xem trước. Xuất một theme ra tệp, rồi nhập nó vào dự án khác để tái sử dụng cùng một đị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 theme trông không đúng

Việc áp dụng một theme không phải là kiểm tra khả năng tương thích, nên thông thường nó sẽ không thất bại. Theme 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 đó, nghĩa là bất kỳ theme nào trong bộ chọn thường cũng 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 theme đượ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 đổi theme, nên nó giữ nguyên giao diện trước đó và có thể xung đột với mọi thứ xung quanh. Hãy sửa nó trong Trình sửa trực quan, hoặc yêu cầu các agent trong chat thay giá trị cố định bằng các kiểu của theme bạn.

Văn bản trở nên khó đọc. Một theme 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 theme gần hơn với thiết kế hiện có của bạn.

Atoms báo với bạn rằng không thể áp dụng theme. 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 theme 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 theme sớm nếu có thể. Khi các agent xây dựng với một theme đã được áp dụng sẵn, họ sẽ dùng các kiểu dùng chung của theme đó ngay từ đầu, nên sẽ có ít phần tử kết thúc với giá trị cố định mà thay đổi theme về sau không thể tác động tới.

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

Chọn một phần tử trong bản xem trước để chỉnh sửa nó. Để làm việc với nhiều phần tử cùng lúc, giữ Ctrl và nhấp trên Windows, hoặc Cmd và nhấp trên Mac.

Quan trọng: Các điều khiển thuộc tính được mô tả bên dưới chỉ tác động lên từng phần tử một. Khi bạn đã chọn nhiều phần tử, hãy thay đổi chúng bằng cách mô tả điều bạn muốn trong chat — xem Mô tả thay đổi thay vì nhấp.

Một nhãn phía trên vùng chọn của bạn sẽ hiển thị tên phần tử và kích thước của nó — cỡ chữ đối với văn bản, hoặc kích thước đối với vùng chứa — để bạn có thể xác nhận rằng mình đã chọn đúng phần tử mong muốn chứ không phải vùng chứa của nó.

Sau đó, tab Trình sửa trực quan sẽ hiển thị các thuộc tính khả dụng cho phần tử đó, được nhóm thành các phần:

• Layout — lề ngoài và lề trong.
• Appearance — màu nền, độ mờ và bán kính góc. Radius chạy từ None qua Small, Medium, Large, XL, 2XL, 3XL, đến Full.
• Content — văn bản của phần tử.
• Style — họ phông chữ, độ đậm, kích thước, căn chỉnh văn bản và trang trí.
• Class — các lớp định kiểu được áp dụng cho phần tử, được thu gọn theo mặc định.

Những phần nào xuất hiện phụ thuộc vào mục bạn đã chọn: một phần tử văn bản sẽ cung cấp Content và Style, trong khi một vùng chứa có thể chỉ hiển thị Layout, Appearance và Class.

Một thanh công cụ nổi cũng xuất hiện phía trên vùng chọn của bạn với các điều khiển phổ biến nhất trong tầm tay — phông chữ, độ đậm, căn chỉnh và màu sắc cho văn bản — cùng với điều khiển xóa và trường câu lệnh được mô tả bên dưới.

Các thay đổi sẽ xuất hiện trong bản xem trước khi bạn thực hiện chúng. Để hủy bỏ chúng, hãy dùng Discard ở cuối bản xem trước.

Lưu các thay đổi của bạn

Các chỉnh sửa sẽ không được giữ lại cho đến khi bạn lưu chúng. Khi bạn đã thực hiện một thay đổi, Discard và Save sẽ xuất hiện ở cuối bản xem trước.

• Save giữ lại các thay đổi của bạn.
• Discard loại bỏ chúng và đưa phần tử trở về trạng thái trước đó.

Kết quả mong đợi: các nút sẽ biến mất sau khi bạn lưu, và thay đổi của bạn giờ đã là một phần của dự án.

Lưu ý: Nếu bạn cố rời khỏi Design, áp dụng một theme khác hoặc dùng Chọn để Chat khi vẫn còn công việc chưa lưu, Atoms sẽ hiển thị Unsaved Changes và yêu cầu bạn lưu hoặc hủy trước khi tiếp tục.

Việc lưu sẽ giữ thay đổi trong dự án của bạn. Nó không đưa thay đổi đó lên trang đang hoạt động của bạn — xem Xuất bản các thay đổi của bạn.

Khi một phần tử được chọn, Trình sửa trực quan sẽ hiển thị các thuộc tính của nó. Thanh công cụ nổi phía trên vùng chọn chuyển đổi giữa việc mô tả một thay đổi và chỉnh sửa trực tiếp nó.

Mẹo:

1. Dùng Trình sửa trực quan cho các thay đổi về mặt thẩm mỹ và dùng chat cho các thay đổi về cấu trúc như trang mới, tính năng mới hoặc logic backend.
2. Để thực hiện cùng một thay đổi trên một hàng thẻ hoặc nút, hãy chọn tất cả bằng Ctrl-click hoặc Cmd-click và mô tả thay đổi một lần trong chat. Chỉnh sửa từng mục qua các điều khiển thuộc tính có nghĩa là bạn phải lặp lại chính mình.

Thay thế hình ảnh bằng Library

Library áp dụng một hình ảnh cho phần tử bạn đã chọn, vì vậy hãy bắt đầu bằng cách chọn nơi hình ảnh sẽ được đặt vào.

1. Chọn phần tử bạn muốn thay đổi trong bản xem trước. Cho đến khi bạn làm vậy, Library sẽ hiển thị Select an element to start visual editing.
2. Mở tab Library và chọn một nguồn — Image, Generate hoặc Upload.
3. Áp dụng hình ảnh của bạn. Cách thực hiện phụ thuộc vào nguồn của nó. Với hình ảnh tích hợp sẵn, di chuột lên nó và chọn Use asset. Với hình ảnh bạn tạo hoặc tải lên, hãy chọn hình thu nhỏ đã hoàn tất của nó.
4. Kiểm tra bản xem trước. Hình ảnh sẽ được áp dụng ngay cho phần tử bạn đã chọn.
5. Chọn Save ở cuối bản xem trước, hoặc Discard để hoàn tác.

Kết quả mong đợi: phần tử bạn chọn sẽ mang hình ảnh mới, và các nút Save và Discard sẽ biến mất sau khi bạn lưu.

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. Dùng Search assets để tìm 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 các mục 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 tổng quát. Di chuột lên 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à yêu cầu gói Pro hoặc Max. Nhập điều bạn muốn vào dưới Describe the image you want to generate và chọn Generate. Kết quả sẽ 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-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. Hình ảnh đã tải lên sẽ 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 thay vì nhấp

Khi một thay đổi dễ mô tả hơn là nhấp qua từng bước, bạn có thể yêu cầu các agent thực hiện thay. Có hai nơi để làm điều đó, và cả hai đều tác động lên bất cứ thứ gì bạn hiện đang chọn.

• Thanh công cụ nổi trên vùng chọn của bạn. Một thanh công cụ nhỏ xuất hiện phía trên phần tử bạn đã chọn. Hai biểu tượng của nó chuyển đổi giữa việc mô tả một thay đổi và chỉnh sửa trực tiếp các thuộc tính. Nhập vào Ask the Atoms to change… rồi gửi.
• Ô nhập chat bên dưới bảng Design. Khi một phần tử được chọn, ô nhập sẽ hiển thị nhãn Design và câu lệnh Ask the Atoms team to modify the selected element…, để các agent áp dụng chỉ dẫn của bạn cho phần tử đó thay vì cho toàn bộ dự án.

Thanh công cụ nổi nằm phía trên vùng chọn của bạn. Nhãn ở bên trái cho biết phần tử nào sẽ nhận chỉ dẫn.

Hãy mô tả kết quả, không phải cơ chế:

- "Làm cho phần này dịu hơn — nhiều khoảng trắng hơn, tiêu đề nhỏ hơn."

- "Làm cho kiểu của nút này khớp với trang bảng giá."

Những chỉ dẫn mơ hồ như "hãy làm cho nó đẹp hơn" sẽ cho kết quả khó đoán.

Lưu ý: Nhấp vào một thuộc tính trong Trình sửa trực quan sẽ thay đổi nó ngay lập tức. Gửi một câu lệnh sẽ yêu cầu các agent thực hiện công việc, nên sẽ mất nhiều thời gian hơn. Với một thay đổi đơn giản về màu sắc hoặc khoảng cách, hãy chỉnh sửa trực tiếp thuộc tính đó.

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

Sử dụng thanh công cụ phía trên bả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 phản hồi. Các thay đổi về theme và kiểu chữ trông đúng trên desktop thường bị lỗi trên di động, vì vậy luôn kiểm tra di động trước khi xuất bản.
• Page selector — di chuyển giữa các trang trong app của bạn.
• Refresh — tải lại bả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ắc phục sự cố bản xem trước

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

Một điều dành riêng cho Design: nếu các chỉnh sửa 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 sẽ bị loại bỏ khi bạn rời khỏi Design — xem Lưu các thay đổi của bạn.

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

Các thay đổi trong Design sẽ ở lại 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.

Lưu ý: Nếu dự án của bạn dùng Specify Phiên bản thay vì Always Latest, trang đang hoạt động 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ố.