上次在讀 clean architecture 的時候我畫下這張圖，我在想當時候我想什麼
元件是更複雜的設計，雖然是程式的最小單元，關於元件設計的三個原則。

REP：同樣主題 → 放一起（樂高一盒）
想像你在用樂高玩具，你要買一盒樂高才有說明書、零件，才能拿去蓋房子。

CCP：會一起修改 → 放一起（加法驗證乘法）
比如說加法 2+2 的答案，需要去驗證乘法 2*2

CRP：不會一起用 → 不要硬放一起（要把遊戲機放到便當袋）
這就像你野餐帶便當時，不會硬把「電動遊戲機」塞在食物袋裡，因為它們不會一起用。
真讓人猶豫好像放一起啊。

今日主題：

REP 重複使用：一個好 prompt 多次使用。今天先整理成用的 Prompt ，之後會依照相同的原則慢慢找出可以重複使用放在一起的工具咒語。

1. code learning  
   學習程式與技術觀念（錯誤解析、架構解釋、文件翻譯、TDD 教學）
2. refactor  
   程式碼轉換或重構（跨語言、跨框架、改寫最佳化）
3. brain storm  
   腦力激盪，針對小型專案或想法提供可行架構與建議
4. writing  
   文章改寫與風格調整（例如轉成社群貼文、故事化）
5. thinking review  
   以資深工程師或教練角度，幫助反思、釐清想法與邏輯
6. summarize  
   將內容整理成清單、大綱或需求功能表

範例故事：

今天有一個人用 AI 幫忙寫程式，可是忘了檢查 金鑰 (Key) 的安全性。
結果他把自己的 Key 放進程式裡，大家用了以後，錢都從他身上扣掉，花了好多好多錢！
所以我學到：

• Key 要小心保存，不能亂放。
• 使用者應該分不同的「權限」，不要誰都能用全部的功能。

另外今天修改了 UI 介面，加入了更多的文章方類方法。
但我找了一個漂亮的 UI 請 AI 幫我改成新的樣式。

在程式中的應用是什麼？

<!-- Categories -->
<div>
<div class="flex justify-between items-center mb-4">
  <h3 class="text-sm font-semibold text-gray-900">分類</h3>
  <button
    @click="clearCategories"
    class="text-xs text-blue-600 hover:text-blue-700"
  >
    清除
  </button>
</div>
<div class="space-y-2">
  <label
    v-for="category in availableCategories"
    :key="category"
    class="flex items-center"
  >
    <input
      v-model="selectedCategories"
      :value="category"
      type="checkbox"
      class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
      @change="applyFilters"
    />
    <span class="ml-2 text-sm text-gray-700">{{ category }}</span>
  </label>
</div>
</div>

就像「分類清單」的按鈕，我可以勾選要的分類，或清除全部。
（文章裡的程式碼，就是在做「分類選擇」這件事）
我也有試著做一個可以讓使用者存放 Open AI key 的地方，但發現不太安全所以就砍掉了。

小結與一個思考問題：

怎麼樣保存 Key 才是最安全的呢？
我們要怎麼評估自己有多少能力（資源），才能完成想做的東西呢？