# Code as Canvas - URL: https://archi-zhang.blog/archive/code-as-canvas - Published: 2026-03-25 # Preface 最近部門辦 AI Day，主管排了半小時讓（抓）我上台分享我怎麼用 AI 工具。我差點上台大，還好肚子在台下就先呼喚我了（沒）。我把講稿整理成這篇文章，搬到部落格上來存個 checkpoint。 ![image](https://exstojtxgurbwspjkwkr.supabase.co/storage/v1/object/public/portfolio-assets/articles/32890bdb-47cf-80fa-8616-cd1d708b3267/33290bdb-47cf-804e-8abd-fcc1dd004df9.webp) # Software as Toys 前陣子看到 [Ian Hsiao 的《Software as Toys》](https://blog.ianhsiao.me/software-as-toys)，文中提到現在用軟體創作小玩具，就像是兒時帶玩具到學校分享的感覺。這想法引起了我的共鳴，並以此概念為主軸設計半小時的故事，分享我的好奇與想像。 大學的時候自己學寫程式、做些小工具，我有了創造東西的能力。偶爾會因為生活中的小困擾想到一些創作的點子，並花點時間動手做出來，我很享受那個過程，也喜歡在拿出來分享之後被看見的感覺。但會因為課業壓力，需要太多時間或是太過複雜的想法被留在筆記裡頭。一年最多只能做三個 project，再多就不行了。 [之前的文章](https://archi-zhang.blog/archive/recap-25)有談過，去年年初剛退伍的時候，Cursor 在推出了 agent mode，突然一個禮拜就可以做出原本需要一、兩個月才能做出來的東西。遊手好閒的我，突然想到筆記裡頭的那些點子好像可以拿出來做。我寫了個 Python 版本的 CLI 工具 [Kobo2Notion](https://github.com/ghnmqdtg/Kobo2Notion)，只要把 Kobo 電子書接上電腦，它就可以幫我把裡頭的筆記撈出來，存到 Notion 上。 可是，有聽過 terminal 就已經很厲害了，CLI 工具不是人人都會用的。我突然想到，那不然我來做個 electron app，給使用者前端介面，還可以預覽之前畫過的所有筆記，這樣才算得上是個好用的工具。可是我又很懶得先去畫設計圖，然後慢慢地去思考要怎麼在前端呈現出來。我就叫無敵的白金之星自己去想想辦法，去使用 Shadcn/UI 之類的熱門的前端工具，快速幫我做出一個 prototype。 ![快想想辦法Ｒ](https://exstojtxgurbwspjkwkr.supabase.co/storage/v1/object/public/portfolio-assets/articles/32890bdb-47cf-80fa-8616-cd1d708b3267/33290bdb-47cf-8046-b4da-f3292b4949d4.webp) 過往我一直煩惱著得要花時間在 Figma 裡頭預先畫好我想像的 UI/UX，突然變得可以用自然語言去描述。雖然這時候的 agent 表現還不太穩定，但已經可以把我的點子從單純的 CLI 工具，變成有前端的網頁或是 electron app。只要我有想法，我就可以快速地做出來，於是我又可以拿出去和別人分享了。 ![Kobo2Notion](https://exstojtxgurbwspjkwkr.supabase.co/storage/v1/object/public/portfolio-assets/articles/32890bdb-47cf-80fa-8616-cd1d708b3267/33290bdb-47cf-80f0-92cf-d7afe9fd6ef6.webp) 我突然意識到這整件事和小時候是一樣的，我做出來的東西就像帶去學校的車車一樣，我會拿出來分享，時辰到了我就像玩具總動員的安弟把胡迪丟掉一樣—— I don't want play with you anymore。整個過程（回饋機制）是一樣的，只是東西變了，它從實體的玩具變成了數位的軟體。 ![I don't want play with you anymore.](https://exstojtxgurbwspjkwkr.supabase.co/storage/v1/object/public/portfolio-assets/articles/32890bdb-47cf-80fa-8616-cd1d708b3267/33290bdb-47cf-8027-a093-cf74e21ac342.webp) # 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 慢慢看。 ![Design Guidelines](https://exstojtxgurbwspjkwkr.supabase.co/storage/v1/object/public/portfolio-assets/articles/32890bdb-47cf-80fa-8616-cd1d708b3267/33290bdb-47cf-800b-8c5d-c4d93dc39fb4.webp) 透過 Figma，我可以拉出不一樣的 prototype，看看未來可以長成什麼樣子。只是它還是像做簡報一樣，不管是用 PowerPoint 或是用 Canva，我得不斷地得 pixel by pixel 去調整我想要的結果。當人的性格越龜毛，做前端的過程就會越痛苦，因為打磨一個界面、一個體驗，是很勞神費力的。 突然地，前陣子我看到了一個叫做 [Pencil](https://www.pencil.dev/) 的工具。他像是 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 聊天的時候，一樣它會顯得笨拙。但我相信，不管是速度或是精確度，這些問題可以隨著時間改善。 ![Pencil’s Agent](https://exstojtxgurbwspjkwkr.supabase.co/storage/v1/object/public/portfolio-assets/articles/32890bdb-47cf-80fa-8616-cd1d708b3267/33290bdb-47cf-8075-84a4-d9e0c7c74d21.gif) # Browser Automation 延伸剛剛玩具的概念，還有工具的速度和精確度，我想聊聊瀏覽器。 大概去年七月的時候，我看著 Google 地圖突然想到：「太多東西了吧？」我的地圖上多好多的標記，不管是餐廳、景點或咖啡廳，我其實沒有很認真的去分類，他們都是用同一個 icon，而且數量多到，我其實不知道我到底存的哪些地標，甚至連有沒有去過都沒印象。Google 地圖始終沒有一個功能可以讓我很便利地和這些資料做互動，這讓我有點困擾。我就在想，我能不能把這些資料爬下來？ 那時候 Perplexity 出的一款叫做 Comet 的瀏覽器，它可以讀取網頁內容，甚至操控瀏覽器。因此，我想要讓這個 Comet 瀏覽器去操控我的網頁，去幫我點擊這些 icon，把資料爬下來。這樣我就可以做個分類，也許可以做個簡單的小網頁，讓我去和這些資料做互動。但是那個時候的瀏覽器還不夠聰明，它需要不斷的截圖、推理、執行。再截圖、再推理、再執行。我嘗試叫他幫我爬資料，他花了大約十分鐘的時間，最後成功地失敗了，它沒有辦法很長時間的做這些工作。 ![Perplexity Comet](https://exstojtxgurbwspjkwkr.supabase.co/storage/v1/object/public/portfolio-assets/articles/32890bdb-47cf-80fa-8616-cd1d708b3267/33290bdb-47cf-80e5-84f9-cac27bdd7a19.gif) 最近這幾個月，Anthropic 推出了 Claude in Chrome，可以直接操控網頁元素，也可以自動寫 JavaScript 達成我的目標。Claude in Chrome 是直接在我現有瀏覽器上面再開一個新的分頁，不用重新登入我的 Google 帳號。不像 Chrome DevTools MCP 一樣會開一個全新的瀏覽器。（註：分享完沒幾天就發現其實 Chrome 已經有[支援](https://github.com/ChromeDevTools/chrome-devtools-mcp?tab=readme-ov-file#connecting-to-a-running-chrome-instance)這功能了） 我就給了一樣的任務，叫他想想辦法。讓他自己去爬取我地圖上所有地標。我要求他不要使用影像辨識的方式來做，而是看看能不能寫 API 直接去存取這些 function 拿到資料，並且把這個方法記錄下來，這樣就可以重複利用。 咻一下二、三十分鐘（包含我偷懶的時間），總共抓出了兩千多個地標。 # Code as Canvas 有了那麼多資料，也許我就可以繼續做一些好玩的事情。我還可以加上不一樣的標籤。像是它們的類別，可能是咖啡廳、餐廳，或者是它們的地點，可能在臺灣，可能在歐洲，或者是日本。加上了這些標籤之後，我就可以拿它們來做資料視覺化。讓使用者，就是我自己，可以快速地搜尋哪些類型的店面。 這時候，我又想到使用 Pencil 了，它其實提供了滿多的模板讓我偷懶，可以直接導入它們來使用、修改，最後變成自己心目中所想像的樣子。不需要煩惱我的網頁該怎麼樣從零開始設計。甚至我可以在做完一個版本之後，馬上再換成另外一個版本，這個成本變成也許十五分鐘就可以快速獲得新版本的外觀。然後前一段提到的想法，又變成了新玩具。 ![Little Tool (Prototype)](https://exstojtxgurbwspjkwkr.supabase.co/storage/v1/object/public/portfolio-assets/articles/32890bdb-47cf-80fa-8616-cd1d708b3267/33290bdb-47cf-8036-868e-dc9771ad013b.gif) 當然，如果你的設計非常地明確，那我們其實不見得需要用到 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。 [Cover Page of the Slide](https://prod-files-secure.s3.us-west-2.amazonaws.com/9d562d5d-2b79-4a76-86eb-49a6d9816369/85440a4b-8fed-4cd8-bd91-3b30f6202c17/Mar-29-2026_12-39-53.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB4664XCRTH5E%2F20260613%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20260613T081554Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEF8aCXVzLXdlc3QtMiJGMEQCIDIzfBv76k%2Fn8vECs5v0MS%2BKuSKY8Z3sOwx8nThpB8sLAiBggOEzYDdAsXBiLKp963Tbv9pnrHw2N2r0VA0LMeYC0ir%2FAwgoEAAaDDYzNzQyMzE4MzgwNSIMKdf8nKLPSDu%2F4xMEKtwDAUimeyrt2PEhpyFS%2BcRpUF0%2BI%2FnWFOMmkkvXorRELIDPIn3P%2FYjab7p%2F8V5rdwMx3zw%2F186N%2FpyH%2B8ZA%2BvfUYXSjtr8qgBGc57rp0o6REO2P8knFm1%2FvJYy6f7dF6JUCA7SLlMr4%2Bk9nUt9Wl%2Bky4tptuCUboCXE1q%2BmVTJUzvxR4%2BPtYneYO2sVAUj0Fvh0ff8Wmy3QDEOlLJFuYs4X%2F05AIi9qbI6MRpS1%2B79SIK0Enqa4LOQIZYXCznRfFCF%2BxBgacUwtxl2WiJ0CJ3RIC2sMwOYLkJoRaYX0ru638lpAdzUB2tUX4ICOgvCmAKVI5wwSBEnCIPK2VhC9t3N%2FQNz1Sr9BN%2B0qKqS0LyRPqr02iWklqFBuhH6UNsNWBGkC4DZUQRvviVPlKmxsLZWXGO%2FyQoojGPTrdPGE1PddRvQ4YlBxXhfiFppInERzbMb4Urm2Wau7kqAy8Re3BulnNyI%2B0Kh3eL7rnphINHmjlB0K2aYrwIujwyd4Cc9ODG9kFOnZHi%2BUSeT8Cu7ys%2FaKCXZCAsiLK7BcUCU%2BqzzGu42pzC6vKeIM9sq6jeLVqjTFw8UgWqJjjT5mHZ3myj8HVkz57UiQO6VLpLsal3fZzChsuEDXes4EDuZ6n2wwrfOz0QY6pgF%2FNThpmrgxulAS9P6lT0RJO%2FqKabZOw2dnyntbaZAIJp0xxmuWnq3LG1hxHl3QEaDX0pUnMSYG0%2FlSTFxlYMZXcx0J1CUtMrapbdMVv5lFHJlpR%2Flai9ihn7mvLrDTUq2dX1MRuTHZox5u183cXdRn4C0QYD5UIehBhagY7ENxgsePBJykNj%2BfwLSt9m4a72Y2VkX48v2svnVopOs7b0RpfbK6B1wp&X-Amz-Signature=0da9912d6d6746e7071ef0ab62bb7e43a0a7b75d5615bca3bf1a609d506d355c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)