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, font chữ và nhiều hơn nữa. Phù hợp nhất cho các thay đổi 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 trong thanh công cụ (bên cạnh Preview, Code và Dashboard)
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 overlay
Nhấp vào một phần tử để chọn nó
Chỉnh sửa các thuộc tính trong bảng sidebar: văn bản, màu sắc, khoảng cách, font 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à được ghi vào các file nguồn của bạn. Dùng nút Reset last edit trong sidebar để 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
Font chữ — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Kiểu chữ — Bật/tắt in nghiêng
Căn lề 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 cho tất cả các phía
Viền — Độ rộng, màu sắc và bo góc (khả dụng 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 ảnh stock hoặc tải ảnh của riêng bạn lên (áp dụng cho các phần tử img và background image)
Hiệu ứng — Bóng đổ và độ mờ

Undo / Redo

Dùng Cmd+Z (Mac) hoặc Ctrl+Z (Windows) để hoàn tá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 như 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ử đã chọn, bạn có thể chọn từ bảng màu trang này để giữ sự 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 điều chỉnh mà trình chỉnh sửa thuộc tính không thể thực hiện, hãy nhập một câu lệnh ngắn vào ô nhập Ask AI ở cuối sidebar. Phần tử đang chọn sẽ được truyền vào như ngữ cảnh, vì vậy các câu lệnh như “make this card more compact” hay “add a hover state with a subtle lift” sẽ hoạt động mà không cần bạn phải mô tả phần tử nào bạn muốn chỉnh.

Phần tử Tĩnh và Phần tử Động

Visual Editor hoạt động tốt nhất với 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), editor sẽ tự động chuyển về AI chat kèm theo một câu lệnh có cấu trúc.

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

Visual Editor phù hợp nhất cho các thay đổi nhỏ, nhanh chóng:

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

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 sao để 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. File sẽ được ghi vào runtime của bạn và được commit khi AI hoặc bạn tạo một commit.

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

Tôi có thể hoàn tác các chỉnh sửa bằng Visual Editor không?

Có. Dùng Cmd+Z / Ctrl+Z để hoàn tác. Visual Editor duy trì stack undo/redo 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 tất 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.

Sự khác biệt giữa Visual Editor và Code Editor là gì?

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 chuột
Code Editor	Chỉnh sửa toàn bộ mã nguồn với VS Code
AI Chat	Thay đổi phức tạp, tính năng mới, gỡ lỗi