我做了一個 AI 面試問答平台：Skill Card
一個把面試準備變得有結構的地方——AI 幫你把問題拆成技能卡片，社群一起累積最佳答案，還能抽卡模擬面試。聊聊我為什麼做、做了什麼。
準備面試的時候，我發現最累的不是「不會」，而是「資訊很散」。於是做了 Skill Card，把面試準備變成一件有結構的事。
🔗 Live：https://skill-card.vercel.app
一、為什麼做這個？
轉職、準備技術面試的過程，大概每個人都經歷過這種混亂：
- 題目散落在各種地方——筆記、書籤、截圖、別人的心得文
- 同一題每個人講法不一樣，到底哪個答案比較好？沒人幫你排序
- 背了一堆，真的上場才發現「會看」跟「會講」是兩回事
我想要一個地方，能把這些痛點收進同一個流程裡：輸入問題 → 得到結構化的整理 → 累積好答案 → 練習講出來。這就是 Skill Card 的起點。
二、它能做什麼
🃏 AI 把問題拆成「技能卡片」
輸入一道面試題，AI（Google Gemini）會幫你拆解、結構化成一張技能卡——重點、分級、標籤都整理好，不再是一坨純文字。
💬 一題多答 + 投票排序
每道題目底下可以有多份答案（包含 AI 生成的答案）。大家可以 upvote / downvote，系統會自動排出最佳答案。比起一個人埋頭背，社群一起累積的答案更全面。
🎴 抽卡模擬面試
這是我自己最喜歡的功能：洗牌、抽題、作答，然後由 AI 幫你評分。把「複習」變成有點像遊戲的體驗，逼自己真的把答案講出來，而不是看過就以為會了。
🎯 目標分析 + 準備地圖
輸入你想要的職位，AI 會分析並產生一份準備地圖，告訴你該補強哪些方向。
⭐ 收藏與分享
重要的題目可以收藏；每題都有獨立連結，可以直接分享給朋友（不用登入也看得到）。
三、技術上長怎樣
| 層 | 技術 |
|---|---|
| 前端 | Next.js 15（App Router）、React 19、Tailwind CSS |
| 後端 / DB | PostgreSQL（Neon）+ Drizzle ORM |
| 認證 | Better Auth |
| AI | Google Gemini 2.5-flash |
| 部署 | Vercel |
視覺上我選了 neo-brutalist 風格——黃、黑、白配上粗黑邊框，刻意做得有點「工具感」、不要太精緻，反而更耐看也更有個性。
幾個我自己覺得有意思的工程細節（之後會各寫一篇細講）：
- 從 Firebase 整個遷移到 Postgres，順手解掉一個多人共編的 lost update bug（已經寫成一篇了）
- 用
pg_trgm在建題前做相似題去重，避免題庫被灌重複內容 - 所有會花錢的 AI 入口都接了每日 rate limit，防止成本被濫用
- 用 Next.js 的 intercepting routes 做到「在題庫點開是抽屜、直接開網址是整頁」，同一份 UI 兩種呈現
四、接下來
Skill Card 還在持續長大。短期想做的：
- 全文搜尋
- 更深、更精選的題庫（重質不重量）
- 讓社群更容易一起貢獻內容
如果你也在準備面試，歡迎來玩玩看 👉 https://skill-card.vercel.app 有任何想法或 bug，也很歡迎跟我說。
這是一個還在進行中的專案，這篇之後可能會隨功能更新。