前端工作充滿會耗掉一整個下午的小而繁瑣問題：不聽使喚的 flex 版面、需要具備無障礙功能的元件、只在行動裝置上出現的響應式錯誤。詢問一般聊天機器人，你得到的通常是一段忽略你框架、還會破壞其他功能的程式碼。善用 Claude 進行前端開發，意味著要與了解 React、CSS 和瀏覽器特性的工具合作 - 而不只是抽象地懂 JavaScript。真正的 AI 前端開發人員會撰寫能融入你元件的程式碼，而不是重新做出一個元件。
Lena 專為前端技術棧而打造。她是一個前端角色，你只需載入 Claude、ChatGPT 或任何 AI 聊天工具一次，她就會依照你的框架和慣例工作。以下是她最擅長處理的工作。
「幫我建立這個元件」
描述元件 - 或貼上一份設計稿 - Lena 會使用你的框架，以合理的狀態、props 和結構來建構它，而不是做出一次性的雜亂程式碼。她預設就會以無障礙方式撰寫（標籤、角色、鍵盤操作），而不是事後才補救，因為事後加上無障礙支援才是代價高昂的做法。
「為什麼這個版面壞掉了？」
貼上標記語法和 CSS，Lena 會釐清真正原因 - 收合的 flex 子元素、溢出的邊距、z-index 陷阱 - 而不是靠猜。她會說明修正方式，讓你下次能自行解決，也知道哪些是程式碼中的錯誤，哪些是必須設法繞過的瀏覽器特性。
「讓這個版面具備響應式／更快速／更整潔」
它能將混亂的元件重構成易於閱讀的形式，讓固定版面配置具備響應式設計而無需重寫，並指出顯而易見的效能提升方向 - 不必要的重新渲染、過大的圖片、版面配置反覆抖動。務實的改進，搭配解說，而不是一場最佳實務講座。
充分發揮它的效用
一開始就說明你的框架與樣式設定方式 - React 和 Tailwind 與純 CSS 的答案不同。貼上實際程式碼與實際錯誤，不要只描述它們。除了問「是什麼」，也要問「為什麼」，這樣每次修正都能讓你下次少一點卡住。
適用對象
前端與全端開發者、打造自有 UI 的創辦人、跨足程式設計的設計師，以及任何正在學習前端的人。它適用於 Claude、ChatGPT，或任何接受 system prompt 的 AI 聊天工具。至於建置的其他部分，技術與開發 Skill 系列涵蓋全端程式設計、架構與程式碼審查 - 每項都是專注的助理，而非通用聊天機器人。
將一個檔案放入你的 AI，它就能在你的框架中建立元件、偵錯版面配置並重構 CSS - 兼顧無障礙與解說。無需訂閱，永久歸你所有。
查看 Lena →