古典PM學氛圍編程|個人dashboard全記錄

作者:旦將軍
日期:2026年3月29日 下午3:38
來源:WeChat 原文

整理版優先睇

速讀 5 個重點 高亮

一個古典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係「夯」定係「拉完了」,互動收尾。

由零到有嘅完整記錄,展示咗人機協作嘅實際流程,值得參考。

以下係我同Claude Code同🦞小龍蝦一步步整Dashboard嘅完整梳理:
---

第一階段:定方向

週末突然諗起,想整一個個人Dashboard,CC先幫我梳理咗幾種類型(生活/工作/數據/信息聚合),同埋路線選擇(現成工具 vs 自建網頁 vs 開源框架)。因為想用CC跑通由寫代碼到部署嘅完整流程,我揀咗自建網頁,CC寫代碼,部署到雲端伺服器作為個人主頁
---

第二階段:參考設計,確定內容

我upload咗一張Dashboard嘅截圖,叫CC幫我拆解設計。CC拆解咗佢嘅佈局(左邊導航欄、中間卡片區、右邊App網格、毛玻璃風格等)。
截圖嘅Dashboard功能好多,我同CC講:羅馬唔係一日建成㗎——先做:左邊導航(淨係主頁)、天氣卡片、動態背景、iOS風格時鐘、Google搜尋框。
---

第三階段:CC寫代碼,跑通MVP

CC好快生成咗三個檔案:`index.html`、`style.css`、`script.js`,實現曬所有初始功能。預覽截圖顯示時鐘、日期連農曆、Google搜尋欄、左邊導航、天氣卡片都正常運行。MVP跑通咗。
興奮起嚟喇。
Tool output
---

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

我話自己唔識部署,有一個AI助手(OpenClaw)幫我操作伺服器。CC專登生成咗一份`DEPLOY.md`部署手冊,分工好清楚——邊啲步驟我㩒控制枱,邊啲步驟叫AI助手執行命令。部署成功之後,我話個瀏覽器有HTTPS唔安全提示,CC引導AI助手用Certbot申請咗免費SSL證書,🔒圖標出現,問題解決咗。
圖片
---

第五階段:天氣卡片升級

MVP跑通之後,我提出天氣卡片要優化:將城市由新加坡改做北京,由3日預報擴展到7日。CC將天氣API由`wttr.in`換成`Open-Meteo`(免費、支援最多16日預報),同時加闊咗卡片佈局。
Tool output
---

第六階段:RSS訂閲卡片

我提出加第二張卡片:RSS訂閲展示文章標題同作者,咁樣以後可以訂閲一啲AI相關嘅高質文章。CC設計咗方案:後端Python腳本定期抓RSS → 寫入`rss_data.json` → 前端讀取展示,默認訂閲咗少數派、阮一峯、Hacker News。
中間有個插曲——我誤以為cron每30分鐘要叫AI助手操作一次,CC解釋得好清楚:cron係伺服器本身有嘅定時任務,設定一次就永遠自動行,同AI助手無關我明白之後接受咗方案,仲理解咗點樣透過編輯`feeds_config.json`嚟增減訂閲源。
圖片
---

第七階段:動態視頻壁紙

最近沉迷二次元遊戲「鳴潮」,我想將動態壁紙換成鳴潮主題。我去官網揾咗一段2560×1440、17.2MB嘅MP4影片,想用佢做動態背景。CC分析咗性能影響(首次載入慢,之後快取秒開;伺服器壓力幾乎冇),建議用ffmpeg壓縮到1080p。
我有啲擔心靜態壁紙換成mp4影片背景,個網頁會俾CC改到壞咗,提出咗一個問題:如果效果唔好點樣回滾? CC順便引入咗 Git版本控制用「Word文件另存新版本」嘅比喻解釋咗Git嘅原理,我明白咗並同意初始化。
之後CC幫我初始化咗Git(提交咗「天氣+RSS版本」嘅存檔),然後我將影片檔案放入項目文件夾,CC用系統內置工具壓縮到15MB,修改代碼切換成影片背景。
Tool output
---

第八階段:卡片透明度和視覺打磨

影片背景上線之後,我覺得卡片太黑,CC經過多輪調整:逐步降低`rgba`透明度 → 降低模糊量 → 最終將卡片底色由深色改做**白色半透明毛玻璃**,通透感大幅提升。
跟住CC俾文字加咗陰影,解決咗喺影片光位白字睇唔清楚嘅問題。
---

第九階段:時鐘字體和農曆

我要求時鐘字體改做iOS 26鎖畫面嗰種幼長數字。CC加載咗Inter超幼字重,我upload咗iOS 26嘅截圖對比之後,發現太幼,CC調整到weight 200,更加接近iOS效果。同時修復咗農曆顯示唔完整嘅bug(之前淨係顯示「初十」,冇月份),改做永遠顯示完整嘅「二月十一」。
最終時鐘字體嘅效果都未係好滿意,不過將就用住先。
---

第十階段:細節修復收尾

最後修復咗兩個細bug:
  • 天氣卡片嘅位置小圖標喺真實瀏覽器入面消失咗(text-shadow 俾SVG繼承導致),加一行CSS排除SVG解決。
  • 天氣卡片文字喺影片光位背景區域對比度唔夠,將剩低嘅灰色文字全部改做純白同加強陰影,視覺清晰度達標。
Tool output
---
最終成果:一個部署喺火山引擎伺服器、綁定自訂域名、支援HTTPS嘅個人Dashboard,包含動態影片背景、iOS風格時鐘(連完整農曆)、Google搜尋欄、北京7日天氣卡片、RSS訂閲卡片,仲納入咗Git版本控制。
圖片
如果你都睇到呢度,留言講嚇呢個Dashboard你覺得係好嘢定係垃圾。
下面是我和 Claude Code & 🦞小龍蝦一步步打造 Dashboard 的完整梳理:
---

