Tạo hình đẳng phối cảnh tương tác với Claude Skill iso-figure

iso-figure làm gì

iso-figure là một skill dành cho Claude, có khả năng tạo các hình minh họa đẳng phối tương tác từ mô tả bằng ngôn ngữ tự nhiên. Bạn chỉ cần nêu tên một vật thể, skill sẽ tạo một tệp HTML duy nhất chứa hình vẽ đẳng phối bằng nét mảnh trên một mặt phẳng được đánh số.

Các bộ phận của vật thể minh họa có thể phản hồi khi được nhấn. Tùy theo vật thể, thao tác tương tác có thể tạo ra văn bản, một con số hoặc một nốt nhạc. Nếu vật thể không có bộ phận phù hợp để nhấn, skill sẽ chọn một chủ thể khác.

Để xem ví dụ, hãy thử bộ tổng hợp âm thanh để bàn hoặc máy tính bỏ túi. Bạn cũng có thể mở các tệp trong thư mục examples của kho lưu trữ.

Cách hoạt động của các hình minh họa được tạo

Đầu ra sử dụng SVG thuần túy và không cần thư viện bên ngoài. Khoảng 15 dòng mã phép chiếu sẽ biến đổi mỗi mặt của một khối hộp thành một matrix() SVG. Nhờ đó, các hình chữ nhật, văn bản và đường dẫn thông thường được vẽ phẳng vẫn có thể hiển thị trên đúng mặt phẳng đẳng phối.

Phép chiếu cũng hỗ trợ văn bản và các góc bo tròn. Thứ tự vẽ kiểm soát chiều sâu, giúp các phần tử xuất hiện ở phía trước hoặc phía sau nhau như mong đợi.

Tương tác được điều khiển bởi một đối tượng trạng thái duy nhất và một hàm render(). CSS xử lý chuyển động, giúp tệp được tạo hoàn toàn độc lập nhưng vẫn cho phép các bộ phận chuyển động hoặc phản hồi thao tác nhập.

Cài đặt skill

Cài đặt bằng Claude Code

Cách thiết lập Claude Code đơn giản nhất là thêm kho lưu trữ dưới dạng marketplace rồi cài đặt plugin:

/plugin marketplace add MrBongoC/ai-iso-skill
/plugin install iso-figure@ai-iso-skill

Cài đặt thủ công

Nếu muốn sao chép thư mục skill vào thư mục skill Claude cục bộ, hãy clone kho lưu trữ rồi sao chép thư mục iso-figure:

git clone https://github.com/MrBongoC/ai-iso-skill.git
cp -r ai-iso-skill/skills/iso-figure ~/.claude/skills/

Sử dụng trên Claude.ai

Đối với Claude.ai, hãy tải iso-figure.skill từ bản phát hành mới nhất rồi tải tệp lên trong phần cài đặt skill.

Tạo hình minh họa đầu tiên

Sau khi cài đặt, hãy yêu cầu Claude tạo một vật thể có các bộ phận có thể nhấn. Nêu chủ thể và mô tả tương tác bạn muốn thấy.

iso figure of a kitchen timer with minute buttons and a display that counts down

Lời nhắc này xác định một vật thể cụ thể, bổ sung các nút tương tác và chỉ định hành vi của màn hình. Claude có thể sử dụng những chi tiết đó khi quyết định trạng thái và logic kết xuất của hình minh họa.

Bạn cũng có thể yêu cầu kiểu tương tác giống công tắc:

fig 6, a wall light switch that turns a lamp on and off

Cụm từ fig 6 giúp chỉ định cách trình bày trên mặt phẳng được đánh số, còn mô tả công tắc xác định một bộ phận có thể nhấn rõ ràng và kết quả của thao tác đó.

Mẹo viết lời nhắc

• Nêu tên một vật thể cụ thể. Đồng hồ hẹn giờ, máy tính, bộ tổng hợp âm thanh và công tắc đèn có các bộ phận dễ nhận biết để vẽ và nhấn.
• Mô tả các nút điều khiển. Đề cập đến các nút, phím, công tắc hoặc bộ phận khác cần phản hồi thao tác nhập.
• Mô tả kết quả. Cho biết việc nhấn một bộ phận sẽ tạo ra văn bản, một con số, một nốt nhạc hay hành vi khác được khái niệm này hỗ trợ.
• Thêm màn hình hoặc đầu ra khi hữu ích. Bộ đếm ngược, phép tính hoặc dạng sóng thay đổi sẽ tạo ra kết quả trực quan cho tương tác.
• Chọn vật thể khác nếu không có gì để nhấn. Skill được thiết kế xoay quanh các hình minh họa tương tác, vì vậy những chủ thể hoàn toàn tĩnh sẽ không phù hợp bằng.

Hướng dẫn nâng cao

Kiểm tra hướng dẫn của skill

Kho lưu trữ bao gồm toàn bộ quy trình trong SKILL.md. Hãy đọc tệp này khi cần tìm hiểu về nhân kết xuất, quy trình tạo hoặc các quy tắc chi phối phong cách hình ảnh.

Tư duy theo mặt phẳng và thứ tự vẽ

Vì hình minh họa được tạo từ các mặt phẳng SVG, mỗi bề mặt hiển thị phải được đặt trên mặt đẳng phối phù hợp. Mã phép chiếu áp dụng matrix() SVG cần thiết, còn thứ tự vẽ quyết định bề mặt nào che lên bề mặt nào. Điều này đặc biệt quan trọng đối với các nút điều khiển nhiều lớp và những bộ phận nằm phía trên phần đế.

Giữ trạng thái tương tác rõ ràng

Thiết kế được tạo sử dụng một đối tượng trạng thái và một hàm render(). Khi tinh chỉnh kết quả, hãy mô tả rõ thay đổi trạng thái mong muốn, chẳng hạn như một giá trị thay đổi sau khi nhấn nút hoặc một công tắc chuyển đổi giữa trạng thái bật và tắt.

Mở kết quả dưới dạng tệp độc lập

Đầu ra là một tệp HTML duy nhất, giúp bạn dễ dàng mở cục bộ trong trình duyệt hoặc chia sẻ dưới dạng ví dụ độc lập. Vì hình vẽ sử dụng SVG và CSS thuần túy thay vì thư viện, dự án không yêu cầu cài đặt thêm dependency nào.

Kết luận

iso-figure biến một prompt Claude ngắn thành hình minh họa đẳng cự tương tác, nhỏ gọn. Cài đặt qua Claude Code, sao chép thủ công skill hoặc tải tệp bản phát hành lên Claude.ai. Để đạt kết quả tốt nhất, hãy chọn một vật thể có các bộ phận dễ nhấn và mô tả kết quả mong muốn của từng tương tác.

Dự án được phát hành theo Giấy phép MIT.