Bỏ qua tới nội dung
Tài liệu NextCore NextCore Browser English homestaynextcore.org
Trong trang

NEXTCORE DESIGN

Bản vẽ giao diện trước khi làm — mỗi màn đủ 5 trạng thái × 4 khổ máy, dựng bằng đúng CSS của app thật. Bạn xem, sửa tay, ghi chú; agent vẽ song song qua MCP.

Cập nhật 30/10/20267 phút đọc

Mở NEXTCORE DESIGN ở thanh bên trái. Đây là nơi giữ bản vẽ giao diện: trang web, màn trong app, tiện ích. Bản vẽ dựng bằng chính bộ màu và khoảng cách của sản phẩm thật, nên thứ bạn thấy ở đây là thứ sẽ lên màn hình — không phải ảnh minh hoạ.

Bản vẽ được sắp thế nào

Cấp Là gì Ví dụ
Dự án một sản phẩm Web · NextCore Browser · Extension
Thư mục một trang web hoặc một mục menu trong app; thư mục lồng được nhiều cấp NEXTCORE CRM / Kết nối kênh / Zalo
Màn một màn hình cụ thể, gắn số việc (issue) đang làm Hộp thư — chọn kênh Zalo (#1031)

Mỗi màn có 20 ô: 5 trạng thái × 4 khổ máy.

Cột trái là Cây thư mục: bấm mũi tên để mở / thu một nhánh (app nhớ cho từng dự án), gõ vào Tìm trong cây thì nhánh chứa kết quả tự mở. Tạo Thư mục con ở bất kỳ cấp nào, kéo thư mục hoặc màn sang nhánh khác để chuyển, thả vào khoảng trống để đưa lên cấp 1. Phím F2 đổi tên, Delete đưa vào thùng rác cùng mọi thứ bên trong; Hoàn tác hiện ngay sau đó, và khôi phục từ thùng rác trả về đúng nhánh cũ.

Màn còn thiếu ô nào thì danh sách ghi Chưa vẽ; đủ cả 20 ô thì ghi Đủ 20/20 ô. Ô tìm ở trên lọc theo tên màn, tên khu vực hoặc số issue. Danh sách sắp theo lần sửa gần nhất.

Xem một màn

Bấm vào màn để mở. Các thẻ ở trên:

Thẻ Dùng để
Canvas xem các ô cạnh nhau, cuộn chuột để đi, nút Phóng to / Thu nhỏ
Bảng trạng thái lưới 5 trạng thái × 4 khổ — nhìn một lượt xem màn có đủ chưa
Inspect bấm một phần tử để xem Rộng × cao, Bo góc, Tương phản chữ trên nền và tên token màu đang dùng. Màu viết cứng (không theo bộ màu) hiện cảnh báo Ngoài token
Ghi chú ghi chú gắn vào một phần tử (xem phần dưới)
Phiên bản dòng thời gian các bản đã chụp, đặt tên, khôi phục
So sánh đặt hai phiên bản cạnh nhau, tô phần tử thêm / xoá / sửa / dời chỗ
Trình chiếu đi qua các bảng theo liên kết như người dùng bấm thật (Esc thoát · ← → chuyển bảng · H hiện vùng bấm)
Vector vẽ hình: Pen, sửa điểm, chữ nhật, elip, gộp / cắt hình, xuất SVG

Sửa tay

Phóng một bảng rồi bấm Sửa tay. Bấm chọn phần tử, kéo để dời, kéo góc để đổi cỡ, bấm đúp vào chữ để sửa chữ, đổi màu bằng ô Tìm token (gõ primary, ink, warning…). Thả tay mới lưu; ⌘Z (Windows: Ctrl+Z) lùi thao tác của bạn, không lùi phần agent đang vẽ.

Phần tử agent đang sửa hiện nhãn Node bị khoá — đợi agent xong hoặc nhắn agent ở ô ghi chú bên dưới.

Nhập bản vẽ có sẵn

Có bản vẽ ở chỗ khác thì đưa vào NEXTCORE DESIGN, không cần vẽ lại:

Mỗi tệp nhập riêng trong hàng đợi, có Tiến độ nhập và nút dừng / tiếp. Một tệp lỗi không làm hỏng cả lô: dòng đó ghi lý do. Nhập lại cùng tệp thì cập nhật màn đã có, không tạo bản trùng.

Tệp .fig, .sketch, .xd, .pdf, .zip có mật khẩu và link Figma / claude.ai chưa đọc trực tiếp được: app ghi rõ lý do và gợi ý xuất sang SVG hoặc HTML trước.

Xuất và xem trên thiết bị khác

Bấm Xuất bản vẽ (Ctrl+Shift+E) ở đầu màn hoặc đầu thư mục:

Định dạng Ghi chú
PNG · JPG · WebP mật độ 1×, 2×, 3×; nền sáng, tối hoặc cả hai
SVG mỗi ô một tệp
PDF nhiều trang, mỗi trang đúng khổ của ô
HTML + tokens.css mở bằng trình duyệt không cần mạng
Gói .ncd chuyển sang máy NextCore Browser khác; nhập lại giữ nguyên màn và lịch sử

Bật Gom thành một tệp .zip nếu cần gửi một tệp. Xuất xong, kéo một dòng trong Tệp đã xuất ra Explorer, Zalo hay Gmail để gửi luôn.

Xem trực tiếp mở một cửa sổ riêng tự cập nhật khi bạn hoặc agent sửa (dưới nửa giây). Xem trên điện thoại hiện mã QR: điện thoại cùng mạng Wi-Fi quét bằng camera là xem được. Đóng hộp QR thì máy ngừng cho mạng nội bộ xem.

Gửi bản vẽ cho người không cài NextCore Browser: bấm Tạo link xem ở đầu màn hoặc đầu thư mục.

Link có dạng homestaynextcore.org/xem/<mã>. Link không khoá phiên bản tự cập nhật trong khoảng một phút sau khi màn đổi. Danh sách Link đã tạo ghi lượt xem, lần xem cuối; Thu hồi làm link ngừng mở ngay.

Ghi chú và giao việc cho agent

Trong thẻ Ghi chú, chọn phần tử (hoặc tìm theo tên ở ô Tìm phần tử theo tên…) rồi viết. Ghi chú bám theo phần tử kể cả khi phần tử bị dời chỗ.

Viết @agent trong ghi chú để giao việc: agent đọc ghi chú, sửa bản vẽ, trả lời ngay trong luồng rồi đánh dấu đã xử lý. Đầu màn hiện ai đang ở màn này (bạn, agent khác, máy khác).

Phiên bản: D1, D2

Trước khi đổi bố cục, chụp một phiên bản và đặt tên, ví dụ D1 · Hộp thư (#1031). Bản mới chụp tên D2 · …. Bản cũ không bị ghi đè: vào So sánh để thấy khác nhau ở đâu, hoặc khôi phục — app tự chụp bản «trước khôi phục» để bạn quay lại được.

Nhiều máy, nhiều agent

Dành cho agent (MCP)

Agent dùng bộ công cụ ncd_* trong máy chủ MCP của NextCore Browser, không cần mở giao diện:

Việc Công cụ
Tìm dự án / màn, tra tên token có thật ncd_cay
Tạo dự án, thư mục lồng (theo đường dẫn a/b/c), màn; chuyển, xoá, khôi phục ncd_du_an · ncd_man
Vẽ, đọc cây có ref, sửa theo ref ncd_ve · ncd_doc · ncd_sua
Phiên bản, so sánh ncd_phien_ban
Ghi chú ncd_ghi_chu
Kiểm màn (thiếu trạng thái, tràn ngang, tương phản, vùng chạm) ncd_kiem
Xuất PNG / SVG / HTML để đính vào issue ncd_xuat
Giữ / nhả khoá phần tử khi nhiều agent cùng sửa ncd_khoa
Tạo, liệt kê, thu hồi link xem ncd_link_xem

Link một màn trên issue có dạng ncd://<mã màn>. Danh sách đầy đủ tham số: MCP.

Bài này có giúp được bạn không?