Thiết kế và xem trước

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 dáng 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 các 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 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 sẽ 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 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.

Thiết lập kiểu dáng 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 một theme sớm có nghĩa là mọi thứ các agent tạo ra sẽ tuân theo theme đó 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ỳ theme nào, mục này sẽ hiển thị No theme applied yet, và nút + bên cạnh 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 xây dựng bằng theme đó, kèm tên và một hàng các ô 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. Chúng 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 xây dựng bằng theme đó, kèm tên và một hàng các ô màu thể hiện bảng màu của nó, để bạn có thể đánh giá định hướng trước khi áp dụng.

Tab Theme, với theme đang á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 theo theme bạn đã chọn, và theme đó giờ sẽ xuất hiện trong 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 một 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 mà 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ể một số 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ữ nguyên 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 kiểm soát bằng màu sắc, độ mờ, độ nhòe, độ lan và độ lệch.

Bản xem trước bên cạnh được xây dựng 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. Hãy 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 bản xem trước, bạn cũng có Undo và Redo để lần lượt quay lại hoặc làm lại các thay đổi, 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, 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 trong My Theme trên tab Theme, với bảng màu được hiển thị dưới dạng các ô màu. Hãy áp dụng nó giống 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.

Dùng lại một theme trên nhiều dự án

Theme Manager có Export và Import bên dưới bản xem trước. Hãy xuất một theme ra tệp, rồi nhập nó vào dự án khác để dùng lại 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. Một 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 đề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 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, chẳng hạn một màu hoặc phông chữ cụ thể được đặt trực tiếp trên chính nó, thay vì dùng một trong các kiểu dùng chung của app — sẽ không thể bị tác động bởi thay đổ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 của 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 với thiết kế hiện tại của bạn hơn.

Atoms báo 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à một lần đổ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 một phần tử tại một thời điểm. 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 một 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 thay vì vùng chứa của nó.

Tab Trình sửa trực quan sau đó 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 class kiểu dáng được áp dụng cho phần tử, mặc định được thu gọn.

Những phần nào xuất hiện sẽ phụ thuộc vào mục bạn đã chọn: một phần tử văn bản sẽ có 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 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. Để bỏ các thay đổi đó, 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 ban đầu.

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 thay đổi 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.

Với một phần tử được chọn, Trình sửa trực quan 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ả thay đổi và chỉnh sửa trực tiếp.

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 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 hình ảnh. Với hình ảnh có 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 lập tức 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à cần 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 này. 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 cách 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 sẽ xuất hiện bên dưới vùng thả — hãy chọn một hình để áp dụng.

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ả thay đổi và chỉnh sửa trực tiếp các thuộc tính. Hãy nhập vào Ask the Atoms to change… rồi gửi.
• Ô 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 chỉ dẫn sẽ được áp dụng cho phần tử nào.

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

- "Làm 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 dáng của nút này khớp với trang bảng giá."

Các chỉ dẫn mơ hồ như "hãy làm cho nó trông đẹ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 thay đổi đơn giản về màu sắc hoặc khoảng cách, hãy chỉnh trực tiếp thuộc tính đó.

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

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 đáp ứng. 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 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 bản xem trước nếu nó trông có vẻ chưa cập nhật.
• Open in a new tab — xem app ở chiều rộng đầy đủ 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ó vẻ chưa cập nhật, cứ tiếp tục tả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ý — Refresh, bảng Console, Resolve, và cách báo cáo một lỗi vẫn còn tiếp diễn.

Một điều riêng đối với Design: nếu các chỉnh sửa của bạn có vẻ như đã 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 công khai.

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ẽ tiếp tục 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ố.