> ## Content Index
> Fetch the complete content index at: https://jerromy.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# 我的新作品：靈感收集器，讓存過的資料真正派上用場
- URL: https://jerromy.com/inspiration-collector-chrome-extension/
- Published: 2026-10-09T02:42:37.000Z
- Updated: 2026-10-09T03:30:38.000Z
- Description: 我的新作品「靈感收集器」上架了。它把你挑過的文章、圖片和 AI 回答存進同一個資料夾，再請 AI 幫忙整理。這次從發想、設計、規格書到官網、外掛與影片，我也試試 Vibe Coding 和很在意設計細節的 Loop Engineering。
- Author: Lee Chih Min
- Tags: AI 實作與創作, 作品

0:00 

/1:03 

1× 

文章加進書籤，圖片下載到電腦，  
AI 的回答留在聊天紀錄裡。  
等到想寫文章、做企劃，  
又得想一次：那些資料到底存在哪裡？

我做的「靈感收集器」已經上架了。  
它是免費的 Chrome 擴充，  
也就是裝在 Chrome 裡的小工具。  
看到有用的網頁、文字，  
圖片或 AI 回答，  
就能存進自己選的電腦資料夾。

收好之後，再請讀得到這些檔案的 AI，  
幫你整理文章大綱、比較不同做法，  
或準備提案。  
每一筆都有來源網址，  
方便回頭找原文。

## 從一個想法，做到可以安裝的作品

這次從發想、企劃、設計到規格書，  
都是我自己來。  
我先想清楚要解決什麼問題，  
再決定功能和畫面。  
規格書寫清楚功能怎麼運作，  
以及做完要檢查哪些地方。

這次同時做了官方網站，  
也做了 Chrome 外掛，  
也準備了繁體中文、英文、日文介面，  
以及宣傳片和教學影片。  
這些都是這次作品的一部分。

教學影片和形象影片的配樂，  
也是我自己用 Suno 這個 AI 音樂工具做的。

