レイヤーキット：Claude Codeで構築された編集可能なレイヤー搭載AI画像エディター

Layerkitの機能

Layerkitは、AI画像ジェネレーターへの小さな編集のために絶え間なく再プロンプトするという問題を解決するために作成されたブラウザベースの画像エディタです。開発者は、見出しの変更、テキストのわずかな移動、CTAの追加などに再プロンプトやCanvaのようなツールへの切り替えが必要なワークフローに不満を感じていました。

仕組み

ワークフローは以下の通りです：

• シーンを平易なテキストで記述する
• AIが構図を考慮して背景画像を生成する
• 2回目のAI処理で実際に生成された画像を分析し、読みやすい場所にテキストを配置する
• すべてが編集可能なレイヤーとして存在し、他の要素に影響を与えずにドラッグ、サイズ変更、スタイル変更、削除が可能

技術的アーキテクチャ

コードベース全体はClaude Codeを使用して構築されました。アーキテクチャは段階的なAIパイプラインを特徴としています：

• 1つのLLMが構図を計画する
• 画像モデルがシーンを生成する
• 2回目のLLM処理で実際に生成された画像を分析してテキストを配置する

Claude Codeは、Fabric.jsキャンバスのセットアップから、ユーザーが独自のキーを接続できるAPIルーティング層まで、すべてを処理しました。分解器とテキスト精製段階のプロンプトエンジニアリングの大部分も、Claudeを通じて繰り返し行われました。

主な機能

• ブランドキット - ブランドアセットをアップロードすると、AIが色、フォント、スタイルを抽出し、すべての生成をブランドに合わせて維持
• Google AIキーのみで動作 - サブスクリプションや画像ごとの料金なし
• OpenRouterキーを追加してGPT、Claude、その他のモデルにアクセスするオプション
• 完全なセットアップを暗号化ファイルとしてエクスポートし、チームメイトと共有可能
• 完全にブラウザ内で実行 - サーバーには何も保存されない
• 無料で使用可能

開発の洞察

開発者は、Claudeが多段階パイプライン設計をどれだけうまく処理したかに驚きました。「テキストが画像の忙しい部分に配置され続ける」といった問題を説明すると、Claudeは解決策（視覚ベースの配置後精製）を提案し、それを最初から最後まで実装しました。

このツールは現在layerkit.impulze.aiで利用可能で、開発者はスマートテキスト配置を微調整しており、フィードバックを歓迎しています。