再繼續完成後續大題之前，我想有必要先處理目前這個反人性的UI介面。

目前的UI問題

-文章過長導致段落重疊。
手機豎屏畫面導致各段落連接在一起無法分辨。

預計解法:將段落拆分，提供按鈕供使用者切換段落閱讀。

-選項固定位於最下方。

預計解法:將圖層設為最高，點擊對應格子時上拉。

-解析缺少原文翻譯，同樣解析位於最底影響視聽。

預計解法:這牽扯到題目/解析生成的問題，將必須包含中文翻譯寫入後續批量題目生成時的條件，另外將解析全篇採與作答時類似的規格，點擊對應格子時再跑出解析，正確與錯誤分別採紅綠警示色，直接顯示在文章對應中文字上。

Claude Design

Claude Design是一個畫面設計工具，用「畫布」呈現，一頁裡可以放好幾個畫面（稱作artboard），發布成一個網頁連結。跟純文字溝通設計最大的差別是，畫完之後能實際上手修正，不用靠文字描述「按鈕往左一點」這種細節。

你可以在 Claude Design 和 Claude Code 之間切換工作，同時保持您的工作同步。使用 /design-sync 來引入您的設計系統，這樣您在 Claude Design 中建立的所有內容都會從您現有的元件開始。當設計準備好成為軟體時，您可以將其交付給 Claude Code，它會從您現有的工作繼續進行，而不是從螢幕截圖重新開始。

在呼叫出Claude Design後，就可以讓他根據你的方案生成概念圖，我最終選擇的是以純白為底色，注重閱讀體驗的方案，後續再輸出我方才要求的更改，就能得出以下這個最終方案。

這還只算初步的畫面更改，在後續我完成全部大堤後會再進一步修改UI畫面，屆時可能就會需要提供設計參考圖片或其他資產以助於她更快了解目標。