Trước đây, Claude có Artifacts cho phép tạo code và preview ngay trong chat. Giờ cộng đồng đang tận dụng Artifacts như các playground HTML/JS/CSS tương tác thực sự, nơi bạn có thể click, drag-drop, toggle, chỉnh sửa trực tiếp… và gần đây càng mạnh hơn nữa nhờ Claude Skills – trong đó có nhiều skill được thiết kế riêng để tạo playground cho Claude Code.
Playground Skills là gì?
- Đây là các Claude Skills mà bạn có thể cài đặt và dùng trong Claude Code, giúp Claude hành xử như một chuyên gia cho từng workflow cụ thể.
- Mỗi skill thường là một “gói” gồm prompt/instruction chuyên biệt, metadata (YAML/markdown) và đôi khi kèm code, giúp Claude tạo ra những playground/Artifacts tương tác dành riêng cho mục đích cụ thể.
- Đã xuất hiện nhiều marketplace bên thứ ba để bạn browse và cài Claude Skills từ cộng đồng (tương tự extension store), ví dụ như SKILLS.pub, ClaudeSkills.ai hay các skill stack/marketplace tự build.
Một số ví dụ kiểu playground/skill siêu đỉnh đang được chia sẻ
Project Discovery Playground
Một skill/playground dạng “project discovery”, nơi Claude phỏng vấn bạn về ý tưởng project → sinh ra diagram kiến trúc, tech stack (Next.js, Node, Postgres...), toggle features on/off, gán team member, visualize requirements. Kiểu artifact/prototype này cực hợp để pitch ý tưởng cho client hoặc planning team, và cộng đồng đang build rất nhiều artifact kiến trúc/prototype tương tự.Idea Generator cho Playground
Các skill chuyên để generate ý tưởng playground mới: ví dụ generator cho music mood board, pipeline visualizer, chaotic music concepts… với các control như dial để chỉnh “mức độ weird”, complexity, practicality. Đây là pattern phổ biến trong skill marketplace: dùng một skill để liên tục sinh ra ý tưởng artifact/playground mới cho sáng tạo hoặc demo.Logo/Design Variations
Claude có thể tạo hàng loạt biến thể logo, UI mockup với animation, gradient, style khác nhau trong một artifact HTML/CSS/JS hoặc React component, cho phép bạn xem và chỉnh trực tiếp trong giao diện Artifacts. Kiểu skill/design playground này đang được dùng nhiều cho rapid prototyping UI/UX, brand concept, landing page, v.v.-
Cộng đồng bắt đầu build plugin & workflow xung quanh playground
- Có dev tạo nút dạng “Send to Claude” ngay trong HTML/ứng dụng được render từ Artifact, để chỉnh sửa playground và tự động gửi prompt/ngữ cảnh ngược về Claude mà không cần copy–paste thủ công: claude-artifact-runner
- Với Model Context Protocol (MCP), bạn có thể dựng server riêng để sync hai chiều gần như realtime giữa playground và Claude: cập nhật trạng thái/app bên ngoài, nhận phản hồi/model output và đẩy lại vào UI. Điều này mở ra khả năng build các workflow phức tạp kiểu “live prototyping” với dữ liệu và tool bên ngoài.
Tại sao tính năng này “heat” đến vậy?
- Biến Claude thành công cụ prototyping siêu nhanh: không chỉ code khô, mà là web app, component, dashboard, tool và interactive UI/UX chạy ngay trong Artifacts, bạn sửa code tới đâu, xem kết quả tới đó.
- Skills dễ share và tái sử dụng, cộng thêm các marketplace bên thứ ba đang mọc lên, nên số lượng skill/playground sáng tạo tăng rất nhanh và có xu hướng “nổ tung” thành hệ sinh thái.
- Mở ra cách tương tác mới với AI: không chỉ text/code trong khung chat, mà còn drag-drop, visualize, tweak thông số, thử nghiệm trực tiếp trên artifact, giống như vừa chat vừa dùng một IDE/design tool ngay trong trình duyệt.
Nếu bạn làm product, dev, designer hay chỉ thích vọc AI – nhất định nên chơi thử Artifacts + Claude Skills, đặc biệt là các playground tương tác trong Claude Code.
Top comments (0)