Claude Artifacts 5 個用法：HTML / code / chart / 長文，邊種用邊度

情境

你問 Claude：「整個簡單嘅 landing page HTML 推我新產品」

冇 Artifact 嗰陣：

1. Claude 喺 chat 出 200 行 HTML
2. 你 copy 全部
3. 開文字編輯器，貼入去，存做 index.html
4. 雙撳開瀏覽器
5. Render 出嚟，見到 2 個排版問題
6. 返去 Claude，貼「呢度爛咗，呢段幫我搞掂」
7. Claude 出修改版
8. 又再 copy、貼、存、refresh

20 分鐘先見到最終版。每個小改動都要 3 至 5 分鐘嘅額外功夫。

有 Artifacts 之後：

1. 你問 Claude，右邊個 artifact 預覽 panel 即時 render 出嚟
2. 你即刻見到段 HTML 撐唔撐得住
3. 你話「H1 字大啲、CTA button 用 vermillion 色」
4. Claude 直接更新 artifact，預覽即刻 refresh
5. 3 分鐘一個迭代週期

呢篇拆 5 個 Artifacts 真係用得着嘅情境，每個都示範 prompt 同幾時用。

跟住做

1. 認識：咩會觸發 Artifacts

Claude 喺以下情況自動 render artifact：

• HTML / CSS / JS code → 即時預覽
• Python / JavaScript script → code + 可下載
• Mermaid diagram → 已 render 嘅 diagram
• React component → 互動預覽
• Markdown 長文（通常超過 1,000 字）→ 獨立文件
• SVG / 圖 / 圖標 → 已經 render 好嘅視覺
• 似 spreadsheet 嘅數據 → 表格

如果 Claude 出咗 code 但冇 artifact 預覽，你可以直接同佢講「render as artifact」或者「show in artifact panel」。

2. Use Case 1 —— Landing page 樣板（HTML）

觸發 prompt：

整個簡單 1-page landing page 推 [產品]:
- 主 colour：vermillion #C42424 + cream #FBF7EA
- 結構：hero (大 headline + 1 sentence + CTA button) → 3 個 feature card → 1 個 testimonial → footer
- Font：serif 配 sans
- Mobile-responsive
- 用 inline CSS (single file)，唔好 external lib

出嚟嘅嘢：完整 HTML 喺 artifact panel，預覽即刻 render 出嚟。

點樣一路改：

H1 字細啲 (60px → 48px)，CTA button hover effect 加 darker shade，feature card 加大 spacing

Claude 直接更新 artifact，預覽即時 refresh。20 分鐘內改完幾轉，個草稿就出到嚟。

限制：Claude artifact 唔會接到真實 backend 或者 form submission。真正要 deploy 上 production，仍然要你 push 去 Vercel / Netlify。但做樣板、概念示範、pitch deck slide 就已經夠。

3. Use Case 2 —— 圖表視覺化（HTML / SVG）

你有啲數據想快手整個視覺化出嚟，但又唔想開 Excel：

觸發 prompt：

我 raw data:
- Q1 sales HK$120k
- Q2 sales HK$180k
- Q3 sales HK$140k
- Q4 sales HK$220k

請 render bar chart artifact:
- 主 color vermillion
- Background cream
- Y-axis HK$
- 上面 title「2025 quarterly sales」
- 數字 label on each bar

出嚟嘅嘢：一個即時嘅 SVG 圖表 artifact。

點樣一路改：

加 1 條 dashed reference line at HK$150k (target line)，label「target」

3 分鐘就出到一個即刻擺得上演示嘅圖表，仲快過喺 Excel 撳 5 分鐘整圖。

4. Use Case 3 —— 互動原型（React component）

你係 design lead，想 demo 一個 UI 概念畀 stakeholder 睇：

觸發 prompt：

整 1 個 React component:
- 個 form 同 3 個 input field: name / email / message
- Submit button (vermillion)
- 按下後 simulate API loading (1.5 sec) → success message animate in
- 用 Tailwind for styling
- 唔需要 real API call，淨係 visual demo

出嚟嘅嘢：一個互動嘅 React component artifact。你可以喺 panel 入面真係撳個 button，見到 loading 動畫，再見到 success 訊息。

用途：

• 喺設計檢視會議度示範
• 畀 stakeholder 對住概念畀意見
• A/B 試兩個設計（重新 prompt，整個替代版本出嚟）

呢類互動原型比 Figma 靜態樣板更貼近真實效果，又比真係寫 code 開發快 10 倍。

5. Use Case 4 —— 長文獨立文件

你起緊一份 8 頁嘅客戶 proposal：

觸發 prompt：

基於我 dump 嘅 client requirement (paste 你 brief)，draft 8-page consulting proposal:

