用 AI 開發小廢物產品的產品設計師心得

更新於 發佈於 閱讀時間約 4 分鐘
那些我做的小廢物

那些我做的小廢物


隨著 AI 工具的快速發展,程式輔助工具不斷進化,甚至現在像 Claude AI 可以直接利用 Artifact 來幫助產出分享連結的實體原型產品,或透過 v0 by Vercel 直接部署成網站,產品就能立即上線。

這幾個月來,我不斷使用這些工具來打造網站、產品或是原型,主要是為了兩個目的:


  1. 實現自己的有趣點子,做出好玩的產品
  2. 優化 UI/UX 設計在工作流程中的應用


這讓我對 AI 在開發上的角色有了新的體悟,特別是在 加速產品開發、提升工作效率,以及重新思考設計師的價值 這幾個層面。

加速 UIUX 原型製作,提升工程師評估品質

"T-Shirt Sizing" 應該是很常見的一種開發評估工具,用來在早期可以對開發的範圍大小有初步的認知,對於已經成熟的系統來說,系統已經具備常見元件,這時候產品設計師的主要任務是設計適當的互動及操作流程。因為我所在的是 B2B 產品公司,所以很常會有輸入資料、系統回饋等互動,而要用 Figma 做到這件事情沒有這麼快速,甚至像是輸入資料而有回饋這件事情也很難模擬,只能透過點擊,假裝這是點擊。

但有了 AI 之後,我在一次的 T-Shirt Sizing 會議上,展示我透過 Claude AI 的 Artifact 做的原型來說明操作流程以及互動及回饋,那次的效果及回饋都還不錯,工程師和測試工程師都能清楚知道他們想要獲得的資訊以評估開發範圍大小。

如下示意,大約1個小時內,主要是可以示意輸入後的互動,以及資料之間怎麼互動等。且有這種展示,可以減少大家的想像,我會提醒大家到時候 UI 元件還是要以系統為主。那次就成功地完成評估。

Claud AI Artifact

Claud AI Artifact

AI 幫助產品開發的心得分享

在這半年內,我大概做了五個小產品,從純前端、Local Storage 儲存的小工具,到需要後端和資料庫的完整應用都有嘗試過。例如:

  • Wow Moment:一個用來記錄自己美好時刻的工具
  • 約會備忘錄:幫助單身者紀錄約會對象的特徵,並提供評分功能的小工具
  • 離職集點卡:每當職場憤怒值爆表,就打個勾,集滿就可以離職的趣味工具
  • 健身教練管理系統:讓私人健身教練更有效率地管理學員課程,提升學員數量
  • Figma 產業假資料 Plugin:用來快速產生產業假資料的設計輔助工具


這些產品從簡單到複雜,開發過程中我發現 AI 在產品開發上提供了許多新體驗,以下是幾點我覺得很值得分享的心得。

raw-image

1. AI 讓討論更有效率,從想法到產品的距離變短了

在工作中,從 UI 設計到產品功能開發,往往需要層層溝通、對齊,甚至花費數週或數月來獲得共識。但 AI 沒有這個問題,當我有一個想法時,它不會去質疑價值、成本或風險,而是直接根據我的需求提供可能的解法,甚至幫我生成初步的原型或程式碼。


2. AI 不會拒絕需求,而是想辦法完成

當我在開發 約會備忘錄 時,想要加入 Shader 動態效果,但因為使用的 React 版本不相容,導致一直出錯。如果這種情況發生在公司內部,工程師可能會直接回「不相容,無法使用」結束這回合,然後這功能就無法實現了。

但 AI 不會,它不會直接拒絕,而是一直嘗試不同解法,想辦法找到 workaround。我當時花了一個多小時,不斷跟 AI 討論錯誤訊息,最後真的讓 Shader 動起來了。和AI協作少了很多內耗。


3. AI 讓設計評論更客觀,無須擔心人際關係

在傳統 Design Critique(設計評論)場合,設計師可能會擔心:

  • 意見太直接,影響合作關係
  • 批評太多,對方不開心
  • 別人的建議可能帶有個人偏好,而不是以產品體驗為核心

但 AI 不會有這些問題,它可以毫不留情地指出設計的優缺點,也能提供多種不同設計方向,讓我參考。這種無壓力的回饋方式,對於單兵作戰的設計師來說,真的很實用。


4. AI 讓我重新思考設計師的角色

