Lời khuyên của Claude cho tác phẩm 3D

Mặc dù đôi khi tôi cảm thấy không thoải mái về điều đó nhưng Claude Code là một công cụ vô giá cho các dự án hiện tại của tôi. Thỉnh thoảng tôi vẫn viết mã bằng NeoVim trên các bit mà tôi quan tâm nhất (CSS, thiết kế và kiến ​​trúc ban đầu như các mẫu API), nhưng giờ đây tôi để hầu hết việc viết mã thực tế vào máy sau khi tôi đã thiết lập xong bộ khung. Điều đó không có nghĩa là tôi nghĩ mã mà nó tạo ra luôn tuyệt vời. Sau đó, tôi thực hiện rất nhiều công việc vệ sinh, mặc dù việc đó được thực hiện thông qua nhiều gợi ý hơn cho Claude. Tôi xem trực tiếp nguồn cấp dữ liệu chỉnh sửa và đã xây dựng kỹ năng đọc nhanh để có thể ngăn chặn Claude theo dõi nó khi nó làm điều gì đó nghịch ngợm.

Điều này thực sự hiệu quả đối với hầu hết các dự án web. Nơi mà tôi nhận thấy Claude vẫn không thể suy luận là trong công việc “hình ảnh” cần có đôi mắt. Nó có thể suy luận khá tốt về CSS và thực hiện tốt công việc hiểu ngôn ngữ thiết kế và lý thuyết màu sắc khi được nhắc, nhưng những nhiệm vụ phức tạp hơn như phân tích không gian trong 3D luôn thất bại. Tuy nhiên, Claude có công cụ tuyệt vời để đọc hình ảnh 2D đơn giản và khi trình bày một tập hợp hình ảnh về không gian 3D từ các góc khác nhau, cùng với ngôn ngữ tham chiếu phù hợp, nó thường có thể tìm ra điều gì đó. Rất nhiều công việc ban đầu của tôi trong Table Slayer và Counter Slayer, cả hai ứng dụng web 3D nặng, đều liên quan đến việc tôi chụp ảnh màn hình theo cách thủ công và nói những câu như "hãy kiểm tra xem, bạn đã làm sai rồi". Phải mất HÀNG GIỜ quay đi quay lại chủ yếu vì tôi là người cần cung cấp ảnh chụp màn hình cho nó.

Giống như hầu hết, tôi nhanh chóng học được rằng khi làm việc với Claude, bạn cần suy nghĩ về “kết quả đầu ra có thể đọc được” khi làm việc với LLM. Đối với hầu hết, đây là một lớp thử nghiệm. Tuy nhiên, trong quá trình trải nghiệm khám phá thiết kế, bạn thường không thực hiện các bài kiểm tra và chỉ cần yêu cầu nó tạo nhiều bản ghi tạm thời. Đối với các dự án 3D, đây có thể là những thứ như định vị và tọa độ. Việc này có hiệu quả ở một mức độ nào đó nhưng tốn nhiều công sức và thường được thực hiện sau khi bạn gặp phải thất bại. Hệ thống CAD có rất nhiều phép hợp và phép trừ. Chỉ vì có một cái hộp ở đó không có nghĩa là nó có thể nhìn thấy được.

Vốn dĩ, Claude không thể đọc được STL. Nó sẽ cho bạn biết điều đó có thể, nhưng sau khi bạn nhận ra rằng nó chỉ đang nói nhảm với bạn về nội dung của tệp nhị phân, bạn sẽ quyết định cài đặt một loạt thư viện Python để xem các tệp. Điều này khá hữu ích khi đọc STL và sẽ cung cấp cho nó cách xoay camera và phóng to ở một số vị trí nhất định, nhưng nó không hữu ích lắm đối với ứng dụng web Three.js khi vấn đề của bạn nằm ở hệ thống CAD khi xây dựng 3D ngay từ đầu.

Để giải quyết những loại vấn đề đó, bạn cần tạo một vòng lặp ngữ cảnh thực để có thể đọc trạng thái của ứng dụng, điều hướng máy ảnh, thêm một số điểm đánh dấu gỡ lỗi và lặp lại. Vòng lặp cốt lõi đang yêu cầu nó tự điều hướng ứng dụng, điều khiển máy ảnh và thêm các điểm đánh dấu trực quan (hãy nghĩ đến các quả cầu màu đỏ để cung cấp bối cảnh vị trí) để tự kiểm tra. Tôi nhận thấy việc tạo ra các loại vòng lặp "xác thực lặp lại" này về cơ bản là để làm việc với Claude. Điều này cho phép nó kiểm tra lại công việc của mình trước khi cho rằng nó đã giải quyết được vấn đề.

Đây là vòng lặp dành cho Counter Slayer.

## Quy trình lặp lại hình học
 
Khi thực hiện các thay đổi về hình học, hãy sử dụng vòng lặp độc lập này để lặp lại mà không cần sự can thiệp của người dùng:
 
### Vòng lặp
 
1. Thực hiện các thay đổi mã đối với hình học (lid.ts, counterTray.ts, box.ts)
2. Tái tạo STL: npx tsx scripts/generate-geometry.ts
3. Xác minh bằng kết xuất: npx tsx scripts/capture-view.ts --angle iso
4. Đọc project.json để biết vị trí và dữ liệu bố cục
5. Kiểm tra nhiều góc độ, phóng to khu vực có vấn đề
6. Nếu chưa đúng quay lại bước 1
7. Khi hài lòng thì thông báo cho người dùng

Claude.md đầy đủ có ở đây và trình bày chi tiết hơn nhưng đây chính là trọng tâm của quy trình làm việc. “Vòng lặp” cung cấp cho nó cách điều hướng ứng dụng bằng playwrite, chọn các đối tượng 3D khác nhau (như khay hoặc hộp), thay đổi máy ảnh, đặt quả cầu màu đỏ lên ứng dụng ở một vị trí nhất định, kiểm tra ảnh chụp màn hình và xem liệu ảnh chụp màn hình đó có phù hợp với yêu cầu hay không. Quan trọng hơn là nó thực hiện điều đó mà không yêu cầu tôi xác nhận.

Ví dụ: đây là công cụ cho phép nó di chuyển xung quanh.

# Góc nhìn từ các góc đặt sẵn
 
npx tsx scripts/capture-view.ts --angle iso
npx tsx scripts/capture-view.ts --angle top
npx tsx scripts/capture-view.ts --angle front
  # Phóng to
 
npx tsx scripts/capture-view.ts --angle left --zoom 3
 
# Vị trí camera tùy chỉnh (tọa độ Three.js Y-up)
 
npx tsx scripts/capture-view.ts --pos "100,80,150" --look-at "0,25,50"
 
# Xuất ra tệp cụ thể
 
 npx tsx scripts/capture-view.ts --angle top --out Mesh-analysis/view-top.png
 
# Xem các mục cụ thể theo ID (chọn mục và đặt chế độ xem phù hợp)
 
npx tsx scripts/capture-view.ts --trayId nrme206 --angle Bottom --zoom 2

Nhìn chung, tôi đã bắt đầu thay đổi suy nghĩ về cách làm việc với Claude. Thay vì mong đợi nó hiểu được yêu cầu của tôi, tôi hầu như luôn xây dựng công cụ trước tiên để cung cấp cho chúng tôi ngôn ngữ chung để thảo luận về dự án. Vòng lặp ảnh chụp màn hình là một cách tuyệt vời để xây dựng ngôn ngữ đó.