第一階段:定方向

週末突發奇想,想做一個個人 Dashboard,CC 先幫我梳理了幾種類型(生活/工作/數據/信息聚合),以及路線選擇(現成工具 vs 自建網頁 vs 開源框架)。因為想用CC跑通從寫代碼到部署的完整流程,我選了自建網頁,CC 寫代碼,部署到雲服務器作為個人主頁
---

第二階段:參考設計,確定內容

我上傳了一張 Dashboard 的截圖,讓 CC 幫我解構設計。CC 拆解了它的佈局(左側導航欄、中央卡片區、右側 App 網格、毛玻璃風格等)。
截圖的Dashboard功能繁多,我告訴CC,羅馬不是一天建成的——先做:左側導航(僅主頁)、天氣卡片、動態壁紙背景、iOS 風格時鐘、Google 搜索框。
---

第三階段:CC 寫代碼,跑通 MVP

CC 很快生成了三個文件:`index.html`、`style.css`、`script.js`,實現了全部初始功能。預覽截圖顯示時鐘、日期含農曆、Google 搜索欄、左側導航、天氣卡片都正常運行。MVP 跑通。
興奮起來了。
Tool output
---

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

我說自己不懂部署,有一個 AI 助手(OpenClaw)幫我操作服務器。CC 專門生成了一份 `DEPLOY.md` 部署手冊,分工明確——哪些步驟我點控制枱,哪些步驟讓 AI 助手執行命令。部署成功後,我反饋瀏覽器有 HTTPS 不安全提示,CC 引導 AI 助手用 Certbot 申請了免費 SSL 證書,🔒 圖標出現,問題解決。
圖片
---

第五階段:天氣卡片升級

MVP 跑通後,我提出天氣卡片要優化:把城市從新加坡改為北京,從 3 天預報擴展到 7 天。CC 把天氣 API 從 `wttr.in` 換成了 `Open-Meteo`(免費、支持最多 16 天預報),同時加寬了卡片佈局。
Tool output
---

第六階段:RSS 訂閲卡片

我提出加第二張卡片:RSS 訂閲,展示文章標題和作者,這樣以後可以訂閲一些 AI 相關的高質量文章。CC 設計了方案:後端 Python 腳本定期抓取 RSS → 寫入 `rss_data.json` → 前端讀取展示,默認訂閲了少數派、阮一峯、Hacker News。
中間有一個插曲——我誤以為 cron 每 30 分鐘要讓 AI 助手來操作一次,CC 解釋的很清楚:cron 是服務器自帶的定時任務,設置一次就永遠自動跑,跟 AI 助手無關。我明白後接受了方案,並理解了如何通過編輯 `feeds_config.json` 來增減訂閲源。
圖片
---

第七階段:動態視頻壁紙

最近沉迷二次元遊戲「鳴潮」,我想把動態壁紙換成鳴潮主題。我去官網找了一段 2560×1440、17.2MB 的 MP4 視頻,想用它做動態壁紙。CC 分析了性能影響(首次加載慢,之後緩存秒開;服務器壓力幾乎沒有),建議用 ffmpeg 壓縮到 1080p。
我有點兒擔心靜態壁紙換成mp4視頻壁紙,網頁被 CC 改崩了,提出了一個問題:如果效果不好怎麼回滾? CC 趁機引入了 Git 版本控制,用"Word 文檔另存版本"的比喻解釋了 Git 的原理,我理解了並同意初始化。
之後 CC 幫我初始化了 Git(提交了"天氣+RSS 版本"的存檔),然後我把視頻文件放進項目文件夾,CC 用系統內置工具壓縮到 15MB,修改代碼切換成視頻背景。
Tool output
---

第八階段:卡片透明度和視覺打磨

視頻背景上線後,我覺得卡片太黑,CC 經過多輪調整:逐步降低 `rgba` 透明度 → 降低模糊量 → 最終把卡片底色從深色改為**白色半透明毛玻璃**,通透感大幅提升。
接着 CC 給文字加了陰影,解決了在視頻亮色區域白字看不清的問題。
---

第九階段:時鐘字體和農曆

我要求時鐘字體改成 iOS 26 鎖屏那種細長數字。CC 加載了 Inter 超細字重,我上傳了 iOS 26 的截圖對比後,發現太細,CC 調整到 weight 200,更接近 iOS 效果。同時修復了農曆顯示不完整的 bug(之前只顯示"初十",沒有月份),改為始終顯示完整的"二月十一"。
最終時鐘字體的效果還不是很滿意,但是湊合先用着。
---

第十階段:細節修復收尾

最後修復了兩個小 bug:
  • 天氣卡片的位置小圖標在真實瀏覽器裏消失了(text-shadow 被 SVG 繼承導致),加一行 CSS 排除 SVG 解決。
  • 天氣卡片文字在視頻亮色背景區域對比度不夠,把剩餘灰色文字全部改為純白並加強陰影,視覺清晰度達標。
Tool output
---
最終成果:一個部署在火山引擎服務器、綁定自定義域名、支持 HTTPS 的個人 Dashboard,包含動態視頻壁紙、iOS 風格時鐘(含完整農曆)、Google 搜索欄、北京 7 天天氣卡片、RSS 訂閲卡片,並納入了 Git 版本控制。
圖片
如果你都看到這裏了,留言說說這個 dashboard 你覺得是夯還是拉完了。