https://pixeldog13vibe.pages.dev/tags/vibe-coding/Recent content in Vibe Coding on Pixeldog13vibeHugo -- gohugo.ioen-usSun, 01 Jun 2025 00:00:00 +0000https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/Sun, 01 Jun 2025 00:00:00 +0000https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/<img src="https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/hueport.png" alt="Featured image of post HuePort 拾光 - Vibe Coding 實作分享 - Part 1" /><p>我是個徹頭徹尾的文組腦，程式設計這件事不是沒有想過，但根本沒時間從頭開始，直到 Vibe Coding 這件事出現。</p> <p>其實也沒有從頭學起，但心中總有些藍圖想去做，在第一個 app 用土炮方式問 → 報錯 → 截圖 → AI 給答案 → 貼上這樣的 loop 做完了一個簡單的大樂透電腦選號 app 之後，</p> <p><img alt="大樂透選號 App" class="gallery-image" data-flex-basis="496px" data-flex-grow="206" height="1294" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/luckyorbs.png" srcset="https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/luckyorbs_hu_d1c828e8f3418834.png 800w, https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/luckyorbs_hu_d0358347305fc884.png 1600w, https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/luckyorbs_hu_4756664999c3c5be.png 2400w, https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/luckyorbs.png 2678w" width="2678"></p> <p>這個專案剛開始也打算用同樣的方式進行，只不過⋯遇上了 Gemini 大降智的時機點！於是我投入了 Claude Code 的懷抱！</p> <p>我記得那是 4 月多的某個星期天凌晨，我跟 Gemini 一來一往的做到我快抓狂，真的是爆生氣的那種，加上各種 PUA 它也沒有，跟我心中所想的 App UI 跟功能差了十萬八千里！</p> <p><img alt="Gemini 對話截圖 1" class="gallery-image" data-flex-basis="405px" data-flex-grow="169" height="465" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/gemini-1.png" width="786"></p> <p><img alt="Gemini 對話截圖 2" class="gallery-image" data-flex-basis="501px" data-flex-grow="209" height="371" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/gemini-2.png" width="776"></p> <p>於是隔天我馬上刷了 Claude Pro，並且打開了安裝好很久但一直沒用的 Claude Code，下了一段指令給他：</p> <p>「我想要做一個 app，主要功能是用手機鏡頭拍攝物體，分析出該物體的 RGB/CMYK 等數值」的這個簡單概念，然後就看它一直做到我打包成 APK 安裝到手機上後打開一看⋯</p> <p>挖靠，我之前為什麼浪費這麼多時間？我這次甚至連 VS Code 都沒打開耶！超扯超扯，我終於知道史前人類已知用火的心情，太誇張了吧！</p> <p>（原諒我這個文組腦，因為我真的沒想到自己可以搞出這個 app 來）</p> <p>以上就是我的最新作品 - TrueHue 拾光的初始開發經驗，讓我先來好好介紹這個 App 吧！</p> <p>最初的構想是這樣的，你有沒有一種經驗是走在路上、看著展覽、翻著書本、滑著手機⋯時，突然看見一個很喜歡的顏色，想說可以把這個顏色用在設計稿、配色稿、3D render⋯等場景，但往往只能先拍起來，然後再打開軟體調色盤慢慢地調，搞不好還調不出來！</p> <p>TrueHue 拾光 就是一款專門開發給設計師和色彩愛好者的取色工具——把鏡頭對準任何東西，立刻取得精確的 HEX、RGB、HSL、CMYK、LAB 數值。</p> <p><img alt="HuePort App 截圖" class="gallery-image" data-flex-basis="491px" data-flex-grow="204" height="500" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/hueport.png" srcset="https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/hueport_hu_f087e5cbee9adc6f.png 800w, https://pixeldog13vibe.pages.dev/p/hueport-%E6%8B%BE%E5%85%89-vibe-coding-%E5%AF%A6%E4%BD%9C%E5%88%86%E4%BA%AB-part-1/hueport.png 1024w" width="1024"></p> <p>讓人能夠快速記錄當下看到的顏色，且回到電腦上可以快速地使用該顏色進行配色或是其他設計動作。</p>