古典PM學氛圍編程|個人dashboard全記錄
整理版優先睇
一個古典PM用Claude Code由零打造個人Dashboard,體驗AI協作開發完整流程
呢篇文章係一位古典產品經理嘅自身經驗分享。佢喺週末突發奇想,想整一個個人Dashboard,於是揀咗用Claude Code(CC)來自建網頁,目標係跑通由寫代碼到部署嘅完整流程。佢嘅整體結論係成功咁將個Dashboard部署喺雲服務器,綁定自定義域名同HTTPS,功能包括動態壁紙、天氣、RSS訂閲等,仲學識咗點樣同AI助手合作,同埋用Git做版本控制。
佢嘅過程分咗十個階段,由一開始CC幫佢梳理Dashboard類型同路線,到上傳設計截圖俾CC解構佈局,然後CC生成MVP代碼。之後佢透過一個AI助手(OpenClaw)操作服務器,跟住CC生成嘅DEPLOY.md嚟部署。呢個過程中遇到HTTPS安全提示問題,CC引導用Certbot申請SSL證書解決。之後逐步升級天氣卡片(改用Open-Meteo API,加寬佈局)、加入RSS訂閲卡片(用Python腳本定時抓取,前端展示)、換成動態視頻壁紙(用ffmpeg壓縮,Git版本控制保障回滾),再調整卡片透明度同文字陰影,最後修復細節bug。
整體嚟講,呢篇文章展示咗一個非開發者點樣透過AI輔助,由零開始建構一個實用嘅個人主頁。佢嘅反思係:AI可以大大降低開發門檻,但清晰嘅需求定義、分階段迭代同基本嘅版本控制思維同樣重要。
- 結論:透過AI協作,非開發者都可以由零自建Web應用並成功部署,獲得高度定製嘅個人工具。
- 方法:先用Claude Code生成MVP代碼,再用AI助手執行部署手冊,最後分階段迭代功能,所有變更納入Git版本控制。
- 差異:比起用現成Dashboard工具,自建需要更多流程知識(部署、SSL、API整合),但換來完全可控嘅設計同功能。
- 啟發:AI助手雖然幫手寫code,但人類需要清楚定義需求、拆解步驟,先可以避免迷失方向;cron呢類服務器機制係自動嘅,唔使每次人手操作。
- 可行動點:想試類似項目,可以先定義一個MVP(例如時鐘+天氣+搜索),然後逐步加RSS、動態壁紙等功能,每次用Git做checkpoint。
定方向同參考設計
作者週末心血來潮想整個人Dashboard,Claude Code幫佢梳理咗幾種類型(生活/工作/數據/信息聚合)同路線選擇。佢決定自建網頁,用CC寫code,部署到雲服務器做個人主頁。
跟住佢上傳咗一張Dashboard截圖,CC拆解咗佈局:左側導航、中央卡片區、右側App網格、毛玻璃風格。作者話「羅馬唔係一日建成」,優先做左側導航(淨主頁)、天氣卡片、動態壁紙背景、iOS風格時鐘同Google搜索框。
關鍵決定:由MVP開始,唔好一次過做太多功能,避免 overwhelm。
MVP開發同部署
CC好快生成咗三個文件(index.html、style.css、script.js),實現曬所有初始功能:時鐘、日期連農曆、Google搜索欄、左側導航、天氣卡片。MVP跑通,作者興奮咗。
由於作者唔識部署,佢用另一個AI助手(OpenClaw)操作服務器。CC專門生成咗一份DEPLOY.md部署手冊,清楚分工:邊啲步驟由作者喺控制枱做,邊啲由AI助手執行命令。部署成功後出現HTTPS不安全提示,CC引導AI助手用Certbot申請免費SSL證書,🔒圖標出現,問題解決。
功能迭代:天氣、RSS、動態壁紙
MVP穩定之後,作者開始逐步加功能。天氣卡片由新加坡改為北京,由3天預報擴展到7天,CC將API由wttr.in換成Open-Meteo(免費、支援最多16天),同時加闊咗卡片佈局。
第二張卡片係RSS訂閲,展示文章標題同作者。CC設計咗後端Python腳本定期抓取RSS → 寫入rss_data.json → 前端讀取展示,默認訂閲少數派、阮一峯、Hacker News。中間有個小插曲:作者以為cron每30分鐘要叫AI助手操作一次,CC解釋cron係服務器自帶定時任務,設定一次就自動行,同AI助手無關。
cron係服務器內置機制,唔使每次人手操作,呢個概念好重要。
動態壁紙方面,作者沉迷「鳴潮」遊戲,特登去官網揾咗段2560×1440、17.2MB嘅MP4想做背景。CC分析咗性能影響(首次加載慢,之後緩存秒開),建議用ffmpeg壓縮到1080p。作者擔心回滾問題,CC趁機引入Git版本控制,用「Word文檔另存版本」比喻解釋Git原理。作者同意初始化Git,提交咗「天氣+RSS版本」嘅存檔,然後放影片入項目,CC壓縮到15MB並切換成影片背景。
視覺打磨同細節修復
影片背景上線後,作者覺得卡片太黑。CC經過多輪調整:逐步降低rgba透明度 → 降低模糊量 → 最終將卡片底色改做白色半透明毛玻璃,通透感大幅提升。跟住CC加咗文字陰影,解決影片亮色區域白字睇唔清嘅問題。
時鐘字體方面,作者想要iOS 26鎖屏嗰種細長數字。CC加載Inter超細字重,經對比後調整到weight 200,仲修復咗農曆顯示唔完整嘅bug(之前淨顯示「初十」冇月份),改為始終顯示完整「二月十一」。最終字體效果未完全滿意,但暫時接受。
視覺調整係來回好多次先到位,尤其係毛玻璃效果同文字陰影呢類細節。
最後修復兩個小bug:天氣卡片嘅位置圖標喺真實瀏覽器消失(text-shadow被SVG繼承),加一行CSS排除SVG解決;天氣卡片文字喺影片亮色區域對比度唔夠,將灰色文字全部變純白並加強陰影,視覺清晰度達標。
bug修復通常好簡單,但揾唔到原因嘅時候會好頭痕,呢度CC好快就診斷到問題。
最終成果同反思
最終個Dashboard部署喺火山引擎服務器,綁定自定義域名,支援HTTPS,功能包括動態視頻壁紙、iOS風格時鐘(連完整農曆)、Google搜索欄、北京7天天氣卡片、RSS訂閲卡片,所有代碼由Git追蹤。
作者反思:呢個過程證明清AI可以幫手寫code同排除障礙,但人類需要清晰嘅需求同分階段驗證嘅思維。佢邀請讀者留言評價呢個Dashboard係「夯」定係「拉完了」,互動收尾。
由零到有嘅完整記錄,展示咗人機協作嘅實際流程,值得參考。
第一階段:定方向
第二階段:參考設計,確定內容
第三階段:CC寫代碼,跑通MVP