![先寫規格畫設計稿，再做成產品；做完檢查字體間距手機畫面和三種語言的換行](https://demo.nox.com.tw/KMS/ARTICLE-20261009-01/v8-blog-cover-final-image-9.png)

這是開發步驟的說明圖，呈現我在意的設計細節。

我嘗試用 Vibe Coding 的方式開發：  
把需求說給 AI，請它幫忙寫程式，  
做出來後再試、再改。

官網開發，我也試著用 Loop Engineering。  
我的做法是先寫清楚目標和完成條件，  
讓 AI 做一段，檢查結果，再修改，  
並把進度記下來，接著做下一段。\[2\]\[3\]

我非常在意設計細節，  
所以這套流程也要把畫面看仔細。  
字體的大小和粗細，  
按鈕與文字的間距，  
手機上看起來會不會太擠，  
中文、英文、日文，  
有沒有在奇怪的地方換行，  
這些都要檢查。

線稿先畫出畫面怎麼排，  
設計稿再畫出顏色、字體和按鈕。  
我會先看過這兩份，  
覺得可以了，再開始做。  
做完還要拿設計稿來對照，  
版面、功能和操作，都要看過。

這套 AI 分工的安排，  
我在像素辦公室那篇文章裡寫過。\[1\]

因為這次作品規模小，  
我才有機會把整個過程自己走一遍，  
看看準備好設計和規格之後，  
AI 能怎麼幫我把想法做出來。

## 把同一個題目的資料放在一起

例如，想寫一篇遊戲美術的文章。  
參考文章在網站上，  
圖片散在不同頁面，  
你和 AI 討論的想法，  
又留在另一個聊天視窗。

第一次打開收集器，先選一個資料夾。  
再建立「遊戲美術」專題，  
把相關文章、圖片與對話放在一起。  
「專題」就是一個題目一個資料夾。

建立專題時，寫一句你打算做什麼，  
例如：「我想寫一篇遊戲美術文章，  
先用這些資料整理大綱。」

同樣是收圖片，  
拿來寫文章或做美術參考，  
需要的整理方式會不同。  
先寫下目的，之後就容易說清楚要請 AI 做什麼。

## 文章、幾句話、一張圖，都能自己選

想留整篇文章，按側邊欄的「存這頁」。  
只想留幾句，就反白後按右鍵保存。

圖片可以右鍵存一張原圖，  
也可以按「存圖」，  
從整頁的圖片裡挑。  
存文章時，內文圖片可能仍是網址；  
想把圖片原檔留在電腦，就另外用這兩種方式存。

ChatGPT、Claude、Perplexity，  
回答也能存。  
可以只存一則有用的回答，  
或保存整段對話。  
存整段時，會標出哪些話是你說的、哪些是 AI 說的。

ChatGPT 做出的試算表、程式或文件，  
也能把原檔一起保存。  
這個「存檔案」功能，目前只支援 ChatGPT 做出的檔案。

收集時開著側邊欄，  
就能看到已存的內容。  
文字用列表看，圖片可以切換成縮圖，  
也能搜尋，或只看這一頁存過的資料。

![開發時的收集器畫面：在ChatGPT旁查看已存的文章、圖片和檔案](https://demo.nox.com.tw/KMS/ARTICLE-20261009-01/v8-blog-cover-final-image-6.png)

開發時的操作示例，2026-09-22截圖。

## 收好之後，怎麼請 AI 幫忙？

文章會存成 Markdown 檔案，  
可以用文字編輯器打開。  
另外有一份清單，  
列出每筆資料的標題和出處，  
方便你和 AI 回頭找原文。  
收下的圖片與檔案，都會保留原檔。

![實際資料夾中存下的文章、圖片，以及給AI讀的說明](https://demo.nox.com.tw/KMS/ARTICLE-20261009-01/v8-blog-cover-final-image-7.png)

收集後的資料夾示例。

資料夾裡也有一份 MATERIAL.md，  
這是給 AI 讀的說明，  
會寫下你準備拿這些資料做什麼。  
說明也會提醒 AI，  
網頁內容只供參考，  
不要把裡面的話當成你下的指令。

收好後，可以這樣請 AI 幫忙：

「請先讀『遊戲美術』資料夾裡的 MATERIAL.md，  
再用這些資料整理一份文章大綱。  
每個重點列出來源；AI 的回答，請另外標示需要核對。」

這裡要用能讀你電腦檔案的 AI，  
例如 Claude Code、Codex 或 Gemini CLI。  
收集器把資料存好，  
你選的 AI 負責整理。  
AI 說的內容，仍然要回原始來源核對。

如果還沒使用這類 AI 工具，  
也可以先把資料收好。  
檔案都在自己的資料夾裡，日後要怎麼用，由你決定。

## 同一頁再存，不會一直多出新檔

同一頁再存一次，  
內容有變就更新原檔。  
內容沒變，會提示「已存過」，  
不多存一份。  
不用再從好幾份相似檔案裡，猜哪份才是現在要用的。

靈感收集器免費，不用註冊。  
資料存進你自己選的資料夾，  
我收不到你存的資料。  
之後要交給哪個 AI，由你自己選。

## 先存三樣資料，試一次

選一個最近想研究、想寫的題目，  
存一篇文章、一張原圖、一則 AI 回答。  
放進同一個專題，寫一句目的，  
再請 AI 整理一次，看看能不能幫到你。

![選資料夾、存文章圖片和AI回答，再請AI讀資料夾裡的說明幫忙整理並列出來源](https://demo.nox.com.tw/KMS/ARTICLE-20261009-01/v8-blog-cover-final-image-8.png)

存資料、請AI幫忙整理的步驟說明圖。

靈感收集器可在 Windows、Mac 的桌機版 Chrome 使用。  
介面有繁體中文、英文、日文。  
手機無法安裝這個擴充。  
用手機看到的話，  
先把網址傳給自己，回到電腦再安裝。

官網有中、英、日三語宣傳片，  
63 秒就能看完。  
也有 16 章教學，  
從安裝、存資料到請 AI 整理。  
可以先看影片，  
再從一個小題目開始試。

![我做的新作品：官網、Chrome外掛、三種語言和教學影片，請AI幫忙寫程式，也很在意設計細節](https://demo.nox.com.tw/KMS/ARTICLE-20261009-01/v8-blog-cover-final-image-2.png)

![文章、幾句話、圖片、AI回答與ChatGPT做的檔案都能存](https://demo.nox.com.tw/KMS/ARTICLE-20261009-01/v8-blog-cover-final-image-3.png)

![同一個題目的資料放一起，再寫出想拿來做什麼；例如想用遊戲美術資料整理文章大綱](https://demo.nox.com.tw/KMS/ARTICLE-20261009-01/v8-blog-cover-final-image-4.png)

![先存一篇文章一張原圖一則AI回答，試試怎麼整理；免費，不用註冊](https://demo.nox.com.tw/KMS/ARTICLE-20261009-01/v8-blog-cover-final-image-5.png)

官方網站與免費安裝入口：  
[https://collector.jerromy.com/](https://collector.jerromy.com/?ref=jerromy.com)

## 參考與延伸閱讀

\[1\] 我的像素辦公室實驗：  
替 AI 開一間像素虛擬辦公室，  
讓虛擬員工跟我一起做產品  
<https://jerromy.com/pixel-ai-office-loop-engineering/>

\[2\] IBM：What Is Loop Engineering?  
先定目標、執行，  
再看結果、調整做法。  
[https://www.ibm.com/think/topics/loop-engineering](https://www.ibm.com/think/topics/loop-engineering?ref=jerromy.com)

\[3\] Addy Osmani：Loop Engineering  
安排工作、檢查成果、記下進度，  
再決定下一步。  
[https://addyosmani.com/blog/loop-engineering/](https://addyosmani.com/blog/loop-engineering/?ref=jerromy.com)