前端工作充滿會吃掉整個下午的小而棘手問題：不聽使喚的 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 →
