1.6 · Artifacts — Sáng tạo tương tác

Mở đầu: Output không chỉ là text

Nếu đồng nghiệp là designer → họ gửi Figma mockup. Nếu là developer → họ gửi 300 dòng code React bạn không đọc được. Nếu là data analyst → họ gửi Excel template.

Rồi bạn phải:

• Mở Figma / code editor / Excel
• Preview / compile / test
• Feedback — "ô này làm nhỏ hơn", "đổi màu chỗ kia"
• Lặp lại 5 lần

Nửa ngày trôi qua.

Giờ thử với Claude + Artifacts. Bạn nói:

Build me a monthly budget tracker: input expenses by category, pie chart breakdown, warning khi over budget.

Và ngay trong chat, Claude mở một cửa sổ riêng → tạo working dashboard có thể dùng ngay. Bạn input số thật → thấy chart update → click "over budget" scenario → thấy warning. Không cần setup, không cần download, không cần compile.

Feedback trực tiếp: "Warning nên màu đỏ đậm hơn. Thêm total income row." → Claude update artifact ngay.

Cuối buổi: bạn download HTML file, nhúng vào website team, hoặc publish link cho bạn bè. 30 phút thay vì nửa ngày.

Đây là Artifacts.

Artifacts là gì?

Artifact = output standalone, interactive, Claude tạo trong một cửa sổ riêng cạnh cuộc trò chuyện.

Thay vì response là đống text với code block dài 300 dòng buried trong chat, bạn thấy content đã rendered, sẵn sàng dùng — một website hoạt động, một interactive chart, một document bạn download ngay.

┌───────────────────────────────────────────────────────────┐
│                                                           │
│   CHAT AREA                      ARTIFACT WINDOW          │
│   ─────────                      ────────────────         │
│                                                           │
│   "Build me a budget             ┌──────────────────┐    │
│    tracker dashboard..."         │                  │    │
│                                  │   [Rendered      │    │
│   Claude: Here's your            │    dashboard     │    │
│   interactive budget tracker:    │    with charts,  │    │
│                                  │    inputs,       │    │
│   [Feedback request]             │    warnings]     │    │
│                                  │                  │    │
│   "Make warning red"             │                  │    │
│                                  │   [Copy] [Down-  │    │
│   Claude: Updated.               │    load] [View   │    │
│                                  │    code] [Share] │    │
│                                  └──────────────────┘    │
│                                                           │
└───────────────────────────────────────────────────────────┘

Claude tự động tạo Artifact khi content đạt các tiêu chí

• Significant và self-contained (thường > 15 dòng)
• Bạn sẽ muốn edit, iterate, hoặc reuse
• Content phức tạp stand on its own không cần surrounding conversation
• Content bạn sẽ muốn reference hoặc dùng sau này

Đây là judgment của Claude. Nếu bạn muốn force tạo artifact: "Create this as an artifact" hoặc "Show me this in an artifact."

6 loại Artifacts phổ biến

1. Documents — file text bạn sẽ export/edit

Use case: "Draft Q4 status report cho CEO (Word format, 2 pages). Include bullets cho 5 dept."

2. Code snippets — working code bạn view, copy, download

Supported languages

Python, JavaScript, TypeScript, Go, Rust, Java, C++, và hầu hết languages.

Use case

"Python script scan folder, find duplicate files theo MD5 hash, output duplicates.csv."

3. HTML pages — complete web pages

HTML + CSS + JavaScript trong 1 file duy nhất. Claude render preview ngay → bạn thấy website hoạt động.

Use case: "Build landing page cho productivity app: hero section, 3 feature boxes, pricing table, CTA button."

4. SVG images — scalable vector graphics

Logos, icons, illustrations, diagrams — render trực tiếp trong artifact window.

Use case: "Create logo cho coffee shop name 'Brew & Books' — minimalist, black + warm brown, combining coffee cup + book icon."

5. Mermaid diagrams — flowcharts, sequences, Gantt, org charts

Describe relationships bằng chữ → Claude render diagram.

Use case: "Flowchart customer onboarding: signup → verify email → choose plan → payment → welcome tour → dashboard."

6. React components — interactive UI với real logic

Không chỉ mockup — actual functionality: calculators, dashboards, games, data visualizations, form validators.

Use case: "React calculator for freelancer hourly rate: input desired annual salary, benefits cost, vacation weeks, utilization rate → output hourly rate + breakdown."

Tạo Artifact đầu tiên

Tạo artifact đơn giản như trò chuyện. Describe cái bạn muốn, Claude decide có render artifact không.

4 ví dụ prompts

Flowchart

Create a flowchart showing our customer onboarding process from signup to first value.

Interactive dashboard

Build an interactive dashboard letting me input monthly expenses by category, show a pie chart breakdown, warn when I'm over budget. Budget limit 8M VND. Categories: ăn uống, đi lại, giải trí, học tập, y tế, nhà ở, linh tinh.