在開發 健身教練管理系統 時,我發現現在的 AI 已經能夠幫我產出「不會太差」的 UX。只要我能清楚描述需求,AI 生成的 UI 其實已經能符合基本可用性。

這讓我開始思考,設計師未來的價值會不會更多地轉向策略性 UX 設計,而不再只是畫 UI?例如,在這個教練系統裡,我發現「記錄學員的運動動作」可能會影響教練是否購買這套系統,這種商業價值的評估,才是 AI 做不到的地方,而是需要設計師來決策的。

這讓我體悟到,設計師的角色可能會越來越接近 PM,需要更多地考慮商業價值,而不只是專注於視覺呈現。



5. 從 AI 開發開始,降低產品嘗試門檻

如果你對開發自己的產品有興趣,現在是個很好的時機,因為 AI 讓產品開發的門檻大幅降低。完全不會寫程式的人,可以從 v0 by Vercel 開始,讓 AI 幫你生成前端並直接部署上線。如果願意自己動手,Cursor 也能提供更大的自由度。

我覺得,最好的方式就是直接開始,試試看 AI 能幫你做到哪裡,當你開始做出一個個小產品,就會更清楚自己喜歡哪種開發模式,也能更直覺地體會做產品的決策過程。




這半年來,AI 幫助我完成了很多有趣的小產品,也讓我對產品開發有了新的體悟。它讓開發變得更快速、讓設計討論更高效,甚至重新定義了設計師的角色。

如果你對開發產品有興趣,我真的很推薦試試 AI,因為它不僅可以幫你實現想法,還能讓你學習到更多關於開發、設計與產品決策的事情。就像我這段時間的體驗一樣,當你開始動手做,你會發現 AI 真的能讓產品開發變得更好玩、更自由。



