Pi's Blog

前言

最近在開發上用了不少 AI 工具
單純問問題我會用 ChatGPT, Gemini, Claude
IDE 相關的工具用過 Cursor, Antigravity, Cline, Continue
其他的還有 Lovable, Claude Code
有一些小心得

身為開發人員我覺得自己在使用 AI 上比其他人晚很多
因為某種「Vibe coding 很不踏實」的堅持
讓我長久以來都只用 ChatGPT 問問題而已
直到最近因為跟朋友開始了一項 AI 相關的 Side Project
才讓我決定要好好的來用看看

在討論前期的閒聊階段，其中一個人問我算是純前端嗎
我說算是吧，他就問「AI 越來越盛行你覺得還需要純前端嗎？」
「你不覺得越來越多事情是 Product Owner 就可以處理的嗎？」
忘了我當時回他什麼，但我發現每當被問類似問題，
我都會用「遲早會被取代吧」來打發過去
因為我沒有答案，不知道怎麼反駁

實際用過才知道
現階段的 AI 不管是理解力還是生產力確實都很強
但終究無法取代技術人員，我的看法是：

1. 只要 AI 無法一步到位，始終會需要技術人員介入
   有認真用過 AI 的人就會知道，常會有講了半天還是改不好的情況
   這是因為如果只用結果來描述問題，AI 只能某種程度地隔空抓藥
   但如果是由一個懂技術的人來描述問題，限縮範圍
   AI 修改的品質就會大幅提高
   技術人員也有能力驗證修改結果，選擇 AI 提供的解決方案
   甚至 (其實是大多數情況) 自己改好

2. AI 產出的品質取決於 context engineering
   要能有效地操控 AI，需要清楚知道該餵給它什麼資料、工具
   你是什麼身份，它要以什麼身份幫你
   輸出的格式、內容應有什麼不該有什麼
   給太少資訊不夠，給太多它會失焦還會燒錢
   所以現在很多概念像 subagent、Skills、MCP、RPI (Research-Plan-Implement)
   本質上都是為了以最少的 context window 佔用量來完成目標
   如果不懂技術架構或這些新概念
   AI 在迭代產品的時候每次都是從頭開始看起
   最後就會因為上下文太長而失控變笨

3. 人們沒意識到要精準描繪事物有多難
   日常生活中很多人動不動就說別人聽不懂人話
   但意思的傳達本來就非常困難
   文字不精確，有歧義，就算加上表情、情境，
   也很難保證對方有 get 到意思
   真正會用 AI 的人，其實懂得透過對話逐步收斂到目標
   這其實也算是一種技術能力
   那些認為寫幾句話（或是退幾步來講：靠規格文件）
   就能用 AI 做出理想產品的人
   多半只是因為他根本不知道自己想要的東西具體的樣子
   做出一個強大的 prototype 就以為做完了
   只要產品夠大，你終究需要其他角色來幫你逐漸靠近心中所想
   當然你也能用 AI 充當這些角色，那就回到前兩點

所以我認為 AI 時代最終的樣態是
勞力密集的職業消失，技術密集競爭更激烈，甚至會跨職能競爭
因為想法、判斷力跟跨領域能力更重要了，還要學會跟 AI 共處
新手跟老手之間的斷層會越發顯著
而當一個領域內繁複、入門的工作都開始交給 AI 後，那它就更有機會朝更高的境界發展

前言

最近要在 expo 專案加上相機功能，由於會調用到 native api，必須重新安裝 dev client
又因為相機功能不能在 emulator 測試，所以必須想辦法裝在 iphone 上
簡單紀錄一下做法

步驟

1. 下載 xcode 並更新到最新版本

2. 開啟 iPhone 的開發者模式(需要重啟手機)
   設定 > 隱私權與安全性 > (滑到最下面)開發者模式

3. 把 iPhone 用 USB 連接上電腦
   除了插線，也要記得解鎖手機按允許連接

4. 照著 這些步驟 設定簽證，過程中會要求登入 apple 帳號

5. 打包 app 並安裝到手機上
   npx expo run:ios -d
   -d 代表要選擇裝置。然後 expo 會做出一個 ios 資料夾，安裝所需的東西

6. 選擇實體裝置(透過 USB 連上的 iPhone)，便會開始 build 並安裝到手機上