第四階段:寫部署手冊,上伺服器

第五階段:天氣卡片升級

第六階段:RSS訂閲卡片

第七階段:動態視頻壁紙

第八階段:卡片透明度和視覺打磨
第九階段:時鐘字體和農曆
第十階段:細節修復收尾
天氣卡片嘅位置小圖標喺真實瀏覽器入面消失咗( text-shadow俾SVG繼承導致),加一行CSS排除SVG解決。天氣卡片文字喺影片光位背景區域對比度唔夠,將剩低嘅灰色文字全部改做純白同加強陰影,視覺清晰度達標。


第一階段:定方向
第二階段:參考設計,確定內容
第三階段:CC 寫代碼,跑通 MVP

第四階段:寫部署手冊,上服務器

第五階段:天氣卡片升級

第六階段:RSS 訂閲卡片

第七階段:動態視頻壁紙

第八階段:卡片透明度和視覺打磨
第九階段:時鐘字體和農曆
第十階段:細節修復收尾
天氣卡片的位置小圖標在真實瀏覽器裏消失了( text-shadow被 SVG 繼承導致),加一行 CSS 排除 SVG 解決。天氣卡片文字在視頻亮色背景區域對比度不夠,把剩餘灰色文字全部改為純白並加強陰影,視覺清晰度達標。

