昨天我們聊了 Claude Artifacts 的 AI 功能有多方便——不用申請 API Key、不用擔心帳單、分享超簡單。

今天，我們就要來實際用這個功能，做一個真正有用的工具

還記得我們在 Day04 討論過提示詞的組成要素嗎？一個好的提示詞通常包含：

• Task（任務）：要 AI 做什麼
• Role（角色）：設定 AI 的身份
• Format（格式）：指定回應格式
• Context（情境）：提供背景資訊

理論上，大家都知道要包含這些要素。但實際寫的時候可能還是會遇到：

「欸...我這段算是 Task 還是 Context？」
「咦，我好像沒有設定 Role？」
「Format 我寫清楚了嗎？」

當你盯著自己寫的一大段提示詞，這些要素混在一起，很難一眼看出「我到底寫了什麼、缺了什麼」

如果有個工具，可以自動幫你標記出來，一眼看出提示詞的結構，會不會方便很多？

今天，我們就來實際操作看看，而且因為有 AI 功能的加持，整個過程不會超過 10 分鐘

開始之前：想清楚我們要做什麼？

在開始之前，讓我們先想清楚這個工具的樣子，大概會是這個流程

使用者貼上他們的提示詞
↓
按下「分析」按鈕
↓
AI 自動分析並標記四大要素：
- Task（任務）→ 藍色背景
- Role（角色）→ 綠色背景
- Format（格式）→ 黃色背景
- Context（情境）→ 紫色背景
↓
視覺化呈現，一眼看出結構

就像用螢光筆標記課本重點一樣

使用場景（這個可以請 AI 幫忙想看看）：

場景 1：學習寫提示詞

• 剛學完提示詞理論，想練習看看
• 寫完後貼進解析器，立刻知道自己有沒有漏掉什麼要素

場景 2：優化現有提示詞

• 有個常用的提示詞，但效果不太穩定
• 貼進解析器，發現「哦...原來我還沒寫到 Role」

場景 3：教學示範

• 在教別人寫提示詞
• 用解析器展示「結構良好的提示詞長什麼樣」

開始動手

開啟 Claude Artifact 頁面，右上角可以新增一個

根據我們的需求來選擇，這邊的實作範例是「App and websites」 最通用

接下來就來描述需求，描述得越清楚，生成的結果就越接近你要的

舉個例子🌰

幫我做一個提示詞解析器工具。

功能需求：
1. 有一個大的文字輸入框（textarea），讓使用者貼上提示詞
2. 輸入框上方有簡短說明：「此工具會自動標記提示詞的四大要素」
3. 有一個「分析」按鈕
4. 按下按鈕後：
   - 顯示載入狀態（避免使用者以為當掉）
   - 用內建的 AI 功能分析提示詞，識別：
     * Task（任務）- 用深藍色背景、白色文字標示
     * Role（角色）- 用深綠色背景、白色文字標示
     * Format（格式）- 用金黃色背景、深色文字標示
     * Context（情境）- 用深紫色背景、白色文字標示
   - 把分析結果顯示在下方，用對應的顏色標記原文

視覺設計：
- 介面簡潔清楚，不要太花俏
- 顏色對比要明顯，讓標記一眼就看得出來
- 輸入框要夠大，至少可以顯示 5-6 行文字

再正式開始之前， Claude 可能會和你確認一下

觀察結果與試用

稍微等待一下，在完成之前，右側的界面會是顯示它的 Source code

等到完成之後，就會變成渲染出來的界面了

提醒：因為一般的 AI 工具都會保留一些隨機性，因此你的畫面可能會和我的略有不同

接下來我們貼上一個簡單的提示詞來試試看效果

你是一位資深的寫作教練。請幫我分析這篇文章的結構，
用條列式的方式列出優點和需要改進的地方。

結果出現了！

我們可以看到這段提示詞被標上了不同顏色：

• 「你是一位資深的寫作教練」→ 綠色（Role）
• 「請幫我分析這篇文章的結構」→ 藍色（Task）
• 「用條列式的方式列出」→ 黃色（Format）
• 「優點和需要改進的地方」→ 藍色（Task 的延伸）

效果不錯吧？可以回去拿各種提示詞來試看看了！

我也提供這次 demo 的範例供大家試用看看：link

這個工具的真正價值

這個工具除了作為範例以外，也希望能帶給大家一些額外的價值和變化

以前寫提示詞：

寫一大段 → 丟給 AI → 看結果 → 不滿意 → 猜測哪裡有問題 → 再改一次

現在有了解析器：

寫一大段 → 貼到解析器 → 一眼看出缺了什麼 → 補上缺少的要素 → 再丟給 AI

從「猜測」變成「清楚知道」

而且因為是視覺化的，你會記得更清楚。看過幾次「完整的提示詞長什麼樣」之後，你自己寫的時候就會自然而然地包含這些要素

分享出去

工具做完了，讓我們分享給需要的人。

點擊右上角的「發布」按鈕 → 生成分享連結 → 複製。

你可以：

• 貼到社群：「我做了個提示詞分析工具，學習寫提示詞的朋友可以試試」
• 傳給正在煩惱提示詞的同事
• 放在你的教學文章裡當作互動範例

任何人點開連結，就能直接使用。不用註冊、不用設定、不用輸入任何東西。

而且記得嗎？不管多少人用，都不會花到你的錢

你可以大方分享，不用擔心

延伸思考

做完這個工具後，你可能會想：「哇，原來這麼簡單。那我是不是也可以做...」

沒錯！同樣的概念，你還可以做：

• 文章情緒分析器：標記正面/負面/中性的句子
• 關鍵字提取器：自動標記文章中的重要詞彙
• 語氣分析器：標記正式/輕鬆/專業的段落
• 摘要產生器：自動提取文章的核心重點

每個工具，都只需要這樣的流程：

1. 清楚描述功能給 Claude
2. 測試看看效果
3. 微調優化
4. 分享使用

從想法到成品，5-10 分鐘就足夠了

結語

還記得我們在 Day19 說的嗎？

「從消費者變成創造者」

今天，你真的做到了

你做了一個：

• 有實際價值的工具
• 任何人都能用的工具
• 分享出去完全沒有成本壓力的工具

而且整個過程，不到 10 分鐘

這便是 Claude Artifacts 的的魔法