前言
「這個啊，與其從零開始反覆試錯，先看正解來學可能更快」——這是沉迷於製作 TODO 清單核取方塊的新手ぷらむん，所領悟到的事情。
雖然在公司裡自稱是吉祥物角色，卻是公司內最不會看氣氛的人，大家好我是ぷらむん🐯
最近ぷらむん在練習個人開發，做了一個簡單的 TODO 清單，不過在外觀部分意外地吃了不少苦頭。
功能本身已經能正常運作了，但一碰到設計的細節，手就突然停住了……。
就算問 AI，成品不知為何還是怪怪的，最後我意識到學 CSS 其實「先看正解來學比較快」，所以想把這個心得分享給大家！
ー希望這篇文章適合這些人閱讀ー
🟠 明明會寫 CSS，實際做出畫面時卻總是覺得不夠俐落
🟠 就算把細節設計拿去問 AI，也常常做不出預期的外觀
🟠 為了調整「差不多就是這樣」的外觀，卻花掉比預期多很多時間
🟠 總覺得依賴複製貼上不太好，心裡有點過意不去
🐯向 AI 問了程式碼之後，核取方塊居然跑到右邊了……
我只是想把 TODO 清單的核取方塊放在任務文字的左邊而已，但把 AI 給的程式碼直接貼上後，不知道為什麼核取方塊竟然跑到任務的右邊去了。
我忍不住想吐槽：「欸，不是那裡吧」。
🐯光是修正位置，就花了比想像中更多的時間
本來以為只是位置的小問題，想隨便修一修就好，但因為不知道該動 CSS 的哪裡才能修好，只好到處亂改、改壞、再繼續改……，結果回過神來時，時間已經過了不少。
雖然比起功能相關的部分，這種外觀微調看起來沒那麼重要，但沒想到會花這麼多時間，還是有點小沮喪。
🐯發現「看正解來學比較快」這件事
這時候，ぷらむん突然醒悟了。
這種外觀的細部調整，與其一開始就問 AI 然後反覆試錯，不如直接看已經完成的正解，照著學會不會更快？
🐯跟前輩討論後，對方推薦了「Uiverse」這個網站
我把這件事跟ぷら美前輩聊了一下，結果她推薦了我一個叫做「Uiverse」的網站。
👩💼：ぷら美前輩
「這是個可以直接複製貼上按鈕、核取方塊之類常見 UI 元件程式碼的網站。只要 HTML 和 CSS 就能完成，所以即使沒有框架知識也能立刻使用，這點很棒。」
實際看過之後，裡面有按鈕、卡片、切換開關、載入動畫等 4,000 種以上的 UI 素材，直接把喜歡的樣式複製貼上，就能一下子做出很有樣子的畫面。
類似的服務還有 Tailwind UI、Flowbite、shadcn/ui、DaisyUI、MUI 等，但這些通常多半是以 Tailwind CSS 或 React 等特定框架為前提。
相較之下，Uiverse 只要原生 HTML/CSS 就能完成，因此我覺得它最大的優點，就是就算是還沒接觸過框架的完全新手、初學者，也能直接拿來用。
授權也是 MIT License，所以不用標註來源，也可以直接用在商業專案上，這點也很讓人安心。
🐯不只是單純複製貼上，稍微讀一下程式碼後有了收穫
既然都看到這裡了，我決定在複製貼上之前先稍微看一下程式碼。結果發現，核取方塊和文字的排列順序，會因為 CSS 的寫法而決定，這才讓我意識到：「啊，原來剛剛會跑到右邊的原因是這個啊。」
如果想在理解全部內容之後再使用，反而會很辛苦；但只要抱著「先隨便看看自己有興趣的 UI 素材」這種輕鬆的心情，其實就已經足夠學到東西了。
其實不需要對複製貼上感到罪惡感，只要反覆「使用 → 有興趣就看看」這個循環，感覺不知不覺間自己也會累積能寫出來的東西。
不過，ぷらむん總有一天也想成為「負責檢查 AI 寫出的程式碼」的那種工程師，所以當自己真的複製貼上程式碼時，會想養成一個習慣：
先看程式碼，理解它為什麼能正常運作。
👨：ぷら太郎前輩
如果什麼都不想，只知道複製貼上，最後只會養出一個會被 AI 淘汰的工程師啊！
既然也收到了這樣的提醒，ぷらむん希望自己能成為一隻能好好理解原因與流程的老虎。
ー總結這次學到的東西ー
🟠 外觀的細部調整，有時比起從零開始反覆試錯，直接看正解來學會更快
🟠 複製貼上 UI 素材不是壞事，不需要感到罪惡感
🟠 Uiverse 只靠原生 HTML/CSS 就能完成，初心者也能直接拿來使用
🟠 不要只停在複製貼上，稍微看一下在意的部分，就能把它變成學習
以前我也曾以為自己沒有做設計的天分，但現在我想，一邊善用可靠的資源，一邊慢慢累積自己的工具箱，才是更好的做法。
🦁結語
我原本一直以為自己沒有 CSS 的設計感，但在善用可依靠的工具之後，困擾很久的問題竟然像是騙人一樣地解決了。
PRUM 的工程師多數都是從無經驗錄取的。若你也對這種能連新人的失敗與領悟一起分享的環境有興趣，歡迎到公司官網看看。
▶ PRUM 招募頁面
我們也有經營一個整理對工程師有幫助文章的網站。如果有興趣也可以看看。
▶ 對工程師有幫助的文章網站
之後也會再分享ぷらむん的奮鬥記。讀到這裡，真的非常感謝🐯
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