留言
avatar-img
留言分享你的想法!
avatar-img
Kyle Hsia
188會員
36內容數
以分享自己的設計經驗為主。經歷創意行銷公司、外商到新創軟體公司。同時分享正職以外的時間如何接案增加收入並管理自己的時間精進專業能力
Kyle Hsia的其他內容
2024/07/21
這篇文章分享了我在職場中遇到的挑戰和困境,以及如何通過與來自矽谷的資深產品VP的共事中學到的寶貴經驗。文章中詳細介紹了主管身上學到的經驗,如善用生活比喻、運用視覺策略、保持積極正面的態度等,及我如何跨領域思考,最終通過開放和學習的態度成為更優秀的產品設計師。
Thumbnail
2024/07/21
這篇文章分享了我在職場中遇到的挑戰和困境,以及如何通過與來自矽谷的資深產品VP的共事中學到的寶貴經驗。文章中詳細介紹了主管身上學到的經驗,如善用生活比喻、運用視覺策略、保持積極正面的態度等,及我如何跨領域思考,最終通過開放和學習的態度成為更優秀的產品設計師。
Thumbnail
2023/05/24
過去一年因為經濟產生的變化,以及疫情開始轉為開放的態度後,就業市場也跟著產生了改變,原本因為疫情而紅起來的遠距辦公,到處都在推廣遠距工作到的好處,到現在台灣的公司開慢慢的鼓勵員工回到辦公室 我們公司最近也開始運行混合辦公模式,一週必須進辦公室兩天,對於年初才因為有遠距工作而搬離台北的我來說,上班突然
Thumbnail
2023/05/24
過去一年因為經濟產生的變化,以及疫情開始轉為開放的態度後,就業市場也跟著產生了改變,原本因為疫情而紅起來的遠距辦公,到處都在推廣遠距工作到的好處,到現在台灣的公司開慢慢的鼓勵員工回到辦公室 我們公司最近也開始運行混合辦公模式,一週必須進辦公室兩天,對於年初才因為有遠距工作而搬離台北的我來說,上班突然
Thumbnail
2022/01/17
近期為了公司接下來的擴張,設計團隊預計也會多增加近10個人,這對我自己來說又是另一個管理挑戰,除了多從網路上獲得資訊外,最近在網路上有一個平台叫做 ADPList ,他是一個導師計畫平台,上面有各種面像的設計師,不同職等、技術職、管理職、甚至是FAANG公司的設計師也都有在上面提供指導
Thumbnail
2022/01/17
近期為了公司接下來的擴張,設計團隊預計也會多增加近10個人,這對我自己來說又是另一個管理挑戰,除了多從網路上獲得資訊外,最近在網路上有一個平台叫做 ADPList ,他是一個導師計畫平台,上面有各種面像的設計師,不同職等、技術職、管理職、甚至是FAANG公司的設計師也都有在上面提供指導
Thumbnail
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
Introduction AI PDF editors not only enhance efficiency but also bring a more intelligent and convenient user experience.
Thumbnail
Introduction AI PDF editors not only enhance efficiency but also bring a more intelligent and convenient user experience.
Thumbnail
最近AI的産圖越來越多,是時候開始整理了,隨機生成的廢圖基本上都清除了,剩下一堆感覺不差的挑一挑,只是數量有點多。
Thumbnail
最近AI的産圖越來越多,是時候開始整理了,隨機生成的廢圖基本上都清除了,剩下一堆感覺不差的挑一挑,只是數量有點多。
Thumbnail
網址:https://gadget.chienwen.net/x/text/articlecut 這個網頁裡面有許多小工具, 但感覺現在有很多被 AI 取代掉的東西, 推薦大家可以來用看看~
Thumbnail
網址:https://gadget.chienwen.net/x/text/articlecut 這個網頁裡面有許多小工具, 但感覺現在有很多被 AI 取代掉的東西, 推薦大家可以來用看看~
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
這篇整理了我這個月讀到關於「工具資源」和「個人品牌與行銷」相關的內容,並且幫大家附上了來源,如果你想了解我這個月發現了什麼不錯的內容都可以在這裡找到,而且我還會加上我的一點個人回饋。 另外每月資訊量不同,造成每一類的內容不一,有的內容會比較多,如果你只想看精選,我會在每一類中都挑出 3 篇我最推的
Thumbnail
這篇整理了我這個月讀到關於「工具資源」和「個人品牌與行銷」相關的內容,並且幫大家附上了來源,如果你想了解我這個月發現了什麼不錯的內容都可以在這裡找到,而且我還會加上我的一點個人回饋。 另外每月資訊量不同,造成每一類的內容不一,有的內容會比較多,如果你只想看精選,我會在每一類中都挑出 3 篇我最推的
Thumbnail
運用生成的AI圖像來激發視覺和創意,無論是生成素材、用在社交媒體上,這些圖像都能為你的的視覺帶來獨特的風格。
Thumbnail
運用生成的AI圖像來激發視覺和創意,無論是生成素材、用在社交媒體上,這些圖像都能為你的的視覺帶來獨特的風格。
Thumbnail
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流,還可以幫線稿上色。
Thumbnail
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流,還可以幫線稿上色。
Thumbnail
創作邦創作邦精選工具資源-第 35 期,我們每週分享創作邦精選的工具資源合集,從設計資源、AI 工具、生產力工具、影像後製等等內容都涵蓋,如果你想找好用資源或工具,追蹤我們的內容準沒錯。
Thumbnail
創作邦創作邦精選工具資源-第 35 期,我們每週分享創作邦精選的工具資源合集,從設計資源、AI 工具、生產力工具、影像後製等等內容都涵蓋,如果你想找好用資源或工具,追蹤我們的內容準沒錯。
Thumbnail
AI圖形工具 今天分享一些常用的AI圖形工具。現在的圖形工具非常多,不可能全部都熟悉,因為真的太多了。所以介紹幾個比較常用的工具來供參考。算是我工作室的員工。 取代部分繪圖的工作 AI圖形工具基本上可以取代一部分繪圖的工作。就像速寫一樣,本身長年在畫速寫,但再怎麼說速度也不會比AI生成圖片來得
Thumbnail
AI圖形工具 今天分享一些常用的AI圖形工具。現在的圖形工具非常多,不可能全部都熟悉,因為真的太多了。所以介紹幾個比較常用的工具來供參考。算是我工作室的員工。 取代部分繪圖的工作 AI圖形工具基本上可以取代一部分繪圖的工作。就像速寫一樣,本身長年在畫速寫,但再怎麼說速度也不會比AI生成圖片來得
Thumbnail
亞馬遜推出 AI 生成圖像工具 / reddit 更新品牌視覺 / 微軟小畫家加入 AI 圖像生成功能 / 中國第一起 AI 著作權判決案例 / Adobe 發布 DMV3D
Thumbnail
亞馬遜推出 AI 生成圖像工具 / reddit 更新品牌視覺 / 微軟小畫家加入 AI 圖像生成功能 / 中國第一起 AI 著作權判決案例 / Adobe 發布 DMV3D
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News