Layrr
Narnia · 圖片 · 程式設計
Layrr 是一款免費的開源 CLI，能把瀏覽器變成針對本機網頁應用的視覺化程式碼編輯器。你在執行中的頁面上選取某個元素、用平實的語言描述想做的修改，AI 程式碼代理就會更新儲存庫裡對應的原始碼檔案。它可與你現有的環境並行運作，能接上 Claude Code、Codex CLI，或透過 Pi 使用 Gemini，而且直接編輯真正的原始碼，而非另一個獨立的設計層。
關於 Layrr
Layrr 是什麼
Layrr 是 Narnia 打造的指令列工具，位於瀏覽器與你的開發伺服器之間。把它想成一種瀏覽器程式碼代理介面：它會在你看的頁面注入一層小小的覆蓋層，把你點選的任何元素對應回產生它的程式碼，再把那個位置連同你的指令交給程式碼代理。它的賣點很簡單。錯誤在瀏覽器裡看得到，檔案卻找不到。Layrr 補上了這段落差。
它是給誰用的？已經在本機執行網頁應用，也已經信任 AI 程式碼代理的開發者。你不必憑記憶描述頁面，而是直接指著你講的那個按鈕、卡片或標題。這就把提示詞裡的猜測拿掉了。
最大的限制在於適用範圍。Layrr 是針對原始碼修改的視覺化編輯器，不是完整的設計工具，也不是代管平台。它需要本機應用、可運作的開發伺服器與 Git 儲存庫，並依賴你設定好的代理。它同樣以 CLI 形式推出，所以沒有圖形介面的應用要安裝，也不會被特定 IDE 綁死。這也代表熟悉終端機是必要條件。
開始使用
- 用
npm i -g layrr全域安裝 CLI，然後在本機網頁專案的根目錄執行它。 - 照平常的方式啟動開發伺服器，讓 Layrr 在瀏覽器與該伺服器之間扮演代理。
- 在瀏覽器開啟應用，將游標移到某個元素上並點選（或按 Shift+點選抓取多個），選出你想修改的準確範圍。
- 用平實的語言描述調整內容，涵蓋文案、間距、顏色、版面或整個元件。
- 檢視代理的修改，查看 Git 紀錄中的
[layrr]提交，如果結果不如預期就還原。
產品資訊
快速了解 Layrr 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 前端開發者：任何在做 React、Vue、Svelte、Next.js 或 Astro 應用的人，想直接指著元素，而不是到處找它的檔案。不需要新的框架。
- 個人開發者與獨立開發者：想更快編輯介面、又不想在技術堆疊裡多加一個設計工具的小團隊。
- AI 程式碼代理使用者：已經在用 Claude Code、Codex CLI 或透過 Pi 使用 Gemini，想為這些代理提供精確元素脈絡的人。帶著你信任的代理來就行。
任務
- 修正視覺錯誤：直接在算繪出來的頁面上，修好過寬的按鈕、錯誤的文案或跑掉的間距。
- 小幅介面調整：不必先開啟原始碼檔案，就能調整顏色、版面或單一元件。
- 製作修改原型：試一種文案或版面變化，並把修改留在 Git 裡，以便還原。
情境
- 在本機開發時反覆調整某個頁面，你看得到問題，卻找不到背後的檔案。
- 當模糊的文字提示詞老是對不上目標時，把精確的元素交給代理。
- 在現有應用上工作，既不想採用新框架，也不想換掉目前的編輯器。
主要功能
點選即選取元素脈絡
Layrr 會在執行中的頁面注入覆蓋層，讓你將游標移過去並選取你想講的那個元素，或按 Shift+點選一次抓取多個。它會把選取的 DOM 與原始碼脈絡帶進修改流程。不用再憑記憶描述標記。代理根據真實結構工作，而不是你改寫後的版本。
將原始碼對應回真實檔案
這個工具運用框架的中繼資料與檔案搜尋，把點選的元素往回追溯至產生它的程式碼。這套對應是產品的核心。它是有求於代理「改一下頁首」與明確告訴它該碰哪個元件之間的差別。
用平實語言提出修改
選好元素後，你用日常語言描述修改，涵蓋文案、間距、顏色、版面或元件調整。講短一點就好。Layrr 會把目標原始碼位置持續附在請求上，讓指令牢牢綁在正確的程式碼。
可還原的 Git 紀錄
成功的修改會以 [layrr] 前綴提交，因此每次變更都會出現在你平常的 Git 紀錄中。你可以檢視代理做了什麼。如果某次修改沒對準，就退回去。
變更檔案感知
在代理執行前，Layrr 會為儲存庫建立快照，並避免將已修改的檔案加入暫存。這能把無關的本機變更排除在提交之外。它讓工具在做到一半時更安全，因為那時你手邊多半還有其他修改在進行。
框架與代理的彈性
Layrr 可搭配 React、Vue、Svelte、Next.js 與 Astro 等常見框架，也支援任何純 HTML。它採用代理架構，因此能就地配合應用原本執行的地方。你可以把它搭配 Claude Code、Codex CLI 或透過 Pi 使用的 Gemini。沒有 IDE 綁定問題，安裝只要一行 npm 指令。
優缺點
優點
- 依 MIT 授權免費開源，儲存庫放在 GitHub 上。
- 將準確的元素與原始碼脈絡送給代理，減少模糊或指錯方向的提示詞。
- 能配合現有應用與常見框架，採用時不必重寫。
- 每次修改都以 `[layrr]` 前綴提交，便於檢視或還原變更。
- 沒有 IDE 綁定問題，也不會把你綁在特定的程式碼代理上。
缺點
- 它是 CLI，因此偏好點選式介面的開發者沒有圖形化應用可用。
- 它需要本機應用、可運作的開發伺服器與 Git 儲存庫，因此不適合你無法在本機執行的代管或閉源環境。
- 每次修改的品質仍取決於你搭配的 AI 程式碼代理。
- 它是年輕的專案，功能深度與穩定性還在追趕成熟的設計工具。
常見問題
它把瀏覽器變成針對本機網頁應用的視覺化程式碼編輯器。你點選一個元素、描述修改，AI 程式碼代理就會編輯儲存庫裡對應的原始碼檔案。Layrr 負責處理你所見內容與背後程式碼之間的對應。
相關內容
探索與 Layrr 相關的工具、技能與文章。
Layrr 替代方案
X Ray Interpreter
X-ray Interpreter · 圖片X Ray Interpreter 是一款以網頁為基礎的 AI 放射科工具，能把 X 光、電腦斷層、磁振造影、超音波與 PET 影像變成白話報告。你上傳一張掃描影像，片刻之間就得到初步的 X 光判讀結果，之後若有需要解釋的地方，還能繼續追問。它的定位是第二意見與學習輔助，而非醫療診斷。
Aieasypic
AIEasyPic · 圖片AIEasyPic 是一款 AI 圖片生成器，能在幾秒內把單純的文字提示變成完成的藝術作品。你也可以用自己照片訓練自訂模型、在現有圖片中替換臉部，並從文字建立短影片片段，全部都能在瀏覽器中完成。它適合想要快速視覺素材的休閒創作者，也適合想打造個人模型、又不想碰任何程式的業餘玩家。
Chargen
Chargen · 圖片Chargen 是一款 AI 角色生成器與世界觀建構工具，專為《龍與地下城》與其他桌上角色扮演遊戲打造。它能將一句構想變成手繪風格的肖像，在同一場工作階段中生出 NPC、怪物、地圖與遭遇，並把每隻生物的細節放在手邊。桌上角色扮演美術這部分靠一套名為 Gold 的點數系統運作，而文字生成器則對所有人保持免費。