Visual Editor

Nhấp vào các phần tử để chỉnh sửa văn bản, màu sắc, khoảng cách, phông chữ và nhiều hơn nữa. Phù hợp nhất cho các chỉnh sửa nhỏ; dùng chat cho các thay đổi lớn hơn.

Visual Editor cho phép bạn thay đổi giao diện ứng dụng bằng cách nhấp vào các phần tử và chỉnh sửa thuộc tính của chúng trực tiếp. Chuyển sang chế độ Visual trong thanh công cụ của builder để kích hoạt.

Cách hoạt động

Chuyển sang chế độ Visual — đây là chế độ con của Preview trong thanh công cụ (thanh công cụ có hai phân đoạn là Preview và Admin)
Di chuột qua các phần tử trong preview — chúng sẽ được làm nổi bật bằng một lớp phủ
Nhấp vào một phần tử để chọn nó
Chỉnh sửa thuộc tính trong bảng điều khiển bên cạnh: văn bản, màu sắc, khoảng cách, phông chữ, viền, hình ảnh, hiệu ứng

Các thay đổi được áp dụng ngay lập tức vào preview và ghi vào các tệp nguồn của bạn. Dùng nút Reset last edit trong thanh bên để hoàn tác thay đổi thuộc tính gần nhất.

Tôi có thể chỉnh sửa những gì?

Văn bản — Chỉnh sửa nội dung trực tiếp
Cỡ chữ — xs, sm, base, lg, xl, v.v.
Độ đậm chữ — thin, light, normal, medium, semibold, bold, extrabold
Họ phông chữ — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Kiểu chữ — Bật/tắt Italic
Căn chỉnh văn bản — left, center, right, justify
Màu văn bản — Bất kỳ màu Tailwind nào
Màu nền — Bất kỳ màu Tailwind nào
Khoảng cách — Padding và margin trên tất cả các cạnh
Viền — Độ rộng, màu sắc và bo góc (có sẵn trên các phần tử container không có nội dung văn bản)
Hình ảnh — Thay thế bằng tìm kiếm ảnh stock hoặc tải lên ảnh của bạn (áp dụng cho các phần tử img và hình ảnh nền)
Hiệu ứng — Bóng đổ và độ mờ

Hoàn tác / Làm lại

Dùng Cmd+Z (Mac) hoặc Ctrl+Z (Windows) để hoàn tác các thay đổi. Cmd+Shift+Z / Ctrl+Shift+Z để làm lại.

Bảng màu trang

Visual Editor phân tích trang của bạn và hiển thị mọi màu Tailwind cùng thuộc tính CSS tùy chỉnh đang được sử dụng. Khi bạn mở bộ chọn màu cho phần tử đang chọn, bạn có thể chọn từ bảng màu trang này để giữ nhất quán với hệ thống thiết kế hiện có thay vì phải đoán mã hex.

Hỏi AI về phần tử đang chọn

Với những chỉnh sửa mà trình chỉnh sửa thuộc tính không thể diễn đạt, hãy nhập một prompt ngắn vào ô Ask AI ở cuối thanh bên. Phần tử đang chọn sẽ được truyền làm ngữ cảnh, vì vậy các prompt như “make this card more compact” hoặc “add a hover state with a subtle lift” sẽ hoạt động mà không cần bạn mô tả phần tử nào.

Phần tử tĩnh và phần tử động

Visual Editor hoạt động tốt nhất trên các phần tử tĩnh — nơi className và nội dung văn bản là các chuỗi ký tự trong JSX. Với các phần tử động (className được tính toán, render có điều kiện, biểu thức), trình chỉnh sửa sẽ tự động chuyển về AI chat với một prompt có cấu trúc.

Khi nào nên dùng Visual Editor?

Visual Editor phù hợp nhất cho các chỉnh sửa nhỏ, nhanh:

Sửa lỗi đánh máy
Điều chỉnh khoảng cách
Thay đổi màu sắc
Cập nhật văn bản nút bấm

Với các thay đổi lớn hơn (thêm section mới, tái cấu trúc layout, tính năng mới), hãy dùng AI chat thay thế.

Làm thế nào để lưu thay đổi?

Các thay đổi được lưu tự động khi bạn chỉnh sửa một thuộc tính. Tệp được ghi vào runtime của bạn, và thay đổi sẽ được commit vào lịch sử phiên bản ở lượt builder tiếp theo có commit.

Câu hỏi thường gặp

Tôi có thể hoàn tác các chỉnh sửa trực quan không?

Có. Dùng Cmd+Z / Ctrl+Z để hoàn tác. Visual Editor duy trì ngăn xếp hoàn tác/làm lại riêng của nó.

Tại sao tôi có thể chỉnh sửa một số phần tử nhưng không phải phần tử khác?

Các thuộc tính văn bản tĩnh và className có thể được chỉnh sửa trực tiếp. Các giá trị động hoặc được tính toán (template literal, biểu thức ternary, lời gọi hàm) sẽ tự động chuyển về AI chat.

Khi nào nên dùng Visual Editor thay vì AI chat?

Công cụ	Phù hợp nhất cho
Visual Editor	Thay đổi thuộc tính nhanh (văn bản, màu sắc, khoảng cách) bằng cách nhấp
AI Chat	Thay đổi phức tạp, tính năng mới, debug

Đây là hai cách duy nhất để thay đổi ứng dụng của bạn — không có trình chỉnh sửa code. Xem Chỉnh sửa và truy cập code của bạn.