Chuyển bản vẽ về NextCore Design
Đưa bản vẽ cũ từ Penpot, artifact claude.ai, tệp HTML hay SVG vào NEXTCORE DESIGN, đổi màu viết tay sang token, xem đủ sáng và tối, chấm độ giống bản gốc.
Làm gì
Bạn đang có bản vẽ giao diện ở chỗ khác: tệp Penpot, artifact trên claude.ai, tệp .html hoặc .svg xuất từ công cụ vẽ.
Trang này chỉ cách đưa chúng vào NEXTCORE DESIGN (NCD) để agent đọc và sửa tiếp bằng MCP ncd_*,
mà bản trong NCD vẫn giống bản gốc và dùng đúng bộ token màu của bạn.
Bản gốc được giữ nguyên, chỉ đọc. Mọi sửa đổi nằm trong NCD.
Khi nào dùng
| Bản vẽ đang ở | Đưa vào NCD bằng |
|---|---|
| Penpot | Dán link chia sẻ Penpot hoặc kéo tệp .penpot vào NCD. Mỗi tệp thành một bản design, trang thành thư mục, bảng thành màn |
| SVG / PNG xuất từ Penpot, Figma | Kéo thả vào NCD, hoặc agent gọi ncd_import với thư mục chứa tệp |
Tệp .html tự đứng |
Kéo thả, hoặc ncd_import. Phông Google được nạp như lúc vẽ |
| Artifact claude.ai | Dán link artifact vào NCD, hoặc agent đọc artifact rồi gửi từng ô bằng ncd_import_html |
| Ảnh chụp màn hình | Vào làm ảnh tham chiếu; agent vẽ lại bằng ncd_draw (ảnh không có cấu trúc để sửa màu) |
Bắt đầu nhanh
Giao agent một câu, ví dụ trong NEXTCORE TERMINAL:
Chuyển khu bản vẽ «Cài đặt › Khởi động cùng Windows» vào NEXTCORE DESIGN: kiểm xem đã có màn chưa, nhập nếu chưa,
đổi màu viết tay sang token, xuất sáng và tối, chấm SSIM so bản gốc, gửi link xem.
Các bước
- Kiểm xem đã có chưa. Mở NCD, tìm theo tên khu hoặc số issue (agent:
ncd_tree). Bản Penpot nhập bằng link thường đã có sẵn; nhập lại sẽ tạo màn trùng. - Nhập những gì còn thiếu (bảng ở mục trên). Mỗi tệp có dòng tiến độ riêng; với SVG và HTML, NCD chấm độ giống bản gốc (SSIM) cho từng bảng.
- Chụp phiên bản «Trước» (agent:
ncd_version) để có cặp trước / sau. - Soát (agent:
ncd_check): màu viết tay, tên màn, trạng thái còn thiếu. Đổi màu viết tay sang token--ds-*. - Xuất sáng và tối (agent:
ncd_export, thêmdark: true) và mở ảnh ra xem. Chữ chìm ở chế độ tối thường do nền khung gốc chưa gán token. - Chấm độ giống so với bản gốc. Từ 0,95 trở lên là đạt.
- Tạo link xem cho từng màn và gửi người cần duyệt.
Kiểm kết quả
| Tiêu chí | Đạt khi |
|---|---|
| Độ giống bản gốc (SSIM) | ≥ 0,95 mỗi bảng |
| Màu | 0 giá trị viết tay trong ncd_check |
| Sáng và tối | Ảnh xuất không có chữ chìm, không tràn ngang |
| Tên | Thư mục «NN Tên», màn «NN-01 Tên» |
| Link xem | Mở được khi chưa đăng nhập |
Ví dụ thật: một khu 3 bảng chuyển từ Penpot đạt SSIM 0,9881 · 0,9776 · 0,9874, không còn màu viết tay, sáng và tối đều đọc được.
Lỗi hay gặp
| Hiện tượng | Nguyên nhân | Cách xử lý |
|---|---|---|
| Có hai màn giống nhau sau khi nhập | Khu đã được nhập từ link Penpot, rồi lại nhập SVG cùng khu | Giữ màn trong bản design Penpot, đưa bản trùng vào thùng rác |
| Đường ngăn đen đậm, chữ đen trên nền tối | Màu được ghép với token có cùng giá trị nhưng sai vai trò | Chữ dùng --ds-ink, đường ngăn và viền dùng --ds-hairline |
| Chế độ tối vẫn nền trắng | Khung gốc của bảng chưa có nền token | Gán --ds-surface cho khung gốc |
| Vòng focus quanh nút biến mất | Viền canh ngoài trên Penpot thành viền trong | Thêm một khung vòng riêng bên ngoài |
| Chấm SSIM thấp bất thường, chữ có chân | Bản gốc SVG nạp phông từ máy chủ Penpot cần đăng nhập | Chấm bằng bản gốc đã đổi nguồn phông sang Google Fonts |
| Agent sửa xong nhưng màn không đổi | Lệnh sửa gửi sai tên trường | Agent đọc lại màn (ncd_read) sau lô sửa đầu tiên |
Liên quan
- NEXTCORE DESIGN: nhập, thư mục, xuất và link xem.
- NEXTCORE TERMINAL: giao việc cho agent.