7. 前兩步驟如果遇到問題，可以改用 Xcode 開啟專案直接 build
   build 之前如果還沒有 ios 資料夾，可以用 npx expo prebuild -p ios 生成一個

8. 安裝過程中會需要輸入兩次密碼

9. 完成

小發現

意外得知其實 emulation 跟 simulation 不一樣
中文雖然都叫模擬
但 emulation 的意思是在一個系統下運行另一個系統，達到模擬
simulation 則是建立理論模型後去預測結果，這也是模擬

所以像前述的 iPhone 模擬器就是在電腦系統下去運行 iOS 系統，是 emulator

前言: 如何顯示 svg 圖檔

關於怎麼在 react 專案中顯示 svg
有下列幾種方法

1. 用 img 元素顯示
2. 利用 SVGR 線上轉換器，將 svg 轉換成 tsx 版本
3. 安裝 SVGR plugin，直接在專案中 import svg 就能用

1. 用 img 元素顯示

1
2
3
4
5
6

// 直接放路徑
<img src={"./ic-close.svg"} />;

// 也可以import後再放
import CloseIcon from "./ic-close.svg";
<img src={CloseIcon.src} />;

2. 利用 SVGR 線上轉換器，將 svg 轉換成 tsx 版本

1
2
3
4

<!-- before -->
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.40137 3.3999L13.6014 13.5999M13.6014 3.3999L3.40137 13.5999" stroke="white" stroke-opacity="0.8" stroke-width="2" stroke-linecap="round"/>
</svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// after
import * as React from "react";
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={17}
    height={17}
    fill="none"
    {...props}
  >
    <path
      stroke="#fff"
      strokeLinecap="round"
      strokeOpacity={0.8}
      strokeWidth={2}
      d="m3.401 3.4 10.2 10.2m0-10.2-10.2 10.2"
    />
  </svg>
);
export default SvgComponent;

3. 安裝 SVGR plugin，直接在專案中 import svg 就能用

安裝方法請見 https://react-svgr.com/docs/next/

1
2
3
4
5

import Icon from './ic-close.svg'

...

<Icon/>

前言: 如何動態調整 svg 的顏色

1. 手動編輯 svg 裡的 fill 或 stroke 屬性，改為 currentColor

1
2
3

<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.40137 3.3999L13.6014 13.5999M13.6014 3.3999L3.40137 13.5999" stroke="currentColor" stroke-opacity="0.8" stroke-width="2" stroke-linecap="round"/>
</svg>

2. 調整 SVGR 套件的設定，讓他再轉譯的過程中自動把某個顏色(例如#ffffff)換成 currentColor

細節請見：https://react-svgr.com/docs/options/#replace-attribute-value

如何用<img>顯示卻又能動態調整顏色

這次遇到的狀況是：
我要開發手機版網頁的 bottom nav bar，長這個樣子

由於這些按鈕必須和桌面版的 header nav bar 同步
秉持 single source of truth 的原則
我先建一個 json，然後在兩處 UI insert value，來決定要顯示什麼圖、文字跟點擊後去到的路徑

1
2
3
4
5
6
7
8
9
10
11
12
13

// NavRoutes.json
[
  {
    "title": "Product",
    "href": "/",
    "icon": "ic-product.svg"
  },
  {
    "title": "Bridge",
    "href": "/bridge",
    "icon": "ic-bridge.svg"
  }
]

1
2
3
4
5
6
7

import NavRoutes from 'NavRoutes.json'
import Image from 'next/image'

...
{NavRoutes.map(route=>(
  <Image src={route.icon}/>
))}

問題是這樣就無法利用 currentColor 來調整顏色了
我還要讓網頁所在的按鈕亮起來才行

以 svg 來說因為檔案很小
其實我可以準備兩份顏色不同的 icon
在 active/inactive 之間切換就好
但我還是好奇有沒有更省事的做法
於是找到這個討論
發現一個蠻酷的做法

它的原理是利用 CSS 的 filter 屬性改變圖片的顏色
只是這個轉換過程不好計算，所幸有人已經寫好轉換工具了
唯一要注意的是這個轉換必須從黑色開始
要嘛轉換前先把 svg 手動改成黑色
不然就是在 css filter 開頭加上 brightness(0) saturate(100%) 也行

References

• https://stackoverflow.com/a/71542230
• https://codepen.io/sosuke/pen/Pjoqqp