數位電子名片

運用AI 協作的免寫程式部署流程，透過 Vercel v0 平台，設計並上線了這個原創的網頁應用程式

項目簡介

作為一名創業者和自由工作者，我一直在尋找更高效的方式，隨時與潛在客戶或合作夥伴建立聯繫。與其訂閱第三方電子名片服務，我選擇自己打造一個完全依照我的需求客製化的電子名片 App，不但省時省錢，也讓我的人脈拓展流程更順暢。

💡 為什麼選這個專案？
這個作品展示了如何透過 AI 協作式「vibe coding」，快速把想法變成實際可用的產品，而且只需要一小部分傳統開發的時間與成本。最棒的是，整個流程都依照我的使用場景量身打造，符合我在工作流程上的需求。

2.5 週

UX 設計師、產品經理、全端工程師

流程設計與迭代、介面設計、程式平台部署與除錯、AI 提示詞撰寫

數位名片 App 並不是什麼新概念，乍看之下好像也不難開發。但在與 AI 協作的過程中，真正的關鍵在於：你是否對整個流程有非常清晰的理解。只有這樣，才能撰寫出精準的提示詞（prompt）與指令，讓 AI 生成你真正想要的結果。以下是我在開發這個專案時的思考邏輯與操作步驟整理：

我先釐清整個交換流程中，使用者會經歷哪些步驟與互動。

當使用流程確定之後，我就用 Figma 把每個頁面畫出來，並預想使用者在每個步驟會需要看到哪些資訊。

從挑選色彩開始，我為這個應用程式定下整體品牌調性。隨著設計進行，我也建立了一套設計系統，規範像是CTA按鈕、側邊欄、字體樣式等基本 UI 元件，讓整體視覺一致又好延伸。

除了事先撰寫好提示詞（prompt），我也運用 AI 一步步引導我完成整個架設與部署流程，橫跨 Vercel、GitHub、Google Apps Script、Resend 和 Supabase 等平台。這不只加快了開發速度，也讓整個流程更直覺、更有效率。

最大的挑戰其實不是寫程式本身，而是在除錯的過程中遇到的問題。與 AI 合作時，清楚表達自己的需求也非常重要。當我讓 AI 知道我是開發新手時，它會給出更詳細、一步一步的指引，讓整個流程變得更順暢、也更容易掌握。