跳至正文
我的好朋友 Claude
Claude Artifacts 5 個用法:網頁樣板、圖表、互動原型同文件
第 081 期

Claude Artifacts 5 個用法:網頁樣板、圖表、互動原型同文件

進階·商家
第 081 期|Cowork|打工仔、創作者、老闆|

用 Claude Artifacts 預覽網頁、改圖表、試互動原型同整理長文。每個例子都有可直接改用嘅 prompt,亦講清楚預覽同正式使用嘅分別。

難度 ★☆☆時間 20 分鐘用具 Claude 帳戶、獲准使用嘅參考文件
【編者撰】一個香港人

先睇到結果,再逐步改

叫 Claude 寫網頁,最麻煩往往係要反覆複製 code、開瀏覽器睇效果,再返去描述邊度唔啱。Artifacts 將作品放喺對話旁邊,你可以一邊睇、一邊要求修改。

以下五個例子都係練習。圖表數字係示範資料,表單亦唔會真係收客戶查詢。Artifacts 現時唔只限付費帳戶;範本、連接 App 等功能另有方案限制,見 Artifacts 官方說明。

1. 做產品介紹網頁

◉ 網頁樣板

請用一個 HTML artifact 做 [產品] 嘅介紹頁。

- 主色用朱紅 #C42424,底色用米白 #FBF7EA。
- 頁首先寫大標題、一句介紹同一個行動按鈕。
- 中段有三項產品特點;評價位置只留「待加入真實客戶評價」,唔好作見證。
- 標題用襯線字,正文用無襯線字;手機都要睇得清。
- CSS 放喺同一個檔案,唔載入外部程式庫。
- 呢個係靜態樣板,按鈕唔提交資料、唔收款。

見到預覽之後,一次講清楚一個改動:「大標題由 60px 改做 48px,三張特點卡之間加闊啲。」比起「整靚啲」,Claude 更容易跟到你想改嘅位置。完成後自己試手機闊度、鍵盤操作同長標題換行。

2. 將數字畫成圖

◉ 季度銷售圖表

以下係示範數據,單位係港元:Q1 120000、Q2 180000、Q3 140000、Q4 220000。

請做一個 SVG 柱狀圖 artifact。標題係「示範:季度銷售」,縱軸由零開始,每條柱標明金額,底色米白、柱用朱紅。再加一條 150000 嘅虛線,標示「示範目標」。唔好補作月份或增長原因。

核對四條柱、刻度同標籤,唔好淨係睇靚唔靚。如果圖表會放入簡報,下載後再開一次,確認字體同尺寸冇走樣。

3. 試互動原型

◉ 查詢表單原型

請整一個 React artifact,示範查詢表單:姓名、Email、留言三個欄位,加一個提交按鈕。

按下之後模擬等候 1.5 秒,再顯示「示範完成,冇資料送出」。用 Tailwind 排版,唔接真實 API,唔儲存輸入。請標明必填欄位,空白提交要有清楚提示。

原型適合傾流程,例如錯誤訊息擺邊、按鈕文字清唔清楚。佢唔代表正式網站已經處理好伺服器、登入、資料保護或部署。要用真實資料,就要另做整合同測試。

4. 將長文獨立成文件

◉ 顧問建議書初稿

請根據我提供嘅客戶簡介,整一份可編輯嘅建議書 artifact。

結構:摘要、客戶現況、建議做法、時間表、團隊經驗、費用及條款、下一步。用專業但直接嘅語氣,對象係香港客戶。資料未提供就寫「待確認」,唔好作客戶案例、資歷、價錢或承諾。

先交目錄同正文初稿;頁數留待排版後確認。

你可以指定「只改建議做法嗰節,加一個我提供嘅實例」。下載格式以介面實際提供為準;Markdown 文件唔等於已排好嘅 PDF,匯出後仍要睇分頁。

5. 整可下載嘅小程式

◉ CSV 整理程式

請寫一個可下載嘅 Python 程式,用 pandas 讀 input.csv。

欄位係 date、amount、category。只保留 2025-01-01 或之後嘅紀錄,按 category 加總 amount,另存 result_cleaned.csv。原檔唔好改。

缺欄位、日期讀唔到或金額唔係數字,要清楚報錯,唔好靜靜略過。請附一份細小示範 CSV 同預期結果,列出需要安裝嘅套件。

下載到程式唔代表執行過。先讀 code,再用示範檔驗證日期邊界、缺欄位同金額加總,確認之後先處理正式副本。

點樣再用

同一張圖可以換新數據;同一個網頁樣板可以換產品資料;教學原型亦可以加「顯示答案」按鈕,畀同事試做。每次都保留一份自己確認過嘅版本。

如果作品開始有多個檔案、依賴套件或後端服務,就轉去正式專案工作流程。唔好將「能預覽」當成「下載後任何電腦都行到」。

睇完想同 Claude 一齊行一次?

撳一下,複製教學提示詞同全文到剪貼簿。 貼入 Claude.ai 或 Claude Desktop,再按文章逐步試做, 整理出適合你情況嘅草稿或清單;未確認嘅資料會留低畀你核對。

◉下期預告 · 相關情境
◉訂閱狀態

訂閱服務尚未開通

最新教學可直接到文章列表閱讀。