UR meetup 抽卡互動網頁：ChatGPT + Cursor 輔助設計及製作過程

1 產生念頭

產生念頭就是俗稱的「初衷」，我們想舉辦實體活動，想促成業界朋友們的互相認識與交流。

這個念頭讓我們決定採實體活動，在鄰近台北小巨蛋的新空間 – 兆基文教大樓舉行，這也就必須經歷實體活動的大量複雜作業，包含找場地、規劃空間、現場佈置、報到動線、講者邀請的限制等等。

坦白說，與所有實體籌備工作相比，設計這 30分鐘的互動交流活動，反而是這次研討會中最簡單的工作了。

2 尋找創意

交流活動本身的創意，一般經驗很容易聯想到 world cafe、大地遊戲或 OST 開放空間引導技術等。

現階段 AI 盛行，如果缺點子，就找 ChatGPT 幫忙，我們使用的 prompt 是：

除了讓大家自行隨意交流之外，還有哪些活動形式或引導方式可以幫助互動更有結構，但又不失自由與彈性？

果然不出所料，prompt 一出，驚喜連發。ChatGPT 丟出一連串交流創意、活動構想，包含「抽卡即聊」的點子。

有了活動形式創意之後，我們接著要設計聊天話題，使用的 prompt 是：

根據這頁活動介紹的內容
https://edu.userxper.com/courses/2025-ur-meetup
提供一些討論主題來參考

ChatGPT 提供的主題確實是根據悠識學院網站 – UR meetup 講題大綱的內容屬性來發想，只是這些話題過於正式，幾乎是研討會座談主題，比如「AI 與使用者研究的未來：探討如何運用生成式 AI 模擬未來情境，提升研究效能」，但是拜託⋯⋯有誰會聊天的時候，會談這種嚴肅話題啊😧

於是我們下了第二個 prompt：

調整成軟性一點的主題，避免過於具體，稍微模糊讓包容度大一些

這一次，它丟出了奇妙的文字：

• 我也不知道怎麼說，但⋯⋯
• 曾經我以為⋯⋯
• 我們其實很不一樣⋯⋯

瞬間，我們的心從「欸～這樣有點生硬」變成「這好像會聊出眼淚欸🥹」！

接下來我們內部討論，讓 ChatGPT 根據軟性主題，提出開啟陌生聊天的具體提問句，並且要求提供具體產出數量，10 個主題，每種主題 5 張卡片。

我們使用的 prompt 是：

針對上述的「模糊得剛剛好，較軟性、開放、又具引發對話力的 10 個主題站主題建議」，在每個主題下，請根據主題產生 5 個對話卡片，讓站長可以抽卡來應用，引發話題

於是得到了這種類型的分類和抽籤題目，很接近我們理想中的成果：

🌱 主題站：我們這行的日常

• 你今天如果要跟家人解釋你在做什麼，會怎麼說？
• 最近讓你最無語的一次跨部門溝通是什麼？
• 你覺得最難讓老闆理解的是哪一部分的工作？
• 什麼時候你會開始懷疑自己到底是不是在做 UX？

有了主題，下一步的問題是，那這個交流環節要誰來主持？誰能站在主題站旁邀請大家說「要不要聊聊啊？」我們不想稱他們是「主持人」、「引導員」，太嚴肅了！

一樣，再次透過 ChatGPT 產出活動中的關主或站長的命名，我們自己開玩笑說，這些是 RPG 中的 NPC 角色。

我們對 ChatGPT 說「來點遊戲感的角色名」，果然得到一串名字，從「導話引星」到「話術 NPC」，甚至還有「冰破精靈」跟「話題使徒」，非常有意思😎

3 團隊決策

ChatGPT 丟出來各種創意點子，包含主題、提問句、站長角色等等。經過我們討論後，選擇「抽卡即聊」這個構想，也繼續細化活動中的文字，直到我們覺得可以流暢地引發話題討論，以及如何讓與會朋友在空間中移動等等。

這部分的細節很難透過 prompt 描述實體場景或交流互動，我們依靠團體討論，做沙盤推演來決定細節做法。

4 實作抽卡互動網頁

實作互動卡片一開始也是使用 ChatGPT ，我們下的 prompt：

做成「隨機抽一張」的手機版互動頁（簡單 HTML），讓參加者直接拍 QR code，在手機上看題目

不太確定如何在 ChatGPT 上精準優化調整網頁的 code，我們很快地決定改用 Cursor 來練 code。

（由於要來回修改 code，我們沒有採用 ChatGPT 的畫布功能，而是切換到有編輯器的 Cursor 來寫網頁。）

進入 Cursor IDE 介面，心態上就轉變成工程師了，透過不同的 Cursor prompt 對話來處理資料結構、主題與提問句對應、進入頁的介面排版、抽卡頁的抽卡動作、簡易的互動等。

在 Cursor 上，經歷 8 次迭代，每次迭代會有數次 prompt ，跟 ChatGPT 聊天很不一樣。我們必須給予更精準的描述指令，才能夠獲得理想的介面效果，例如這類 prompt：

把 css 的 .draw-button 寬度放大與螢幕同寬，高度增加兩倍，字型放大兩倍
@media (max-width: 480px) .question 的字型放大兩倍
@media .header h1 字型放大1.5 倍
這次修改只改 css 檔案，請將新產製的檔案生成於 “version07” 目錄

最後將 Cursor 產出的網頁 html / css / js code，打包上傳到主機上，完成最終上線的 UR meetup 互動交流卡片。

這個過程如果透過傳統的開發方式，大概也要 2~3 個工作天才能完成，這次透過與 AI 協作，藉由兩個 AI 工具 – ChatGPT + Cursor 的互補合作幫助，實際上在執行實作的時間大約只有 3 小時左右，速度之外，效果之好，超出我們的預期，很開心也很有成就感。這不只是活動規劃，是 AI 設計魔法！

這組為 UR meetup 設計的 抽卡互動網頁，適用於手機介面。如果你迫不及待想要體驗一下，可以點擊連結。歡迎分享你的體驗跟看法給我們！

➡️ UR meetup 抽卡互動網頁

期待在 05/17 (六) 第十屆 UR meetup 使用者研究實務研討 與你碰面，早鳥優惠進行中～輸入悠識讀者專屬折扣碼「 urmeet200 」可再折 $200 元✨