結構：
1. Executive summary (1 頁)
2. 客 challenge understanding (1 頁)
3. Proposed approach + methodology (2 頁)
4. Timeline + milestone (1 頁)
5. Team + qualification (1 頁)
6. Investment + commercial term (1 頁)
7. Next step (0.5 頁)

語氣：professional, 唔好 corporate cliche, HK 客 audience。

出嚟嘅嘢：一個長文 artifact，markdown 格式。比起喺 chat 入面直出嘅內容易讀好多，仲可以下載同分享。

點樣一路改：

第 3 頁 approach section 加多 1 個具體 case study example

Artifact panel 即刻更新。最終版可以匯出做 markdown 或者 PDF。

6. Use Case 5 —— 可下載嘅 code script

你想快手整個 Python script 清理 CSV file：

觸發 prompt：

寫 Python script:
- Read input.csv (column: date, amount, category)
- 過濾 date >= 2025-01-01
- Group by category，sum amount
- Output result_cleaned.csv

用 pandas，要 error handling for missing column

出嚟嘅嘢：一個 code artifact 加 download button。你直接下載 script.py，入 terminal 跑就得。

點樣一路改：

加 progress bar (用 tqdm) 因為 input file 200k 行

Claude 更新個 artifact，新版即時可以下載。

呢類快手嘅 utility script，平時你要喺 Stack Overflow 搵 30 分鐘再自己拼 code。用 Claude artifact：1 個 prompt，下載一次就搞掂。

變化

變化 1：Multi-file project artifact

新版 Claude Code 加上部分 Claude.ai 功能，已經支援 multi-file artifact（成個 project 結構）：

觸發 prompt：

整個簡單 Next.js project:
- pages/index.tsx — landing
- components/Hero.tsx
- components/FeatureGrid.tsx
- styles/globals.css
- tailwind.config.js
- package.json

出嚟嘅嘢：一個多 file 嘅 artifact，每個 file 一個獨立 tab。可以下載做 zip。

你解壓 → npm install → npm run dev → 直接行得到。

變化 2：用對話迭代 artifact

你唔滿意個 artifact，畀意見嘅時候：

✅ 好嘅迭代 prompt：

• 「Hero section 加 background image，用 cream / vermillion gradient」
• 「Feature card 由 4 個改 3 個，每個闊大啲」
• 「CTA button copy 改：『試 7 日』→『立刻開始』」

❌ 差嘅迭代 prompt（好容易搞到 Claude 一頭霧水）：

• 「Make it better」（太含糊）
• 「Like Apple website」（當咗對方知道你諗緊乜）
• 「Fix the styling」（冇講清楚具體要點改）

講得具體，好過講句空泛嘅「改好啲」。

變化 3：用 Artifact 教學 / 帶新同事

你想教同事一個概念（例如「點用 Excel pivot table」）：

觸發 prompt：

整一個 interactive tutorial HTML artifact:
- 上方解釋 pivot table 概念 (1 paragraph)
- 中間 show 1 個 example data (table render)
- 下方 step-by-step 點 build pivot table (5 step, numbered)
- 結尾 quiz 3 條 question with show-answer button
- 用 vanilla JS，唔好 framework

出嚟嘅嘢：一個完整嘅教學 artifact。分享條 link，或者出個 HTML 畀同事，佢哋就可以自己揀節奏去學。

呢類內部培訓素材，平時要拍片或者整 Notion doc，搞成個鐘；用 artifact 5 分鐘就出到。

一個心態

Artifacts 嘅深層價值唔係「render 預覽」—— 係將迭代嘅阻力減到近乎零。

當一個迭代週期由 5 分鐘變 30 秒，你嘅思維模式都會跟住變：

• 冇 Artifact 嗰陣：你個腦會預先諗定一個「完美 prompt」，驚改。
• 有 Artifact 之後：你個腦會放開咁「試、睇、再調整」，快手嚟。

呢種阻力嘅減少，對設計、創作、探索性工作影響好明顯 —— 你試 5 個版本嘅成本低咗，所以你真係會試足 5 個（而唔係鎖死喺第一個 OK 嘅版本）。

優質成果嘅根源唔係「prompt engineering」，而係**「低阻力嘅迭代，令多元探索變得可能」**。

最後提醒：

• ✅ 一路改好過一步到位。Artifact 第一版有 80% OK，改 3 次就去到 95%。
• ⚠️ Artifact 唔等於 production code。做樣板、示範、小工具就 OK，但要 deploy 上 production，就要認真測試同處理 edge case。
• 🎯 Artifact 可以下載同重用。整過一次嘅圖表模板或者 form 結構，下次貼入新背景再改就得。

下次你想「整個簡單 HTML」嗰陣，唔好淨係叫佢出一段 text，直接畀 Claude render 做 artifact。3 分鐘一個迭代週期，你工作嘅質素就會明顯提升。