Tất Cả Những Gì Tôi Đã Xây Dựng Với Claude Artifacts Trong Một Tuần

Claude Artifacts — Công Cụ Tạo App Tương Tác Trong Vài Phút

Simon Willison, một trong những nhà phát triển và blogger kỹ thuật được theo dõi nhiều nhất trong cộng đồng AI, đã dành một tuần để khám phá Claude Artifacts — tính năng cho phép tạo ứng dụng web tương tác ngay trong giao diện Claude. Kết quả? 14 dự án hoàn chỉnh, hầu hết chỉ mất dưới 5 phút để hoàn thành.

Bài viết này tổng hợp những dự án thực tế nhất, cùng nhận xét về cách Artifacts thay đổi quy trình làm việc của developer và người dùng không chuyên kỹ thuật.

Claude Artifacts Là Gì?

Claude Artifacts là tính năng cho phép Claude tạo ra ứng dụng web tương tác bằng HTML, CSS và JavaScript, hiển thị ngay trong cửa sổ Claude — không cần copy code ra ngoài, không cần setup môi trường phát triển. Người dùng có thể thấy kết quả ngay lập tức và yêu cầu sửa đổi bằng ngôn ngữ tự nhiên.

Willison mô tả đây là "công cụ đáng ngạc nhiên hữu ích" cho việc tạo các single-page application. Ông đặc biệt ấn tượng với khả năng iterate nhanh: thay vì viết code, debug, chạy lại, chỉ cần nói "làm nút to hơn" hay "thêm bộ đếm thời gian."

14 Dự Án Thực Tế Từ Một Tuần Sử Dụng

Nhóm 1: Công Cụ Thực Dụng Hàng Ngày

1. URL-to-Markdown Converter
Sử dụng Jina Reader API để chuyển đổi bất kỳ URL nào thành Markdown — đặc biệt hữu ích trên thiết bị di động khi muốn trích xuất nội dung để đưa vào các prompt khác. Willison dùng cái này thường xuyên nhất trong tuần.

2. QR Code Decoder
Xây dựng trong "vài giây với prompt tối thiểu." Upload ảnh QR code → nhận URL ngay lập tức. Đơn giản nhưng cực kỳ tiện dụng.

3. YAML-to-JSON Converter
Công cụ khám phá cú pháp: paste YAML vào, nhận JSON ra — giúp hiểu cấu trúc dữ liệu khi học các định dạng mới.

4. Phonetic Alphabet Converter
Chuyển chữ cái thành ký hiệu bảng chữ cái phonetic (NATO) cho các cuộc gọi radio HAM. Ví dụ: "CLAUDE" → "Charlie Lima Alpha Uniform Delta Echo."

Nhóm 2: Công Cụ Debug & Khám Phá

5. Clipboard Viewer
Hiển thị tất cả format đang có trong clipboard của trình duyệt — hữu ích khi debug các vấn đề copy-paste phức tạp giữa ứng dụng.

6. SQLite WASM Interactive Demo
Demo tương tác để khám phá SQLite chạy hoàn toàn trong trình duyệt qua WebAssembly. Willison dùng để giải thích khái niệm cho người khác.

7. Extract URLs Tool
Parse HTML và trích xuất tất cả URL — dùng để phân tích cấu trúc liên kết của trang web.

Nhóm 3: Demo & Giải Thích Khái Niệm

8. Pyodide Python REPL
Python REPL chạy hoàn toàn trong trình duyệt qua Pyodide — demo trực quan về khả năng Python-in-browser mà không cần setup bất kỳ thứ gì.

9. Photo Camera Settings Simulator
Mô phỏng tương tác các cài đặt máy ảnh (ISO, khẩu độ, tốc độ màn trập) để giải thích exposure triangle cho người học nhiếp ảnh.

10. LLM Pricing Calculator
So sánh chi phí các mô hình LLM với preset sẵn cho các mô hình phổ biến. Input token count → output chi phí ước tính.

Nhóm 4: Dự Án Phức Tạp Hơn

