用Claude 3.7 Sonnet打造個人化塔羅牌運勢網站：一場AI輔助開發的冒險
想玩玩看成果的朋友，可以點選上面每日塔羅運勢的文字連結。
Claude最近(2025年2月24日)出了新的3.7Sonnet被譽為目前最智能的模型，特別是在寫程式和軟體開發領域展現出卓越的能力。
基於好奇心，這兩天訂閱了Claude，聽說他能夠讓不會寫程式的人透過AI-assisted development的方法完成，而且需要修改的地方最少，所以試著來玩玩看。
因為也沒什麼特別想到要做的事，但總要有個開始，那就來算個命吧!~
覺得西方的塔羅牌好像比較Fashion就選了每天算塔羅運勢的code叫它寫看看。
以下是互動過程：
我：HI~ claude，幫我生成一個抽今日運勢塔羅牌的網站。
沒錯就是這麼空洞，腦袋空空不知道塔羅牌要算什麼的我，就這麼先丟出了需求
Claude 3.7Sonnet(以下簡稱Claude)：我很樂意為您創建一個可以抽取今日運勢塔羅牌的網站。這是一個有趣的項目，我會為您設計一個互動式的網頁應用。
然後就....出來了.....，聊天的談話視窗右邊有一個即時的測試框，好像沒有正常運作，而且下載的html檔案也無法正常呈現，好像有點廢~
於是我很不爽地繼續問下去
我：程式碼好像有點問題，點選了html檔案，沒有反應
Claude：
..............Claude回應分隔線...................<開始>
您說得對，這個網站確實有些問題，我將修復網站代碼，確保點擊按鈕後能正常顯示塔羅牌。
我已經修復了網站的問題。現在您應該可以正常使用這個塔羅牌網站了。
主要修復了以下幾個問題：
- 添加了事件監聽器，確保網頁加載完成後才執行JavaScript代碼
- 實現了點擊抽牌功能（無論是點擊牌組還是抽牌按鈕）
- 修復了塔羅牌資料的結構，確保完整的功能
- 添加了重新抽牌的功能
現在這個塔羅牌網站應該可以正常工作了。您可以：
- 點擊牌組或"抽取今日塔羅牌"按鈕來抽牌
- 查看抽到的塔羅牌解釋（包括愛情、事業和健康方面的運勢）
- 點擊"重新抽牌"按鈕可以再次抽牌
請試試看是否能正常運作，如果還有其他問題，歡迎隨時告訴我。
..............Claude回應分隔線...................<結束>
疑~接下來右方的測試視窗的程式就可以正常執行了耶~好像真的有點強~
仔細看了一下成果，怎麼覺得好像有點無聊。就真的一直抽而已，覺得好像誰來抽，什麼時候抽都一樣，好隨機~
好吧~不太懂塔羅牌，先google查了一下有一個叫塔羅牌靈數的東西，叫它來加功能試試看。
我：做的不錯，但有點單調請幫我增加塔羅靈數這個功能，當作參數來計算今日運勢。
Claude：
..............Claude回應分隔線...................<開始>
我會為您的塔羅牌網站添加塔羅靈數功能，作為計算今日運勢的額外參數。
我已經為您的塔羅牌網站添加了塔羅靈數功能！現在，每次抽取塔羅牌時，系統會根據以下因素計算出當日的塔羅靈數：
- 當前日期的數字和
- 抽到的塔羅牌編號
- 正位或逆位的狀態
塔羅靈數的計算方式：
- 首先計算當天的日期數字和（日+月+年的各位數相加直到得到一個個位數）
- 將這個數字與抽到的塔羅牌編號相加
- 如果是逆位牌，則額外加1
- 最後將總和取模9（如果結果為0，則轉換為9）
靈數解釋：
靈數從1到9，每個數字代表不同的能量和指引：
- 新的開始和機會
- 平衡與合作
- 創造力和表達
- 穩定與基礎
- 變化與自由
- 責任與平衡
- 內省與智慧
- 豐盛與力量
- 完成與轉變
視覺設計：
- 我添加了一個專門的塔羅靈數區域，將數字以較大的字體突出顯示
- 使用了漸變色彩來強調靈數的重要性
- 靈數解釋會直接顯示在數字下方
現在，您的塔羅牌網站不僅會提供傳統的塔羅牌解讀，還會根據日期和抽到的牌計算出塔羅靈數，為使用者提供額外的指引和參考。這個功能進一步豐富了整體的占卜體驗！
..............Claude回應分隔線...................<結束>
仔細想想，它的算法好像是依每天日期，跟誰來抽沒有搭上關係，讓它加上生日好像比較有趣~
我：增加一開始請使用者填寫生日，然後結合以下因子，計算今日運勢 * 當前日期的數字和 * 抽到的塔羅牌編號 * 正位或逆位的狀態
Claude：
..............Claude回應分隔線...................<開始>
我會為您添加生日輸入功能，並將其納入塔羅靈數計算中，以提供更個人化的運勢分析。
我已經為您的塔羅牌網站添加了生日輸入功能，並將其納入塔羅靈數計算中。現在網站的運作流程如下：
- 首先請使用者輸入生日:
- 網站一開始會顯示生日輸入區域
- 使用者需要選擇自己的出生日期
- 日期選擇器限制了最大日期為當天，避免選擇未來日期
- 開始抽牌流程:
- 輸入生日後，點擊「開始抽牌」按鈕
- 系統會驗證生日輸入是否有效
- 然後顯示塔羅牌區域，隱藏生日輸入區域
- 更全面的塔羅靈數計算:
- 現在塔羅靈數的計算結合了以下因素： 當前日期的數字和（日+月+年的各位數相加） 使用者的生日數字和（生日日+月+年的各位數相加） 抽到的塔羅牌編號 牌面方向（正位或逆位）
- 個人化的靈數結果:
- 公式：(今日數字和 + 生日數字和 + 卡牌編號 + 正逆位修飾符) % 9
- 如果結果是0，則轉換為9
- 基於這個計算結果顯示相應的靈數解釋
這樣的設計確保了每位使用者得到的塔羅靈數是高度個人化的，因為它結合了個人生日資訊、當前日期以及抽到的塔羅牌。這提供了更加精準和個人化的占卜體驗！
現在您的塔羅牌網站不僅提供了傳統的塔羅牌解讀，還加入了與個人生日相關的靈數計算，使得占卜結果更加貼合使用者的個人情況。
..............Claude回應分隔線...................<結束>
試玩了幾次，每次一直輸入自己的生日有點煩~然後成果欄位，只有三個，似乎有點醜；想個東西來加好了，嗯~~加上財運好像不錯~會滿有趣的~
我：一直輸入生日有點煩，幫我調整以下事項：
1.重新抽牌時，要當作換一個人抽，所以要重新輸入生日，但保留上一次生日填寫的資訊當作預設值。
2.增加財富運勢的資料
Claude：
..............Claude回應分隔線...................<開始>
了解！我會進行這兩項修改：1) 重新抽牌時返回生日輸入頁面（但保留先前輸入）和 2) 增加財富運勢部分。
我已經按照您的要求完成了兩項修改：
1. 重新抽牌流程優化
現在當用戶點擊「重新抽牌」按鈕時，網站會:
- 回到生日輸入頁面（而不是直接回到塔羅牌抽取區域）
- 保留用戶之前輸入的生日作為預設值
- 這樣能確保每次抽牌都被當作是為不同的人或不同的問題提供解讀
2. 增加財富運勢內容
- 為所有塔羅牌增加了「財富運勢」的解讀內容
- 在運勢結果區域添加了財富運勢的顯示部分
- 包含了正位和逆位的財富解讀
財富運勢的內容涵蓋了:
- 投資和儲蓄建議
- 財務機會和風險提醒
- 財務平衡和規劃的指導
- 與金錢相關的態度和行為建議
現在，用戶在抽取塔羅牌後可以獲得更全面的運勢解讀，包括愛情、事業、財富和健康四個主要生活領域，提供更全面的指引。
這些更新使得您的塔羅牌網站更加實用和個人化，每次抽牌都會被視為一個全新的占卜過程，同時保留用戶的便利性。
..............Claude回應分隔線...................<結束>
最後想說這樣像我這種不知道什麼是塔羅靈數的人，不知道那是什麼，叫它說明一下好了~
我：在最後的呈現新增塔羅靈數計算的說明與靈數解釋的欄位
Claude：
..............Claude回應分隔線...................<開始>
我會為您在結果顯示區域添加塔羅靈數計算的說明和解釋欄位。
我已經完成了您要求的更新，為塔羅靈數添加了更詳細的說明和解釋。以下是我所做的具體修改：
塔羅靈數計算說明與解釋部分的更新：
- 增加計算公式的可視化解釋
- 在塔羅靈數區域中添加了一個公式說明：(今日數字和 + 生日數字和 + 塔羅牌編號 + 正逆位修正) % 9
- 計算時會顯示具體的數值，例如：(5 + 3 + 2 + 0) % 9 = 1
- 添加靈數解釋查詢按鈕
- 在靈數區域右上角添加了一個「?」問號按鈕
- 點擊此按鈕會顯示所有塔羅靈數(1-9)的詳細解釋
- 設計了詳細的靈數解釋內容
- 為每個靈數(1-9)提供了完整的含義說明
- 包括每個靈數代表的核心特質和建議
- 優化了視覺設計
- 使用虛線邊框分隔計算公式和結果顯示
- 為計算公式添加了斜體和特殊顏色，使其更醒目
- 保持了大數字顯示的漸變色效果
視覺呈現優化：
- 計算公式顯示在淺色底框中，使用虛線邊框與其他部分分隔
- 靈數數字使用大號字體和漸變色彩顯示，成為視覺焦點
- 「?」按鈕設置在右上角，使用圓形設計和主色調，易於識別和點擊
這些更新使塔羅靈數的計算過程更加透明，同時讓用戶能夠了解每個靈數的詳細含義，從而獲得更全面的運勢指引。
..............Claude回應分隔線...................<結束>
啊~做出來的效果有點不知所以，但我累了~就這樣好了~
最後成果不知道怎麼呈現，後來發現Google Site可以內嵌，所以我把它內嵌在Google Site給大家玩玩看~
想玩玩看成果的朋友，可以點選上面每日塔羅運勢的文字連結。
最後~感謝大家耐心看完我胡搞瞎搞的分享文😁。
後記
20250307
今天逛了一下不小心發現
原來可以這樣做大大也有發一篇 Anthropic AI推出的Claude 3.5 Sonnet：特點、費用、操作說明及實作範例寫的也很仔細，大家也可以參考。
