Layrr
Narnia · 画像 · コーディング
Layrrは、ローカルのWebアプリ向けにブラウザをビジュアルコードエディタへと変える、無料のオープンソースCLIだ。実行中のページで要素を選び、変更内容を普通の言葉で説明すると、AIコーディングエージェントがリポジトリ内の対応するソースファイルを更新する。すでに使っている環境と並んで動作し、Claude Code、Codex CLI、またはPi経由のGeminiにつながり、別のデザイン層ではなく実際のソースコードを編集する。
Layrr について
Layrrとは何か
LayrrはNarniaが作ったコマンドラインツールで、ブラウザと開発サーバーの間に位置する。ブラウザ内コーディングエージェントインターフェースと考えるとよい。表示中のページに小さなオーバーレイを注入し、クリックした要素をそれを描画したコードへと対応づけ、その位置を指示と一緒にコーディングエージェントへ渡す。売り文句はシンプルだ。バグはブラウザで見えるのに、ファイルは見えない。Layrrはその隔たりを埋める。
誰向けか。すでにWebアプリをローカルで動かし、すでにAIコーディングエージェントを信頼している開発者だ。記憶を頼りにページを説明する代わりに、意図したボタンやカード、見出しをそのまま指し示す。これでプロンプトから当てずっぽうが消える。
主な限界は守備範囲にある。Layrrはソースコード編集のためのビジュアルエディタであり、完全なデザインツールでもホスティング基盤でもない。ローカルのアプリ、動作中の開発サーバー、Gitリポジトリを前提とし、設定したエージェントに依存する。CLIとして提供されるため、インストールするGUIアプリも、特定IDEへの縛りもない。つまりターミナルへの慣れが前提に含まれる。
はじめ方
npm i -g layrrでCLIをグローバルにインストールし、ローカルWebプロジェクトのルートから実行する。- いつもどおり開発サーバーを起動し、Layrrをブラウザとそのサーバーの間のプロキシとして働かせる。
- ブラウザでアプリを開き、要素にカーソルを合わせてクリックする（複数選ぶならShift+クリック）。変更したい正確な範囲を選べる。
- 文言、余白、色、レイアウト、コンポーネント全体など、調整内容を普通の言葉で説明する。
- エージェントの編集を確認し、Git履歴の
[layrr]コミットを確かめ、望んだ結果でなければ元に戻す。
AIツール情報
Layrrの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- フロントエンド開発者
- 個人開発者とインディーハッカー
- AIコーディングエージェントの利用者
タスク
- 見た目の不具合の修正
- 小さなUI調整
- 変更の試作
シーン
- 問題は見えるが背後のファイルは分からないときに、ローカル開発中にページを反復して調整する。
- 曖昧な文章プロンプトが的を外し続けるときに、正確な要素をエージェントへ渡す。
- 新しいフレームワークを採り入れたくも、今のエディタを離れたくもない既存アプリでの作業。
主な機能
クリックで要素の文脈を選ぶ
Layrrは実行中のページにオーバーレイを注入するので、カーソルを合わせて意図した要素を正確に選べる。Shift+クリックで複数まとめて選ぶこともできる。選んだDOMとソースの文脈を編集へ渡す。記憶からマークアップを説明する必要はもうない。エージェントは言い換えではなく、実際の構造を基に動く。
コードを実際のファイルへ対応づける
このツールは、フレームワークのメタデータとファイル検索を使い、クリックした要素をそれを描画したコードへとたどる。この対応づけが製品の中核だ。「ヘッダーを変えて」と頼むのと、どのコンポーネントに触れるかを正確に伝えるのとでは、結果が違う。
普通の言葉での編集依頼
要素を選んだら、文言、余白、色、レイアウト、コンポーネントの調整など、変更内容を普通の言葉で説明する。短くてよい。Layrrは対象のソース位置を依頼に結びつけたままにするので、指示は正しいコードに固定される。
取り消し可能なGit履歴
成功した編集は [layrr] という接頭辞でコミットされるので、すべての変更が普段のGit履歴に現れる。エージェントが何をしたかを確認できる。編集が的を外れたら、元に戻せばよい。
変更済みファイルの把握
エージェントの実行前に、Layrrはリポジトリのスナップショットを取り、すでに変更されていたファイルをステージングしない。無関係なローカルの変更をコミットから外しておける。作業の途中、他にも編集を抱えていることが多い場面で、より安全に使える。
フレームワークとエージェントの柔軟性
LayrrはReact、Vue、Svelte、Next.js、Astroといった一般的なフレームワークに加え、素のHTMLでも動く。プロキシ方式なので、アプリがすでに動く場所でそのまま受け止める。Claude Code、Codex CLI、Pi経由のGeminiと組み合わせられる。IDEの縛りはなく、インストールはnpmコマンド1つで済む。
メリットとデメリット
メリット
- MITライセンスで無料かつオープンソース。リポジトリはGitHubで公開されている。
- 正確な要素とソースの文脈をエージェントへ送るので、曖昧な指示や的外れなプロンプトが減る。
- 既存のアプリと一般的なフレームワークで動くので、導入に書き直しが要らない。
- すべての編集を `[layrr]` という接頭辞でコミットするので、変更の確認や取り消しが簡単だ。
- IDEの縛りがなく、特定のコーディングエージェントにも縛られない。
デメリット
- CLIなので、クリック操作の画面を好む開発者向けのグラフィカルなアプリはない。
- ローカルのアプリ、動作中の開発サーバー、Gitリポジトリが必要で、ローカルで動かせないホスティング型や非公開の環境には向かない。
- 編集の品質は、組み合わせるAIコーディングエージェントに依然として左右される。
- 若いプロジェクトであり、機能の深さと安定性は成熟したデザインツールにまだ追いつく途中だ。
よくある質問
ローカルのWebアプリ向けに、ブラウザをビジュアルコードエディタに変える。要素をクリックして変更を説明すると、AIコーディングエージェントがリポジトリ内の対応するソースファイルを編集する。Layrrは、見えているものと背後のコードとの対応づけを担う。
関連コンテンツ
Layrrに関連するツール、スキル、記事を探す。
Layrrの代替ツール
X Ray Interpreter
X-ray Interpreter · 画像X Ray Interpreter は、X 線、CT、MRI、超音波、PET の画像を平易な言葉のレポートに変えるウェブベースの AI 放射線ツールだ。スキャン画像をアップロードすると、X 線の予備的な読影結果がすぐに返ってくる。説明が必要な箇所があれば、その後で追加の質問もできる。位置づけはセカンドオピニオンと学習の補助であり、医療診断ではない。
Aieasypic
AIEasyPic · 画像AIEasyPicは、単純なテキストプロンプトを数秒で完成したアート作品に変えるAI画像生成ツールだ。自分の写真でカスタムモデルを訓練したり、既存の画像の顔を交換したり、テキストから短い動画クリップを作ったりもできる。すべてブラウザだけで完結する。手早くビジュアルが欲しい気軽なクリエイターにも、コードを一切触らずに個人モデルを作りたい趣味の人にも向く。
Chargen
Chargen · 画像ChargenはDungeons & Dragonsやその他のテーブルトークRPG向けに作られたAIキャラクター生成ツール兼ワールドビルディングツールキットだ。一行のアイデアを描き上げたキャラクター肖像に変え、同じセッションでNPC、モンスター、マップ、遭遇を生み出し、すべてのクリーチャーの詳細を手元に置く。テーブルトークRPGアートの部分はGoldと呼ばれるクレジット制で動き、テキスト生成ツールは誰でも無料のまま使える。