Code as Canvas
最近部門辦 AI Day，主管排了半小時讓（抓）我上台分享我怎麼用 AI 工具。我差點上台大，還好肚子在台下就先呼喚我了（沒）。我把講稿整理成這篇文章，搬到部落格上來存個 checkpoint。
Software as Toys
前陣子看到 Ian Hsiao 的《Software as Toys》，文中提到現在用軟體創作小玩具，就像是兒時帶玩具到學校分享的感覺。這想法引起了我的共鳴，並以此概念為主軸設計半小時的故事，分享我的好奇與想像。
大學的時候自己學寫程式、做些小工具，我有了創造東西的能力。偶爾會因為生活中的小困擾想到一些創作的點子，並花點時間動手做出來，我很享受那個過程，也喜歡在拿出來分享之後被看見的感覺。但會因為課業壓力，需要太多時間或是太過複雜的想法被留在筆記裡頭。一年最多只能做三個 project，再多就不行了。
之前的文章有談過，去年年初剛退伍的時候，Cursor 在推出了 agent mode，突然一個禮拜就可以做出原本需要一、兩個月才能做出來的東西。遊手好閒的我，突然想到筆記裡頭的那些點子好像可以拿出來做。我寫了個 Python 版本的 CLI 工具 Kobo2Notion，只要把 Kobo 電子書接上電腦，它就可以幫我把裡頭的筆記撈出來，存到 Notion 上。
可是，有聽過 terminal 就已經很厲害了，CLI 工具不是人人都會用的。我突然想到，那不然我來做個 electron app，給使用者前端介面，還可以預覽之前畫過的所有筆記，這樣才算得上是個好用的工具。可是我又很懶得先去畫設計圖，然後慢慢地去思考要怎麼在前端呈現出來。我就叫無敵的白金之星自己去想想辦法，去使用 Shadcn/UI 之類的熱門的前端工具，快速幫我做出一個 prototype。
過往我一直煩惱著得要花時間在 Figma 裡頭預先畫好我想像的 UI/UX，突然變得可以用自然語言去描述。雖然這時候的 agent 表現還不太穩定，但已經可以把我的點子從單純的 CLI 工具，變成有前端的網頁或是 electron app。只要我有想法，我就可以快速地做出來，於是我又可以拿出去和別人分享了。
我突然意識到這整件事和小時候是一樣的，我做出來的東西就像帶去學校的車車一樣，我會拿出來分享，時辰到了我就像玩具總動員的安弟把胡迪丟掉一樣—— I don't want play with you anymore。整個過程（回饋機制）是一樣的，只是東西變了，它從實體的玩具變成了數位的軟體。
Visual Design
剛剛那個玩具做完過了半年，大概是去年七月，我開始玩 Claude Code、Gemini CLI，開發的過程加速了。貪玩的我又開始嘗試做一些沒生產力的東西。雖然可以用自然語言描述我想要的 UI/UX 設計，我還是一樣得不斷地調整我想要的細節，那是必經的過程。
那時候的 agent 很容易改了這頁的 component，卻沒改到另一頁上的東西。他們對於我描述到的問題做得很 OK，但是我沒有描述到的地方，他們並不會 cover 到，這對我來說是個大困擾。我還是需要一個完整的 design guidelines 做輔助。
在現在的我們可以把對於設計想法定義成 skills。像是，我選的襯線字體是哪款？在哪個地方用的粗度是多少？我按鈕寬度要怎麼設計？border、radius、shadow 又要怎麼調？Hover 上去的時候它會有什麼樣的反應？這些都可以寫成一份 Markdown 檔案，變成 skills，讓 Claude Code 在進行開發的時候，留意到這些細節。只是這樣還是沒辦法像 Figma 那樣能讓我綜觀全局，一口氣看到所有頁面的設計，我還是得要打開我寫的網頁或是 app 慢慢看。
透過 Figma，我可以拉出不一樣的 prototype，看看未來可以長成什麼樣子。只是它還是像做簡報一樣，不管是用 PowerPoint 或是用 Canva，我得不斷地得 pixel by pixel 去調整我想要的結果。當人的性格越龜毛，做前端的過程就會越痛苦，因為打磨一個界面、一個體驗，是很勞神費力的。
突然地，前陣子我看到了一個叫做 Pencil 的工具。他像是 Figma 一樣能夠 pixel by pixel 設計東西，但可以透過 chatbot 幫我直接修改設計內容，甚至可以 Claude Code 或任何可以操作 MCP tools 的 IDE 來操控。我開始有個強烈的感受是典範正在轉移。（其實 Figma Dev Mode 也可以開啟 MCP server 讓 其他工具串接，只是要收費。）
過去我們在 Figma 上面做的 Pixel Level 設計，變成了可以在 Code Level 完成的事情。Code Level 在現在，基本上就等於是由自然語言來做到的，不管你是要說英文或是說中文，只要能夠描述得清楚，就可以做到，而 Pencil 又可以幫助我把我講出來的設計做得更精細。即便這個工具在操作上還是有點慢，而且有時候會擺錯地方，可是這就像是 ChatGPT 出現的時候，我們在使用 LLM 聊天的時候，一樣它會顯得笨拙。但我相信，不管是速度或是精確度，這些問題可以隨著時間改善。
Browser Automation
延伸剛剛玩具的概念，還有工具的速度和精確度，我想聊聊瀏覽器。
大概去年七月的時候，我看著 Google 地圖突然想到：「太多東西了吧？」我的地圖上多好多的標記，不管是餐廳、景點或咖啡廳，我其實沒有很認真的去分類，他們都是用同一個 icon，而且數量多到，我其實不知道我到底存的哪些地標，甚至連有沒有去過都沒印象。Google 地圖始終沒有一個功能可以讓我很便利地和這些資料做互動，這讓我有點困擾。我就在想，我能不能把這些資料爬下來？
那時候 Perplexity 出的一款叫做 Comet 的瀏覽器，它可以讀取網頁內容，甚至操控瀏覽器。因此，我想要讓這個 Comet 瀏覽器去操控我的網頁，去幫我點擊這些 icon，把資料爬下來。這樣我就可以做個分類，也許可以做個簡單的小網頁，讓我去和這些資料做互動。但是那個時候的瀏覽器還不夠聰明，它需要不斷的截圖、推理、執行。再截圖、再推理、再執行。我嘗試叫他幫我爬資料，他花了大約十分鐘的時間，最後成功地失敗了，它沒有辦法很長時間的做這些工作。
最近這幾個月，Anthropic 推出了 Claude in Chrome，可以直接操控網頁元素，也可以自動寫 JavaScript 達成我的目標。Claude in Chrome 是直接在我現有瀏覽器上面再開一個新的分頁，不用重新登入我的 Google 帳號。不像 Chrome DevTools MCP 一樣會開一個全新的瀏覽器。（註：分享完沒幾天就發現其實 Chrome 已經有支援這功能了）
我就給了一樣的任務，叫他想想辦法。讓他自己去爬取我地圖上所有地標。我要求他不要使用影像辨識的方式來做，而是看看能不能寫 API 直接去存取這些 function 拿到資料，並且把這個方法記錄下來，這樣就可以重複利用。 咻一下二、三十分鐘（包含我偷懶的時間），總共抓出了兩千多個地標。
Code as Canvas
有了那麼多資料，也許我就可以繼續做一些好玩的事情。我還可以加上不一樣的標籤。像是它們的類別，可能是咖啡廳、餐廳，或者是它們的地點，可能在臺灣，可能在歐洲，或者是日本。加上了這些標籤之後，我就可以拿它們來做資料視覺化。讓使用者，就是我自己，可以快速地搜尋哪些類型的店面。
這時候，我又想到使用 Pencil 了，它其實提供了滿多的模板讓我偷懶，可以直接導入它們來使用、修改，最後變成自己心目中所想像的樣子。不需要煩惱我的網頁該怎麼樣從零開始設計。甚至我可以在做完一個版本之後，馬上再換成另外一個版本，這個成本變成也許十五分鐘就可以快速獲得新版本的外觀。然後前一段提到的想法，又變成了新玩具。
當然，如果你的設計非常地明確，那我們其實不見得需要用到 Pencil 這樣的工具，而是直接透過自然語言修改程式碼，立刻看到外觀差異，不再需要用 Figma 不斷調整細節。我們可以在同一個 branch 多開幾個的 worktree，同時跑多隻的 Claude Code，讓他們去設計不一樣的外形，然後同時間去比較他們帶給使用者的體驗又有什麼樣的差異。甚至可以在 Claude Code 完成它的改動之後，叫它去使用 Claude in Chrome 做自動化測試，測完之後再回來找你。
Anyway，從這個 case 來說，我們可以發現 UI/UX designer 跟 Front-end engineer 之間的界線變得更模糊了。Designer 不一定要完全理解程式碼，他只要有一點基本的概念，知道怎麼做版控，就可以透過自然語言馬上去修改程式碼，得到他想要的設計。我覺得這對於 designer 是一個非常大的優勢，因為他們可以清楚地描述 Component 要怎麼樣擺放才會有一致性，顏色要怎麼搭配才會在視覺上有一個平衡？要帶給使用者什麼樣的體驗。我認為同時具備設計及工程能力的 design engineer 會非常吃香。
Everything is Possible
從上面提到的這些例子可以發現，技術門檻大幅下降。這使得把點子變成現實的成本變得極低，低到我們可以只為了生活中的一件小事，隨手做一個小玩具。過去做一個點子，可能要花上好幾個星期甚至幾個月才能完成。但現在有了 Claude Code 和 Pencil，也許只需一個週末，我們就能做出 prototype 給朋友試玩，看看他們喜不喜歡、有什麼改進空間，或者看看這東西能不能賣錢。
準備簡報時，我很不想用 PPT 或 Canva、不想寫 markdown 轉 PDF，那太沒個性了。心想：「還是我把網頁做成簡報？」索性就請 Claude Code 幫我用 Next.js + Motion 試著做一個和我個人網站風格一致的簡報，當作是在簡報末尾的驚喜。
我把故事從概念、痛點、實作到展開的所有講稿都先寫好，然後交給 Claude Code。我明確告訴它我想要用哪些套件、每種頁面設計的限制、我想要可重複利用的模組化設計，接著直接讓它生成出這個長得像簡報的網站。當然，還是花一些時間去做細微調整，但我很滿意。不過我沒有放上來，主要是有點懶惰。
Coding Agent 把創造的成本降到最低，將我們從繁瑣的 Pixel Level 解放出來。我們只需要專注於透過自然語言，把點子轉成程式碼並呈現出來。只要有靈感，Everything is possible。