Landing page

Design a landing page cho productivity app 'TaskFlow' — hero với headline + CTA, 3 feature cards, pricing table với 3 tiers (Free / Pro / Team), footer với social links. Tông modern, dùng blue + white palette.

Reusable template

Write a project brief template I can reuse cho new initiatives. Include: problem statement, objectives, success metrics, stakeholders, timeline, risks, resources.

Khi Artifact xuất hiện, bạn có thể

• View different formats: toggle preview (rendered) vs. code (underlying)
• Copy content: click copy icon → dán elsewhere
• Download files: save ra máy với proper extension (.md, .html, .py, .docx, .pptx, .xlsx)
• View code: xem exact code Claude generate

Iterate trên Artifacts

Cũng như chat, Artifacts iterate — nhưng với difference: từng version được save, bạn có thể rollback.

Pattern iterate hiệu quả

1. One change at a time

❌ "Make it blue, bigger, add footer, fix the form validation, và thêm dark mode."

✅ "Change primary color to blue." → review → "Now increase hero text size 20%." → review → ...

Tại sao: Dễ diagnose issue. Dễ rollback. Dễ verify mỗi change worked.

2. Specific feedback

❌ "Make it nicer."

✅ "Increase spacing giữa feature cards. Thêm subtle shadow. Font weight 500 thay vì 400."

3. Build incrementally

• Version 1: basic structure
• Version 2: add interactivity
• Version 3: polish styles
• Version 4: edge cases / error handling

Mỗi version test trước khi move tiếp.

Khi cần request artifact explicit

Đôi khi Claude response với content đáng ra nên artifact nhưng lại trong chat. Chỉ cần bảo:

Please create that as an artifact.

hoặc

Move this into an artifact so I can edit it.

Share & Publish

Sau khi tạo artifact useful, có nhiều options share.

1. Copy / Download (personal use)

Button copy hoặc download ở góc dưới phải artifact window. Lưu về máy để dùng nội bộ.

2. Share trong organization (Claude for Work)

Team và Enterprise users share artifacts nội bộ với colleagues. Shared artifact stays within org, require team authentication.

3. Publish publicly (Free, Pro, Max users)

Publish artifact → ai có link đều access được.

Khi publish:

• Chỉ selected version thành public (chat remains private)
• Anyone view + interact không cần Claude account
• Others có thể "remix" artifact — mở trong Claude conversation của họ, modify, build upon

Cách publish:

1. Click "Share" / "Publish" button góc phải trên artifact
2. Get public URL
3. Bạn có thể unpublish bất cứ lúc nào — quay lại artifact, remove public access

Note: Published artifacts không indexed by search engines (không xuất hiện Google). Chỉ người có link mới tìm được.

Bảng so sánh 3 options

5 Tips để tăng ROI Artifacts

1. Be specific về cái bạn muốn

❌ "Build a budget tracker."

✅ "Build monthly budget tracker: input expenses by 7 categories (ăn, đi lại, giải trí, học, y tế, nhà, linh tinh). Pie chart breakdown. Warning red banner khi tổng > 8M VND. Sticky total row ở đáy."

Specificity level quyết định 60% quality output đầu tiên.

2. Describe end user

"Flowchart này cho new employees onboard" vs. "Flowchart này cho engineering team" → design choices khác nhau:

• New employees: nhiều context, visual cues, simple language
• Engineering: technical terms OK, condensed, decision diamonds cụ thể

3. Iterate incrementally

Mỗi change, test. Đừng dump 10 requests.

4. Request artifacts khi cần

Nếu Claude response substantial content trong chat thay vì artifact → ask: "Create as artifact."

5. Think "reusable template"

Có những thứ bạn sẽ dùng lại — proposal template, meeting recap format, project kickoff checklist. Build as artifact một lần → publish / save → reuse hàng chục lần.

Ví dụ theo ngành

Sales Manager

Artifact: Interactive ROI calculator cho prospects

Prompt:

React component: ROI calculator cho B2B software. Inputs: current headcount, hourly cost, hours saved/week per person. Outputs: annual savings, 3-year ROI, payback period. Visualize với bar chart (current cost vs. cost after).

Value: Share link cho prospect trong email. Họ self-service calculate. Conversion tăng — họ commit number trước call.

Content Marketer

Artifact: Content calendar template (Excel)

Prompt:

Excel workbook cho content calendar 2026: 3 sheets. Sheet 1 — Master Calendar (columns: Date, Channel, Title, Status, Author, Keywords). Sheet 2 — Channel Breakdown (auto-aggregate bằng formulas). Sheet 3 — Monthly Theme. Include conditional formatting cho Status: Draft (yellow), Review (orange), Published (green).

Value: Reusable across team, years.

Finance Analyst

Artifact: Financial model (Excel)

Prompt:

Excel DCF model: input revenue growth, margins, discount rate. Output: NPV, IRR, sensitivity analysis table (2-way: growth × margin). Include scenarios: base, bull, bear.

Value: Replace 2 days của model building. Audit-ready.

Legal Counsel

Artifact: Interactive compliance checklist (HTML)

Prompt:

HTML page: GDPR compliance checklist cho SaaS product. 15 items, each với checkbox, description, risk level. Show completion % top banner. Export to PDF button.

Value: Team self-service. Save weeks of attorney consultation time.

Teacher

Artifact: Interactive quiz (HTML)

Prompt:

HTML quiz cho Physics unit 'Dao động điều hòa': 10 multiple choice questions. Immediate feedback each question (correct/incorrect + explanation). Final score screen với retry option.

Value: Student practice at home. No LMS needed.

Data Analyst

Artifact: Chart dashboard (React)

Prompt:

React dashboard: upload CSV → auto-detect columns → user chọn X/Y axes → render chart. Support 4 chart types (line, bar, scatter, pie). Include 'download PNG' button.

Value: Non-analyst colleagues self-serve basic analysis.

HR Manager

Artifact: Onboarding checklist (HTML với state persistence)

Prompt:

Onboarding checklist interactive cho new hire: 4 phases (Pre-day 1, Week 1, Month 1, Month 3). Each phase có 8-12 items. Checkboxes, progress bars per phase. Include 'who to ask' column. Data persist trong localStorage.

Value: Scale onboarding. Consistent experience regardless HR bandwidth.

Real Estate Agent

Artifact: Mortgage calculator (HTML)

Prompt:

Mortgage calculator: inputs — home price, down payment %, interest rate, loan term. Outputs — monthly payment, total interest, amortization chart. Include property tax + insurance estimates.

Value: Embed trong listing website. Clients engage deeper với listings.

Anti-patterns với Artifacts

Không dùng Artifacts cho reusable content

Biểu hiện

Mỗi lần cần template proposal, hỏi Claude generate từ đầu.

Tại sao sai

Inconsistent output. Lặp lại setup time.

Cách đúng

Build template artifact 1 lần, save, reuse across future chats.

Quá nhồi nhét trong 1 artifact

Biểu hiện

"Build full CRM với leads, contacts, pipeline, reporting, email integration, calendar sync."

Tại sao sai

Scope quá lớn → output shallow. Too many bugs. Hard to iterate.

Cách đúng

Break thành artifacts riêng. Start với core. Extend incrementally.

Publish nhạy cảm content public

Biểu hiện

Financial model với real company data → publish public.

Tại sao sai

Link public → anyone có link access. Note: not indexed, but still leakable if link shared.

Cách đúng

Sensitive → copy/download only hoặc Team share.

Không test interactive artifacts

Biểu hiện

Claude build calculator, bạn assume works, ship cho team.

Tại sao sai

Interactive artifacts có logic — có thể bugs. Input edge cases fail.

Cách đúng

Test với 3-5 input scenarios trước khi ship. Claude có thể sai công thức.

Hard-code values thay vì inputs

Biểu hiện

Dashboard với budget 8M VND hardcode.

Tại sao sai

Reusability = 0. Mỗi user khác phải regenerate.

Cách đúng

Ask Claude make values configurable via inputs. User adjust theo situation.

Troubleshooting

Issue: Claude không tạo artifact khi tôi mong

Fix: Explicitly ask: "Create as artifact" hoặc "Show in artifact window."

Issue: Artifact render không đúng (layout broken)

Fix: Specific feedback: "Feature cards wrapping incorrectly trên mobile. Use grid với auto-fit, min-width 280px."

Issue: Interactive logic sai

Fix: Provide test case: "Input 5, expect 25, got 30. Debug calculation."

Issue: Artifact quá lớn / slow

Fix: Ask Claude simplify: "Reduce complexity — remove advanced features X, Y. Keep core flow only."

Issue: Published artifact không load

Fix: Re-publish (sometimes stale). Check không có external dependencies broken.

Áp dụng ngay

Bài tập 1: Build reusable artifact (20 phút)

Pick 1 template bạn dùng lặp trong công việc:

• Weekly status report format
• Meeting recap template
• Project kickoff checklist
• Email signature designer
• Proposal template

Prompt Claude build as artifact. Iterate 3-5 lần. Download final. Archive trong 1 folder "reusable-claude-artifacts" để dùng lại.

Bài tập 2: Create interactive mini-app (20 phút)

Pick 1 calculator / tool bạn muốn có:

• Personal budget tracker
• Freelancer rate calculator
• Unit converter cho ngành của bạn
• Decision matrix tool
• Habit tracker

Prompt Claude build as React component. Test với 5 scenarios khác nhau. Adjust. Final → publish hoặc save local.

Tóm tắt bài học

Tài liệu tham khảo

• Artifacts Help Center article — chi tiết đầy đủ
• How we built Artifacts — Anthropic engineering blog