Showing Posts From
Tech
用 Claude Cowork 打造自己的日文學習日誌
最近開始從 0 學日文，先從 50 音和簡單的生活用語下手。一開始我用過幾種方式：找 YouTube 影片、看免費教材、直接問 AI。這些方式的共同問題是「學過的東西散落在各處」，今天問過的句子，三天後想複習已經找不到了。 於是我試著用 Claude Cowork 的 project 功能，把它當成一位專屬的日文老師，把每天學到的內容直接累積成一份可以瀏覽的網站。 設定一次，之後都很省事 在 project 的 Instructions 寫清楚自己的狀態與需求：我從 0 開始學日文，正在學 50 音，需要日文發音與羅馬拼音寫法。一開始先用平假名，因為還沒學片假名。希望跟隨著 50 音的學習給我一些可以用的簡單句子，像是明天見、你好等生活基本用詞。學習的單字和詞彙就產生相關的 html 內包含 50 音與相關單字與發音，並且新增索引連結到 index.html 內。設定完成後，每次對話時 Claude 都會記得我的程度、偏好的呈現方式、以及檔案要怎麼組織。我不需要每次都重新解釋。學的東西自動變成可以複習的頁面 每天的學習流程很單純：我提出今天想學的主題，例如「は行五音 + 單字」或「假名是什麼？平假名 vs 片假名」，Claude 就會直接在專案資料夾裡產生一份對應的 HTML 教學頁，並把連結加到 index.html 的索引中。 這些頁面不只是文字而已，會有：每個假名的發音按鈕 平假名與片假名的對照圖 語速調整滑桿（學發音時很實用） 樹狀圖、視覺化的分類對我來說最有趣的是，我問「Kana 是片假名嗎？」這種純粹的疑問，Claude 回答完之後，我可以直接說「把這個資訊加進一個 html」，它就會自動整理成一頁，並更新到首頁索引。學習筆記就這樣自然累積起來，不用我額外做整理的工。 主動提出我沒想到的功能 某天我看著首頁的「10 LESSONS、78 WORDS、30 KANA」這幾個統計數字，覺得還可以再多一個東西，就隨口問：「可以把日曆加上去嗎？每天學了什麼的進度。」Claude 想了一下，提議在每個課程連結加上 data-date 屬性，然後在首頁渲染一個雙月曆，有學習記錄的日期會高亮，點擊就能看到當天學了什麼。最後做出來像這樣：這個功能我自己原本只是模糊地想要，但 Claude 幫我把資料結構（每個頁面的日期 metadata）跟視覺呈現（月曆 + 高亮 + 連結）一起設計好。對軟體工程師來說都覺得很便利，對非工程背景的學習者，這種「想要什麼就描述出來」的互動門檻就更低了。 屬於自己的學習路徑 回頭看，Cowork 這種「以專案為單位、累積上下文」的設計剛好解決了學習筆記最大的痛點：不用重複解釋我的程度：Instructions 寫一次，所有對話都有共同前提 學習成果自動歸檔：每次對話的產物是一個可瀏覽的 HTML 頁面，不是飄在聊天紀錄裡的文字 互動教材而非靜態筆記：發音按鈕、語速調整這些原本要自己做的東西，描述一下就有 可以慢慢長大：今天加月曆、明天加片假名發音、後天加單字測驗，整個學習日誌會跟著我的程度一起進化而且更根本地說，我可以自己決定學什麼、怎麼學。過去學日文要嘛照 App 的進度走，要嘛照教科書的章節順序，主題、節奏、呈現方式都被預先框好。但現在的工具讓我能直接根據自己的需求建立屬於自己的教材。 我並不是在學「如何用 AI 學日文」，而是在學日文的過程中，順便擁有了一份完全屬於我自己、隨我成長的學習網站。這種「資料留在自己手上」的感覺，跟我換部落格的動機其實是一致的。
部落格改版
上個版本的部落格因為無法在手機上隨時編輯內容，且原本設計機制導致無法將在 Osidian App 內的照片上傳一份到部落格系統，因此無法時常更新。 所以總是還是把許多生活與想法更新在 IG 上。最終，還是沒辦法解決我自己擁有這些資料的問題。假設社群平台關閉我的帳戶，資料是否可以下載依舊是個問題。 更新機制 這次主要是結合了 pages CMS 解決手機編輯與上傳圖片的阻力問題，也順便換了一個 theme，在手機瀏覽起來大概也可以達到類似 IG 的 layout。 下一步 接下來，大概需要再寫個程式把 IG 文章轉到這裡來。 最終是希望自己的資料的起始記錄會集中回到自己本地端或是部落格，然後由內向外的方向發佈在社群平台上。
使用 Claude Design 產生 favicon
最近因為部落格改版的關係，我想要換一個新的 favicon，也就是在瀏覽器中顯示小圖示的樣子來讓使用者辨識網站。像下面的圖示中最左邊的 icon，產生這個圖的難處是因為他很小，因此不適合複雜的設計，且需要高辨識度和清晰度。 第二個筆的圖示花了我非常久的時間摸索 Figma 然後擷取素材，大概勉強做出一個。這次原本想用 Canva 做，做出一個我喜歡的，但發現不適合縮小，中途嘗試了 Figma。 最後在 Claude Design 上選擇原本的網站專案，先讓他看之前的 favicon 並且跟他說我的概念。 他會先產生幾個樣式排列給你選，我覺得很容易對照。且我覺得他考慮到了從大到小的樣式，到這裡的互動大概可以知道 Claude Design 知道設計需要注意的重點在哪，因此在產生圖的時候相較也能夠一開始就排除會變得很模糊的樣式。最後決定後，才會開始產生圖檔，並給你看在各種地方使用和瀏覽器上的樣子，這預覽我覺得很用心，我非常喜歡這個部分。因為以往通常都要自己手動放上去在開發模式再看看樣子，然後自己在亂東調西調一下。：D 這讓我這個網頁工程師也可以稍微可以做出堪用的東西在自己的專案上，我覺得很有樂趣。