11. OpenAI Audio Tool
Đây là dự án ấn tượng nhất: công cụ thu âm microphone và gửi lên OpenAI Audio API để transcribe. Tổng thời gian xây dựng: 21 phút qua hai lần iterate. Willison ghi nhận đây là "ứng dụng thực sự phức tạp" so với các công cụ còn lại.

12. YAML-to-JSON Converter (nâng cao)
Phiên bản nâng cao với syntax highlighting và validation.

13-14. Hai Công Cụ Khám Phá Dữ Liệu
Các công cụ xử lý và visualize dữ liệu theo yêu cầu tức thì — không tiết lộ chi tiết nhưng Willison nhắc đến như ví dụ về "data exploration on-the-fly."

Quy Trình Làm Việc Thực Tế Của Willison

Willison chia sẻ ông dùng Artifacts hàng ngày cho bốn mục đích chính:

1. Khám phá do tò mò: "Điều gì sẽ xảy ra nếu tôi làm X?" — thử nghiệm nhanh không cần setup môi trường
2. Prototyping nhanh: Tạo demo cho ý tưởng trong vài phút, chia sẻ link ngay
3. Nghiên cứu thư viện: "Claude, tạo cho tôi demo tương tác về thư viện X" — hiểu API nhanh hơn đọc docs
4. Giải quyết vấn đề tức thì: Cần công cụ gì đó ngay bây giờ → mô tả → có ngay trong 2 phút

Điểm Hạn Chế Willison Nhận Thấy

Willison không che giấu những giới hạn của Artifacts ở thời điểm ông viết bài (tháng 10/2024):

• Không thể gọi API trực tiếp từ Artifacts (cross-origin restrictions)
• Không thể submit form đến server bên ngoài
• Không thể link đến trang ngoài

Điều thú vị là nhiều hạn chế này đã được Anthropic giải quyết trong các bản cập nhật sau đó. Phiên bản Artifacts hiện tại (2025-2026) đã hỗ trợ MCP Integration cho phép kết nối với Asana, Google Calendar, Slack và nhiều dịch vụ khác. Đồng thời có Persistent Storage (20MB/artifact) để lưu dữ liệu xuyên phiên.

Tại Sao Artifacts Quan Trọng Với Người Không Biết Code?

Điều Willison không nhấn mạnh nhiều (vì ông là developer) nhưng thực sự quan trọng hơn với đại đa số người dùng: Artifacts xóa bỏ rào cản kỹ thuật.

Một marketer muốn tạo calculator cho khách hàng, một giáo viên muốn tạo game học toán, một chủ cửa hàng muốn có dashboard theo dõi đơn hàng — trước đây những người này cần thuê developer hoặc học code. Giờ họ chỉ cần mô tả bằng tiếng Việt những gì họ cần.

Xem thêm hướng dẫn tạo code và tài liệu với Claude Artifacts để bắt đầu ngay.

Insight Từ Thực Tiễn: Những Loại Công Cụ Phù Hợp Nhất

Dựa trên 14 dự án của Willison và các trường hợp sử dụng phổ biến từ cộng đồng, Artifacts phát huy tốt nhất với:

• Converter đơn giản: URL → Markdown, YAML → JSON, text → format khác
• Calculator và estimator: Chi phí, kích thước, thời gian
• Interactive demo: Giải thích khái niệm kỹ thuật bằng ví dụ sống động
• Mini-game và quiz: Học tập tương tác
• Dashboard cá nhân: Theo dõi dữ liệu đơn giản
• Prototype UI: Mockup nhanh trước khi viết code thật

Những gì Artifacts chưa làm tốt: ứng dụng cần xác thực người dùng, database phức tạp, real-time sync với nhiều người dùng đồng thời.

Artifacts Trong Năm 2025-2026: Những Gì Đã Thay Đổi

Willison viết bài này vào tháng 10/2024. Kể từ đó, Artifacts đã phát triển đáng kể. Những hạn chế ông nhắc đến — không thể gọi API trực tiếp, không thể submit form ra ngoài — đã được giải quyết qua:

• MCP Integration (2025): Artifacts giờ có thể kết nối với external services như Asana, Google Calendar, Slack qua Model Context Protocol
• Persistent Storage (2025): Artifacts lưu dữ liệu xuyên phiên — lên đến 20MB per artifact. Inventory tracker giờ nhớ tồn kho của bạn giữa các lần dùng
• AI-powered Artifacts: Nhúng AI capabilities bên trong Artifact — người nhận dùng ngay không cần API key của riêng họ
• Embeddable Artifacts: Nhúng trực tiếp vào website ngoài qua iframe — từ tool nội bộ thành widget public

Artifacts đã tiến xa từ "single-page HTML apps" sang "connected mini-applications" thực sự có persistence và external connectivity.

Học Gì Từ Methodology Của Willison

Điều làm cho bài viết của Willison valuable không chỉ là danh sách 14 dự án — mà là methodology ông áp dụng:

Dùng Artifacts cho "curiosity tax" thấp: Willison tạo nhiều tools chỉ để thỏa mãn tò mò kỹ thuật — "điều gì xảy ra nếu tôi làm X?" Với thời gian tạo dưới 5 phút, chi phí thử nghiệm gần như bằng không. Đây là thay đổi tư duy quan trọng: thay vì "có đáng setup không?", câu hỏi trở thành "tại sao không thử?"

Iterate thay vì perfect ngay từ đầu: OpenAI Audio tool (21 phút) trải qua hai lần iterate. Ông không cố tạo hoàn hảo từ lần đầu — bắt đầu với version working, sau đó cải thiện dựa trên test thực tế. Mỗi lần iterate chỉ mất vài phút thêm.

Document sau khi thử: Việc ông viết bài sau một tuần và list từng project tạo ra knowledge base có giá trị. Bài viết này đã trở thành một trong những tài liệu tham khảo được chia sẻ nhiều nhất về Claude Artifacts.

Use Cases Phù Hợp Cho Người Dùng Việt Nam

Dựa trên 14 dự án của Willison và ngữ cảnh người dùng Việt Nam, đây là những loại Artifacts đặc biệt có giá trị:

Tools tiếng Việt đặc thù: Chuyển đổi giữa các hệ thống encoding (Unicode, TCVN3, VNI), kiểm tra dấu chính tả, hay converter format địa chỉ Việt Nam.

Calculator nghiệp vụ cụ thể: Tính lãi suất vay ngân hàng theo sản phẩm cụ thể, tính thuế GTGT, tính lương theo thang bảng lương Việt Nam — những thứ quá cụ thể để có app sẵn nhưng quá cần thiết để làm thủ công mỗi lần.

Dashboard cho SME: Thay vì Excel phức tạp, tạo Artifact hiển thị metrics quan trọng với chart tương tác — phù hợp với doanh nghiệp nhỏ không có data team chuyên nghiệp.

Tools học ngoại ngữ cá nhân hóa: Flashcard tiếng Anh tích hợp ví dụ từ lĩnh vực nghề nghiệp của bạn, quiz ngữ pháp với giải thích bằng tiếng Việt — hiệu quả hơn các app generic.

Kết Luận

Thử nghiệm một tuần của Simon Willison không chỉ là showcase ấn tượng — nó là bằng chứng thực tế rằng Claude Artifacts đã đủ trưởng thành để trở thành công cụ làm việc hàng ngày, không chỉ là "demo vui vẻ." Với developer như Willison, nó tiết kiệm hàng chục phút mỗi ngày cho các công cụ nhỏ thường bị bỏ qua vì "tốn công setup." Với người không biết code, nó mở ra cả một danh mục khả năng hoàn toàn mới.

Bài học quan trọng nhất: đừng chờ đến khi có dự án lớn mới dùng Artifacts. Hãy bắt đầu với bất kỳ vấn đề nhỏ nào bạn gặp hôm nay — cần convert gì đó, visualize dữ liệu, hay chỉ muốn thử nghiệm một ý tưởng trong vài phút. Chi phí của việc thử là cực thấp, và bạn có thể xây được điều gì đó thực sự hữu ích.

Nguồn tham khảo: Simon Willison — Everything I Built with Claude Artifacts This Week (Oct 2024)