Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Nghệ thuật thuật toán (Generative art với p5.js)

Kỹ năng viết một 'tuyên ngôn thuật toán' rồi hiện thực hóa thành tác phẩm p5.js tương tác với random theo seed.

Thiết kế · UITrung cấp★ 246⑂ 44Điểm AI 9/10Cập nhật lần cuối: 16 thg 7, 2026

Làm được gì

  • Từ một yêu cầu ngắn, Claude viết trước triết lý thuật toán (.md) dài 4–6 đoạn: tên trào lưu, cách biểu đạt qua noise, particle, vector field, đệ quy...
  • Sau đó hiện thực hóa bằng code p5.js và xuất ra một file HTML tự chứa (p5.js lấy từ CDN), mở trực tiếp trong trình duyệt là chạy được.
  • Bắt buộc dùng random có seed (kiểu Art Blocks): cùng seed luôn cho cùng kết quả. Sidebar có Prev/Next/Random/Jump seed, thanh trượt tham số, nút Regenerate/Reset/Download PNG.
  • Yêu cầu đọc templates/viewer.html trước, giữ nguyên layout và branding, chỉ thay phần thuật toán cùng bộ điều khiển tham số.

Phù hợp với ai

  • Người yêu thích creative coding, generative art, muốn vẽ bằng code
  • Designer/developer cần hình nền trừu tượng cho web, slide, bản in hoặc NFT
  • Người muốn có demo tương tác để kéo thanh trượt và khám phá biến thể

Ví dụ sử dụng

  1. "Tạo flow field từ Perlin noise trông như luồng gió hữu cơ" → file triết lý 'Organic Turbulence' + viewer HTML có slider số hạt và noise scale.
  2. "Mẫu kết tinh kiểu Voronoi, cho tôi xem seed từ 1 đến 100" → một artifact duy nhất có điều hướng seed và chế độ gallery.
  3. "Cây đệ quy L-system, đơn sắc trắng đen" → tác phẩm không có color picker, chỉ có tham số góc phân nhánh và độ sâu đệ quy.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/lingxling/awesome-skills-cn/HEAD/anthropics-skills/skills/algorithmic-art/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục anthropics-skills/skills/algorithmic-art từ repo GitHub lingxling/awesome-skills-cn vào ~/.claude/skills/lingxling-algorithmic-art/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/lingxling/awesome-skills-cn.git && mkdir -p ~/.claude/skills && cp -r awesome-skills-cn/anthropics-skills/skills/algorithmic-art ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở Terminal.
  2. Tải repo: git clone https://github.com/lingxling/awesome-skills-cn.git
  3. Tạo thư mục kỹ năng: mkdir -p ~/.claude/skills
  4. Copy toàn bộ thư mục kỹ năng (gồm cả templates): cp -r awesome-skills-cn/anthropics-skills/skills/algorithmic-art ~/.claude/skills/
  5. Kiểm tra ls ~/.claude/skills/algorithmic-art/templates phải thấy viewer.html và generator_template.js; thiếu file này kỹ năng sẽ không chạy đúng.
  6. Khởi động lại Claude Code, rồi yêu cầu kiểu "tạo generative art bằng code" để kích hoạt kỹ năng.
  7. Mở file HTML kết quả bằng trình duyệt và dùng slider/nút seed để khám phá các biến thể.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT